TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
feature/default_network_editable
Thomas Huang 2 years ago committed by GitHub
parent 0692f7bf25
commit c162d52ca3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 132 additions and 138 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 62
      ui/components/app/menu-bar/menu-bar.test.js
  2. 13
      ui/components/app/signature-request/signature-request-footer/signature-request-footer.component.js
  3. 25
      ui/components/app/signature-request/signature-request.container.test.js
  4. 1
      ui/components/ui/menu/menu.js
  5. 161
      ui/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.test.js
  6. 8
      ui/pages/lock/lock.test.js

62
ui/components/app/menu-bar/menu-bar.test.js
Unescape 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 () => {
let accountOptionsMenu;
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();
);
await waitFor(() => const accountOptions = screen.queryByTestId('account-options-menu-button');
expect(!wrapper.exists('AccountOptionsMenu')).toStrictEqual(true), fireEvent.click(accountOptions);
);
const accountOptions = wrapper.find('.menu-bar__account-options'); await waitFor(() => {
accountOptions.simulate('click'); accountOptionsMenu = screen.queryByTestId('account-options-menu');
wrapper.update(); expect(accountOptionsMenu).toBeInTheDocument();
await waitFor(() => });
expect(wrapper.exists('AccountOptionsMenu')).toStrictEqual(true),
);
}); });
it('sets accountDetailsMenuOpen to false when closed', async () => { it('shouldnt open the account options menu when clicked twice', async () => {
const store = mockStore(initState); const store = mockStore(initState);
const wrapper = mountWithRouter( renderWithProvider(<MenuBar />, store);
<Provider store={store}>
<MenuBar /> const accountOptionsMenu = screen.queryByTestId('account-options-menu');
</Provider>, expect(accountOptionsMenu).not.toBeInTheDocument();
);
const accountOptions = wrapper.find('.menu-bar__account-options'); const accountOptionsButton = screen.queryByTestId(
accountOptions.simulate('click'); 'account-options-menu-button',
wrapper.update();
await waitFor(() =>
expect(wrapper.exists('AccountOptionsMenu')).toStrictEqual(true),
); );
const accountDetailsMenu = wrapper.find('AccountOptionsMenu'); // Couldnt fireEvent multiple/seperate times, this is the workaround.
await waitFor(() => { fireEvent.doubleClick(accountOptionsButton);
accountDetailsMenu.prop('onClose')();
wrapper.update(); expect(accountOptionsMenu).not.toBeInTheDocument();
expect(!wrapper.exists('AccountOptionsMenu')).toStrictEqual(true);
});
}); });
}); });

13
ui/components/app/signature-request/signature-request-footer/signature-request-footer.component.js
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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('/');

Write Preview
Loading…
Cancel
Save