1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/srp-input/srp-input.test.js
2022-07-31 13:26:40 -05:00

1943 lines
66 KiB
JavaScript

import React from 'react';
import { waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import enLocale from '../../../../app/_locales/en/messages.json';
import { renderWithLocalization } from '../../../../test/lib/render-helpers';
import SrpInput from '.';
const tooFewWords = new Array(11).fill('test').join(' ');
const tooManyWords = new Array(25).fill('test').join(' ');
const invalidWordCount = new Array(13).fill('test').join(' ');
const invalidChecksum = new Array(12).fill('test').join(' ');
const invalidWordCorrectChecksum = `aardvark ${new Array(10)
.fill('test')
.join(' ')} wolf`;
const correct = `${new Array(11).fill('test').join(' ')} ball`;
const invalidInputs = [
tooFewWords,
invalidWordCount,
invalidChecksum,
invalidWordCorrectChecksum,
];
const poorlyFormattedInputs = [
` ${correct}`,
`\t${correct}`,
`\n${correct}`,
`${correct} `,
`${correct}\t`,
`${correct}\n`,
`${new Array(11).fill('test').join(' ')} ball`,
`${new Array(11).fill('test').join('\t')}\tball`,
];
const whitespaceCharacters = [' ', ' ', '\n', '\t'];
describe('srp-input', () => {
beforeEach(() => {
jest.resetAllMocks();
});
describe('onChange event', () => {
it('should not fire event on render', async () => {
const onChange = jest.fn();
const { getByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
await waitFor(() => getByText(enLocale.secretRecoveryPhrase.message));
expect(onChange).not.toHaveBeenCalled();
});
describe('invalid typed inputs', () => {
it('should fire event with empty string when only first field is filled out', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.keyboard('test');
expect(onChange).toHaveBeenLastCalledWith('');
});
it('should fire event with empty string when one field is empty', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
for (const index of new Array(11).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard('test');
}
expect(onChange).toHaveBeenLastCalledWith('');
});
it('should fire event with empty string when one field has two words', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
for (const index of new Array(11).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(index === 0 ? 'test test' : 'test');
}
getByTestId(`import-srp__srp-word-11`).focus();
await userEvent.keyboard('ball');
expect(onChange).toHaveBeenLastCalledWith('');
});
it('should fire event with empty string when one field has two words and one is empty', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
for (const index of new Array(10).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(index === 0 ? 'test test' : 'test');
}
getByTestId(`import-srp__srp-word-11`).focus();
await userEvent.keyboard('ball');
expect(onChange).toHaveBeenLastCalledWith('');
});
it('should fire event with empty string if SRP has invalid checksum', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = invalidChecksum.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(srpParts[index]);
}
expect(onChange).toHaveBeenLastCalledWith('');
});
it('should fire event with empty string if SRP has invalid word', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = invalidWordCorrectChecksum.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(srpParts[index]);
}
expect(onChange).toHaveBeenLastCalledWith('');
});
it('should fire event with empty string if SRP was valid, then a word was removed', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(srpParts[index]);
}
await userEvent.clear(getByTestId('import-srp__srp-word-0'));
expect(onChange).toHaveBeenLastCalledWith('');
});
it('should fire event with empty string if SRP was valid, then was changed to invalidate the checksum', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(srpParts[index]);
}
await userEvent.clear(getByTestId('import-srp__srp-word-0'));
getByTestId(`import-srp__srp-word-0`).focus();
await userEvent.keyboard('ball');
expect(onChange).toHaveBeenLastCalledWith('');
});
it('should fire event with empty string if valid SRP is pasted, then replaced with an SRP with an invalid word', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(correct);
const srpParts = invalidWordCorrectChecksum.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(srpParts[index]);
}
expect(onChange).toHaveBeenLastCalledWith('');
});
});
describe('invalid individually pasted inputs', () => {
it('should fire event with empty string when only first field is filled out', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste('test');
expect(onChange).toHaveBeenLastCalledWith('');
});
it('should fire event with empty string when one field is empty', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
for (const index of new Array(11).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste('test');
}
expect(onChange).toHaveBeenLastCalledWith('');
});
it('should fire event with empty string if SRP has invalid checksum', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = invalidChecksum.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(srpParts[index]);
}
expect(onChange).toHaveBeenLastCalledWith('');
});
it('should fire event with empty string if SRP has invalid word', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = invalidWordCorrectChecksum.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(srpParts[index]);
}
expect(onChange).toHaveBeenLastCalledWith('');
});
it('should fire event with empty string if SRP was valid, then a word was removed', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(srpParts[index]);
}
await userEvent.clear(getByTestId('import-srp__srp-word-0'));
expect(onChange).toHaveBeenLastCalledWith('');
});
it('should fire event with empty string if SRP was valid, then was changed to invalidate the checksum', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(srpParts[index]);
}
await userEvent.clear(getByTestId('import-srp__srp-word-0'));
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste('ball');
expect(onChange).toHaveBeenLastCalledWith('');
});
it('should fire event with empty string if valid SRP is pasted, then replaced with an SRP with an invalid word', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(correct);
const srpParts = invalidWordCorrectChecksum.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(srpParts[index]);
}
expect(onChange).toHaveBeenLastCalledWith('');
});
});
describe('invalid pasted inputs', () => {
it(`should fire event with empty string upon invalid pasted input: 'test'`, async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste('test');
expect(onChange).toHaveBeenLastCalledWith('');
});
it(`should not fire any event when pasted contents includes >24 words`, async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(tooManyWords);
expect(onChange).not.toHaveBeenCalled();
});
for (const invalidInput of invalidInputs) {
it(`should fire event with empty string upon invalid pasted input: '${invalidInput}'`, async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(invalidInput);
expect(onChange).toHaveBeenLastCalledWith('');
});
it(`should fire event with empty string upon invalid input pasted into second field: '${invalidInput}'`, async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-1').focus();
await userEvent.paste(invalidInput);
expect(onChange).toHaveBeenLastCalledWith('');
});
it(`should fire event with empty string after replacing valid SRP with: '${invalidInput}'`, async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-1').focus();
await userEvent.paste(correct);
await userEvent.paste(invalidInput);
expect(onChange).toHaveBeenLastCalledWith('');
});
}
it('should fire with empty string when full valid SRP is replaced by prefix', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-1').focus();
await userEvent.paste(correct);
await userEvent.paste('test test');
expect(onChange).toHaveBeenLastCalledWith('');
});
});
describe('valid typed inputs', () => {
it('should fire event with a valid SRP', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(srpParts[index]);
}
expect(onChange).toHaveBeenLastCalledWith(correct);
});
for (const whitespaceCharacter of whitespaceCharacters) {
it(`should fire event with a valid SRP preceded by a '${whitespaceCharacter}'`, async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(
index === 0
? `${whitespaceCharacter}${srpParts[index]}`
: srpParts[index],
);
}
expect(onChange).toHaveBeenLastCalledWith(correct);
});
it(`should fire event with a valid SRP followed by a '${whitespaceCharacter}'`, async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(
index === 11
? `${srpParts[index]}${whitespaceCharacter}`
: srpParts[index],
);
}
expect(onChange).toHaveBeenLastCalledWith(correct);
});
it(`should fire event with a valid SRP where each word is followed by a'${whitespaceCharacter}'`, async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(
`${srpParts[index]}${whitespaceCharacter}`,
);
}
expect(onChange).toHaveBeenLastCalledWith(correct);
});
}
});
describe('valid individually pasted inputs', () => {
it('should fire event with a valid SRP', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(srpParts[index]);
}
expect(onChange).toHaveBeenLastCalledWith(correct);
});
it('should fire event with a valid SRP when each word is pasted in two parts', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(srpParts[index].slice(0, 2));
await userEvent.paste(srpParts[index].slice(2));
}
expect(onChange).toHaveBeenLastCalledWith(correct);
});
for (const whitespaceCharacter of whitespaceCharacters) {
it(`should fire event with a valid SRP preceded by a '${whitespaceCharacter}'`, async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(
index === 0
? `${whitespaceCharacter}${srpParts[index]}`
: srpParts[index],
);
}
expect(onChange).toHaveBeenLastCalledWith(correct);
});
it(`should fire event with a valid SRP followed by a '${whitespaceCharacter}'`, async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(
index === 11
? `${srpParts[index]}${whitespaceCharacter}`
: srpParts[index],
);
}
expect(onChange).toHaveBeenLastCalledWith(correct);
});
it(`should fire event with a valid SRP where each word is followed by a'${whitespaceCharacter}'`, async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(`${srpParts[index]}${whitespaceCharacter}`);
}
expect(onChange).toHaveBeenLastCalledWith(correct);
});
}
});
describe('valid pasted inputs', () => {
it('should fire event with a valid SRP', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(correct);
expect(onChange).toHaveBeenLastCalledWith(correct);
});
it('should fire event with a valid SRP when replacing invalid SRP', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(invalidChecksum);
await userEvent.paste(correct);
expect(onChange).toHaveBeenLastCalledWith(correct);
});
for (const poorlyFormattedInput of poorlyFormattedInputs) {
it(`should fire with formatted SRP when given poorly formatted valid SRP: '${poorlyFormattedInput}'`, async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(poorlyFormattedInput);
expect(onChange).toHaveBeenLastCalledWith(correct);
});
it(`should fire with formatted SRP when poorly formatted valid SRP is pasted into second field: '${poorlyFormattedInput}'`, async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-1').focus();
await userEvent.paste(poorlyFormattedInput);
expect(onChange).toHaveBeenLastCalledWith(correct);
});
}
});
});
describe('SRP validation error', () => {
it('should not show error for empty input', async () => {
const onChange = jest.fn();
const { getByText, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
await waitFor(() => getByText(enLocale.secretRecoveryPhrase.message));
expect(
queryByText(enLocale.seedPhraseReq.message),
).not.toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).not.toBeInTheDocument();
});
describe('typed', () => {
it('should show word requirement error if SRP has too few words', async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = tooFewWords.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(srpParts[index]);
}
expect(queryByText(enLocale.seedPhraseReq.message)).toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).not.toBeInTheDocument();
});
it('should show word requirement error if SRP has an unsupported word count above 12 but below 24', async () => {
const onChange = jest.fn();
const { getByRole, getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
await userEvent.selectOptions(getByRole('combobox'), '15');
const srpParts = invalidWordCount.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(srpParts[index]);
}
expect(queryByText(enLocale.seedPhraseReq.message)).toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).not.toBeInTheDocument();
});
it('should show invalid SRP error if SRP is correct length but has an invalid checksum', async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = invalidChecksum.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(srpParts[index]);
}
expect(
queryByText(enLocale.seedPhraseReq.message),
).not.toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).toBeInTheDocument();
});
it('should show invalid SRP error if SRP is correct length and has correct checksum but has an invalid word', async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = invalidWordCorrectChecksum.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(srpParts[index]);
}
expect(
queryByText(enLocale.seedPhraseReq.message),
).not.toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).toBeInTheDocument();
});
it('should not show error for valid SRP', async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(srpParts[index]);
}
expect(
queryByText(enLocale.seedPhraseReq.message),
).not.toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).not.toBeInTheDocument();
});
for (const whitespaceCharacter of whitespaceCharacters) {
it(`should not show error for a valid SRP preceded by a '${whitespaceCharacter}'`, async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(
index === 0
? `${whitespaceCharacter}${srpParts[index]}`
: srpParts[index],
);
}
expect(
queryByText(enLocale.seedPhraseReq.message),
).not.toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).not.toBeInTheDocument();
});
it(`should not show error for a valid SRP followed by a '${whitespaceCharacter}'`, async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(
index === 11
? `${srpParts[index]}${whitespaceCharacter}`
: srpParts[index],
);
}
expect(
queryByText(enLocale.seedPhraseReq.message),
).not.toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).not.toBeInTheDocument();
});
it(`should not show error for a valid SRP where each word is followed by a'${whitespaceCharacter}'`, async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(
`${srpParts[index]}${whitespaceCharacter}`,
);
}
expect(
queryByText(enLocale.seedPhraseReq.message),
).not.toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).not.toBeInTheDocument();
});
}
});
describe('individually pasted', () => {
it('should show word requirement error if SRP has too few words', async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = tooFewWords.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(srpParts[index]);
}
expect(queryByText(enLocale.seedPhraseReq.message)).toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).not.toBeInTheDocument();
});
it('should show word requirement error if SRP has an unsupported word count above 12 but below 24', async () => {
const onChange = jest.fn();
const { getByTestId, getByRole, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
await userEvent.selectOptions(getByRole('combobox'), '15');
const srpParts = invalidWordCount.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(srpParts[index]);
}
expect(queryByText(enLocale.seedPhraseReq.message)).toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).not.toBeInTheDocument();
});
it('should show invalid SRP error if SRP is correct length but has an invalid checksum', async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = invalidChecksum.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(srpParts[index]);
}
expect(
queryByText(enLocale.seedPhraseReq.message),
).not.toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).toBeInTheDocument();
});
it('should show invalid SRP error if SRP is correct length and has correct checksum but has an invalid word', async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = invalidWordCorrectChecksum.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(srpParts[index]);
}
expect(
queryByText(enLocale.seedPhraseReq.message),
).not.toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).toBeInTheDocument();
});
it('should not show error for valid SRP', async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(srpParts[index]);
}
expect(
queryByText(enLocale.seedPhraseReq.message),
).not.toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).not.toBeInTheDocument();
});
for (const whitespaceCharacter of whitespaceCharacters) {
it(`should not show error for a valid SRP preceded by a '${whitespaceCharacter}'`, async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(
index === 0
? `${whitespaceCharacter}${srpParts[index]}`
: srpParts[index],
);
}
expect(
queryByText(enLocale.seedPhraseReq.message),
).not.toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).not.toBeInTheDocument();
});
it(`should not show error for a valid SRP followed by a '${whitespaceCharacter}'`, async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(
index === 11
? `${srpParts[index]}${whitespaceCharacter}`
: srpParts[index],
);
}
expect(
queryByText(enLocale.seedPhraseReq.message),
).not.toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).not.toBeInTheDocument();
});
it(`should not show error for a valid SRP where each word is followed by a'${whitespaceCharacter}'`, async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(`${srpParts[index]}${whitespaceCharacter}`);
}
expect(
queryByText(enLocale.seedPhraseReq.message),
).not.toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).not.toBeInTheDocument();
});
}
});
describe('pasted', () => {
it('should show word requirement error if SRP has too few words', async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(tooFewWords);
expect(queryByText(enLocale.seedPhraseReq.message)).toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).not.toBeInTheDocument();
});
it('should show word requirement error if SRP has an unsupported word count above 12 but below 24', async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(invalidWordCount);
expect(queryByText(enLocale.seedPhraseReq.message)).toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).not.toBeInTheDocument();
});
it('should show invalid SRP error if SRP is correct length but has an invalid checksum', async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(invalidChecksum);
expect(
queryByText(enLocale.seedPhraseReq.message),
).not.toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).toBeInTheDocument();
});
it('should show invalid SRP error if SRP is correct length and has correct checksum but has an invalid word', async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(invalidWordCorrectChecksum);
expect(
queryByText(enLocale.seedPhraseReq.message),
).not.toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).toBeInTheDocument();
});
it('should not show error for valid SRP', async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(correct);
expect(
queryByText(enLocale.seedPhraseReq.message),
).not.toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).not.toBeInTheDocument();
});
for (const poorlyFormattedInput of poorlyFormattedInputs) {
it(`should not show error for poorly formatted valid SRP: '${poorlyFormattedInput}'`, async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(poorlyFormattedInput);
expect(
queryByText(enLocale.seedPhraseReq.message),
).not.toBeInTheDocument();
expect(
queryByText(enLocale.invalidSeedPhrase.message),
).not.toBeInTheDocument();
});
}
});
});
describe('Show/hide SRP', () => {
it('should default to not showing SRP', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
for (const index of new Array(12).keys()) {
expect(getByTestId(`import-srp__srp-word-${index}`)).toHaveAttribute(
'type',
'password',
);
expect(
getByTestId(`import-srp__srp-word-${index}-checkbox`),
).not.toBeChecked();
}
});
describe('default hidden', () => {
it('should prevent reading typed SRP', async () => {
const onChange = jest.fn();
const { getByTestId, queryAllByRole } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(srpParts[index]);
expect(queryAllByRole('textbox')).toHaveLength(0);
}
});
it('should prevent reading individually pasted SRP', async () => {
const onChange = jest.fn();
const { getByTestId, queryAllByRole } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(srpParts[index]);
expect(queryAllByRole('textbox')).toHaveLength(0);
}
});
it('should prevent reading pasted SRP', async () => {
const onChange = jest.fn();
const { getByTestId, queryAllByRole } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(correct);
expect(queryAllByRole('textbox')).toHaveLength(0);
});
});
describe('shown then hidden', () => {
it('should prevent reading typed SRP', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
await userEvent.click(
getByTestId(`import-srp__srp-word-${index}-checkbox`),
);
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(srpParts[index]);
await userEvent.click(
getByTestId(`import-srp__srp-word-${index}-checkbox`),
);
expect(getByTestId(`import-srp__srp-word-${index}`)).toHaveAttribute(
'type',
'password',
);
}
});
it('should prevent reading individually pasted SRP', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
await userEvent.click(
getByTestId(`import-srp__srp-word-${index}-checkbox`),
);
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(srpParts[index]);
await userEvent.click(
getByTestId(`import-srp__srp-word-${index}-checkbox`),
);
expect(getByTestId(`import-srp__srp-word-${index}`)).toHaveAttribute(
'type',
'password',
);
}
});
});
describe('shown after input', () => {
it('should show words from typed SRP', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(srpParts[index]);
}
for (const index of new Array(srpParts.length).keys()) {
await userEvent.click(
getByTestId(`import-srp__srp-word-${index}-checkbox`),
);
expect(getByTestId(`import-srp__srp-word-${index}`)).toHaveAttribute(
'type',
'text',
);
expect(getByTestId(`import-srp__srp-word-${index}`)).toHaveValue(
srpParts[index],
);
await userEvent.click(
getByTestId(`import-srp__srp-word-${index}-checkbox`),
);
}
});
it('should show words from individually pasted SRP', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(srpParts[index]);
}
for (const index of new Array(srpParts.length).keys()) {
await userEvent.click(
getByTestId(`import-srp__srp-word-${index}-checkbox`),
);
expect(getByTestId(`import-srp__srp-word-${index}`)).toHaveAttribute(
'type',
'text',
);
expect(getByTestId(`import-srp__srp-word-${index}`)).toHaveValue(
srpParts[index],
);
await userEvent.click(
getByTestId(`import-srp__srp-word-${index}-checkbox`),
);
}
});
it('should show words from pasted SRP', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(correct);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
await userEvent.click(
getByTestId(`import-srp__srp-word-${index}-checkbox`),
);
expect(getByTestId(`import-srp__srp-word-${index}`)).toHaveAttribute(
'type',
'text',
);
expect(getByTestId(`import-srp__srp-word-${index}`)).toHaveValue(
srpParts[index],
);
await userEvent.click(
getByTestId(`import-srp__srp-word-${index}-checkbox`),
);
}
});
});
describe('shown before input', () => {
it('should show words from typed SRP', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
await userEvent.click(
getByTestId(`import-srp__srp-word-${index}-checkbox`),
);
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(srpParts[index]);
expect(
getByTestId(`import-srp__srp-word-${index}-checkbox`),
).toBeChecked();
expect(getByTestId(`import-srp__srp-word-${index}`)).toHaveAttribute(
'type',
'text',
);
expect(getByTestId(`import-srp__srp-word-${index}`)).toHaveValue(
srpParts[index],
);
}
});
it('should show words from individually pasted SRP', async () => {
const onChange = jest.fn();
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
await userEvent.click(
getByTestId(`import-srp__srp-word-${index}-checkbox`),
);
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(srpParts[index]);
expect(
getByTestId(`import-srp__srp-word-${index}-checkbox`),
).toBeChecked();
expect(getByTestId(`import-srp__srp-word-${index}`)).toHaveAttribute(
'type',
'text',
);
expect(getByTestId(`import-srp__srp-word-${index}`)).toHaveValue(
srpParts[index],
);
}
});
});
describe('hidden after paste', () => {
it('should hide all inputs after an incomplete multi-word paste', async () => {
const onChange = jest.fn();
const { getByTestId, queryAllByRole } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
await userEvent.click(getByTestId('import-srp__srp-word-0-checkbox'));
getByTestId('import-srp__srp-word-0').focus();
await userEvent.keyboard('test');
expect(queryAllByRole('textbox')).toHaveLength(1);
await userEvent.paste(tooFewWords);
expect(queryAllByRole('textbox')).toHaveLength(0);
for (const index of new Array(12).keys()) {
expect(
getByTestId(`import-srp__srp-word-${index}-checkbox`),
).not.toBeChecked();
}
});
it('should hide all inputs after a full SRP paste', async () => {
const onChange = jest.fn();
const { getByTestId, queryAllByRole } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
await userEvent.click(getByTestId('import-srp__srp-word-0-checkbox'));
getByTestId('import-srp__srp-word-0').focus();
await userEvent.keyboard('test');
expect(queryAllByRole('textbox')).toHaveLength(1);
await userEvent.paste(correct);
expect(queryAllByRole('textbox')).toHaveLength(0);
for (const index of new Array(12).keys()) {
expect(
getByTestId(`import-srp__srp-word-${index}-checkbox`),
).not.toBeChecked();
}
});
it('should not hide inputs after a single word paste', async () => {
const onChange = jest.fn();
const { getByTestId, queryAllByRole } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
await userEvent.click(getByTestId('import-srp__srp-word-0-checkbox'));
getByTestId('import-srp__srp-word-0').focus();
await userEvent.keyboard('test');
expect(queryAllByRole('textbox')).toHaveLength(1);
await userEvent.paste('test');
expect(queryAllByRole('textbox')).toHaveLength(1);
expect(getByTestId('import-srp__srp-word-0-checkbox')).toBeChecked();
});
});
it('should hide shown field when another field is shown', async () => {
const onChange = jest.fn();
const { getByTestId, queryAllByRole } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(correct);
await userEvent.click(getByTestId('import-srp__srp-word-0-checkbox'));
expect(getByTestId('import-srp__srp-word-0-checkbox')).toBeChecked();
await userEvent.click(getByTestId('import-srp__srp-word-1-checkbox'));
expect(queryAllByRole('textbox')).toHaveLength(1);
expect(getByTestId('import-srp__srp-word-0-checkbox')).not.toBeChecked();
expect(getByTestId('import-srp__srp-word-1-checkbox')).toBeChecked();
});
});
describe('clear after paste', () => {
it('should not clear clipboard after typing SRP', async () => {
const onChange = jest.fn();
const writeTextSpy = jest.spyOn(window.navigator.clipboard, 'writeText');
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.keyboard(srpParts[index]);
}
expect(writeTextSpy).not.toHaveBeenCalled();
});
it('should not clear the clipboard after individually pasting SRP', async () => {
const onChange = jest.fn();
const writeTextSpy = jest.spyOn(window.navigator.clipboard, 'writeText');
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
const srpParts = correct.split(' ');
for (const index of new Array(srpParts.length).keys()) {
getByTestId(`import-srp__srp-word-${index}`).focus();
await userEvent.paste(srpParts[index]);
}
expect(writeTextSpy).not.toHaveBeenCalled();
});
it('should not clear the clipboard after pasting SRP with too many words', async () => {
const onChange = jest.fn();
const writeTextSpy = jest.spyOn(window.navigator.clipboard, 'writeText');
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(tooManyWords);
expect(writeTextSpy).not.toHaveBeenCalled();
});
it('should clear the clipboard after pasting incomplete SRP', async () => {
const onChange = jest.fn();
const writeTextSpy = jest.spyOn(window.navigator.clipboard, 'writeText');
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(tooFewWords);
expect(writeTextSpy).toHaveBeenCalledWith('');
});
it('should clear the clipboard after pasting correct SRP', async () => {
const onChange = jest.fn();
const writeTextSpy = jest.spyOn(window.navigator.clipboard, 'writeText');
const { getByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(correct);
expect(writeTextSpy).toHaveBeenCalledWith('');
});
});
describe('number of words dropdown', () => {
it('should default to 12 words', () => {
const onChange = jest.fn();
const { queryByTestId, queryByRole } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
expect(
queryByRole('option', {
name: enLocale.srpInputNumberOfWords.message.replace('$1', '12'),
selected: true,
}),
).toBeInTheDocument();
expect(queryByTestId('import-srp__srp-word-11')).toBeInTheDocument();
expect(queryByTestId('import-srp__srp-word-12')).not.toBeInTheDocument();
});
it('should be updated on paste to allow room for a longer SRP', async () => {
const onChange = jest.fn();
const { getByTestId, queryByTestId, queryByRole } =
renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(new Array(15).fill('test').join(' '));
expect(
queryByRole('option', {
name: enLocale.srpInputNumberOfWords.message.replace('$1', '15'),
selected: true,
}),
).toBeInTheDocument();
expect(queryByTestId('import-srp__srp-word-14')).toBeInTheDocument();
expect(queryByTestId('import-srp__srp-word-15')).not.toBeInTheDocument();
});
it('should be updated on paste to match the size of a shorter SRP', async () => {
const onChange = jest.fn();
const { getByRole, getByTestId, queryByTestId, queryByRole } =
renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
await userEvent.selectOptions(getByRole('combobox'), '15');
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(correct);
expect(
queryByRole('option', {
name: enLocale.srpInputNumberOfWords.message.replace('$1', '12'),
selected: true,
}),
).toBeInTheDocument();
expect(queryByTestId('import-srp__srp-word-11')).toBeInTheDocument();
expect(queryByTestId('import-srp__srp-word-12')).not.toBeInTheDocument();
});
it('should round up to nearest valid size on paste when SRP has an invalid number of words', async () => {
const onChange = jest.fn();
const { getByTestId, queryByTestId, queryByRole } =
renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(invalidWordCount);
expect(
queryByRole('option', {
name: enLocale.srpInputNumberOfWords.message.replace('$1', '15'),
selected: true,
}),
).toBeInTheDocument();
expect(queryByTestId('import-srp__srp-word-14')).toBeInTheDocument();
expect(queryByTestId('import-srp__srp-word-15')).not.toBeInTheDocument();
});
it('should update the number of fields', async () => {
const onChange = jest.fn();
const { getByRole, queryByTestId, queryByRole } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
await userEvent.selectOptions(getByRole('combobox'), '24');
expect(
queryByRole('option', {
name: enLocale.srpInputNumberOfWords.message.replace('$1', '24'),
selected: true,
}),
).toBeInTheDocument();
expect(queryByTestId('import-srp__srp-word-23')).toBeInTheDocument();
expect(queryByTestId('import-srp__srp-word-24')).not.toBeInTheDocument();
});
it('should forget any field state that is no longer shown', async () => {
const onChange = jest.fn();
const { getByRole, getByTestId, queryByTestId } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(new Array(15).fill('test').join(' '));
await userEvent.selectOptions(getByRole('combobox'), '12');
await userEvent.selectOptions(getByRole('combobox'), '15');
expect(queryByTestId('import-srp__srp-word-14')).toBeInTheDocument();
expect(queryByTestId('import-srp__srp-word-15')).not.toBeInTheDocument();
expect(queryByTestId('import-srp__srp-word-11').value).toBe('test');
expect(queryByTestId('import-srp__srp-word-12').value).toBe('');
expect(queryByTestId('import-srp__srp-word-13').value).toBe('');
expect(queryByTestId('import-srp__srp-word-14').value).toBe('');
});
});
describe('paste error', () => {
it('should show paste error when too many words are pasted', async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(tooManyWords);
expect(
queryByText(enLocale.srpPasteFailedTooManyWords.message),
).toBeInTheDocument();
});
it('should allow dismissing the paste error', async () => {
const onChange = jest.fn();
const { getByTestId, getByText, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(tooManyWords);
await userEvent.click(getByText('Dismiss'));
expect(
queryByText(enLocale.srpPasteFailedTooManyWords.message),
).not.toBeInTheDocument();
});
it('should dismiss the paste error after paste with fewer than 24 words', async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(tooManyWords);
await userEvent.paste(correct);
expect(
queryByText(enLocale.srpPasteFailedTooManyWords.message),
).not.toBeInTheDocument();
});
it('should not dismiss the paste error after a second paste with over 24 words', async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(tooManyWords);
await userEvent.paste(tooManyWords);
expect(
queryByText(enLocale.srpPasteFailedTooManyWords.message),
).toBeInTheDocument();
});
it('should dismiss the paste error after typing', async () => {
const onChange = jest.fn();
const { getByTestId, queryByText } = renderWithLocalization(
<SrpInput
onChange={onChange}
srpText={enLocale.secretRecoveryPhrase.message}
/>,
);
getByTestId('import-srp__srp-word-0').focus();
await userEvent.paste(tooManyWords);
await userEvent.keyboard('test');
expect(
queryByText(enLocale.srpPasteFailedTooManyWords.message),
).not.toBeInTheDocument();
});
});
});