m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

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

Browse Source 
* 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
This commit is contained in:
Thomas Huang 2022-08-08 13:28:49 -07:00 committed by GitHub
parent 0692f7bf25
commit c162d52ca3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 133 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
ui/components/app/menu-bar/menu-bar.test.js
View File

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

13
ui/components/app/signature-request/signature-request-footer/signature-request-footer.component.js
View File

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

25
ui/components/app/signature-request/signature-request.container.test.js
View File

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

1
ui/components/ui/menu/menu.js
View File

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

161
ui/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.test.js
View File

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

8
ui/pages/lock/lock.test.js
View File

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