mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
396 lines
11 KiB
JavaScript
396 lines
11 KiB
JavaScript
|
import React from 'react';
|
||
|
import { fireEvent, waitFor } from '@testing-library/react';
|
||
|
import configureMockStore from 'redux-mock-store';
|
||
|
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||
|
import initializedMockState from '../../../../test/data/mock-send-state.json';
|
||
|
import {
|
||
|
ONBOARDING_SECURE_YOUR_WALLET_ROUTE,
|
||
|
ONBOARDING_COMPLETION_ROUTE,
|
||
|
} from '../../../helpers/constants/routes';
|
||
|
import { FIRST_TIME_FLOW_TYPES } from '../../../helpers/constants/onboarding';
|
||
|
import CreatePassword from './create-password';
|
||
|
|
||
|
const mockHistoryPush = jest.fn();
|
||
|
const mockHistoryReplace = jest.fn();
|
||
|
|
||
|
jest.mock('react-router-dom', () => ({
|
||
|
...jest.requireActual('react-router-dom'),
|
||
|
useHistory: () => ({
|
||
|
push: mockHistoryPush,
|
||
|
replace: mockHistoryReplace,
|
||
|
}),
|
||
|
}));
|
||
|
|
||
|
describe('Onboarding Create Password', () => {
|
||
|
const mockState = {
|
||
|
metamask: {
|
||
|
identities: {},
|
||
|
selectedAddress: '',
|
||
|
},
|
||
|
};
|
||
|
|
||
|
const mockCreateNewAccount = jest.fn().mockResolvedValue();
|
||
|
|
||
|
afterEach(() => {
|
||
|
jest.clearAllMocks();
|
||
|
});
|
||
|
|
||
|
describe('Initialized State Conditionals with keyrings and firstTimeFlowType', () => {
|
||
|
it('should route to secure your wallet when keyring is present but not imported first time flow type', () => {
|
||
|
const mockStore = configureMockStore()(initializedMockState);
|
||
|
|
||
|
renderWithProvider(<CreatePassword />, mockStore);
|
||
|
expect(mockHistoryReplace).toHaveBeenCalledWith(
|
||
|
ONBOARDING_SECURE_YOUR_WALLET_ROUTE,
|
||
|
);
|
||
|
});
|
||
|
|
||
|
it('should route to completion when keyring is present and imported first time flow type', () => {
|
||
|
const importFirstTimeFlowState = {
|
||
|
...initializedMockState,
|
||
|
metamask: {
|
||
|
...initializedMockState.metamask,
|
||
|
firstTimeFlowType: 'import',
|
||
|
},
|
||
|
};
|
||
|
const mockStore = configureMockStore()(importFirstTimeFlowState);
|
||
|
|
||
|
renderWithProvider(<CreatePassword />, mockStore);
|
||
|
expect(mockHistoryReplace).toHaveBeenCalledWith(
|
||
|
ONBOARDING_COMPLETION_ROUTE,
|
||
|
);
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe('Render', () => {
|
||
|
it('should match snapshot', () => {
|
||
|
const mockStore = configureMockStore()(mockState);
|
||
|
const { container } = renderWithProvider(<CreatePassword />, mockStore);
|
||
|
|
||
|
expect(container).toMatchSnapshot();
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe('Password Validation Checks', () => {
|
||
|
it('should show password as text when click Show under password', () => {
|
||
|
const mockStore = configureMockStore()(mockState);
|
||
|
const { queryByTestId } = renderWithProvider(
|
||
|
<CreatePassword />,
|
||
|
mockStore,
|
||
|
);
|
||
|
|
||
|
const createPassword = queryByTestId('create-password-new');
|
||
|
const event = {
|
||
|
target: {
|
||
|
value: '1234567',
|
||
|
},
|
||
|
};
|
||
|
|
||
|
fireEvent.change(createPassword, event);
|
||
|
|
||
|
expect(createPassword).toHaveAttribute('type', 'password');
|
||
|
|
||
|
const showPassword = queryByTestId('show-password');
|
||
|
|
||
|
fireEvent.click(showPassword);
|
||
|
|
||
|
expect(createPassword).toHaveAttribute('type', 'text');
|
||
|
});
|
||
|
it('should disable create new account button and show short password error with password length of 7', () => {
|
||
|
const mockStore = configureMockStore()(mockState);
|
||
|
const { queryByTestId } = renderWithProvider(
|
||
|
<CreatePassword createNewAccount={mockCreateNewAccount} />,
|
||
|
mockStore,
|
||
|
);
|
||
|
|
||
|
const createPassword = queryByTestId('create-password-new');
|
||
|
const event = {
|
||
|
target: {
|
||
|
value: '1234567',
|
||
|
},
|
||
|
};
|
||
|
|
||
|
fireEvent.change(createPassword, event);
|
||
|
|
||
|
const shortPasswordError = queryByTestId('short-password-error');
|
||
|
expect(shortPasswordError).toBeInTheDocument();
|
||
|
|
||
|
const createNewWalletButton = queryByTestId('create-password-wallet');
|
||
|
|
||
|
expect(createNewWalletButton).toBeDisabled();
|
||
|
|
||
|
fireEvent.click(createNewWalletButton);
|
||
|
expect(mockCreateNewAccount).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it('should show weak password strength', () => {
|
||
|
const mockStore = configureMockStore()(mockState);
|
||
|
const { queryByTestId } = renderWithProvider(
|
||
|
<CreatePassword createNewAccount={mockCreateNewAccount} />,
|
||
|
mockStore,
|
||
|
);
|
||
|
|
||
|
const createNewWalletButton = queryByTestId('create-password-wallet');
|
||
|
|
||
|
const createPassword = queryByTestId('create-password-new');
|
||
|
const event = {
|
||
|
target: {
|
||
|
value: '12345678',
|
||
|
},
|
||
|
};
|
||
|
|
||
|
fireEvent.change(createPassword, event);
|
||
|
|
||
|
const weakPasswordError = queryByTestId('weak-password');
|
||
|
expect(weakPasswordError).toBeInTheDocument();
|
||
|
|
||
|
expect(createNewWalletButton).toBeDisabled();
|
||
|
|
||
|
fireEvent.click(createNewWalletButton);
|
||
|
|
||
|
expect(mockCreateNewAccount).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it('should show average password strength', () => {
|
||
|
const mockStore = configureMockStore()(mockState);
|
||
|
const { queryByTestId } = renderWithProvider(
|
||
|
<CreatePassword createNewAccount={mockCreateNewAccount} />,
|
||
|
mockStore,
|
||
|
);
|
||
|
|
||
|
const createNewWalletButton = queryByTestId('create-password-wallet');
|
||
|
|
||
|
const createPassword = queryByTestId('create-password-new');
|
||
|
const event = {
|
||
|
target: {
|
||
|
value: 'ZsE(!6679',
|
||
|
},
|
||
|
};
|
||
|
|
||
|
fireEvent.change(createPassword, event);
|
||
|
|
||
|
const weakPasswordError = queryByTestId('average-password');
|
||
|
expect(weakPasswordError).toBeInTheDocument();
|
||
|
|
||
|
expect(createNewWalletButton).toBeDisabled();
|
||
|
|
||
|
fireEvent.click(createNewWalletButton);
|
||
|
|
||
|
expect(mockCreateNewAccount).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it('should show strong password strength', () => {
|
||
|
const mockStore = configureMockStore()(mockState);
|
||
|
const { queryByTestId } = renderWithProvider(
|
||
|
<CreatePassword createNewAccount={mockCreateNewAccount} />,
|
||
|
mockStore,
|
||
|
);
|
||
|
|
||
|
const createPassword = queryByTestId('create-password-new');
|
||
|
const event = {
|
||
|
target: {
|
||
|
value: 'E}URkDoV|/*,pxI',
|
||
|
},
|
||
|
};
|
||
|
|
||
|
fireEvent.change(createPassword, event);
|
||
|
|
||
|
const weakPasswordError = queryByTestId('strong-password');
|
||
|
expect(weakPasswordError).toBeInTheDocument();
|
||
|
|
||
|
const createNewWalletButton = queryByTestId('create-password-wallet');
|
||
|
|
||
|
expect(createNewWalletButton).toBeDisabled();
|
||
|
|
||
|
fireEvent.click(createNewWalletButton);
|
||
|
|
||
|
expect(mockCreateNewAccount).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it('should show mismatch password error', () => {
|
||
|
const mockStore = configureMockStore()(mockState);
|
||
|
const { queryByTestId, queryByText } = renderWithProvider(
|
||
|
<CreatePassword createNewAccount={mockCreateNewAccount} />,
|
||
|
mockStore,
|
||
|
);
|
||
|
|
||
|
const createPassword = queryByTestId('create-password-new');
|
||
|
const confirmPassword = queryByTestId('create-password-confirm');
|
||
|
|
||
|
const createPasswordEvent = {
|
||
|
target: {
|
||
|
value: '123456789',
|
||
|
},
|
||
|
};
|
||
|
const confirmPasswordEvent = {
|
||
|
target: {
|
||
|
value: '12345678',
|
||
|
},
|
||
|
};
|
||
|
|
||
|
fireEvent.change(createPassword, createPasswordEvent);
|
||
|
fireEvent.change(confirmPassword, confirmPasswordEvent);
|
||
|
|
||
|
const passwordMismatchError = queryByText("Passwords don't match");
|
||
|
|
||
|
expect(passwordMismatchError).toBeInTheDocument();
|
||
|
|
||
|
const createNewWalletButton = queryByTestId('create-password-wallet');
|
||
|
|
||
|
expect(createNewWalletButton).toBeDisabled();
|
||
|
|
||
|
fireEvent.click(createNewWalletButton);
|
||
|
|
||
|
expect(mockCreateNewAccount).not.toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
it('should not create new wallet without terms checked', () => {
|
||
|
const mockStore = configureMockStore()(mockState);
|
||
|
const { queryByTestId } = renderWithProvider(
|
||
|
<CreatePassword createNewAccount={mockCreateNewAccount} />,
|
||
|
mockStore,
|
||
|
);
|
||
|
|
||
|
const createPassword = queryByTestId('create-password-new');
|
||
|
const confirmPassword = queryByTestId('create-password-confirm');
|
||
|
|
||
|
const createPasswordEvent = {
|
||
|
target: {
|
||
|
value: '12345678',
|
||
|
},
|
||
|
};
|
||
|
const confirmPasswordEvent = {
|
||
|
target: {
|
||
|
value: '12345678',
|
||
|
},
|
||
|
};
|
||
|
|
||
|
fireEvent.change(createPassword, createPasswordEvent);
|
||
|
fireEvent.change(confirmPassword, confirmPasswordEvent);
|
||
|
|
||
|
const terms = queryByTestId('create-password-terms');
|
||
|
|
||
|
expect(terms).not.toBeChecked();
|
||
|
|
||
|
const createNewWalletButton = queryByTestId('create-password-wallet');
|
||
|
|
||
|
expect(createNewWalletButton).toBeDisabled();
|
||
|
|
||
|
fireEvent.click(createNewWalletButton);
|
||
|
|
||
|
expect(mockCreateNewAccount).not.toHaveBeenCalled();
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe('Create New Account', () => {
|
||
|
it('should create new account with correct passwords and terms checked', async () => {
|
||
|
const mockStore = configureMockStore()(mockState);
|
||
|
const { queryByTestId } = renderWithProvider(
|
||
|
<CreatePassword createNewAccount={mockCreateNewAccount} />,
|
||
|
mockStore,
|
||
|
);
|
||
|
|
||
|
const createPassword = queryByTestId('create-password-new');
|
||
|
const confirmPassword = queryByTestId('create-password-confirm');
|
||
|
|
||
|
const password = '12345678';
|
||
|
|
||
|
const createPasswordEvent = {
|
||
|
target: {
|
||
|
value: password,
|
||
|
},
|
||
|
};
|
||
|
const confirmPasswordEvent = {
|
||
|
target: {
|
||
|
value: password,
|
||
|
},
|
||
|
};
|
||
|
|
||
|
fireEvent.change(createPassword, createPasswordEvent);
|
||
|
fireEvent.change(confirmPassword, confirmPasswordEvent);
|
||
|
|
||
|
const terms = queryByTestId('create-password-terms');
|
||
|
fireEvent.click(terms);
|
||
|
|
||
|
const createNewWalletButton = queryByTestId('create-password-wallet');
|
||
|
|
||
|
expect(createNewWalletButton).not.toBeDisabled();
|
||
|
|
||
|
fireEvent.click(createNewWalletButton);
|
||
|
|
||
|
expect(mockCreateNewAccount).toHaveBeenCalledWith(password);
|
||
|
|
||
|
await waitFor(() => {
|
||
|
expect(mockHistoryPush).toHaveBeenCalledWith(
|
||
|
ONBOARDING_SECURE_YOUR_WALLET_ROUTE,
|
||
|
);
|
||
|
});
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe('Import Wallet', () => {
|
||
|
const importMockState = {
|
||
|
...mockState,
|
||
|
metamask: {
|
||
|
...mockState.metamask,
|
||
|
firstTimeFlowType: FIRST_TIME_FLOW_TYPES.IMPORT,
|
||
|
},
|
||
|
};
|
||
|
|
||
|
it('should import wallet', async () => {
|
||
|
const mockStore = configureMockStore()(importMockState);
|
||
|
|
||
|
const props = {
|
||
|
importWithRecoveryPhrase: jest.fn().mockResolvedValue(),
|
||
|
secretRecoveryPhrase: 'SRP',
|
||
|
};
|
||
|
|
||
|
const { queryByTestId } = renderWithProvider(
|
||
|
<CreatePassword {...props} />,
|
||
|
mockStore,
|
||
|
);
|
||
|
|
||
|
const createPassword = queryByTestId('create-password-new');
|
||
|
const confirmPassword = queryByTestId('create-password-confirm');
|
||
|
|
||
|
const password = '12345678';
|
||
|
|
||
|
const createPasswordEvent = {
|
||
|
target: {
|
||
|
value: password,
|
||
|
},
|
||
|
};
|
||
|
const confirmPasswordEvent = {
|
||
|
target: {
|
||
|
value: password,
|
||
|
},
|
||
|
};
|
||
|
|
||
|
fireEvent.change(createPassword, createPasswordEvent);
|
||
|
fireEvent.change(confirmPassword, confirmPasswordEvent);
|
||
|
|
||
|
const terms = queryByTestId('create-password-terms');
|
||
|
fireEvent.click(terms);
|
||
|
|
||
|
const importWalletButton = queryByTestId('create-password-import');
|
||
|
|
||
|
expect(importWalletButton.textContent).toMatchInlineSnapshot(
|
||
|
`"Import my wallet"`,
|
||
|
);
|
||
|
|
||
|
fireEvent.click(importWalletButton);
|
||
|
|
||
|
expect(props.importWithRecoveryPhrase).toHaveBeenCalledWith(
|
||
|
password,
|
||
|
props.secretRecoveryPhrase,
|
||
|
);
|
||
|
|
||
|
await waitFor(() => {
|
||
|
expect(mockHistoryPush).toHaveBeenCalledWith(
|
||
|
ONBOARDING_COMPLETION_ROUTE,
|
||
|
);
|
||
|
});
|
||
|
});
|
||
|
});
|
||
|
});
|