mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Recovery phrase chips onboarding unit tests (#18249)
* 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
GitHub
parent
33dd7ba976
commit
b14b6ba07d
@ -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>
|
||||
`;
|
||||
@ -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);
|
||||
});
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user