1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 03:12:42 +02:00

Review Recovery Phrase onboarding unit test (#18301)

* Review Recovery Phrase onboarding unit test

* Add test for isFromReminderParam url navigation

* Lint
This commit is contained in:
Thomas Huang 2023-04-20 13:33:25 -05:00 committed by GitHub
parent 73b9c1095a
commit b91043cf72
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 751 additions and 1 deletions

View File

@ -17,7 +17,7 @@ module.exports = {
],
coverageDirectory: './coverage',
coveragePathIgnorePatterns: ['.stories.*', '.snap'],
coverageReporters: ['json'],
coverageReporters: ['html', 'json'],
reporters: [
'default',
[

View File

@ -0,0 +1,622 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Review Recovery Phrase Component should match snapshot 1`] = `
<div>
<div
class="recovery-phrase"
data-testid="recovery-phrase"
>
<div
class="box box--flex-direction-row"
>
<ul
class="progressbar"
>
<li
class="active complete"
>
Create password
</li>
<li
class="active"
>
Secure wallet
</li>
<li
class=""
>
Confirm secret recovery phrase
</li>
</ul>
</div>
<div
class="box box--margin-bottom-4 box--flex-direction-row box--justify-content-center box--text-align-center box--display-flex"
>
<h2
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography recovery-phrase__header typography--h2 typography--weight-bold typography--style-normal typography--color-text-default"
>
Write down your Secret Recovery Phrase
</h2>
</div>
<div
class="box box--margin-bottom-4 box--flex-direction-row box--justify-content-center box--text-align-center box--display-flex"
>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
>
Write down this 12-word Secret Recovery Phrase and save it in a place that you trust and only you can access.
</h4>
</div>
<div
class="box recovery-phrase__tips box--margin-bottom-4 box--flex-direction-row box--text-align-left"
>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-bold typography--style-normal typography--color-text-default"
>
Tips
:
</h4>
<ul>
<li>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
>
Save in a password manager
</h4>
</li>
<li>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
>
Store in a safe deposit box
</h4>
</li>
<li>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
>
Write down and store in multiple secret places
</h4>
</li>
</ul>
</div>
<div
class="box recovery-phrase__secret box--margin-bottom-4 box--padding-4 box--display-grid box--flex-direction-row box--rounded-md box--border-style-solid box--border-color-border-muted box--border-width-1"
>
<div
class="recovery-phrase__chips recovery-phrase__chips--hidden"
data-testid="recovery-phrase-chips"
>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
1.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-0"
>
debris
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
2.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-1"
>
dizzy
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
3.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-2"
>
just
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
4.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-3"
>
program
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
5.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-4"
>
just
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
6.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-5"
>
float
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
7.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-6"
>
decrease
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
8.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-7"
>
vacant
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
9.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-8"
>
alarm
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
10.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-9"
>
reduce
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
11.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-10"
>
speak
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
12.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-11"
>
stadium
</div>
</div>
</div>
<div
class="recovery-phrase__secret-blocker"
>
<i
class="far fa-eye"
color="white"
/>
<h6
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography recovery-phrase__secret-blocker--text typography--h6 typography--weight-normal typography--style-normal typography--color-overlay-inverse"
>
Make sure nobody is looking
</h6>
</div>
</div>
<div
class="recovery-phrase__footer"
>
<button
class="button btn--rounded btn-primary recovery-phrase__footer--button"
data-testid="recovery-phrase-reveal"
role="button"
tabindex="0"
>
Reveal Secret Recovery Phrase
</button>
</div>
</div>
</div>
`;
exports[`Review Recovery Phrase Component should match snapshot after reveal recovery button is clicked 1`] = `
<div>
<div
class="recovery-phrase"
data-testid="recovery-phrase"
>
<div
class="box box--flex-direction-row"
>
<ul
class="progressbar"
>
<li
class="active complete"
>
Create password
</li>
<li
class="active"
>
Secure wallet
</li>
<li
class=""
>
Confirm secret recovery phrase
</li>
</ul>
</div>
<div
class="box box--margin-bottom-4 box--flex-direction-row box--justify-content-center box--text-align-center box--display-flex"
>
<h2
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography recovery-phrase__header typography--h2 typography--weight-bold typography--style-normal typography--color-text-default"
>
Write down your Secret Recovery Phrase
</h2>
</div>
<div
class="box box--margin-bottom-4 box--flex-direction-row box--justify-content-center box--text-align-center box--display-flex"
>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
>
Write down this 12-word Secret Recovery Phrase and save it in a place that you trust and only you can access.
</h4>
</div>
<div
class="box recovery-phrase__tips box--margin-bottom-4 box--flex-direction-row box--text-align-left"
>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-bold typography--style-normal typography--color-text-default"
>
Tips
:
</h4>
<ul>
<li>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
>
Save in a password manager
</h4>
</li>
<li>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
>
Store in a safe deposit box
</h4>
</li>
<li>
<h4
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
>
Write down and store in multiple secret places
</h4>
</li>
</ul>
</div>
<div
class="box recovery-phrase__secret box--margin-bottom-4 box--padding-4 box--display-grid box--flex-direction-row box--rounded-md box--border-style-solid box--border-color-border-muted box--border-width-1"
>
<div
class="recovery-phrase__chips"
data-testid="recovery-phrase-chips"
>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
1.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-0"
>
debris
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
2.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-1"
>
dizzy
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
3.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-2"
>
just
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
4.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-3"
>
program
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
5.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-4"
>
just
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
6.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-5"
>
float
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
7.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-6"
>
decrease
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
8.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-7"
>
vacant
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
9.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-8"
>
alarm
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
10.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-9"
>
reduce
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
11.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-10"
>
speak
</div>
</div>
<div
class="recovery-phrase__chip-item"
>
<div
class="recovery-phrase__chip-item__number"
>
12.
</div>
<div
class="recovery-phrase__chip chip chip--border-color-border-default chip--background-color-undefined chip--max-content"
data-testid="recovery-phrase-chip-11"
>
stadium
</div>
</div>
</div>
</div>
<div
class="recovery-phrase__footer"
>
<div
class="recovery-phrase__footer__copy-and-hide"
>
<div
class="recovery-phrase__footer__copy-and-hide__area"
>
<a
class="button btn-link recovery-phrase__footer__copy-and-hide__button recovery-phrase__footer__copy-and-hide__button__hide-seed"
role="button"
tabindex="0"
>
<span
class="button__icon"
>
<i
class="far fa-eye-slash"
color="var(--color-primary-default)"
/>
</span>
Hide seed phrase
</a>
<a
class="button btn-link recovery-phrase__footer__copy-and-hide__button recovery-phrase__footer__copy-and-hide__button__copy-to-clipboard"
role="button"
tabindex="0"
>
<span
class="button__icon"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-primary-default"
style="mask-image: url('./images/icons/copy.svg');"
/>
</span>
Copy to clipboard
</a>
</div>
<button
class="button btn--rounded btn-primary recovery-phrase__footer--button"
data-testid="recovery-phrase-next"
role="button"
tabindex="0"
>
Next
</button>
</div>
</div>
</div>
</div>
`;

View File

@ -0,0 +1,128 @@
import { fireEvent } from '@testing-library/react';
import React from 'react';
import configureMockStore from 'redux-mock-store';
import { renderWithProvider } from '../../../../test/lib/render-helpers';
import { ONBOARDING_CONFIRM_SRP_ROUTE } from '../../../helpers/constants/routes';
import RecoveryPhrase from './review-recovery-phrase';
const mockHistoryPush = jest.fn();
const mockHistoryReplace = jest.fn();
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useHistory: () => ({
push: mockHistoryPush,
replace: mockHistoryReplace,
}),
}));
const mockStore = configureMockStore()();
describe('Review Recovery Phrase Component', () => {
const TEST_SEED =
'debris dizzy just program just float decrease vacant alarm reduce speak stadium';
const props = {
secretRecoveryPhrase: TEST_SEED,
};
it('should match snapshot', () => {
const { container } = renderWithProvider(
<RecoveryPhrase {...props} />,
mockStore,
);
expect(container).toMatchSnapshot();
});
it('should match snapshot after reveal recovery button is clicked', () => {
const { container, queryByTestId } = renderWithProvider(
<RecoveryPhrase {...props} />,
mockStore,
);
const revealRecoveryPhraseButton = queryByTestId('recovery-phrase-reveal');
fireEvent.click(revealRecoveryPhraseButton);
expect(container).toMatchSnapshot();
});
it('should click copy to cliboard', () => {
const { queryByText, queryByTestId } = renderWithProvider(
<RecoveryPhrase {...props} />,
mockStore,
);
jest.spyOn(window, 'prompt').mockImplementation();
// eslint-disable-next-line jest/prefer-spy-on
document.execCommand = jest.fn();
const revealRecoveryPhraseButton = queryByTestId('recovery-phrase-reveal');
fireEvent.click(revealRecoveryPhraseButton);
const copyToClipboard = queryByText('Copy to clipboard');
fireEvent.click(copyToClipboard);
expect(document.execCommand).toHaveBeenCalledWith('copy');
});
it('should hide seed after revealing', () => {
const { queryByText, queryByTestId } = renderWithProvider(
<RecoveryPhrase {...props} />,
mockStore,
);
const revealRecoveryPhraseButton = queryByTestId('recovery-phrase-reveal');
fireEvent.click(revealRecoveryPhraseButton);
const hideSeedPhrase = queryByText('Hide seed phrase');
fireEvent.click(hideSeedPhrase);
const revealSeedPhrase = queryByText('Reveal seed phrase');
expect(revealSeedPhrase).toBeInTheDocument();
});
it('should click next after revealing seed phrase', () => {
const { queryByTestId } = renderWithProvider(
<RecoveryPhrase {...props} />,
mockStore,
);
const revealRecoveryPhraseButton = queryByTestId('recovery-phrase-reveal');
fireEvent.click(revealRecoveryPhraseButton);
const nextButton = queryByTestId('recovery-phrase-next');
fireEvent.click(nextButton);
expect(mockHistoryPush).toHaveBeenCalledWith(ONBOARDING_CONFIRM_SRP_ROUTE);
});
it('should route to url with reminder parameter', () => {
const isReminderParam = '/?isFromReminder=true';
const { queryByTestId } = renderWithProvider(
<RecoveryPhrase {...props} />,
mockStore,
isReminderParam,
);
const revealRecoveryPhraseButton = queryByTestId('recovery-phrase-reveal');
fireEvent.click(revealRecoveryPhraseButton);
const nextButton = queryByTestId('recovery-phrase-next');
fireEvent.click(nextButton);
expect(mockHistoryPush).toHaveBeenCalledWith(
`${ONBOARDING_CONFIRM_SRP_ROUTE}${isReminderParam}`,
);
});
});