Show error on wrong parent password when deriving (#527)

* show error on wrong parent password

* add tests

* fix test

* group button and error tests

* Show error upon wrong derivation suri (#528)

* show error when wrong suri and fix tests

* alpha ordering and stray log

Co-authored-by: Github Actions <action@github.com>

Co-authored-by: Github Actions <action@github.com>
This commit is contained in:
Thibaut Sardan 2020-11-23 21:40:00 -10:00 committed by GitHub
parent 9aff6ba4ba
commit e6b608ff80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 89 additions and 16 deletions

View File

@ -2,6 +2,7 @@
// SPDX-License-Identifier: Apache-2.0
import '../../../../../__mocks__/chrome';
import { ResponseDeriveValidate } from '@polkadot/extension-base/background/types';
import React from 'react';
import { MemoryRouter, Route } from 'react-router';
@ -79,6 +80,14 @@ describe('Derive', () => {
// eslint-disable-next-line @typescript-eslint/require-await
jest.spyOn(messaging, 'validateAccount').mockImplementation(async (_, pass: string) => pass === 'pass');
// eslint-disable-next-line @typescript-eslint/require-await
jest.spyOn(messaging, 'validateDerivationPath').mockImplementation(async (_, path) => {
if (path === '//') {
throw new Error('wrong suri');
}
return {} as ResponseDeriveValidate;
});
it('"Derive" checkbox is selected by default', () => {
const checkbox = wrapper.find('input[type="checkbox"]');
@ -105,27 +114,76 @@ describe('Derive', () => {
expect(wrapper.exists('[data-button-action="create root account"]')).toBe(false);
});
it('"Create derived account" is disabled when password is incorrect', () => {
it('No error is visible when first loading the page', () => {
expect(wrapper.find('.error')).toHaveLength(0);
});
it('"Create derived account" is disabled when password is not set', () => {
const button = wrapper.find('[data-button-action="create derived account"] button');
expect(button.prop('disabled')).toBe(true);
});
it('"Create derived account" is enabled when password is correct', async () => {
await type(wrapper.find('input[type="password"]'), 'pass');
it('An error is visible and "Create derived account" is disabled when password is incorrect', async () => {
await type(wrapper.find('input[type="password"]'), 'wrong_pass');
wrapper.find('[data-button-action="create derived account"] button').simulate('click');
await act(flushAllPromises);
wrapper.update();
const button = wrapper.find('[data-button-action="create derived account"] button');
expect(button.prop('disabled')).not.toBe(true);
expect(button.prop('disabled')).toBe(true);
expect(wrapper.find('.error')).toHaveLength(1);
});
it('"Create derived account" is disabled when suri is incorrect', async () => {
await type(wrapper.find('input[type="password"]'), 'pass');
await type(wrapper.find('[data-input-suri] input'), '//');
it('The error disappears when typing a new password and "Create derived account" is enabled', async () => {
await type(wrapper.find('input[type="password"]'), 'wrong_pass');
wrapper.find('[data-button-action="create derived account"] button').simulate('click');
await act(flushAllPromises);
wrapper.update();
await type(wrapper.find('input[type="password"]'), 'new_attempt');
const button = wrapper.find('[data-button-action="create derived account"] button');
expect(button.prop('disabled')).not.toBe(true);
expect(button.prop('disabled')).toBe(false);
expect(wrapper.find('.error')).toHaveLength(0);
});
it('"Create derived account" is enabled when password is set', async () => {
await type(wrapper.find('input[type="password"]'), 'pass');
const button = wrapper.find('[data-button-action="create derived account"] button');
expect(button.prop('disabled')).toBe(false);
expect(wrapper.find('.error')).toHaveLength(0);
});
it('An error is visible and "Create derived account" is disabled when suri is incorrect', async () => {
await type(wrapper.find('input[type="password"]'), 'pass');
await type(wrapper.find('[data-input-suri] input'), '//');
wrapper.find('[data-button-action="create derived account"] button').simulate('click');
await act(flushAllPromises);
wrapper.update();
const button = wrapper.find('[data-button-action="create derived account"] button');
expect(button.prop('disabled')).toBe(true);
expect(wrapper.find('.error')).toHaveLength(1);
});
it('The error disappears and "Create derived account" is enabled when typing a new suri', async () => {
await type(wrapper.find('input[type="password"]'), 'pass');
await type(wrapper.find('[data-input-suri] input'), '//');
wrapper.find('[data-button-action="create derived account"] button').simulate('click');
await act(flushAllPromises);
wrapper.update();
await type(wrapper.find('[data-input-suri] input'), 'new');
const button = wrapper.find('[data-button-action="create derived account"] button');
expect(button.prop('disabled')).toBe(false);
expect(wrapper.find('.error')).toHaveLength(0);
});
it('takes selected address from URL as parent account', () => {

View File

@ -73,9 +73,11 @@ function SelectParent ({ className, isLocked, onDerivationConfirmed, parentAddre
assert(account, 'Unable to derive');
onDerivationConfirmed({ account, parentPassword });
} catch (error) {
setIsBusy(false);
setSuriPath(null);
}
} else {
setIsBusy(false);
setIsProperParentPassword(false);
}
}
@ -130,14 +132,19 @@ function SelectParent ({ className, isLocked, onDerivationConfirmed, parentAddre
type='password'
value={parentPassword}
/>
{!!parentPassword && !isProperParentPassword && <div className='error'>{t('Wrong password')}</div>}
</div>
{isProperParentPassword && (
<DerivationPath
defaultPath={defaultPath}
onChange={setSuriPath}
parentAddress={parentAddress}
parentPassword={parentPassword}
/>
<>
<DerivationPath
defaultPath={defaultPath}
isError={!suriPath}
onChange={setSuriPath}
parentAddress={parentAddress}
parentPassword={parentPassword}
/>
{!suriPath && <div className='error'>{t('Incorrect derivation path')}</div>}
</>
)}
</div>
</div>
@ -168,7 +175,7 @@ function SelectParent ({ className, isLocked, onDerivationConfirmed, parentAddre
);
}
export default styled(SelectParent)`
export default styled(SelectParent)(({ theme }: ThemeProps) => `
.smallerMargin {
margin-top: 0;
@ -183,4 +190,12 @@ export default styled(SelectParent)`
pointer-events: none;
}
}
`;
.error {
display: block;
margin-top: -10px;
font-size: ${theme.labelFontSize};
line-height: ${theme.labelLineHeight};
color: ${theme.errorColor};
}
`);