mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
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
This commit is contained in:
parent
0692f7bf25
commit
c162d52ca3
@ -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>,
|
||||
renderWithProvider(<MenuBar />, store);
|
||||
|
||||
const accountOptionsMenu = screen.queryByTestId('account-options-menu');
|
||||
expect(accountOptionsMenu).not.toBeInTheDocument();
|
||||
|
||||
const accountOptionsButton = screen.queryByTestId(
|
||||
'account-options-menu-button',
|
||||
);
|
||||
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');
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
});
|
||||
|
@ -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}
|
||||
|
@ -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 = {
|
||||
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 = {
|
||||
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 = {
|
||||
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 = {
|
||||
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 = {
|
||||
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 = {
|
||||
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 = {
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
@ -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('/');
|
||||
|
Loading…
Reference in New Issue
Block a user