mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
Continue converting tests from enzyme to @testing-library/react (#16249)
This commit is contained in:
Thomas Huang
GitHub
parent
adad036466
commit
129ba1290e
@ -0,0 +1,36 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`AccountMismatchWarning should match snapshot of mismatch address warning 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="account-mismatch-warning__tooltip-wrapper"
|
||||
>
|
||||
<div
|
||||
aria-describedby="tippy-tooltip-1"
|
||||
class="account-mismatch-warning__tooltip-container"
|
||||
data-original-title="null"
|
||||
data-tooltipped=""
|
||||
style="display: inline;"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="account-mismatch-warning__tooltip-container-icon"
|
||||
>
|
||||
<svg
|
||||
class="info-icon info-icon--warning"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.2 5.6H8.8V4H7.2V5.6ZM8 14.4C4.472 14.4 1.6 11.528 1.6 8C1.6 4.472 4.472 1.6 8 1.6C11.528 1.6 14.4 4.472 14.4 8C14.4 11.528 11.528 14.4 8 14.4ZM8 0C6.94943 0 5.90914 0.206926 4.93853 0.608964C3.96793 1.011 3.08601 1.60028 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.08601 14.3997 3.96793 14.989 4.93853 15.391C5.90914 15.7931 6.94943 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 6.94943 15.7931 5.90914 15.391 4.93853C14.989 3.96793 14.3997 3.08601 13.6569 2.34315C12.914 1.60028 12.0321 1.011 11.0615 0.608964C10.0909 0.206926 9.05058 0 8 0ZM7.2 12H8.8V7.2H7.2V12Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`AccountMismatchWarning should match snapshot of no warning with same address and selected address 1`] = `<div />`;
|
||||
@ -1,35 +1,35 @@
|
||||
import React from 'react';
|
||||
import * as reactRedux from 'react-redux';
|
||||
import sinon from 'sinon';
|
||||
import { shallow } from 'enzyme';
|
||||
import InfoIcon from '../icon/info-icon.component';
|
||||
import { getSelectedAccount } from '../../../selectors';
|
||||
import configureMockStore from 'redux-mock-store';
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||
import mockState from '../../../../test/data/mock-state.json';
|
||||
import AccountMismatchWarning from './account-mismatch-warning.component';
|
||||
|
||||
describe('AccountMismatchWarning', () => {
|
||||
beforeAll(() => {
|
||||
sinon.stub(reactRedux, 'useSelector').callsFake((selector) => {
|
||||
if (selector === getSelectedAccount) {
|
||||
return { address: 'mockedAddress' };
|
||||
}
|
||||
throw new Error(
|
||||
`${selector.name} is not cared for in the AccountMismatchWarning test useSelector stub`,
|
||||
const mockStore = configureMockStore()(mockState);
|
||||
|
||||
it('should match snapshot of no warning with same address and selected address', () => {
|
||||
const props = {
|
||||
address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
|
||||
};
|
||||
|
||||
const { container } = renderWithProvider(
|
||||
<AccountMismatchWarning {...props} />,
|
||||
mockStore,
|
||||
);
|
||||
});
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
sinon.restore();
|
||||
});
|
||||
it('should match snapshot of mismatch address warning', () => {
|
||||
const props = {
|
||||
address: '0xNotSelectedAddress',
|
||||
};
|
||||
|
||||
it('renders nothing when the addresses match', () => {
|
||||
const wrapper = shallow(<AccountMismatchWarning address="mockedAddress" />);
|
||||
expect(wrapper.find(InfoIcon)).toHaveLength(0);
|
||||
});
|
||||
it('renders a warning info icon when addresses do not match', () => {
|
||||
const wrapper = shallow(
|
||||
<AccountMismatchWarning address="mockedAddress2" />,
|
||||
const { container } = renderWithProvider(
|
||||
<AccountMismatchWarning {...props} />,
|
||||
mockStore,
|
||||
);
|
||||
expect(wrapper.find(InfoIcon)).toHaveLength(1);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Breadcrumbs Component should match snapshot with multiple breakcumbs 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="breadcrumbs"
|
||||
>
|
||||
<div
|
||||
class="breadcrumb"
|
||||
/>
|
||||
<div
|
||||
class="breadcrumb"
|
||||
/>
|
||||
<div
|
||||
class="breadcrumb"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,22 +1,16 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import Breadcrumbs from './breadcrumbs.component';
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||
import Breadcrumbs from '.';
|
||||
|
||||
describe('Breadcrumbs Component', () => {
|
||||
it('should render with the correct colors', () => {
|
||||
const wrapper = shallow(<Breadcrumbs currentIndex={1} total={3} />);
|
||||
it('should match snapshot with multiple breakcumbs', () => {
|
||||
const props = {
|
||||
currentIndex: 1,
|
||||
total: 3,
|
||||
};
|
||||
|
||||
expect(wrapper).toHaveLength(1);
|
||||
expect(wrapper.find('.breadcrumbs')).toHaveLength(1);
|
||||
expect(wrapper.find('.breadcrumb')).toHaveLength(3);
|
||||
expect(
|
||||
wrapper.find('.breadcrumb').at(0).props().style.backgroundColor,
|
||||
).toStrictEqual('var(--color-background-default)');
|
||||
expect(
|
||||
wrapper.find('.breadcrumb').at(1).props().style.backgroundColor,
|
||||
).toStrictEqual('var(--color-background-alternative)');
|
||||
expect(
|
||||
wrapper.find('.breadcrumb').at(2).props().style.backgroundColor,
|
||||
).toStrictEqual('var(--color-background-default)');
|
||||
const { container } = renderWithProvider(<Breadcrumbs {...props} />);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,58 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Confusable component should detect homoglyphic unicode points 1`] = `
|
||||
<div>
|
||||
f
|
||||
a
|
||||
c
|
||||
e
|
||||
b
|
||||
o
|
||||
o
|
||||
k
|
||||
.
|
||||
e
|
||||
t
|
||||
h
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Confusable component should detect multiple homoglyphic unicode points 1`] = `
|
||||
<div>
|
||||
s
|
||||
c
|
||||
o
|
||||
p
|
||||
e
|
||||
.
|
||||
e
|
||||
t
|
||||
h
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Confusable component should detect zero-width unicode 1`] = `
|
||||
<div>
|
||||
v
|
||||
i
|
||||
t
|
||||
a
|
||||
l
|
||||
i
|
||||
k
|
||||
.
|
||||
e
|
||||
t
|
||||
h
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Confusable component should not detect emoji 1`] = `
|
||||
<div>
|
||||
👻
|
||||
.
|
||||
e
|
||||
t
|
||||
h
|
||||
</div>
|
||||
`;
|
||||
@ -1,25 +1,44 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import Confusable from './confusable.component';
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||
import Confusable from '.';
|
||||
|
||||
describe('Confusable component', () => {
|
||||
it('should detect zero-width unicode', () => {
|
||||
const wrapper = shallow(<Confusable input="vitalik.eth" />);
|
||||
expect(wrapper.find('.confusable__point')).toHaveLength(1);
|
||||
const props = {
|
||||
input: 'vitalik.eth',
|
||||
};
|
||||
|
||||
const { container } = renderWithProvider(<Confusable {...props} />);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should detect homoglyphic unicode points', () => {
|
||||
const wrapper = shallow(<Confusable input="faceboоk.eth" />);
|
||||
expect(wrapper.find('.confusable__point')).toHaveLength(1);
|
||||
const props = {
|
||||
input: 'facebook.eth',
|
||||
};
|
||||
|
||||
const { container } = renderWithProvider(<Confusable {...props} />);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should detect multiple homoglyphic unicode points', () => {
|
||||
const wrapper = shallow(<Confusable input="ѕсоре.eth" />);
|
||||
expect(wrapper.find('.confusable__point')).toHaveLength(5);
|
||||
const props = {
|
||||
input: 'scope.eth',
|
||||
};
|
||||
|
||||
const { container } = renderWithProvider(<Confusable {...props} />);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should not detect emoji', () => {
|
||||
const wrapper = shallow(<Confusable input="👻.eth" />);
|
||||
expect(wrapper.find('.confusable__point')).toHaveLength(0);
|
||||
const props = {
|
||||
input: '👻.eth',
|
||||
};
|
||||
|
||||
const { container } = renderWithProvider(<Confusable {...props} />);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,54 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`CurrencyDisplay Component should match default snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="currency-display-component"
|
||||
title="null"
|
||||
>
|
||||
<span
|
||||
class="currency-display-component__prefix"
|
||||
/>
|
||||
<span
|
||||
class="currency-display-component__text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`CurrencyDisplay Component should render text with a className 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="currency-display-component currency-display"
|
||||
title="$123.45"
|
||||
>
|
||||
<span
|
||||
class="currency-display-component__prefix"
|
||||
/>
|
||||
<span
|
||||
class="currency-display-component__text"
|
||||
>
|
||||
$123.45
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`CurrencyDisplay Component should render text with a prefix 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="currency-display-component currency-display"
|
||||
title="-$123.45"
|
||||
>
|
||||
<span
|
||||
class="currency-display-component__prefix"
|
||||
/>
|
||||
<span
|
||||
class="currency-display-component__text"
|
||||
>
|
||||
-
|
||||
$123.45
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,45 +1,46 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import sinon from 'sinon';
|
||||
import * as reactRedux from 'react-redux';
|
||||
import CurrencyDisplay from './currency-display.component';
|
||||
import configureMockStore from 'redux-mock-store';
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||
import mockState from '../../../../test/data/mock-state.json';
|
||||
import CurrencyDisplay from '.';
|
||||
|
||||
describe('CurrencyDisplay Component', () => {
|
||||
beforeEach(() => {
|
||||
const stub = sinon.stub(reactRedux, 'useSelector');
|
||||
stub.callsFake(() => ({
|
||||
currentCurrency: 'usd',
|
||||
nativeCurrency: 'ETH',
|
||||
conversionRate: 280.45,
|
||||
}));
|
||||
});
|
||||
afterEach(() => {
|
||||
sinon.restore();
|
||||
const mockStore = configureMockStore()(mockState);
|
||||
|
||||
it('should match default snapshot', () => {
|
||||
const { container } = renderWithProvider(<CurrencyDisplay />, mockStore);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render text with a className', () => {
|
||||
const wrapper = shallow(
|
||||
<CurrencyDisplay
|
||||
displayValue="$123.45"
|
||||
className="currency-display"
|
||||
hideLabel
|
||||
/>,
|
||||
const props = {
|
||||
displayValue: '$123.45',
|
||||
className: 'currency-display',
|
||||
hideLabel: true,
|
||||
};
|
||||
|
||||
const { container } = renderWithProvider(
|
||||
<CurrencyDisplay {...props} />,
|
||||
mockStore,
|
||||
);
|
||||
|
||||
expect(wrapper.hasClass('currency-display')).toStrictEqual(true);
|
||||
expect(wrapper.text()).toStrictEqual('$123.45');
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render text with a prefix', () => {
|
||||
const wrapper = shallow(
|
||||
<CurrencyDisplay
|
||||
displayValue="$123.45"
|
||||
className="currency-display"
|
||||
prefix="-"
|
||||
hideLabel
|
||||
/>,
|
||||
const props = {
|
||||
displayValue: '$123.45',
|
||||
className: 'currency-display',
|
||||
prefix: '-',
|
||||
hideLabel: true,
|
||||
};
|
||||
|
||||
const { container } = renderWithProvider(
|
||||
<CurrencyDisplay {...props} />,
|
||||
mockStore,
|
||||
);
|
||||
|
||||
expect(wrapper.hasClass('currency-display')).toStrictEqual(true);
|
||||
expect(wrapper.text()).toStrictEqual('-$123.45');
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,35 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ErrorMessage Component should render a message from props.errorMessage 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="error-message"
|
||||
>
|
||||
<i
|
||||
class="fa fa-exclamation-circle error-message__icon"
|
||||
/>
|
||||
<div
|
||||
class="error-message__text"
|
||||
>
|
||||
This is an error.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ErrorMessage Component should render a message translated from props.errorKey 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="error-message"
|
||||
>
|
||||
<i
|
||||
class="fa fa-exclamation-circle error-message__icon"
|
||||
/>
|
||||
<div
|
||||
class="error-message__text"
|
||||
>
|
||||
[testKey]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,33 +1,23 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import ErrorMessage from './error-message.component';
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||
import ErrorMessage from '.';
|
||||
|
||||
describe('ErrorMessage Component', () => {
|
||||
const t = (key) => `translate ${key}`;
|
||||
|
||||
it('should render a message from props.errorMessage', () => {
|
||||
const wrapper = shallow(<ErrorMessage errorMessage="This is an error." />, {
|
||||
context: { t },
|
||||
});
|
||||
const props = {
|
||||
errorMessage: 'This is an error.',
|
||||
};
|
||||
const { container } = renderWithProvider(<ErrorMessage {...props} />);
|
||||
|
||||
expect(wrapper).toHaveLength(1);
|
||||
expect(wrapper.find('.error-message')).toHaveLength(1);
|
||||
expect(wrapper.find('.error-message__icon')).toHaveLength(1);
|
||||
expect(wrapper.find('.error-message__text').text()).toStrictEqual(
|
||||
'This is an error.',
|
||||
);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render a message translated from props.errorKey', () => {
|
||||
const wrapper = shallow(<ErrorMessage errorKey="testKey" />, {
|
||||
context: { t },
|
||||
});
|
||||
const props = {
|
||||
errorKey: 'testKey',
|
||||
};
|
||||
const { container } = renderWithProvider(<ErrorMessage {...props} />);
|
||||
|
||||
expect(wrapper).toHaveLength(1);
|
||||
expect(wrapper.find('.error-message')).toHaveLength(1);
|
||||
expect(wrapper.find('.error-message__icon')).toHaveLength(1);
|
||||
expect(wrapper.find('.error-message__text').text()).toStrictEqual(
|
||||
'translate testKey',
|
||||
);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`HexToDecimal Component should render a prefixed hex as a decimal with a className 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="hex-to-decimal"
|
||||
>
|
||||
12345
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`HexToDecimal Component should render an unprefixed hex as a decimal with a className 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="hex-to-decimal"
|
||||
>
|
||||
6789
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,23 +1,27 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import HexToDecimal from './hex-to-decimal.component';
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||
import HexToDecimal from '.';
|
||||
|
||||
describe('HexToDecimal Component', () => {
|
||||
it('should render a prefixed hex as a decimal with a className', () => {
|
||||
const wrapper = shallow(
|
||||
<HexToDecimal value="0x3039" className="hex-to-decimal" />,
|
||||
);
|
||||
const props = {
|
||||
value: '0x3039',
|
||||
className: 'hex-to-decimal',
|
||||
};
|
||||
|
||||
expect(wrapper.hasClass('hex-to-decimal')).toStrictEqual(true);
|
||||
expect(wrapper.text()).toStrictEqual('12345');
|
||||
const { container } = renderWithProvider(<HexToDecimal {...props} />);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render an unprefixed hex as a decimal with a className', () => {
|
||||
const wrapper = shallow(
|
||||
<HexToDecimal value="1A85" className="hex-to-decimal" />,
|
||||
);
|
||||
const props = {
|
||||
value: '1A85',
|
||||
className: 'hex-to-decimal',
|
||||
};
|
||||
|
||||
expect(wrapper.hasClass('hex-to-decimal')).toStrictEqual(true);
|
||||
expect(wrapper.text()).toStrictEqual('6789');
|
||||
const { container } = renderWithProvider(<HexToDecimal {...props} />);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,135 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ListItem should match snapshot with no props 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="list-item list-item--single-content-row"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="list-item__heading"
|
||||
>
|
||||
<h2
|
||||
class="list-item__title"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`ListItem should match snapshot with props 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="list-item list-item-test"
|
||||
data-testid="test-id"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="list-item__icon"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="28"
|
||||
viewBox="0 0 30 30"
|
||||
width="28"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
height="29"
|
||||
rx="14.5"
|
||||
stroke="2F80ED"
|
||||
width="29"
|
||||
x="0.5"
|
||||
y="0.5"
|
||||
/>
|
||||
<path
|
||||
d="M18.5851 9.88921C18.5586 9.89005 18.5321 9.89238 18.5057 9.89618H14.3207C14.0635 9.89254 13.8243 10.0276 13.6947 10.2497C13.565 10.4719 13.565 10.7466 13.6947 10.9687C13.8243 11.1908 14.0635 11.3259 14.3207 11.3222H16.8777L9.53811 18.6614C9.35182 18.8402 9.27679 19.1058 9.34193 19.3557C9.40707 19.6056 9.60222 19.8007 9.85211 19.8658C10.102 19.931 10.3676 19.8559 10.5464 19.6697L17.886 12.3305V14.8874C17.8823 15.1445 18.0175 15.3837 18.2396 15.5133C18.4617 15.643 18.7364 15.643 18.9585 15.5133C19.1806 15.3837 19.3158 15.1445 19.3121 14.8874V10.6997C19.3409 10.4919 19.2767 10.282 19.1366 10.1259C18.9965 9.96973 18.7948 9.88316 18.5851 9.88921Z"
|
||||
fill="2F80ED"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="list-item__heading"
|
||||
>
|
||||
<h2
|
||||
class="list-item__title"
|
||||
>
|
||||
Hello World
|
||||
</h2>
|
||||
<div
|
||||
class="list-item__heading-wrap"
|
||||
>
|
||||
<svg
|
||||
class="preloader__icon"
|
||||
fill="none"
|
||||
height="28"
|
||||
viewBox="0 0 16 16"
|
||||
width="28"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M8 13.7143C4.84409 13.7143 2.28571 11.1559 2.28571 8C2.28571 4.84409 4.84409 2.28571 8 2.28571C11.1559 2.28571 13.7143 4.84409 13.7143 8C13.7143 11.1559 11.1559 13.7143 8 13.7143ZM8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"
|
||||
fill="#C1DAEC"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
<mask
|
||||
height="16"
|
||||
id="mask0"
|
||||
mask-type="alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
width="16"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M8 13.7143C4.84409 13.7143 2.28571 11.1559 2.28571 8C2.28571 4.84409 4.84409 2.28571 8 2.28571C11.1559 2.28571 13.7143 4.84409 13.7143 8C13.7143 11.1559 11.1559 13.7143 8 13.7143ZM8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16Z"
|
||||
fill="#037DD6"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</mask>
|
||||
<g
|
||||
mask="url(#mask0)"
|
||||
>
|
||||
<path
|
||||
d="M6.85718 17.9999V11.4285V8.28564H-4.85711V17.9999H6.85718Z"
|
||||
fill="#037DD6"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="list-item__subheading"
|
||||
>
|
||||
<p>
|
||||
I am a list item
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="list-item__actions"
|
||||
>
|
||||
<button>
|
||||
I am a button
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="list-item__mid-content"
|
||||
>
|
||||
<p>
|
||||
Content rendered in the middle
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="list-item__right-content"
|
||||
>
|
||||
<p>
|
||||
Content rendered to the right
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,6 +1,6 @@
|
||||
import { shallow } from 'enzyme';
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
import { fireEvent } from '@testing-library/react';
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||
import Preloader from '../icon/preloader/preloader-icon.component';
|
||||
import Send from '../icon/send-icon.component';
|
||||
import ListItem from './list-item.component';
|
||||
@ -13,68 +13,39 @@ const CHILDREN = <button>I am a button</button>;
|
||||
const MID_CONTENT = <p>Content rendered in the middle</p>;
|
||||
|
||||
describe('ListItem', () => {
|
||||
let wrapper;
|
||||
let clickHandler;
|
||||
beforeAll(() => {
|
||||
clickHandler = sinon.fake();
|
||||
wrapper = shallow(
|
||||
<ListItem
|
||||
className={CLASSNAME}
|
||||
title={TITLE}
|
||||
data-testid="test-id"
|
||||
subtitle={SUBTITLE}
|
||||
rightContent={RIGHT_CONTENT}
|
||||
midContent={MID_CONTENT}
|
||||
icon={<Send size={28} color="2F80ED" />}
|
||||
titleIcon={<Preloader size={28} />}
|
||||
onClick={clickHandler}
|
||||
>
|
||||
{CHILDREN}
|
||||
</ListItem>,
|
||||
);
|
||||
const props = {
|
||||
className: CLASSNAME,
|
||||
title: TITLE,
|
||||
'data-testid': 'test-id',
|
||||
subtitle: SUBTITLE,
|
||||
rightContent: RIGHT_CONTENT,
|
||||
midContent: MID_CONTENT,
|
||||
icon: <Send size={28} color="2F80ED" />,
|
||||
titleIcon: <Preloader size={28} />,
|
||||
onClick: jest.fn(),
|
||||
};
|
||||
|
||||
it('should match snapshot with no props', () => {
|
||||
const { container } = renderWithProvider(<ListItem />);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
sinon.restore();
|
||||
it('should match snapshot with props', () => {
|
||||
const { container } = renderWithProvider(
|
||||
<ListItem {...props}>{CHILDREN}</ListItem>,
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('includes the data-testid', () => {
|
||||
expect(wrapper.props()['data-testid']).toStrictEqual('test-id');
|
||||
});
|
||||
it(`renders "${TITLE}" title`, () => {
|
||||
expect(wrapper.find('.list-item__heading h2').text()).toStrictEqual(TITLE);
|
||||
});
|
||||
it(`renders "I am a list item" subtitle`, () => {
|
||||
expect(wrapper.find('.list-item__subheading').text()).toStrictEqual(
|
||||
'I am a list item',
|
||||
);
|
||||
});
|
||||
it('attaches external className', () => {
|
||||
expect(wrapper.props().className).toContain(CLASSNAME);
|
||||
});
|
||||
it('renders content on the right side of the list item', () => {
|
||||
expect(wrapper.find('.list-item__right-content p').text()).toStrictEqual(
|
||||
'Content rendered to the right',
|
||||
);
|
||||
});
|
||||
it('renders content in the middle of the list item', () => {
|
||||
expect(wrapper.find('.list-item__mid-content p').text()).toStrictEqual(
|
||||
'Content rendered in the middle',
|
||||
);
|
||||
});
|
||||
it('renders list item actions', () => {
|
||||
expect(wrapper.find('.list-item__actions button').text()).toStrictEqual(
|
||||
'I am a button',
|
||||
);
|
||||
});
|
||||
it('renders the title icon', () => {
|
||||
expect(wrapper.find(Preloader)).toHaveLength(1);
|
||||
});
|
||||
it('renders the list item icon', () => {
|
||||
expect(wrapper.find(Send)).toHaveLength(1);
|
||||
});
|
||||
it('handles click action and fires onClick', () => {
|
||||
wrapper.simulate('click');
|
||||
expect(clickHandler.callCount).toStrictEqual(1);
|
||||
const { queryByTestId } = renderWithProvider(
|
||||
<ListItem {...props}>{CHILDREN}</ListItem>,
|
||||
);
|
||||
|
||||
fireEvent.click(queryByTestId('test-id'));
|
||||
|
||||
expect(props.onClick).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user