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 (#16175)
* Add transaction activity log component * Remove duplicate tx activity log snapshot. * Convert tx breakdown row to tlr. * Convert tx status component to tlr. * Convert User Preferenced Currency Display test to tlr. * Consolidate and convert user-preferenced-currency-input.test.js to tlr. * Consolidate and convert user-preferenced-token-input test to tlr.
This commit is contained in:
Thomas Huang
GitHub
parent
4581a3ac77
commit
8075a39567
@ -0,0 +1,29 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`TransactionBreakdownRow Component should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="transaction-breakdown-row test-class"
|
||||
data-testid="transaction-breakdown-row"
|
||||
>
|
||||
<div
|
||||
class="transaction-breakdown-row__title"
|
||||
data-testid="transaction-breakdown-row-title"
|
||||
>
|
||||
test
|
||||
</div>
|
||||
<div
|
||||
class="transaction-breakdown-row__value"
|
||||
data-testid="transaction-breakdown-row-value"
|
||||
>
|
||||
<button
|
||||
class="button btn--rounded btn-default"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,40 +1,21 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { renderWithProvider } from '../../../../../test/lib/render-helpers';
|
||||
import Button from '../../../ui/button';
|
||||
import TransactionBreakdownRow from './transaction-breakdown-row.component';
|
||||
import TransactionBreakdownRow from '.';
|
||||
|
||||
describe('TransactionBreakdownRow Component', () => {
|
||||
it('should render text properly', () => {
|
||||
const wrapper = shallow(
|
||||
<TransactionBreakdownRow title="test" className="test-class">
|
||||
Test
|
||||
</TransactionBreakdownRow>,
|
||||
{ context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } },
|
||||
);
|
||||
it('should match snapshot', () => {
|
||||
const props = {
|
||||
title: 'test',
|
||||
className: 'test-class',
|
||||
};
|
||||
|
||||
expect(wrapper.hasClass('transaction-breakdown-row')).toStrictEqual(true);
|
||||
expect(
|
||||
wrapper.find('.transaction-breakdown-row__title').text(),
|
||||
).toStrictEqual('test');
|
||||
expect(
|
||||
wrapper.find('.transaction-breakdown-row__value').text(),
|
||||
).toStrictEqual('Test');
|
||||
});
|
||||
|
||||
it('should render components properly', () => {
|
||||
const wrapper = shallow(
|
||||
<TransactionBreakdownRow title="test" className="test-class">
|
||||
const { container } = renderWithProvider(
|
||||
<TransactionBreakdownRow {...props}>
|
||||
<Button onClick={() => undefined}>Button</Button>
|
||||
</TransactionBreakdownRow>,
|
||||
{ context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } },
|
||||
);
|
||||
|
||||
expect(wrapper.hasClass('transaction-breakdown-row')).toStrictEqual(true);
|
||||
expect(
|
||||
wrapper.find('.transaction-breakdown-row__title').text(),
|
||||
).toStrictEqual('test');
|
||||
expect(
|
||||
wrapper.find('.transaction-breakdown-row__value').find(Button),
|
||||
).toHaveLength(1);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,60 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`TransactionStatus Component should render CONFIRMED properly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="transaction-status transaction-status--confirmed"
|
||||
>
|
||||
June 1
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`TransactionStatus Component should render PENDING properly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="transaction-status transaction-status--pending transaction-status--pending"
|
||||
>
|
||||
[pending]
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`TransactionStatus Component should render PENDING properly when status is APPROVED 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="transaction-status transaction-status--pending transaction-status--pending"
|
||||
>
|
||||
<div
|
||||
aria-describedby="tippy-tooltip-1"
|
||||
class=""
|
||||
data-original-title="test-title"
|
||||
data-tooltipped=""
|
||||
style="display: inline;"
|
||||
tabindex="0"
|
||||
>
|
||||
[pending]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`TransactionStatus Component should render QUEUED properly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="transaction-status transaction-status--queued transaction-status--queued"
|
||||
>
|
||||
[queued]
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`TransactionStatus Component should render UNAPPROVED properly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="transaction-status transaction-status--unapproved transaction-status--unapproved"
|
||||
>
|
||||
[unapproved]
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,63 +1,62 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import sinon from 'sinon';
|
||||
import * as i18nHook from '../../../hooks/useI18nContext';
|
||||
import Tooltip from '../../ui/tooltip';
|
||||
import TransactionStatus from './transaction-status.component';
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||
import TransactionStatus from '.';
|
||||
|
||||
describe('TransactionStatus Component', () => {
|
||||
beforeAll(() => {
|
||||
sinon.stub(i18nHook, 'useI18nContext').returns((str) => str.toUpperCase());
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
sinon.restore();
|
||||
});
|
||||
|
||||
it('should render CONFIRMED properly', () => {
|
||||
const wrapper = mount(
|
||||
<TransactionStatus status="confirmed" date="June 1" />,
|
||||
const confirmedProps = {
|
||||
status: 'confirmed',
|
||||
date: 'June 1',
|
||||
};
|
||||
|
||||
const { container } = renderWithProvider(
|
||||
<TransactionStatus {...confirmedProps} />,
|
||||
);
|
||||
|
||||
expect(wrapper.find(TransactionStatus)).toHaveLength(1);
|
||||
expect(wrapper.text()).toStrictEqual('June 1');
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render PENDING properly when status is APPROVED', () => {
|
||||
const wrapper = mount(
|
||||
<TransactionStatus
|
||||
status="approved"
|
||||
isEarliestNonce
|
||||
error={{ message: 'test-title' }}
|
||||
/>,
|
||||
);
|
||||
const props = {
|
||||
status: 'approved',
|
||||
isEarliestNonce: true,
|
||||
error: { message: 'test-title' },
|
||||
};
|
||||
|
||||
expect(wrapper.text()).toStrictEqual('PENDING');
|
||||
expect(wrapper.find(Tooltip).props().title).toStrictEqual('test-title');
|
||||
const { container } = renderWithProvider(<TransactionStatus {...props} />);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render PENDING properly', () => {
|
||||
const wrapper = mount(
|
||||
<TransactionStatus date="June 1" status="submitted" isEarliestNonce />,
|
||||
);
|
||||
const props = {
|
||||
date: 'June 1',
|
||||
status: 'submitted',
|
||||
isEarliestNonce: true,
|
||||
};
|
||||
|
||||
expect(wrapper.find(TransactionStatus)).toHaveLength(1);
|
||||
expect(wrapper.text()).toStrictEqual('PENDING');
|
||||
const { container } = renderWithProvider(<TransactionStatus {...props} />);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render QUEUED properly', () => {
|
||||
const wrapper = mount(<TransactionStatus status="queued" />);
|
||||
const props = {
|
||||
status: 'queued',
|
||||
};
|
||||
|
||||
expect(wrapper.find(TransactionStatus)).toHaveLength(1);
|
||||
expect(wrapper.find('.transaction-status--queued')).toHaveLength(1);
|
||||
expect(wrapper.text()).toStrictEqual('QUEUED');
|
||||
const { container } = renderWithProvider(<TransactionStatus {...props} />);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render UNAPPROVED properly', () => {
|
||||
const wrapper = mount(<TransactionStatus status="unapproved" />);
|
||||
const props = {
|
||||
status: 'unapproved',
|
||||
};
|
||||
|
||||
expect(wrapper.find(TransactionStatus)).toHaveLength(1);
|
||||
expect(wrapper.find('.transaction-status--unapproved')).toHaveLength(1);
|
||||
expect(wrapper.text()).toStrictEqual('UNAPPROVED');
|
||||
const { container } = renderWithProvider(<TransactionStatus {...props} />);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`UserPreferencedCurrencyDisplay Component rendering should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="currency-display-component"
|
||||
title="0 ETH"
|
||||
>
|
||||
<span
|
||||
class="currency-display-component__prefix"
|
||||
/>
|
||||
<span
|
||||
class="currency-display-component__text"
|
||||
>
|
||||
0
|
||||
</span>
|
||||
<span
|
||||
class="currency-display-component__suffix"
|
||||
>
|
||||
ETH
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,41 +0,0 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import sinon from 'sinon';
|
||||
import CurrencyDisplay from '../../ui/currency-display';
|
||||
import * as currencyHook from '../../../hooks/useCurrencyDisplay';
|
||||
import * as currencyPrefHook from '../../../hooks/useUserPreferencedCurrency';
|
||||
import UserPreferencedCurrencyDisplay from '.';
|
||||
|
||||
describe('UserPreferencedCurrencyDisplay Component', () => {
|
||||
describe('rendering', () => {
|
||||
beforeEach(() => {
|
||||
sinon.stub(currencyHook, 'useCurrencyDisplay').returns(['1', {}]);
|
||||
sinon
|
||||
.stub(currencyPrefHook, 'useUserPreferencedCurrency')
|
||||
.returns({ currency: 'ETH', decimals: 6 });
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
sinon.restore();
|
||||
});
|
||||
|
||||
it('should render properly', () => {
|
||||
const wrapper = shallow(<UserPreferencedCurrencyDisplay />);
|
||||
|
||||
expect(wrapper).toHaveLength(1);
|
||||
expect(wrapper.find(CurrencyDisplay)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should pass all props to the CurrencyDisplay child component', () => {
|
||||
const wrapper = shallow(
|
||||
<UserPreferencedCurrencyDisplay prop1 prop2="test" prop3={1} />,
|
||||
);
|
||||
|
||||
expect(wrapper).toHaveLength(1);
|
||||
expect(wrapper.find(CurrencyDisplay)).toHaveLength(1);
|
||||
expect(wrapper.find(CurrencyDisplay).props().prop1).toStrictEqual(true);
|
||||
expect(wrapper.find(CurrencyDisplay).props().prop2).toStrictEqual('test');
|
||||
expect(wrapper.find(CurrencyDisplay).props().prop3).toStrictEqual(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import configureMockStore from 'redux-mock-store';
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||
import UserPreferencedCurrencyDisplay from '.';
|
||||
|
||||
describe('UserPreferencedCurrencyDisplay Component', () => {
|
||||
describe('rendering', () => {
|
||||
const mockState = {
|
||||
metamask: {
|
||||
provider: {
|
||||
chainId: '0x99',
|
||||
},
|
||||
preferences: {
|
||||
useNativeCurrencyAsPrimaryCurrency: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
const mockStore = configureMockStore()(mockState);
|
||||
|
||||
it('should match snapshot', () => {
|
||||
const { container } = renderWithProvider(
|
||||
<UserPreferencedCurrencyDisplay />,
|
||||
mockStore,
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,45 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`UserPreferencedCurrencyInput Component rendering should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="unit-input"
|
||||
>
|
||||
<div
|
||||
class="unit-input__inputs"
|
||||
>
|
||||
<div
|
||||
class="unit-input__input-container"
|
||||
>
|
||||
<input
|
||||
class="unit-input__input"
|
||||
data-testid="currency-input"
|
||||
dir="ltr"
|
||||
placeholder="0"
|
||||
style="width: 1.5ch;"
|
||||
type="number"
|
||||
value="0"
|
||||
/>
|
||||
<div
|
||||
class="unit-input__suffix"
|
||||
>
|
||||
ETH
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="currency-input__conversion-component"
|
||||
>
|
||||
No conversion rate available
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="currency-input__swap-component"
|
||||
data-testid="currency-swap"
|
||||
>
|
||||
<i
|
||||
class="fa fa-retweet fa-lg"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,31 +0,0 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import CurrencyInput from '../currency-input';
|
||||
import UserPreferencedCurrencyInput from './user-preferenced-currency-input.component';
|
||||
|
||||
describe('UserPreferencedCurrencyInput Component', () => {
|
||||
describe('rendering', () => {
|
||||
it('should render properly', () => {
|
||||
const wrapper = shallow(<UserPreferencedCurrencyInput />);
|
||||
|
||||
expect(wrapper).toHaveLength(1);
|
||||
expect(wrapper.find(CurrencyInput)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render featureSecondary for CurrencyInput based on preferences.useNativeCurrencyAsPrimaryCurrency', () => {
|
||||
const wrapper = shallow(
|
||||
<UserPreferencedCurrencyInput useNativeCurrencyAsPrimaryCurrency />,
|
||||
);
|
||||
|
||||
expect(wrapper).toHaveLength(1);
|
||||
expect(wrapper.find(CurrencyInput)).toHaveLength(1);
|
||||
expect(
|
||||
wrapper.find(CurrencyInput).props().featureSecondary,
|
||||
).toStrictEqual(false);
|
||||
wrapper.setProps({ useNativeCurrencyAsPrimaryCurrency: false });
|
||||
expect(
|
||||
wrapper.find(CurrencyInput).props().featureSecondary,
|
||||
).toStrictEqual(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,32 +0,0 @@
|
||||
/* eslint-disable import/unambiguous */
|
||||
let mapStateToProps;
|
||||
|
||||
jest.mock('react-redux', () => ({
|
||||
connect: (ms) => {
|
||||
mapStateToProps = ms;
|
||||
return () => ({});
|
||||
},
|
||||
}));
|
||||
|
||||
require('./user-preferenced-currency-input.container');
|
||||
|
||||
describe('UserPreferencedCurrencyInput container', () => {
|
||||
describe('mapStateToProps()', () => {
|
||||
it('should return the correct props', () => {
|
||||
const mockState = {
|
||||
metamask: {
|
||||
preferences: {
|
||||
useNativeCurrencyAsPrimaryCurrency: true,
|
||||
},
|
||||
},
|
||||
appState: {
|
||||
sendInputCurrencySwitched: false,
|
||||
},
|
||||
};
|
||||
expect(mapStateToProps(mockState)).toStrictEqual({
|
||||
useNativeCurrencyAsPrimaryCurrency: true,
|
||||
sendInputCurrencySwitched: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import configureMockStore from 'redux-mock-store';
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||
import mockState from '../../../../test/data/mock-state.json';
|
||||
import UserPreferencedCurrencyInput from '.';
|
||||
|
||||
describe('UserPreferencedCurrencyInput Component', () => {
|
||||
describe('rendering', () => {
|
||||
it('should match snapshot', () => {
|
||||
const mockStore = configureMockStore()(mockState);
|
||||
|
||||
const { container } = renderWithProvider(
|
||||
<UserPreferencedCurrencyInput />,
|
||||
mockStore,
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,31 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`UserPreferencedCurrencyInput Component rendering should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="unit-input"
|
||||
>
|
||||
<div
|
||||
class="unit-input__inputs"
|
||||
>
|
||||
<div
|
||||
class="unit-input__input-container"
|
||||
>
|
||||
<input
|
||||
class="unit-input__input"
|
||||
dir="ltr"
|
||||
placeholder="0"
|
||||
style="width: 1.5ch;"
|
||||
type="number"
|
||||
value="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="currency-input__conversion-component"
|
||||
>
|
||||
No conversion rate available
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,32 +0,0 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import TokenInput from '../../ui/token-input';
|
||||
import UserPreferencedTokenInput from './user-preferenced-token-input.component';
|
||||
|
||||
describe('UserPreferencedCurrencyInput Component', () => {
|
||||
describe('rendering', () => {
|
||||
it('should render properly', () => {
|
||||
const wrapper = shallow(
|
||||
<UserPreferencedTokenInput token={{ address: '0x0' }} />,
|
||||
);
|
||||
|
||||
expect(wrapper).toHaveLength(1);
|
||||
expect(wrapper.find(TokenInput)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should render showFiat for TokenInput based on preferences.useNativeCurrencyAsPrimaryCurrency', () => {
|
||||
const wrapper = shallow(
|
||||
<UserPreferencedTokenInput
|
||||
token={{ address: '0x0' }}
|
||||
useNativeCurrencyAsPrimaryCurrency
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(wrapper).toHaveLength(1);
|
||||
expect(wrapper.find(TokenInput)).toHaveLength(1);
|
||||
expect(wrapper.find(TokenInput).props().showFiat).toStrictEqual(false);
|
||||
wrapper.setProps({ useNativeCurrencyAsPrimaryCurrency: false });
|
||||
expect(wrapper.find(TokenInput).props().showFiat).toStrictEqual(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,29 +0,0 @@
|
||||
// eslint-disable-next-line import/unambiguous
|
||||
let mapStateToProps;
|
||||
|
||||
jest.mock('react-redux', () => ({
|
||||
connect: (ms) => {
|
||||
mapStateToProps = ms;
|
||||
return () => ({});
|
||||
},
|
||||
}));
|
||||
|
||||
require('./user-preferenced-token-input.container');
|
||||
|
||||
describe('UserPreferencedTokenInput container', () => {
|
||||
describe('mapStateToProps()', () => {
|
||||
it('should return the correct props', () => {
|
||||
const mockState = {
|
||||
metamask: {
|
||||
preferences: {
|
||||
useNativeCurrencyAsPrimaryCurrency: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
expect(mapStateToProps(mockState)).toStrictEqual({
|
||||
useNativeCurrencyAsPrimaryCurrency: true,
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import configureMockStore from 'redux-mock-store';
|
||||
import mockState from '../../../../test/data/mock-state.json';
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||
import UserPreferencedTokenInput from '.';
|
||||
|
||||
describe('UserPreferencedCurrencyInput Component', () => {
|
||||
describe('rendering', () => {
|
||||
const mockStore = configureMockStore()(mockState);
|
||||
|
||||
const props = {
|
||||
token: {
|
||||
address: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5',
|
||||
},
|
||||
};
|
||||
|
||||
it('should match snapshot', () => {
|
||||
const { container } = renderWithProvider(
|
||||
<UserPreferencedTokenInput {...props} />,
|
||||
mockStore,
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user