Various test files converting to @testing-library/react. (#15470)

* Convert Menu Bar test to tlr

* Add test ids to sig req footer buttons

* Convert Sig Req to tlr

* Convert First Time Flow Switch to tlr

* Convert Lock test to tlr

* Add test id to account options menu

ui/components/app/menu-bar/menu-bar.test.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
-import { waitFor } from '@testing-library/react';
-import { mountWithRouter } from '../../../../test/lib/render-helpers';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import { ROPSTEN_CHAIN_ID } from '../../../../shared/constants/network';
 import MenuBar from './menu-bar';
 
@@ -32,41 +31,36 @@ const mockStore = configureStore();
 
 describe('MenuBar', () => {
   it('opens account detail menu when account options is clicked', async () => {
+    let accountOptionsMenu;
+
     const store = mockStore(initState);
-    const wrapper = mountWithRouter(
-      <Provider store={store}>
-        <MenuBar />
-      </Provider>,
-    );
-    await waitFor(() =>
-      expect(!wrapper.exists('AccountOptionsMenu')).toStrictEqual(true),
-    );
-    const accountOptions = wrapper.find('.menu-bar__account-options');
-    accountOptions.simulate('click');
-    wrapper.update();
-    await waitFor(() =>
-      expect(wrapper.exists('AccountOptionsMenu')).toStrictEqual(true),
-    );
+    renderWithProvider(<MenuBar />, store);
+
+    accountOptionsMenu = screen.queryByTestId('account-options-menu');
+    expect(accountOptionsMenu).not.toBeInTheDocument();
+
+    const accountOptions = screen.queryByTestId('account-options-menu-button');
+    fireEvent.click(accountOptions);
+
+    await waitFor(() => {
+      accountOptionsMenu = screen.queryByTestId('account-options-menu');
+      expect(accountOptionsMenu).toBeInTheDocument();
+    });
   });
 
-  it('sets accountDetailsMenuOpen to false when closed', async () => {
+  it('shouldnt open the account options menu when clicked twice', async () => {
     const store = mockStore(initState);
-    const wrapper = mountWithRouter(
-      <Provider store={store}>
-        <MenuBar />
-      </Provider>,
-    );
-    const accountOptions = wrapper.find('.menu-bar__account-options');
-    accountOptions.simulate('click');
-    wrapper.update();
-    await waitFor(() =>
-      expect(wrapper.exists('AccountOptionsMenu')).toStrictEqual(true),
+    renderWithProvider(<MenuBar />, store);
+
+    const accountOptionsMenu = screen.queryByTestId('account-options-menu');
+    expect(accountOptionsMenu).not.toBeInTheDocument();
+
+    const accountOptionsButton = screen.queryByTestId(
+      'account-options-menu-button',
     );
-    const accountDetailsMenu = wrapper.find('AccountOptionsMenu');
-    await waitFor(() => {
-      accountDetailsMenu.prop('onClose')();
-      wrapper.update();
-      expect(!wrapper.exists('AccountOptionsMenu')).toStrictEqual(true);
-    });
+    // Couldnt fireEvent multiple/seperate times, this is the workaround.
+    fireEvent.doubleClick(accountOptionsButton);
+
+    expect(accountOptionsMenu).not.toBeInTheDocument();
   });
 });

ui/components/app/signature-request/signature-request-footer/signature-request-footer.component.js

@@ -17,10 +17,19 @@ export default class SignatureRequestFooter extends PureComponent {
     const { cancelAction, signAction, disabled = false } = this.props;
     return (
       <div className="signature-request-footer">
-        <Button onClick={cancelAction} type="secondary">
+        <Button
+          onClick={cancelAction}
+          type="secondary"
+          data-testid="signature-cancel-button"
+        >
           {this.context.t('cancel')}
         </Button>
-        <Button onClick={signAction} type="primary" disabled={disabled}>
+        <Button
+          onClick={signAction}
+          type="primary"
+          data-testid="signature-sign-button"
+          disabled={disabled}
+        >
           {this.context.t('sign')}
         </Button>
       </div>

ui/components/app/signature-request/signature-request.container.test.js

@@ -1,17 +1,15 @@
 import React from 'react';
-import { Provider } from 'react-redux';
 import sinon from 'sinon';
+import { fireEvent, screen } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
-import { mountWithRouter } from '../../../../test/lib/render-helpers';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import SignatureRequest from './signature-request.container';
 
 describe('Signature Request', () => {
-  let wrapper;
-
   const mockStore = {
     metamask: {
       provider: {
-        type: 'transparent',
+        type: 'rpc',
       },
       accounts: {
         '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5': {
@@ -51,12 +49,7 @@ describe('Signature Request', () => {
   };
 
   beforeEach(() => {
-    wrapper = mountWithRouter(
-      <Provider store={store}>
-        <SignatureRequest.WrappedComponent {...props} />
-      </Provider>,
-      store,
-    );
+    renderWithProvider(<SignatureRequest.WrappedComponent {...props} />, store);
   });
 
   afterEach(() => {
@@ -64,15 +57,17 @@ describe('Signature Request', () => {
   });
 
   it('cancel', () => {
-    const cancelButton = wrapper.find('button.btn-secondary');
-    cancelButton.simulate('click');
+    const cancelButton = screen.getByTestId('signature-cancel-button');
+
+    fireEvent.click(cancelButton);
 
     expect(props.cancel.calledOnce).toStrictEqual(true);
   });
 
   it('sign', () => {
-    const signButton = wrapper.find('button.btn-primary');
-    signButton.simulate('click');
+    const signButton = screen.getByTestId('signature-sign-button');
+
+    fireEvent.click(signButton);
 
     expect(props.sign.calledOnce).toStrictEqual(true);
   });

ui/components/ui/menu/menu.js

@@ -27,6 +27,7 @@ const Menu = ({
       <div className="menu__background" onClick={onHide} />
       <div
         className={classnames('menu__container', className)}
+        data-testid={className}
         ref={setPopperElement}
         style={styles.popper}
         {...attributes.popper}

ui/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.test.js

@@ -1,5 +1,6 @@
+import configureMockStore from 'redux-mock-store';
 import React from 'react';
-import { mountWithRouter } from '../../../../test/lib/render-helpers';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import {
   DEFAULT_ROUTE,
   LOCK_ROUTE,
@@ -11,118 +12,112 @@ import FirstTimeFlowSwitch from './first-time-flow-switch.container';
 
 describe('FirstTimeFlowSwitch', () => {
   it('redirects to /welcome route with null props', () => {
-    const props = {
-      completedOnboarding: null,
-      isInitialized: null,
-      isUnlocked: null,
-      seedPhraseBackedUp: null,
+    const mockState = {
+      metamask: {
+        completedOnboarding: null,
+        isInitialized: null,
+        isUnlocked: null,
+        seedPhraseBackedUp: null,
+      },
     };
-    const wrapper = mountWithRouter(
-      <FirstTimeFlowSwitch.WrappedComponent {...props} />,
-    );
-    expect(
-      wrapper
-        .find('Lifecycle')
-        .find({ to: { pathname: INITIALIZE_WELCOME_ROUTE } }),
-    ).toHaveLength(1);
+    const store = configureMockStore()(mockState);
+
+    const { history } = renderWithProvider(<FirstTimeFlowSwitch />, store);
+
+    expect(history.location.pathname).toStrictEqual(INITIALIZE_WELCOME_ROUTE);
   });
 
   it('redirects to / route when completedOnboarding is true', () => {
-    const props = {
-      completedOnboarding: true,
+    const mockState = {
+      metamask: {
+        completedOnboarding: true,
+        isInitialized: null,
+        isUnlocked: null,
+        seedPhraseBackedUp: null,
+      },
     };
-    const wrapper = mountWithRouter(
-      <FirstTimeFlowSwitch.WrappedComponent {...props} />,
-    );
+    const store = configureMockStore()(mockState);
 
-    expect(
-      wrapper.find('Lifecycle').find({ to: { pathname: DEFAULT_ROUTE } }),
-    ).toHaveLength(1);
+    const { history } = renderWithProvider(<FirstTimeFlowSwitch />, store);
+    expect(history.location.pathname).toStrictEqual(DEFAULT_ROUTE);
   });
 
   it('redirects to end of flow route when seedPhraseBackedUp is true', () => {
-    const props = {
-      completedOnboarding: false,
-      seedPhraseBackedUp: true,
+    const mockState = {
+      metamask: {
+        completedOnboarding: false,
+        seedPhraseBackedUp: true,
+        isInitialized: null,
+        isUnlocked: null,
+      },
     };
-    const wrapper = mountWithRouter(
-      <FirstTimeFlowSwitch.WrappedComponent {...props} />,
-    );
+    const store = configureMockStore()(mockState);
 
-    expect(
-      wrapper
-        .find('Lifecycle')
-        .find({ to: { pathname: INITIALIZE_END_OF_FLOW_ROUTE } }),
-    ).toHaveLength(1);
+    const { history } = renderWithProvider(<FirstTimeFlowSwitch />, store);
+    expect(history.location.pathname).toStrictEqual(
+      INITIALIZE_END_OF_FLOW_ROUTE,
+    );
   });
 
   it('redirects to end of flow route when seedPhraseBackedUp is false', () => {
-    const props = {
-      completedOnboarding: false,
-      seedPhraseBackedUp: false,
+    const mockState = {
+      metamask: {
+        completedOnboarding: false,
+        seedPhraseBackedUp: false,
+        isInitialized: null,
+        isUnlocked: null,
+      },
     };
-    const wrapper = mountWithRouter(
-      <FirstTimeFlowSwitch.WrappedComponent {...props} />,
-    );
+    const store = configureMockStore()(mockState);
 
-    expect(
-      wrapper
-        .find('Lifecycle')
-        .find({ to: { pathname: INITIALIZE_END_OF_FLOW_ROUTE } }),
-    ).toHaveLength(1);
+    const { history } = renderWithProvider(<FirstTimeFlowSwitch />, store);
+    expect(history.location.pathname).toStrictEqual(
+      INITIALIZE_END_OF_FLOW_ROUTE,
+    );
   });
 
   it('redirects to /lock route when isUnlocked is true', () => {
-    const props = {
-      completedOnboarding: false,
-      isUnlocked: true,
-      seedPhraseBackedUp: null,
+    const mockState = {
+      metamask: {
+        completedOnboarding: false,
+        isUnlocked: true,
+        seedPhraseBackedUp: null,
+        isInitialized: null,
+      },
     };
+    const store = configureMockStore()(mockState);
 
-    const wrapper = mountWithRouter(
-      <FirstTimeFlowSwitch.WrappedComponent {...props} />,
-    );
-
-    expect(
-      wrapper.find('Lifecycle').find({ to: { pathname: LOCK_ROUTE } }),
-    ).toHaveLength(1);
+    const { history } = renderWithProvider(<FirstTimeFlowSwitch />, store);
+    expect(history.location.pathname).toStrictEqual(LOCK_ROUTE);
   });
 
   it('redirects to /welcome route when isInitialized is false', () => {
-    const props = {
-      completedOnboarding: false,
-      isUnlocked: false,
-      isInitialized: false,
-      seedPhraseBackedUp: null,
+    const mockState = {
+      metamask: {
+        completedOnboarding: false,
+        isUnlocked: false,
+        isInitialized: false,
+        seedPhraseBackedUp: null,
+      },
     };
+    const store = configureMockStore()(mockState);
 
-    const wrapper = mountWithRouter(
-      <FirstTimeFlowSwitch.WrappedComponent {...props} />,
-    );
-
-    expect(
-      wrapper
-        .find('Lifecycle')
-        .find({ to: { pathname: INITIALIZE_WELCOME_ROUTE } }),
-    ).toHaveLength(1);
+    const { history } = renderWithProvider(<FirstTimeFlowSwitch />, store);
+    expect(history.location.pathname).toStrictEqual(INITIALIZE_WELCOME_ROUTE);
   });
 
   it('redirects to /unlock route when isInitialized is true', () => {
-    const props = {
-      completedOnboarding: false,
-      isUnlocked: false,
-      isInitialized: true,
-      seedPhraseBackedUp: null,
+    const mockState = {
+      metamask: {
+        completedOnboarding: false,
+        isUnlocked: false,
+        isInitialized: true,
+        seedPhraseBackedUp: null,
+      },
     };
+    const store = configureMockStore()(mockState);
 
-    const wrapper = mountWithRouter(
-      <FirstTimeFlowSwitch.WrappedComponent {...props} />,
-    );
-
-    expect(
-      wrapper
-        .find('Lifecycle')
-        .find({ to: { pathname: INITIALIZE_UNLOCK_ROUTE } }),
-    ).toHaveLength(1);
+    const { history } = renderWithProvider(<FirstTimeFlowSwitch />, store);
+    expect(history.location.pathname).toStrictEqual(INITIALIZE_UNLOCK_ROUTE);
   });
 });

ui/pages/lock/lock.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import sinon from 'sinon';
-import { mountWithRouter } from '../../../test/lib/render-helpers';
-import Lock from './lock.container';
+import { renderWithProvider } from '../../../test/lib/render-helpers';
+import Lock from './lock.component';
 
 describe('Lock', () => {
   it('replaces history with default route when isUnlocked false', () => {
@@ -12,7 +12,7 @@ describe('Lock', () => {
       },
     };
 
-    mountWithRouter(<Lock.WrappedComponent {...props} />);
+    renderWithProvider(<Lock {...props} />);
 
     expect(props.history.replace.getCall(0).args[0]).toStrictEqual('/');
   });
@@ -28,7 +28,7 @@ describe('Lock', () => {
 
     props.lockMetamask.resolves();
 
-    mountWithRouter(<Lock.WrappedComponent {...props} />);
+    renderWithProvider(<Lock {...props} />);
 
     expect(await props.lockMetamask.calledOnce).toStrictEqual(true);
     expect(props.history.push.getCall(0).args[0]).toStrictEqual('/');