mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Continue converting tests from enzyme to @testing-library/react (#16032)
This commit is contained in:
Thomas Huang
GitHub
parent
33522a7b46
commit
7149da8d3d
@ -111,6 +111,7 @@ const AssetListItem = ({
|
|||||||
title={
|
title={
|
||||||
<button
|
<button
|
||||||
className="asset-list-item__token-button"
|
className="asset-list-item__token-button"
|
||||||
|
data-testid="token-button"
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
title={`${primary} ${tokenSymbol}`}
|
title={`${primary} ${tokenSymbol}`}
|
||||||
>
|
>
|
||||||
|
|||||||
@ -0,0 +1,52 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Reject Transactions Model should match snapshot 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="modal-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="modal-container__header"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="modal-container__header-text"
|
||||||
|
>
|
||||||
|
[rejectTxsN]
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="modal-container__header-close"
|
||||||
|
data-testid="modal-header-close"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="modal-container__content"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="reject-transactions__description"
|
||||||
|
>
|
||||||
|
[rejectTxsDescription]
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="modal-container__footer"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="button btn--rounded btn-secondary modal-container__footer-button"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
[cancel]
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="button btn--rounded btn-primary modal-container__footer-button"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
[rejectAll]
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,45 +1,44 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import sinon from 'sinon';
|
import { fireEvent, waitFor } from '@testing-library/react';
|
||||||
import { mount } from 'enzyme';
|
import { renderWithProvider } from '../../../../../test/lib/render-helpers';
|
||||||
import RejectTransactionsModal from './reject-transactions.container';
|
import RejectTransactionsModal from '.';
|
||||||
|
|
||||||
describe('Reject Transactions Model', () => {
|
describe('Reject Transactions Model', () => {
|
||||||
let wrapper;
|
|
||||||
|
|
||||||
const props = {
|
const props = {
|
||||||
onSubmit: sinon.spy(),
|
onSubmit: jest.fn(),
|
||||||
hideModal: sinon.spy(),
|
hideModal: jest.fn(),
|
||||||
unapprovedTxCount: 2,
|
unapprovedTxCount: 2,
|
||||||
};
|
};
|
||||||
|
|
||||||
beforeEach(() => {
|
it('should match snapshot', () => {
|
||||||
wrapper = mount(<RejectTransactionsModal.WrappedComponent {...props} />, {
|
const { container } = renderWithProvider(
|
||||||
context: {
|
<RejectTransactionsModal.WrappedComponent {...props} />,
|
||||||
t: (str) => str,
|
);
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
afterEach(() => {
|
expect(container).toMatchSnapshot();
|
||||||
props.hideModal.resetHistory();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('hides modal when cancel button is clicked', () => {
|
it('hides modal when cancel button is clicked', () => {
|
||||||
const cancelButton = wrapper.find(
|
const { queryByText } = renderWithProvider(
|
||||||
'.btn-secondary.modal-container__footer-button',
|
<RejectTransactionsModal.WrappedComponent {...props} />,
|
||||||
);
|
);
|
||||||
cancelButton.simulate('click');
|
|
||||||
|
|
||||||
expect(props.hideModal.calledOnce).toStrictEqual(true);
|
fireEvent.click(queryByText('[cancel]'));
|
||||||
|
|
||||||
|
expect(props.onSubmit).not.toHaveBeenCalled();
|
||||||
|
expect(props.hideModal).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('onSubmit is called and hides modal when reject all clicked', async () => {
|
it('onSubmit is called and hides modal when reject all clicked', async () => {
|
||||||
const rejectAllButton = wrapper.find(
|
const { queryByText } = renderWithProvider(
|
||||||
'.btn-primary.modal-container__footer-button',
|
<RejectTransactionsModal.WrappedComponent {...props} />,
|
||||||
);
|
);
|
||||||
rejectAllButton.simulate('click');
|
|
||||||
|
|
||||||
expect(await props.onSubmit.calledOnce).toStrictEqual(true);
|
fireEvent.click(queryByText('[rejectAll]'));
|
||||||
expect(props.hideModal.calledOnce).toStrictEqual(true);
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(props.onSubmit).toHaveBeenCalled();
|
||||||
|
expect(props.hideModal).toHaveBeenCalled();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -0,0 +1,42 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Transaction Confirmed should match snapshot 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="modal-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="modal-container__content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="transaction-confirmed__content"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="fa fa-check-circle fa-3x"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="transaction-confirmed__title"
|
||||||
|
>
|
||||||
|
[confirmed]!
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="transaction-confirmed__description"
|
||||||
|
>
|
||||||
|
[initialTransactionConfirmed]
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="modal-container__footer"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="button btn--rounded btn-primary modal-container__footer-button"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
[ok]
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,26 +1,30 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import sinon from 'sinon';
|
import { fireEvent } from '@testing-library/react';
|
||||||
import { mount } from 'enzyme';
|
import { renderWithProvider } from '../../../../../test/lib/render-helpers';
|
||||||
import TransactionConfirmed from './transaction-confirmed.container';
|
import TransactionConfirmed from '.';
|
||||||
|
|
||||||
describe('Transaction Confirmed', () => {
|
describe('Transaction Confirmed', () => {
|
||||||
|
it('should match snapshot', () => {
|
||||||
|
const { container } = renderWithProvider(
|
||||||
|
<TransactionConfirmed.WrappedComponent />,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
it('clicks ok to submit and hide modal', () => {
|
it('clicks ok to submit and hide modal', () => {
|
||||||
const props = {
|
const props = {
|
||||||
onSubmit: sinon.spy(),
|
onSubmit: jest.fn(),
|
||||||
hideModal: sinon.spy(),
|
hideModal: jest.fn(),
|
||||||
};
|
};
|
||||||
const wrapper = mount(
|
|
||||||
<TransactionConfirmed.WrappedComponent {...props} />,
|
|
||||||
{
|
|
||||||
context: {
|
|
||||||
t: (str) => str,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
);
|
|
||||||
const submit = wrapper.find('.btn-primary.modal-container__footer-button');
|
|
||||||
submit.simulate('click');
|
|
||||||
|
|
||||||
expect(props.onSubmit.calledOnce).toStrictEqual(true);
|
const { queryByText } = renderWithProvider(
|
||||||
expect(props.hideModal.calledOnce).toStrictEqual(true);
|
<TransactionConfirmed.WrappedComponent {...props} />,
|
||||||
|
);
|
||||||
|
|
||||||
|
fireEvent.click(queryByText('[ok]'));
|
||||||
|
|
||||||
|
expect(props.onSubmit).toHaveBeenCalled();
|
||||||
|
expect(props.hideModal).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -0,0 +1,56 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`SelectedAccount Component should match snapshot 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="selected-account"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="selected-account__tooltip-wrapper"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-describedby="tippy-tooltip-1"
|
||||||
|
class=""
|
||||||
|
data-original-title="Copy to clipboard"
|
||||||
|
data-tooltipped=""
|
||||||
|
style="display: inline;"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="selected-account__clickable"
|
||||||
|
data-testid="selected-account-click"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="selected-account__name"
|
||||||
|
>
|
||||||
|
Test Account
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="selected-account__address"
|
||||||
|
>
|
||||||
|
0x0DC...E7bc
|
||||||
|
<div
|
||||||
|
class="selected-account__copy"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
height="11"
|
||||||
|
viewBox="0 0 11 11"
|
||||||
|
width="11"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M0 0H1H9V1H1V9H0V0ZM2 2H11V11H2V2ZM3 3H10V10H3V3Z"
|
||||||
|
fill="var(--color-icon-alternative)"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,24 +1,32 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { render } from 'enzyme';
|
import configureMockStore from 'redux-mock-store';
|
||||||
import SelectedAccount from './selected-account.component';
|
import copyToClipboard from 'copy-to-clipboard';
|
||||||
|
import { fireEvent } from '@testing-library/react';
|
||||||
|
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||||
|
import mockState from '../../../../test/data/mock-state.json';
|
||||||
|
import SelectedAccount from '.';
|
||||||
|
|
||||||
|
jest.mock('copy-to-clipboard');
|
||||||
|
|
||||||
describe('SelectedAccount Component', () => {
|
describe('SelectedAccount Component', () => {
|
||||||
it('should render checksummed address', () => {
|
const mockStore = configureMockStore()(mockState);
|
||||||
const wrapper = render(
|
|
||||||
<SelectedAccount
|
it('should match snapshot', () => {
|
||||||
selectedIdentity={{
|
const { container } = renderWithProvider(<SelectedAccount />, mockStore);
|
||||||
name: 'testName',
|
|
||||||
address: '0x1b82543566f41a7db9a9a75fc933c340ffb55c9d',
|
expect(container).toMatchSnapshot();
|
||||||
}}
|
});
|
||||||
/>,
|
|
||||||
{ context: { t: () => undefined } },
|
it('should copy checksum address to clipboard when button is clicked', () => {
|
||||||
|
const { queryByTestId } = renderWithProvider(
|
||||||
|
<SelectedAccount />,
|
||||||
|
mockStore,
|
||||||
);
|
);
|
||||||
// Checksummed version of address is displayed
|
|
||||||
expect(wrapper.find('.selected-account__address').text()).toStrictEqual(
|
fireEvent.click(queryByTestId('selected-account-click'));
|
||||||
'0x1B8...5C9D',
|
|
||||||
);
|
expect(copyToClipboard).toHaveBeenCalledWith(
|
||||||
expect(wrapper.find('.selected-account__name').text()).toStrictEqual(
|
'0x0DCD5D886577d5081B0c52e242Ef29E70Be3E7bc',
|
||||||
'testName',
|
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -48,6 +48,7 @@ class SelectedAccount extends Component {
|
|||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className="selected-account__clickable"
|
className="selected-account__clickable"
|
||||||
|
data-testid="selected-account-click"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
this.setState({ copied: true });
|
this.setState({ copied: true });
|
||||||
this.copyTimeout = setTimeout(
|
this.copyTimeout = setTimeout(
|
||||||
|
|||||||
@ -0,0 +1,105 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Token Cell should match snapshot 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="list-item asset-list-item token-cell"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="list-item__icon"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="identicon token-cell__icon"
|
||||||
|
style="height: 32px; width: 32px; border-radius: 16px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(1, 119, 142);"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
height="32"
|
||||||
|
width="32"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
fill="#234CE1"
|
||||||
|
height="32"
|
||||||
|
transform="translate(-6.755009921344284 0.22970804166999115) rotate(257.8 16 16)"
|
||||||
|
width="32"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
fill="#03445E"
|
||||||
|
height="32"
|
||||||
|
transform="translate(-16.888022167332927 0.15842627027688103) rotate(219.9 16 16)"
|
||||||
|
width="32"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
fill="#F96001"
|
||||||
|
height="32"
|
||||||
|
transform="translate(-7.464671435864012 -28.483778328962412) rotate(303.1 16 16)"
|
||||||
|
width="32"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="list-item__heading"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="asset-list-item__token-button"
|
||||||
|
data-testid="token-button"
|
||||||
|
title="5.000 TEST"
|
||||||
|
>
|
||||||
|
<h2>
|
||||||
|
<span
|
||||||
|
class="asset-list-item__token-value"
|
||||||
|
>
|
||||||
|
5.000
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="asset-list-item__token-symbol"
|
||||||
|
>
|
||||||
|
TEST
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="list-item__subheading"
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
title="$0.52 USD"
|
||||||
|
>
|
||||||
|
$0.52 USD
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="list-item__right-content"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="fas fa-chevron-right asset-list-item__chevron-right"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
class="button btn-link asset-list-item__send-token-button"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
Send TEST
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,18 +1,12 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import thunk from 'redux-thunk';
|
import thunk from 'redux-thunk';
|
||||||
import { Provider } from 'react-redux';
|
|
||||||
import configureMockStore from 'redux-mock-store';
|
import configureMockStore from 'redux-mock-store';
|
||||||
import { mount } from 'enzyme';
|
import { fireEvent } from '@testing-library/react';
|
||||||
import sinon from 'sinon';
|
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||||
import { MemoryRouter } from 'react-router-dom';
|
|
||||||
|
|
||||||
import Identicon from '../../ui/identicon';
|
|
||||||
import TokenCell from '.';
|
import TokenCell from '.';
|
||||||
|
|
||||||
describe('Token Cell', () => {
|
describe('Token Cell', () => {
|
||||||
let wrapper;
|
const mockState = {
|
||||||
|
|
||||||
const state = {
|
|
||||||
metamask: {
|
metamask: {
|
||||||
currentCurrency: 'usd',
|
currentCurrency: 'usd',
|
||||||
selectedAddress: '0xAddress',
|
selectedAddress: '0xAddress',
|
||||||
@ -29,60 +23,33 @@ describe('Token Cell', () => {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const middlewares = [thunk];
|
const mockStore = configureMockStore([thunk])(mockState);
|
||||||
const mockStore = configureMockStore(middlewares);
|
|
||||||
const store = mockStore(state);
|
|
||||||
|
|
||||||
let onClick;
|
const props = {
|
||||||
|
address: '0xAnotherToken',
|
||||||
|
symbol: 'TEST',
|
||||||
|
string: '5.000',
|
||||||
|
currentCurrency: 'usd',
|
||||||
|
onClick: jest.fn(),
|
||||||
|
};
|
||||||
|
|
||||||
beforeEach(() => {
|
it('should match snapshot', () => {
|
||||||
onClick = sinon.stub();
|
const { container } = renderWithProvider(
|
||||||
wrapper = mount(
|
<TokenCell {...props} />,
|
||||||
<Provider store={store}>
|
mockStore,
|
||||||
<MemoryRouter>
|
|
||||||
<TokenCell
|
|
||||||
address="0xAnotherToken"
|
|
||||||
symbol="TEST"
|
|
||||||
string="5.000"
|
|
||||||
currentCurrency="usd"
|
|
||||||
onClick={onClick}
|
|
||||||
/>
|
|
||||||
</MemoryRouter>
|
|
||||||
</Provider>,
|
|
||||||
);
|
);
|
||||||
});
|
|
||||||
|
|
||||||
afterEach(() => {
|
expect(container).toMatchSnapshot();
|
||||||
sinon.restore();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders Identicon with props from token cell', () => {
|
|
||||||
expect(wrapper.find(Identicon).prop('address')).toStrictEqual(
|
|
||||||
'0xAnotherToken',
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders token balance', () => {
|
|
||||||
expect(wrapper.find('.asset-list-item__token-value').text()).toStrictEqual(
|
|
||||||
'5.000',
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders token symbol', () => {
|
|
||||||
expect(wrapper.find('.asset-list-item__token-symbol').text()).toStrictEqual(
|
|
||||||
'TEST',
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders converted fiat amount', () => {
|
|
||||||
expect(wrapper.find('.list-item__subheading').text()).toStrictEqual(
|
|
||||||
'$0.52 USD',
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('calls onClick when clicked', () => {
|
it('calls onClick when clicked', () => {
|
||||||
expect(!onClick.called).toStrictEqual(true);
|
const { queryByTestId } = renderWithProvider(
|
||||||
wrapper.simulate('click');
|
<TokenCell {...props} />,
|
||||||
expect(onClick.called).toStrictEqual(true);
|
mockStore,
|
||||||
|
);
|
||||||
|
|
||||||
|
fireEvent.click(queryByTestId('token-button'));
|
||||||
|
|
||||||
|
expect(props.onClick).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -0,0 +1,103 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`TransactionActivityLog Component should match snapshot 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log test-class"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log__title"
|
||||||
|
>
|
||||||
|
[activityLog]
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log__activities-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log__activity"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log-icon transaction-activity-log__activity-icon"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="fa transaction-activity-log-icon__icon fa-plus"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log__entry-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log__activity-text"
|
||||||
|
title="[transactionCreated]"
|
||||||
|
>
|
||||||
|
[transactionCreated]
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log__activity"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log-icon transaction-activity-log__activity-icon"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="fa transaction-activity-log-icon__icon fa-arrow-up"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log__entry-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log__activity-text"
|
||||||
|
title="[transactionSubmitted]"
|
||||||
|
>
|
||||||
|
[transactionSubmitted]
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log__activity"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log-icon transaction-activity-log__activity-icon"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="fa transaction-activity-log-icon__icon fa-retweet"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log__entry-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log__activity-text"
|
||||||
|
title="[transactionResubmitted]"
|
||||||
|
>
|
||||||
|
[transactionResubmitted]
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log__activity"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log-icon transaction-activity-log__activity-icon"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="fa transaction-activity-log-icon__icon fa-check"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log__entry-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="transaction-activity-log__activity-text"
|
||||||
|
title="[transactionConfirmed]"
|
||||||
|
>
|
||||||
|
[transactionConfirmed]
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,163 +1,55 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { shallow } from 'enzyme';
|
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||||
import TransactionActivityLog from './transaction-activity-log.component';
|
import TransactionActivityLog from '.';
|
||||||
|
|
||||||
describe('TransactionActivityLog Component', () => {
|
describe('TransactionActivityLog Component', () => {
|
||||||
it('should render properly', () => {
|
const activities = [
|
||||||
const activities = [
|
{
|
||||||
{
|
eventKey: 'transactionCreated',
|
||||||
eventKey: 'transactionCreated',
|
hash: '0xe46c7f9b39af2fbf1c53e66f72f80343ab54c2c6dba902d51fb98ada08fe1a63',
|
||||||
hash: '0xe46c7f9b39af2fbf1c53e66f72f80343ab54c2c6dba902d51fb98ada08fe1a63',
|
id: 2005383477493174,
|
||||||
id: 2005383477493174,
|
timestamp: 1543957986150,
|
||||||
timestamp: 1543957986150,
|
value: '0x2386f26fc10000',
|
||||||
value: '0x2386f26fc10000',
|
},
|
||||||
},
|
{
|
||||||
{
|
eventKey: 'transactionSubmitted',
|
||||||
eventKey: 'transactionSubmitted',
|
hash: '0xe46c7f9b39af2fbf1c53e66f72f80343ab54c2c6dba902d51fb98ada08fe1a63',
|
||||||
hash: '0xe46c7f9b39af2fbf1c53e66f72f80343ab54c2c6dba902d51fb98ada08fe1a63',
|
id: 2005383477493174,
|
||||||
id: 2005383477493174,
|
timestamp: 1543957987853,
|
||||||
timestamp: 1543957987853,
|
value: '0x1319718a5000',
|
||||||
value: '0x1319718a5000',
|
},
|
||||||
},
|
{
|
||||||
{
|
eventKey: 'transactionResubmitted',
|
||||||
eventKey: 'transactionResubmitted',
|
hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87',
|
||||||
hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87',
|
id: 2005383477493175,
|
||||||
id: 2005383477493175,
|
timestamp: 1543957991563,
|
||||||
timestamp: 1543957991563,
|
value: '0x1502634b5800',
|
||||||
value: '0x1502634b5800',
|
},
|
||||||
},
|
{
|
||||||
{
|
eventKey: 'transactionConfirmed',
|
||||||
eventKey: 'transactionConfirmed',
|
hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87',
|
||||||
hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87',
|
id: 2005383477493175,
|
||||||
id: 2005383477493175,
|
timestamp: 1543958029960,
|
||||||
timestamp: 1543958029960,
|
value: '0x1502634b5800',
|
||||||
value: '0x1502634b5800',
|
},
|
||||||
},
|
];
|
||||||
];
|
|
||||||
|
|
||||||
const wrapper = shallow(
|
const props = {
|
||||||
<TransactionActivityLog
|
activities,
|
||||||
activities={activities}
|
className: 'test-class',
|
||||||
className="test-class"
|
inlineRetryIndex: -1,
|
||||||
inlineRetryIndex={-1}
|
inlineCancelIndex: -1,
|
||||||
inlineCancelIndex={-1}
|
nativeCurrency: 'ETH',
|
||||||
nativeCurrency="ETH"
|
onCancel: jest.fn(),
|
||||||
onCancel={() => undefined}
|
onRetry: jest.fn(),
|
||||||
onRetry={() => undefined}
|
primaryTransactionStatus: 'confirmed',
|
||||||
primaryTransactionStatus="confirmed"
|
};
|
||||||
/>,
|
|
||||||
{ context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } },
|
it('should match snapshot', () => {
|
||||||
|
const { container } = renderWithProvider(
|
||||||
|
<TransactionActivityLog.WrappedComponent {...props} />,
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(wrapper.hasClass('transaction-activity-log')).toStrictEqual(true);
|
expect(container).toMatchSnapshot();
|
||||||
expect(wrapper.hasClass('test-class')).toStrictEqual(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render inline retry and cancel buttons for earliest pending transaction', () => {
|
|
||||||
const activities = [
|
|
||||||
{
|
|
||||||
eventKey: 'transactionCreated',
|
|
||||||
hash: '0xa',
|
|
||||||
id: 1,
|
|
||||||
timestamp: 1,
|
|
||||||
value: '0x1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
eventKey: 'transactionSubmitted',
|
|
||||||
hash: '0xa',
|
|
||||||
id: 1,
|
|
||||||
timestamp: 2,
|
|
||||||
value: '0x1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
eventKey: 'transactionResubmitted',
|
|
||||||
hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87',
|
|
||||||
id: 2,
|
|
||||||
timestamp: 3,
|
|
||||||
value: '0x1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
eventKey: 'transactionCancelAttempted',
|
|
||||||
hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87',
|
|
||||||
id: 3,
|
|
||||||
timestamp: 4,
|
|
||||||
value: '0x1',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const wrapper = shallow(
|
|
||||||
<TransactionActivityLog
|
|
||||||
activities={activities}
|
|
||||||
className="test-class"
|
|
||||||
inlineRetryIndex={2}
|
|
||||||
inlineCancelIndex={3}
|
|
||||||
nativeCurrency="ETH"
|
|
||||||
onCancel={() => undefined}
|
|
||||||
onRetry={() => undefined}
|
|
||||||
primaryTransactionStatus="pending"
|
|
||||||
isEarliestNonce
|
|
||||||
/>,
|
|
||||||
{ context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } },
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(wrapper.hasClass('transaction-activity-log')).toStrictEqual(true);
|
|
||||||
expect(wrapper.hasClass('test-class')).toStrictEqual(true);
|
|
||||||
expect(wrapper.find('.transaction-activity-log__action-link')).toHaveLength(
|
|
||||||
2,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should not render inline retry and cancel buttons for newer pending transactions', () => {
|
|
||||||
const activities = [
|
|
||||||
{
|
|
||||||
eventKey: 'transactionCreated',
|
|
||||||
hash: '0xa',
|
|
||||||
id: 1,
|
|
||||||
timestamp: 1,
|
|
||||||
value: '0x1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
eventKey: 'transactionSubmitted',
|
|
||||||
hash: '0xa',
|
|
||||||
id: 1,
|
|
||||||
timestamp: 2,
|
|
||||||
value: '0x1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
eventKey: 'transactionResubmitted',
|
|
||||||
hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87',
|
|
||||||
id: 2,
|
|
||||||
timestamp: 3,
|
|
||||||
value: '0x1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
eventKey: 'transactionCancelAttempted',
|
|
||||||
hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87',
|
|
||||||
id: 3,
|
|
||||||
timestamp: 4,
|
|
||||||
value: '0x1',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const wrapper = shallow(
|
|
||||||
<TransactionActivityLog
|
|
||||||
activities={activities}
|
|
||||||
className="test-class"
|
|
||||||
inlineRetryIndex={2}
|
|
||||||
inlineCancelIndex={3}
|
|
||||||
nativeCurrency="ETH"
|
|
||||||
onCancel={() => undefined}
|
|
||||||
onRetry={() => undefined}
|
|
||||||
primaryTransactionStatus="pending"
|
|
||||||
isEarliestNonce={false}
|
|
||||||
/>,
|
|
||||||
{ context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } },
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(wrapper.hasClass('transaction-activity-log')).toStrictEqual(true);
|
|
||||||
expect(wrapper.hasClass('test-class')).toStrictEqual(true);
|
|
||||||
expect(wrapper.find('.transaction-activity-log__action-link')).toHaveLength(
|
|
||||||
0,
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
15
ui/components/ui/alert/__snapshots__/index.test.js.snap
Normal file
15
ui/components/ui/alert/__snapshots__/index.test.js.snap
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Alert renders nothing with no visible boolean in state 1`] = `<div />`;
|
||||||
|
|
||||||
|
exports[`Alert renders with visible boolean in state 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="global-alert visible"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="msg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,16 +1,25 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { shallow } from 'enzyme';
|
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||||
import Alert from '.';
|
import Alert from '.';
|
||||||
|
|
||||||
describe('Alert', () => {
|
describe('Alert', () => {
|
||||||
let wrapper;
|
it('renders nothing with no visible boolean in state', () => {
|
||||||
|
const props = {
|
||||||
|
visible: false,
|
||||||
|
};
|
||||||
|
|
||||||
beforeEach(() => {
|
const { container } = renderWithProvider(<Alert {...props} />);
|
||||||
wrapper = shallow(<Alert visible={false} />);
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders nothing with no visible boolean in state', () => {
|
it('renders with visible boolean in state', () => {
|
||||||
const alert = wrapper.find('.global-alert');
|
const props = {
|
||||||
expect(alert).toHaveLength(0);
|
visible: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
const { container } = renderWithProvider(<Alert {...props} />);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
92
ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
Normal file
92
ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Reveal Seed Page should match snapshot 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="page-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="page-container__header"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="page-container__title"
|
||||||
|
>
|
||||||
|
Secret Recovery Phrase
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="page-container__subtitle"
|
||||||
|
>
|
||||||
|
If you ever change browsers or move computers, you will need this Secret Recovery Phrase to access your accounts. Save them somewhere safe and secret.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="page-container__content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="page-container__warning-container"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="fa fa-exclamation-triangle fa-2x page-container__warning-icon"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="page-container__warning-message"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="page-container__warning-title"
|
||||||
|
>
|
||||||
|
DO NOT share this phrase with anyone!
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
These words can be used to steal all your accounts.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="reveal-seed__content"
|
||||||
|
>
|
||||||
|
<form>
|
||||||
|
<label
|
||||||
|
class="input-label"
|
||||||
|
for="password-box"
|
||||||
|
>
|
||||||
|
Enter password to continue
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="input-group"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="form-control"
|
||||||
|
data-testid="input-password"
|
||||||
|
id="password-box"
|
||||||
|
placeholder="Password"
|
||||||
|
type="password"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="page-container__footer"
|
||||||
|
>
|
||||||
|
<footer>
|
||||||
|
<button
|
||||||
|
class="button btn--rounded btn-secondary btn--large page-container__footer-button"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="button btn--rounded btn-primary btn--large page-container__footer-button"
|
||||||
|
disabled=""
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -85,6 +85,7 @@ class RevealSeedPage extends Component {
|
|||||||
</label>
|
</label>
|
||||||
<div className="input-group">
|
<div className="input-group">
|
||||||
<input
|
<input
|
||||||
|
data-testid="input-password"
|
||||||
type="password"
|
type="password"
|
||||||
placeholder={t('password')}
|
placeholder={t('password')}
|
||||||
id="password-box"
|
id="password-box"
|
||||||
|
|||||||
@ -1,24 +1,42 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import sinon from 'sinon';
|
import configureMockStore from 'redux-mock-store';
|
||||||
import { mount } from 'enzyme';
|
import { fireEvent } from '@testing-library/react';
|
||||||
|
import thunk from 'redux-thunk';
|
||||||
|
import { renderWithProvider } from '../../../test/lib/render-helpers';
|
||||||
import RevealSeedPage from './reveal-seed';
|
import RevealSeedPage from './reveal-seed';
|
||||||
|
|
||||||
|
const mockRequestRevealSeedWords = jest.fn().mockResolvedValue();
|
||||||
|
|
||||||
|
jest.mock('../../store/actions.js', () => ({
|
||||||
|
requestRevealSeedWords: () => mockRequestRevealSeedWords,
|
||||||
|
}));
|
||||||
|
|
||||||
describe('Reveal Seed Page', () => {
|
describe('Reveal Seed Page', () => {
|
||||||
it('form submit', () => {
|
const mockState = {
|
||||||
const props = {
|
history: {
|
||||||
history: {
|
|
||||||
push: sinon.spy(),
|
|
||||||
},
|
|
||||||
requestRevealSeedWords: sinon.stub().resolves(),
|
|
||||||
mostRecentOverviewPage: '/',
|
mostRecentOverviewPage: '/',
|
||||||
};
|
},
|
||||||
const wrapper = mount(<RevealSeedPage.WrappedComponent {...props} />, {
|
};
|
||||||
context: {
|
const mockStore = configureMockStore([thunk])(mockState);
|
||||||
t: (str) => str,
|
|
||||||
},
|
it('should match snapshot', () => {
|
||||||
|
const { container } = renderWithProvider(<RevealSeedPage />, mockStore);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('form submit', () => {
|
||||||
|
const { queryByTestId, queryByText } = renderWithProvider(
|
||||||
|
<RevealSeedPage />,
|
||||||
|
mockStore,
|
||||||
|
);
|
||||||
|
|
||||||
|
fireEvent.change(queryByTestId('input-password'), {
|
||||||
|
target: { value: 'password' },
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.find('form').simulate('submit');
|
fireEvent.click(queryByText('Next'));
|
||||||
expect(props.requestRevealSeedWords.calledOnce).toStrictEqual(true);
|
|
||||||
|
expect(mockRequestRevealSeedWords).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
101
ui/pages/unlock-page/__snapshots__/unlock-page.test.js.snap
Normal file
101
ui/pages/unlock-page/__snapshots__/unlock-page.test.js.snap
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Unlock Page should match snapshot 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="unlock-page__container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="unlock-page"
|
||||||
|
data-testid="unlock-page"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="unlock-page__mascot-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="z-index: 0;"
|
||||||
|
>
|
||||||
|
<svg />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h1
|
||||||
|
class="unlock-page__title"
|
||||||
|
>
|
||||||
|
Welcome back!
|
||||||
|
</h1>
|
||||||
|
<div>
|
||||||
|
The decentralized web awaits
|
||||||
|
</div>
|
||||||
|
<form
|
||||||
|
class="unlock-page__form"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="MuiFormLabel-root MuiInputLabel-root TextField-materialLabel-1 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink Mui-focused Mui-focused TextField-materialFocused-2"
|
||||||
|
data-shrink="true"
|
||||||
|
for="password"
|
||||||
|
id="password-label"
|
||||||
|
>
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
class="MuiInputBase-root MuiInput-root MuiInput-underline TextField-materialUnderline-3 MuiInputBase-fullWidth MuiInput-fullWidth Mui-focused Mui-focused MuiInputBase-formControl MuiInput-formControl"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-invalid="false"
|
||||||
|
autocomplete="current-password"
|
||||||
|
class="MuiInputBase-input MuiInput-input"
|
||||||
|
data-testid="unlock-password"
|
||||||
|
dir="auto"
|
||||||
|
id="password"
|
||||||
|
type="password"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<button
|
||||||
|
class="button btn--rounded btn-default"
|
||||||
|
data-testid="unlock-submit"
|
||||||
|
disabled=""
|
||||||
|
role="button"
|
||||||
|
style="margin-top: 20px; height: 60px; font-weight: 400; box-shadow: none; border-radius: 100px;"
|
||||||
|
tabindex="0"
|
||||||
|
variant="contained"
|
||||||
|
>
|
||||||
|
Unlock
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
class="unlock-page__links"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="button btn-link unlock-page__link"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
Forgot password?
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="unlock-page__support"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
|
||||||
|
Need help? Contact
|
||||||
|
<a
|
||||||
|
href="https://metamask-flask.zendesk.com/hc"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
MetaMask support
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -150,6 +150,7 @@ export default class UnlockPage extends Component {
|
|||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
data-testid="unlock-submit"
|
||||||
style={style}
|
style={style}
|
||||||
disabled={!this.state.password}
|
disabled={!this.state.password}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
@ -181,6 +182,7 @@ export default class UnlockPage extends Component {
|
|||||||
<form className="unlock-page__form" onSubmit={this.handleSubmit}>
|
<form className="unlock-page__form" onSubmit={this.handleSubmit}>
|
||||||
<TextField
|
<TextField
|
||||||
id="password"
|
id="password"
|
||||||
|
data-testid="unlock-password"
|
||||||
label={t('password')}
|
label={t('password')}
|
||||||
type="password"
|
type="password"
|
||||||
value={password}
|
value={password}
|
||||||
|
|||||||
@ -1,29 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import sinon from 'sinon';
|
|
||||||
import configureMockStore from 'redux-mock-store';
|
|
||||||
import { fireEvent } from '@testing-library/react';
|
|
||||||
import { renderWithProvider } from '../../../test/lib/render-helpers';
|
|
||||||
import UnlockPage from './unlock-page.component';
|
|
||||||
|
|
||||||
describe('Unlock Page Component', () => {
|
|
||||||
it('clicks imports seed button', () => {
|
|
||||||
const props = {
|
|
||||||
history: {
|
|
||||||
push: sinon.spy(),
|
|
||||||
},
|
|
||||||
isUnlocked: false,
|
|
||||||
onRestore: sinon.spy(),
|
|
||||||
onSubmit: sinon.spy(),
|
|
||||||
forceUpdateMetamaskState: sinon.spy(),
|
|
||||||
showOptInModal: sinon.spy(),
|
|
||||||
};
|
|
||||||
|
|
||||||
const { getByText } = renderWithProvider(
|
|
||||||
<UnlockPage {...props} />,
|
|
||||||
configureMockStore()({ metamask: { currentLocale: 'en' } }),
|
|
||||||
);
|
|
||||||
|
|
||||||
fireEvent.click(getByText('Forgot password?'));
|
|
||||||
expect(props.onRestore.calledOnce).toStrictEqual(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import sinon from 'sinon';
|
|
||||||
import { mount } from 'enzyme';
|
|
||||||
import UnlockPage from './unlock-page.container';
|
|
||||||
|
|
||||||
describe('Unlock Page', () => {
|
|
||||||
let wrapper;
|
|
||||||
|
|
||||||
const props = {
|
|
||||||
history: {
|
|
||||||
push: sinon.spy(),
|
|
||||||
},
|
|
||||||
isUnlocked: false,
|
|
||||||
onRestore: sinon.spy(),
|
|
||||||
onSubmit: sinon.spy(),
|
|
||||||
forceUpdateMetamaskState: sinon.spy(),
|
|
||||||
showOptInModal: sinon.spy(),
|
|
||||||
};
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
wrapper = mount(<UnlockPage.WrappedComponent {...props} />, {
|
|
||||||
context: {
|
|
||||||
t: (str) => str,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
afterAll(() => {
|
|
||||||
sinon.restore();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('renders', () => {
|
|
||||||
expect(wrapper).toHaveLength(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('changes password and submits', () => {
|
|
||||||
const passwordField = wrapper.find({ type: 'password', id: 'password' });
|
|
||||||
const loginButton = wrapper.find({ type: 'submit' }).last();
|
|
||||||
|
|
||||||
const event = { target: { value: 'password' } };
|
|
||||||
expect(wrapper.instance().state.password).toStrictEqual('');
|
|
||||||
passwordField.last().simulate('change', event);
|
|
||||||
expect(wrapper.instance().state.password).toStrictEqual('password');
|
|
||||||
|
|
||||||
loginButton.simulate('click');
|
|
||||||
expect(props.onSubmit.calledOnce).toStrictEqual(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
65
ui/pages/unlock-page/unlock-page.test.js
Normal file
65
ui/pages/unlock-page/unlock-page.test.js
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import configureMockStore from 'redux-mock-store';
|
||||||
|
import { fireEvent } from '@testing-library/react';
|
||||||
|
import thunk from 'redux-thunk';
|
||||||
|
import { renderWithProvider } from '../../../test/lib/render-helpers';
|
||||||
|
import UnlockPage from '.';
|
||||||
|
|
||||||
|
const mockMarkPasswordForgotten = jest.fn();
|
||||||
|
|
||||||
|
jest.mock('../../store/actions.js', () => ({
|
||||||
|
markPasswordForgotten: () => mockMarkPasswordForgotten,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mockElement = document.createElement('svg');
|
||||||
|
|
||||||
|
jest.mock('@metamask/logo', () => () => {
|
||||||
|
return {
|
||||||
|
container: mockElement,
|
||||||
|
setFollowMouse: jest.fn(),
|
||||||
|
stopAnimation: jest.fn(),
|
||||||
|
lookAt: jest.fn(),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Unlock Page', () => {
|
||||||
|
const mockState = {
|
||||||
|
metamask: {},
|
||||||
|
};
|
||||||
|
const mockStore = configureMockStore([thunk])(mockState);
|
||||||
|
|
||||||
|
it('should match snapshot', () => {
|
||||||
|
const { container } = renderWithProvider(<UnlockPage />, mockStore);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('changes password and submits', () => {
|
||||||
|
const props = {
|
||||||
|
onSubmit: jest.fn(),
|
||||||
|
};
|
||||||
|
|
||||||
|
const { queryByTestId } = renderWithProvider(
|
||||||
|
<UnlockPage {...props} />,
|
||||||
|
mockStore,
|
||||||
|
);
|
||||||
|
|
||||||
|
const passwordField = queryByTestId('unlock-password');
|
||||||
|
const loginButton = queryByTestId('unlock-submit');
|
||||||
|
|
||||||
|
fireEvent.change(passwordField, { target: { value: 'a-password' } });
|
||||||
|
expect(passwordField).toHaveAttribute('value', 'a-password');
|
||||||
|
|
||||||
|
fireEvent.click(loginButton);
|
||||||
|
|
||||||
|
expect(props.onSubmit).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('clicks imports seed button', () => {
|
||||||
|
const { getByText } = renderWithProvider(<UnlockPage />, mockStore);
|
||||||
|
|
||||||
|
fireEvent.click(getByText('Forgot password?'));
|
||||||
|
|
||||||
|
expect(mockMarkPasswordForgotten).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user