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
2024-10-22 03:12:42 +02:00 · 2022-08-08 13:28:49 -07:00 · 2022-08-08 13:28:49 -07:00 · c162d52ca3
commit c162d52ca3
parent 0692f7bf25
6 changed files with 133 additions and 139 deletions
--- a/ui/components/app/menu-bar/menu-bar.test.js
+++ b/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 () => {
-    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),
-    );
-  });
+    let accountOptionsMenu;

-  it('sets accountDetailsMenuOpen to false when closed', 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),
-    );
-    const accountDetailsMenu = wrapper.find('AccountOptionsMenu');
+    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(() => {
-      accountDetailsMenu.prop('onClose')();
-      wrapper.update();
-      expect(!wrapper.exists('AccountOptionsMenu')).toStrictEqual(true);
+      accountOptionsMenu = screen.queryByTestId('account-options-menu');
+      expect(accountOptionsMenu).toBeInTheDocument();
    });
  });
+
+  it('shouldnt open the account options menu when clicked twice', async () => {
+    const store = mockStore(initState);
+    renderWithProvider(<MenuBar />, store);
+
+    const accountOptionsMenu = screen.queryByTestId('account-options-menu');
+    expect(accountOptionsMenu).not.toBeInTheDocument();
+
+    const accountOptionsButton = screen.queryByTestId(
+      'account-options-menu-button',
+    );
+    // Couldnt fireEvent multiple/seperate times, this is the workaround.
+    fireEvent.doubleClick(accountOptionsButton);
+
+    expect(accountOptionsMenu).not.toBeInTheDocument();
+  });
 });
--- a/ui/components/app/signature-request/signature-request-footer/signature-request-footer.component.js
+++ b/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>
--- a/ui/components/app/signature-request/signature-request.container.test.js
+++ b/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);
  });
--- a/ui/components/ui/menu/menu.js
+++ b/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}
--- a/ui/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.test.js
+++ b/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);
  });
 });
--- a/ui/pages/lock/lock.test.js
+++ b/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('/');