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 { 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();
});
});

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;
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>

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

@ -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);
});

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

@ -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}

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 { 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);
});
});

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

@ -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('/');