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

Recovery phrase chips onboarding unit tests (#18249)

Browse Source 
* Recovery phrase chips onboarding unit tests

* Add Snapshot for recovery phrase chips

* Add test for classname hidden check and confirm recovery phrase indices

---------

Co-authored-by: Brad Decker <bhdecker84@gmail.com>
This commit is contained in:
Thomas Huang 2023-04-20 13:34:58 -05:00 committed by GitHub
parent 33dd7ba976
commit b14b6ba07d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 467 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

401
ui/pages/onboarding-flow/recovery-phrase/__snapshots__/recovery-phrase-chips.test.js.snap Normal file
View File

@ -0,0 +1,401 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Recovery Phrase Chips Component should match snapshot 1`] = `
<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>
`;
exports[`Recovery Phrase Chips Component should match snapshot of confirm recovery phrase with inputs of indicies to check 1`] = `
<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--with-input chip--with-input chip chip--border-color-primary-default chip--background-color-undefined chip--max-content"
>
<input
class="chip__input"
data-testid="recovery-phrase-input-1"
type="text"
value=""
/>
</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--with-input chip--with-input chip chip--border-color-primary-default chip--background-color-undefined chip--max-content"
>
<input
class="chip__input"
data-testid="recovery-phrase-input-5"
type="text"
value=""
/>
</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--with-input chip--with-input chip chip--border-color-primary-default chip--background-color-undefined chip--max-content"
>
<input
class="chip__input"
data-testid="recovery-phrase-input-10"
type="text"
value=""
/>
</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>
`;

66
ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.test.js Normal file
View File

@ -0,0 +1,66 @@
import React from 'react';
import { renderWithProvider } from '../../../../test/lib/render-helpers';
import RecoveryPhraseChips from './recovery-phrase-chips';
describe('Recovery Phrase Chips Component', () => {
const TEST_SEED =
'debris dizzy just program just float decrease vacant alarm reduce speak stadium';
it('should match snapshot', () => {
const props = {
secretRecoveryPhrase: TEST_SEED.split(' '),
};
const { queryByTestId, container } = renderWithProvider(
<RecoveryPhraseChips {...props} />,
);
expect(container).toMatchSnapshot();
const recoveryPhraseChips = queryByTestId('recovery-phrase-chips');
expect(recoveryPhraseChips).not.toHaveClass(
'recovery-phrase__chips--hidden',
);
});
it('should have --hidden class when phrase revealed is false', () => {
const props = {
secretRecoveryPhrase: TEST_SEED.split(' '),
phraseRevealed: false,
};
const { queryByTestId } = renderWithProvider(
<RecoveryPhraseChips {...props} />,
);
const recoveryPhraseChips = queryByTestId('recovery-phrase-chips');
expect(recoveryPhraseChips).toHaveClass('recovery-phrase__chips--hidden');
});
it('should match snapshot of confirm recovery phrase with inputs of indicies to check', () => {
const props = {
secretRecoveryPhrase: TEST_SEED.split(' '),
indicesToCheck: [1, 5, 10],
confirmPhase: true,
inputValue: {},
};
const { container } = renderWithProvider(
<RecoveryPhraseChips {...props} />,
);
expect(container).toMatchSnapshot();
});
it('should have seed phrase as proper element length', () => {
const props = {
secretRecoveryPhrase: TEST_SEED.split(' '),
};
const { queryAllByTestId } = renderWithProvider(
<RecoveryPhraseChips {...props} />,
);
expect(queryAllByTestId(/recovery-phrase-chip-/u)).toHaveLength(12);
});
});