From 129ba1290e19e885a3c3b5f5ed71ddebe593c97f Mon Sep 17 00:00:00 2001 From: Thomas Huang Date: Thu, 3 Nov 2022 06:40:20 -0700 Subject: [PATCH] Continue converting tests from enzyme to @testing-library/react (#16249) --- ...nt-mismatch-warning.component.test.js.snap | 36 +++++ ...cccount-mismatch-warning.component.test.js | 52 +++---- .../breadcrumbs.component.test.js.snap | 19 +++ .../breadcrumbs/breadcrumbs.component.test.js | 26 ++-- .../confusable.component.test.js.snap | 58 ++++++++ .../confusable/confusable.component.test.js | 39 +++-- .../currency-display.component.test.js.snap | 54 +++++++ .../currency-display.component.test.js | 63 ++++---- .../error-message.component.test.js.snap | 35 +++++ .../error-message.component.test.js | 34 ++--- .../hex-to-decimal.component.test.js.snap | 21 +++ .../hex-to-decimal.component.test.js | 28 ++-- .../list-item.component.test.js.snap | 135 ++++++++++++++++++ .../ui/list-item/list-item.component.test.js | 91 ++++-------- 14 files changed, 514 insertions(+), 177 deletions(-) create mode 100644 ui/components/ui/account-mismatch-warning/__snapshots__/acccount-mismatch-warning.component.test.js.snap create mode 100644 ui/components/ui/breadcrumbs/__snapshots__/breadcrumbs.component.test.js.snap create mode 100644 ui/components/ui/confusable/__snapshots__/confusable.component.test.js.snap create mode 100644 ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap create mode 100644 ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap create mode 100644 ui/components/ui/hex-to-decimal/__snapshots__/hex-to-decimal.component.test.js.snap create mode 100644 ui/components/ui/list-item/__snapshots__/list-item.component.test.js.snap diff --git a/ui/components/ui/account-mismatch-warning/__snapshots__/acccount-mismatch-warning.component.test.js.snap b/ui/components/ui/account-mismatch-warning/__snapshots__/acccount-mismatch-warning.component.test.js.snap new file mode 100644 index 000000000..6225239f6 --- /dev/null +++ b/ui/components/ui/account-mismatch-warning/__snapshots__/acccount-mismatch-warning.component.test.js.snap @@ -0,0 +1,36 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AccountMismatchWarning should match snapshot of mismatch address warning 1`] = ` +
+ +
+`; + +exports[`AccountMismatchWarning should match snapshot of no warning with same address and selected address 1`] = `
`; diff --git a/ui/components/ui/account-mismatch-warning/acccount-mismatch-warning.component.test.js b/ui/components/ui/account-mismatch-warning/acccount-mismatch-warning.component.test.js index e06f8f875..d04cb9179 100644 --- a/ui/components/ui/account-mismatch-warning/acccount-mismatch-warning.component.test.js +++ b/ui/components/ui/account-mismatch-warning/acccount-mismatch-warning.component.test.js @@ -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); - afterAll(() => { - sinon.restore(); - }); + it('should match snapshot of no warning with same address and selected address', () => { + const props = { + address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', + }; - it('renders nothing when the addresses match', () => { - const wrapper = shallow(); - expect(wrapper.find(InfoIcon)).toHaveLength(0); - }); - it('renders a warning info icon when addresses do not match', () => { - const wrapper = shallow( - , + const { container } = renderWithProvider( + , + mockStore, ); - expect(wrapper.find(InfoIcon)).toHaveLength(1); + + expect(container).toMatchSnapshot(); + }); + + it('should match snapshot of mismatch address warning', () => { + const props = { + address: '0xNotSelectedAddress', + }; + + const { container } = renderWithProvider( + , + mockStore, + ); + + expect(container).toMatchSnapshot(); }); }); diff --git a/ui/components/ui/breadcrumbs/__snapshots__/breadcrumbs.component.test.js.snap b/ui/components/ui/breadcrumbs/__snapshots__/breadcrumbs.component.test.js.snap new file mode 100644 index 000000000..ea31c0c26 --- /dev/null +++ b/ui/components/ui/breadcrumbs/__snapshots__/breadcrumbs.component.test.js.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Breadcrumbs Component should match snapshot with multiple breakcumbs 1`] = ` +
+
+
+
+
+
+
+`; diff --git a/ui/components/ui/breadcrumbs/breadcrumbs.component.test.js b/ui/components/ui/breadcrumbs/breadcrumbs.component.test.js index 73b9347ce..41dd8f902 100644 --- a/ui/components/ui/breadcrumbs/breadcrumbs.component.test.js +++ b/ui/components/ui/breadcrumbs/breadcrumbs.component.test.js @@ -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(); + 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(); + + expect(container).toMatchSnapshot(); }); }); diff --git a/ui/components/ui/confusable/__snapshots__/confusable.component.test.js.snap b/ui/components/ui/confusable/__snapshots__/confusable.component.test.js.snap new file mode 100644 index 000000000..70e08de41 --- /dev/null +++ b/ui/components/ui/confusable/__snapshots__/confusable.component.test.js.snap @@ -0,0 +1,58 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Confusable component should detect homoglyphic unicode points 1`] = ` +
+ f + a + c + e + b + o + o + k + . + e + t + h +
+`; + +exports[`Confusable component should detect multiple homoglyphic unicode points 1`] = ` +
+ s + c + o + p + e + . + e + t + h +
+`; + +exports[`Confusable component should detect zero-width unicode 1`] = ` +
+ v + i + t + a + l + i + k + . + e + t + h +
+`; + +exports[`Confusable component should not detect emoji 1`] = ` +
+ 👻 + . + e + t + h +
+`; diff --git a/ui/components/ui/confusable/confusable.component.test.js b/ui/components/ui/confusable/confusable.component.test.js index cb38cae8e..c541751c5 100644 --- a/ui/components/ui/confusable/confusable.component.test.js +++ b/ui/components/ui/confusable/confusable.component.test.js @@ -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(); - expect(wrapper.find('.confusable__point')).toHaveLength(1); + const props = { + input: 'vitalik.eth', + }; + + const { container } = renderWithProvider(); + + expect(container).toMatchSnapshot(); }); it('should detect homoglyphic unicode points', () => { - const wrapper = shallow(); - expect(wrapper.find('.confusable__point')).toHaveLength(1); + const props = { + input: 'facebook.eth', + }; + + const { container } = renderWithProvider(); + + expect(container).toMatchSnapshot(); }); it('should detect multiple homoglyphic unicode points', () => { - const wrapper = shallow(); - expect(wrapper.find('.confusable__point')).toHaveLength(5); + const props = { + input: 'scope.eth', + }; + + const { container } = renderWithProvider(); + expect(container).toMatchSnapshot(); }); it('should not detect emoji', () => { - const wrapper = shallow(); - expect(wrapper.find('.confusable__point')).toHaveLength(0); + const props = { + input: '👻.eth', + }; + + const { container } = renderWithProvider(); + + expect(container).toMatchSnapshot(); }); }); diff --git a/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap b/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap new file mode 100644 index 000000000..6e898fc29 --- /dev/null +++ b/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap @@ -0,0 +1,54 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CurrencyDisplay Component should match default snapshot 1`] = ` +
+
+ + +
+
+`; + +exports[`CurrencyDisplay Component should render text with a className 1`] = ` +
+
+ + + $123.45 + +
+
+`; + +exports[`CurrencyDisplay Component should render text with a prefix 1`] = ` +
+
+ + + - + $123.45 + +
+
+`; diff --git a/ui/components/ui/currency-display/currency-display.component.test.js b/ui/components/ui/currency-display/currency-display.component.test.js index 367cf5496..35f5de085 100644 --- a/ui/components/ui/currency-display/currency-display.component.test.js +++ b/ui/components/ui/currency-display/currency-display.component.test.js @@ -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(, mockStore); + + expect(container).toMatchSnapshot(); }); + it('should render text with a className', () => { - const wrapper = shallow( - , + const props = { + displayValue: '$123.45', + className: 'currency-display', + hideLabel: true, + }; + + const { container } = renderWithProvider( + , + 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( - , + const props = { + displayValue: '$123.45', + className: 'currency-display', + prefix: '-', + hideLabel: true, + }; + + const { container } = renderWithProvider( + , + mockStore, ); - expect(wrapper.hasClass('currency-display')).toStrictEqual(true); - expect(wrapper.text()).toStrictEqual('-$123.45'); + expect(container).toMatchSnapshot(); }); }); diff --git a/ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap b/ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap new file mode 100644 index 000000000..db2a78837 --- /dev/null +++ b/ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap @@ -0,0 +1,35 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ErrorMessage Component should render a message from props.errorMessage 1`] = ` +
+
+ +
+ This is an error. +
+
+
+`; + +exports[`ErrorMessage Component should render a message translated from props.errorKey 1`] = ` +
+
+ +
+ [testKey] +
+
+
+`; diff --git a/ui/components/ui/error-message/error-message.component.test.js b/ui/components/ui/error-message/error-message.component.test.js index 94c16de27..beafb20b5 100644 --- a/ui/components/ui/error-message/error-message.component.test.js +++ b/ui/components/ui/error-message/error-message.component.test.js @@ -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(, { - context: { t }, - }); + const props = { + errorMessage: 'This is an error.', + }; + const { container } = renderWithProvider(); - 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(, { - context: { t }, - }); + const props = { + errorKey: 'testKey', + }; + const { container } = renderWithProvider(); - 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(); }); }); diff --git a/ui/components/ui/hex-to-decimal/__snapshots__/hex-to-decimal.component.test.js.snap b/ui/components/ui/hex-to-decimal/__snapshots__/hex-to-decimal.component.test.js.snap new file mode 100644 index 000000000..ed67e3338 --- /dev/null +++ b/ui/components/ui/hex-to-decimal/__snapshots__/hex-to-decimal.component.test.js.snap @@ -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`] = ` +
+
+ 12345 +
+
+`; + +exports[`HexToDecimal Component should render an unprefixed hex as a decimal with a className 1`] = ` +
+
+ 6789 +
+
+`; diff --git a/ui/components/ui/hex-to-decimal/hex-to-decimal.component.test.js b/ui/components/ui/hex-to-decimal/hex-to-decimal.component.test.js index 0ec752b16..d8e380318 100644 --- a/ui/components/ui/hex-to-decimal/hex-to-decimal.component.test.js +++ b/ui/components/ui/hex-to-decimal/hex-to-decimal.component.test.js @@ -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( - , - ); + const props = { + value: '0x3039', + className: 'hex-to-decimal', + }; - expect(wrapper.hasClass('hex-to-decimal')).toStrictEqual(true); - expect(wrapper.text()).toStrictEqual('12345'); + const { container } = renderWithProvider(); + + expect(container).toMatchSnapshot(); }); it('should render an unprefixed hex as a decimal with a className', () => { - const wrapper = shallow( - , - ); + const props = { + value: '1A85', + className: 'hex-to-decimal', + }; - expect(wrapper.hasClass('hex-to-decimal')).toStrictEqual(true); - expect(wrapper.text()).toStrictEqual('6789'); + const { container } = renderWithProvider(); + + expect(container).toMatchSnapshot(); }); }); diff --git a/ui/components/ui/list-item/__snapshots__/list-item.component.test.js.snap b/ui/components/ui/list-item/__snapshots__/list-item.component.test.js.snap new file mode 100644 index 000000000..11ce857d0 --- /dev/null +++ b/ui/components/ui/list-item/__snapshots__/list-item.component.test.js.snap @@ -0,0 +1,135 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ListItem should match snapshot with no props 1`] = ` +
+
+
+

