+
{t(TEST_KEY_7_HELPER_1)}
);
const TEST_SUBSTITUTION_7_2 = (
-
+
{t(TEST_KEY_7_HELPER_2)}
);
const TEST_SUBSTITUTION_8_1 = (
-
+
{t(TEST_KEY_8_HELPER_1)}
);
@@ -141,9 +141,10 @@ describe('i18n helper', () => {
it('should return the correct message when a single react substitution is made', () => {
const result = t(TEST_KEY_6, [TEST_SUBSTITUTION_6]);
- expect(shallow(result).html()).toStrictEqual(
- '
Testing a react substitution TEST_SUBSTITUTION_1
. ',
- );
+
+ const { container } = renderWithProvider(result);
+
+ expect(container).toMatchSnapshot();
});
it('should return the correct message when two react substitutions are made', () => {
@@ -151,9 +152,10 @@ describe('i18n helper', () => {
TEST_SUBSTITUTION_7_1,
TEST_SUBSTITUTION_7_2,
]);
- expect(shallow(result).html()).toStrictEqual(
- '
Testing a react substitution TEST_SUBSTITUTION_1
and another TEST_SUBSTITUTION_2
. ',
- );
+
+ const { container } = renderWithProvider(result);
+
+ expect(container).toMatchSnapshot();
});
it('should return the correct message when substituting a mix of react elements and strings', () => {
@@ -163,9 +165,10 @@ describe('i18n helper', () => {
TEST_SUBSTITUTION_2,
TEST_SUBSTITUTION_8_2,
]);
- expect(shallow(result).html()).toStrictEqual(
- '
Testing a mix TEST_SUBSTITUTION_1 of react substitutions TEST_SUBSTITUTION_3
and string substitutions TEST_SUBSTITUTION_2 + TEST_SUBSTITUTION_4
. ',
- );
+
+ const { container } = renderWithProvider(result);
+
+ expect(container).toMatchSnapshot();
});
});
});
diff --git a/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase-component.test.js b/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase-component.test.js
index bd72a3646..441ecd86a 100644
--- a/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase-component.test.js
+++ b/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase-component.test.js
@@ -1,125 +1,43 @@
import React from 'react';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
-import ConfirmSeedPhrase from './confirm-seed-phrase/confirm-seed-phrase.component';
+import { DragDropContextProvider } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import configureMockStore from 'redux-mock-store';
+import { fireEvent, waitFor } from '@testing-library/react';
+import thunk from 'redux-thunk';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import ConfirmSeedPhrase from './confirm-seed-phrase';
-function shallowRender(props = {}, context = {}) {
- return shallow(
, {
- context: {
- t: (str) => `${str}_t`,
- ...context,
- },
- });
+jest.mock('../../../store/actions.js', () => ({
+ setSeedPhraseBackedUp: () => jest.fn().mockResolvedValue(),
+}));
+
+const seedPhrase = '鼠 牛 虎 兔 龍 蛇 馬 羊 猴 雞 狗 豬';
+
+function shallowRender(props = {}) {
+ const mockState = {};
+ const mockStore = configureMockStore([thunk])(mockState);
+
+ return renderWithProvider(
+
+
+ ,
+ mockStore,
+ );
}
describe('ConfirmSeedPhrase Component', () => {
it('should render correctly', () => {
- const component = shallowRender({
- seedPhrase: '鼠 牛 虎 兔 龍 蛇 馬 羊 猴 雞 狗 豬',
+ const { queryAllByTestId } = shallowRender({
+ seedPhrase,
});
- expect(
- component.find('.confirm-seed-phrase__seed-word--sorted'),
- ).toHaveLength(12);
- });
-
- it('should add/remove selected on click', () => {
- const trackEventSpy = sinon.spy();
- const replaceSpy = sinon.spy();
- const component = shallowRender(
- {
- seedPhrase: '鼠 牛 虎 兔 龍 蛇 馬 羊 猴 雞 狗 豬',
- history: { replace: replaceSpy },
- },
- {
- trackEvent: trackEventSpy,
- },
+ // Regex ommitted the empty/undefined draggable boxes
+ expect(queryAllByTestId(/draggable-seed-(?!.*undefined)/u)).toHaveLength(
+ 12,
);
- const seeds = component.find('.confirm-seed-phrase__seed-word--sorted');
-
- // Click on 3 seeds to add to selected
- seeds.at(0).simulate('click');
- seeds.at(1).simulate('click');
- seeds.at(2).simulate('click');
-
- expect(component.state().selectedSeedIndices).toStrictEqual([0, 1, 2]);
-
- // Click on a selected seed to remove
- component.state();
- component.update();
- component.state();
- component
- .find('.confirm-seed-phrase__seed-word--sorted')
- .at(1)
- .simulate('click');
- expect(component.state().selectedSeedIndices).toStrictEqual([0, 2]);
- });
-
- it('should render correctly on hover', () => {
- const trackEventSpy = sinon.spy();
- const replaceSpy = sinon.spy();
- const component = shallowRender(
- {
- seedPhrase: '鼠 牛 虎 兔 龍 蛇 馬 羊 猴 雞 狗 豬',
- history: { replace: replaceSpy },
- },
- {
- trackEvent: trackEventSpy,
- },
- );
-
- const seeds = component.find('.confirm-seed-phrase__seed-word--sorted');
-
- // Click on 3 seeds to add to selected
- seeds.at(0).simulate('click');
- seeds.at(1).simulate('click');
- seeds.at(2).simulate('click');
-
- // Dragging Seed # 2 to 0 placeth
- component.instance().setDraggingSeedIndex(2);
- component.instance().setHoveringIndex(0);
-
- component.update();
-
- const pendingSeeds = component.find(
- '.confirm-seed-phrase__selected-seed-words__pending-seed',
- );
-
- expect(pendingSeeds.at(0).props().seedIndex).toStrictEqual(2);
- expect(pendingSeeds.at(1).props().seedIndex).toStrictEqual(0);
- expect(pendingSeeds.at(2).props().seedIndex).toStrictEqual(1);
- });
-
- it('should insert seed in place on drop', () => {
- const trackEventSpy = sinon.spy();
- const replaceSpy = sinon.spy();
- const component = shallowRender(
- {
- seedPhrase: '鼠 牛 虎 兔 龍 蛇 馬 羊 猴 雞 狗 豬',
- history: { replace: replaceSpy },
- },
- {
- trackEvent: trackEventSpy,
- },
- );
-
- const seeds = component.find('.confirm-seed-phrase__seed-word--sorted');
-
- // Click on 3 seeds to add to selected
- seeds.at(0).simulate('click');
- seeds.at(1).simulate('click');
- seeds.at(2).simulate('click');
-
- // Drop Seed # 2 to 0 placeth
- component.instance().setDraggingSeedIndex(2);
- component.instance().setHoveringIndex(0);
- component.instance().onDrop(0);
-
- component.update();
-
- expect(component.state().selectedSeedIndices).toStrictEqual([2, 0, 1]);
- expect(component.state().pendingSeedIndices).toStrictEqual([2, 0, 1]);
+ // For 24 word mnemonic phrases.
+ expect(queryAllByTestId(/draggable-seed-undefined/u)).toHaveLength(24);
});
it('should submit correctly', async () => {
@@ -137,41 +55,25 @@ describe('ConfirmSeedPhrase Component', () => {
'狗',
'豬',
];
- const trackEventSpy = sinon.spy();
- const replaceSpy = sinon.spy();
- const component = shallowRender(
- {
- seedPhrase: '鼠 牛 虎 兔 龍 蛇 馬 羊 猴 雞 狗 豬',
- history: { replace: replaceSpy },
- setSeedPhraseBackedUp: () => Promise.resolve(),
- },
- {
- trackEvent: trackEventSpy,
- },
- );
- const sorted = component.state().sortedSeedWords;
- const seeds = component.find('.confirm-seed-phrase__seed-word--sorted');
+ const history = {
+ replace: jest.fn(),
+ };
+
+ const { queryByTestId } = shallowRender({
+ seedPhrase,
+ history,
+ });
originalSeed.forEach((seed) => {
- const seedIndex = sorted.findIndex((s) => s === seed);
- seeds.at(seedIndex).simulate('click');
+ fireEvent.click(queryByTestId(`draggable-seed-${seed}`));
});
- component.update();
+ const confirmSeedPhrase = queryByTestId('confirm-dragged-seed-phrase');
+ fireEvent.click(confirmSeedPhrase);
- component.find('.first-time-flow__button').simulate('click');
-
- await new Promise((resolve) => setTimeout(resolve, 100));
-
- expect(trackEventSpy.args[0][0]).toStrictEqual({
- category: 'Onboarding',
- event: 'Wallet Created',
- properties: {
- account_type: 'metamask',
- is_backup_skipped: false,
- },
+ await waitFor(() => {
+ expect(history.replace).toHaveBeenCalledWith('/initialize/end-of-flow');
});
- expect(replaceSpy.args[0][0]).toStrictEqual('/initialize/end-of-flow');
});
});
diff --git a/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
index f178b48ca..50078ffe5 100644
--- a/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
+++ b/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
@@ -198,6 +198,7 @@ export default class ConfirmSeedPhrase extends PureComponent {
+`;
+
+exports[`Add Recipient Component Own Account Recipient Search should match snapshot 1`] = `
+
+
+
+
+
+ Back to all
+
+
+
+ My accounts
+
+
+
+
+
+ Test Account
+
+
+ 0x0dcd...e7bc
+
+
+
+
+
+
+
+ Test Account 2
+
+
+ 0xec1a...251b
+
+
+
+
+
+
+
+ Test Ledger 1
+
+
+ 0xc42e...8813
+
+
+
+
+
+
+
+ Test Account 3
+
+
+ 0xeb9e...4823
+
+
+
+
+
+
+
+`;
+
+exports[`Add Recipient Component Send State should match snapshot 1`] = `
+
+
+
+
+
+
+ A
+ c
+ c
+ o
+ u
+ n
+ t
+
+ 2
+
+
+ 0xec1a...251b
+
+
+
+
+
+`;
+
+exports[`Add Recipient Component render should match snapshot 1`] = `
+
+`;
diff --git a/ui/pages/send/send-content/add-recipient/add-recipient.component.test.js b/ui/pages/send/send-content/add-recipient/add-recipient.component.test.js
index 7de303274..deaabbc83 100644
--- a/ui/pages/send/send-content/add-recipient/add-recipient.component.test.js
+++ b/ui/pages/send/send-content/add-recipient/add-recipient.component.test.js
@@ -1,178 +1,61 @@
import React from 'react';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
-import Dialog from '../../../../components/ui/dialog';
-import AddRecipient from './add-recipient.component';
-
-const propsMethodSpies = {
- updateRecipient: sinon.spy(),
- useMyAccountsForRecipientSearch: sinon.spy(),
- useContactListForRecipientSearch: sinon.spy(),
-};
-
-describe('AddRecipient Component', () => {
- let wrapper;
-
- beforeEach(() => {
- wrapper = shallow(
-
,
- { context: { t: (str) => `${str}_t` } },
- );
- });
-
- afterEach(() => {
- propsMethodSpies.updateRecipient.resetHistory();
- propsMethodSpies.useMyAccountsForRecipientSearch.resetHistory();
- propsMethodSpies.useContactListForRecipientSearch.resetHistory();
- });
+import configureMockStore from 'redux-mock-store';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import mockState from '../../../../../test/data/mock-state.json';
+import mockSendState from '../../../../../test/data/mock-send-state.json';
+import AddRecipient from '.';
+describe('Add Recipient Component', () => {
describe('render', () => {
- it('should render a component', () => {
- expect(wrapper.find('.send__select-recipient-wrapper')).toHaveLength(1);
+ const mockStore = configureMockStore()(mockState);
+ it('should match snapshot', () => {
+ const { container } = renderWithProvider(
, mockStore);
+
+ expect(container).toMatchSnapshot();
});
+ });
- it('should render no content if there are no recents, transfers, and contacts', () => {
- wrapper.setProps({
- ownedAccounts: [],
- addressBook: [],
- });
+ describe('Send State', () => {
+ const mockStore = configureMockStore()(mockSendState);
- expect(
- wrapper.find('.send__select-recipient-wrapper__list__link'),
- ).toHaveLength(0);
- expect(
- wrapper.find('.send__select-recipient-wrapper__group'),
- ).toHaveLength(0);
+ it('should match snapshot', () => {
+ const { container } = renderWithProvider(
, mockStore);
+
+ expect(container).toMatchSnapshot();
});
+ });
- it('should render transfer', () => {
- wrapper.setProps({
- isUsingMyAccountsForRecipientSearch: true,
- ownedAccounts: [
- { address: '0x123', name: '123' },
- { address: '0x124', name: '124' },
- ],
- addressBook: [{ address: '0x456', name: 'test-name' }],
- });
- wrapper.setState({ isShowingTransfer: true });
+ describe('Domain Resolution', () => {
+ const mockDomainResolutionState = {
+ ...mockState,
+ DNS: {
+ resolution: 'DNS Resolution',
+ },
+ };
+ const mockStore = configureMockStore()(mockDomainResolutionState);
- const xferLink = wrapper.find(
- '.send__select-recipient-wrapper__list__link',
- );
- expect(xferLink).toHaveLength(1);
+ it('should match snapshot', () => {
+ const { container } = renderWithProvider(
, mockStore);
- const groups = wrapper.find('RecipientGroup');
- expect(
- groups.shallow().find('.send__select-recipient-wrapper__group'),
- ).toHaveLength(1);
+ expect(container).toMatchSnapshot();
});
+ });
- it('should render ContactList', () => {
- wrapper.setProps({
- ownedAccounts: [
- { address: '0x123', name: '123' },
- { address: '0x124', name: '124' },
- ],
- addressBook: [{ address: '0x125' }],
- });
+ describe('Own Account Recipient Search', () => {
+ const ownAccountSeachState = {
+ ...mockState,
+ send: {
+ ...mockState.send,
+ recipientInput: 'Test',
+ recipientMode: 'MY_ACCOUNTS',
+ },
+ };
+ const mockStore = configureMockStore()(ownAccountSeachState);
- const contactList = wrapper.find('ContactList');
+ it('should match snapshot', () => {
+ const { container } = renderWithProvider(
, mockStore);
- expect(contactList).toHaveLength(1);
- });
-
- it('should render contacts', () => {
- wrapper.setProps({
- addressBook: [
- { address: '0x125', name: 'alice' },
- { address: '0x126', name: 'alex' },
- { address: '0x127', name: 'catherine' },
- ],
- });
- wrapper.setState({ isShowingTransfer: false });
-
- const xferLink = wrapper.find(
- '.send__select-recipient-wrapper__list__link',
- );
- expect(xferLink).toHaveLength(0);
-
- const groups = wrapper.find('ContactList');
- expect(groups).toHaveLength(1);
-
- expect(
- groups.find('.send__select-recipient-wrapper__group-item'),
- ).toHaveLength(0);
- });
-
- it('should render error when query has no results', () => {
- wrapper.setProps({
- addressBook: [],
- domainError: 'bad',
- contacts: [],
- nonContacts: [],
- });
-
- const dialog = wrapper.find(Dialog);
-
- expect(dialog.props().type).toStrictEqual('error');
- expect(dialog.props().children).toStrictEqual('bad_t');
- expect(dialog).toHaveLength(1);
- });
-
- it('should render error when query has ens does not resolve', () => {
- wrapper.setProps({
- addressBook: [],
- domainError: 'very bad',
- contacts: [],
- nonContacts: [],
- });
-
- const dialog = wrapper.find(Dialog);
-
- expect(dialog.props().type).toStrictEqual('error');
- expect(dialog.props().children).toStrictEqual('very bad_t');
- expect(dialog).toHaveLength(1);
- });
-
- it('should render error when ens resolved but ens error exists', () => {
- wrapper.setProps({
- addressBook: [],
- domainError: 'bad',
- domainResolution: '0x128',
- });
-
- const dialog = wrapper.find(Dialog);
-
- expect(dialog).toHaveLength(1);
+ expect(container).toMatchSnapshot();
});
});
});