From c162d52ca3f260907a9a90e0b2ef1582d45e8a4f Mon Sep 17 00:00:00 2001 From: Thomas Huang Date: Mon, 8 Aug 2022 13:28:49 -0700 Subject: [PATCH] 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 | 62 +++---- .../signature-request-footer.component.js | 13 +- .../signature-request.container.test.js | 25 ++- ui/components/ui/menu/menu.js | 1 + .../first-time-flow-switch.test.js | 161 +++++++++--------- ui/pages/lock/lock.test.js | 8 +- 6 files changed, 132 insertions(+), 138 deletions(-) diff --git a/ui/components/app/menu-bar/menu-bar.test.js b/ui/components/app/menu-bar/menu-bar.test.js index 89f933717..4a958407a 100644 --- 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 () => { + let accountOptionsMenu; + const store = mockStore(initState); - const wrapper = mountWithRouter( - - - , - ); - 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(, 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( - - - , - ); - const accountOptions = wrapper.find('.menu-bar__account-options'); - accountOptions.simulate('click'); - wrapper.update(); - await waitFor(() => - expect(wrapper.exists('AccountOptionsMenu')).toStrictEqual(true), + renderWithProvider(, 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(); }); }); diff --git 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 index f4a84b734..9c580539f 100644 --- 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 (
- -
diff --git a/ui/components/app/signature-request/signature-request.container.test.js b/ui/components/app/signature-request/signature-request.container.test.js index ab4944825..551e9645e 100644 --- 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( - - - , - store, - ); + renderWithProvider(, 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); }); diff --git a/ui/components/ui/menu/menu.js b/ui/components/ui/menu/menu.js index b76771ac9..88494fc0a 100644 --- a/ui/components/ui/menu/menu.js +++ b/ui/components/ui/menu/menu.js @@ -27,6 +27,7 @@ const Menu = ({
{ 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( - , - ); - expect( - wrapper - .find('Lifecycle') - .find({ to: { pathname: INITIALIZE_WELCOME_ROUTE } }), - ).toHaveLength(1); + const store = configureMockStore()(mockState); + + const { history } = renderWithProvider(, 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( - , - ); + const store = configureMockStore()(mockState); - expect( - wrapper.find('Lifecycle').find({ to: { pathname: DEFAULT_ROUTE } }), - ).toHaveLength(1); + const { history } = renderWithProvider(, 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( - , - ); + const store = configureMockStore()(mockState); - expect( - wrapper - .find('Lifecycle') - .find({ to: { pathname: INITIALIZE_END_OF_FLOW_ROUTE } }), - ).toHaveLength(1); + const { history } = renderWithProvider(, 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( - , - ); + const store = configureMockStore()(mockState); - expect( - wrapper - .find('Lifecycle') - .find({ to: { pathname: INITIALIZE_END_OF_FLOW_ROUTE } }), - ).toHaveLength(1); + const { history } = renderWithProvider(, 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( - , - ); - - expect( - wrapper.find('Lifecycle').find({ to: { pathname: LOCK_ROUTE } }), - ).toHaveLength(1); + const { history } = renderWithProvider(, 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( - , - ); - - expect( - wrapper - .find('Lifecycle') - .find({ to: { pathname: INITIALIZE_WELCOME_ROUTE } }), - ).toHaveLength(1); + const { history } = renderWithProvider(, 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( - , - ); - - expect( - wrapper - .find('Lifecycle') - .find({ to: { pathname: INITIALIZE_UNLOCK_ROUTE } }), - ).toHaveLength(1); + const { history } = renderWithProvider(, store); + expect(history.location.pathname).toStrictEqual(INITIALIZE_UNLOCK_ROUTE); }); }); diff --git a/ui/pages/lock/lock.test.js b/ui/pages/lock/lock.test.js index 6f7d1def0..afdd6e238 100644 --- 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(); + renderWithProvider(); expect(props.history.replace.getCall(0).args[0]).toStrictEqual('/'); }); @@ -28,7 +28,7 @@ describe('Lock', () => { props.lockMetamask.resolves(); - mountWithRouter(); + renderWithProvider(); expect(await props.lockMetamask.calledOnce).toStrictEqual(true); expect(props.history.push.getCall(0).args[0]).toStrictEqual('/');