+

+
+
+`; + +exports[`ListItem should match snapshot with props 1`] = ` +
+
+
+ + + + +
+
+

+ Hello World +

+
+ + + + + + + + + +
+
+
+

+ I am a list item +

+
+
+ +
+
+

+ Content rendered in the middle +

+
+
+

+ Content rendered to the right +

+
+
+
+`; diff --git a/ui/components/ui/list-item/list-item.component.test.js b/ui/components/ui/list-item/list-item.component.test.js index 9aee68af1..b0ae94459 100644 --- a/ui/components/ui/list-item/list-item.component.test.js +++ b/ui/components/ui/list-item/list-item.component.test.js @@ -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 = ; const MID_CONTENT =

Content rendered in the middle

; describe('ListItem', () => { - let wrapper; - let clickHandler; - beforeAll(() => { - clickHandler = sinon.fake(); - wrapper = shallow( - } - titleIcon={} - onClick={clickHandler} - > - {CHILDREN} - , - ); + const props = { + className: CLASSNAME, + title: TITLE, + 'data-testid': 'test-id', + subtitle: SUBTITLE, + rightContent: RIGHT_CONTENT, + midContent: MID_CONTENT, + icon: , + titleIcon: , + onClick: jest.fn(), + }; + + it('should match snapshot with no props', () => { + const { container } = renderWithProvider(); + + expect(container).toMatchSnapshot(); }); - afterAll(() => { - sinon.restore(); + it('should match snapshot with props', () => { + const { container } = renderWithProvider( + {CHILDREN}, + ); + + 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( + {CHILDREN}, + ); + + fireEvent.click(queryByTestId('test-id')); + + expect(props.onClick).toHaveBeenCalled(); }); });