From 25bb6ef861c96f3746977ffee002d096be52b0da Mon Sep 17 00:00:00 2001 From: Thomas Huang Date: Wed, 9 Nov 2022 09:20:10 -0800 Subject: [PATCH] Continue converting tests from enzyme to @testing-library/react (#16401) --- .../button-group-component.test.js.snap | 30 +++ .../button-group-component.test.js | 132 ++-------- ...ge-container-footer.component.test.js.snap | 62 +++++ .../page-container-footer.component.test.js | 90 +++---- .../__snapshots__/site-origin.test.js.snap | 15 ++ .../ui/site-origin/site-origin.test.js | 7 +- .../advanced-tab/advanced-tab.component.js | 4 + .../advanced-tab.component.test.js | 211 ++++------------ .../view-quote-price-difference.test.js.snap | 229 ++++++++++++++++++ .../view-quote-price-difference.test.js | 71 ++---- 10 files changed, 464 insertions(+), 387 deletions(-) create mode 100644 ui/components/ui/button-group/__snapshots__/button-group-component.test.js.snap create mode 100644 ui/components/ui/page-container/page-container-footer/__snapshots__/page-container-footer.component.test.js.snap create mode 100644 ui/components/ui/site-origin/__snapshots__/site-origin.test.js.snap create mode 100644 ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap diff --git a/ui/components/ui/button-group/__snapshots__/button-group-component.test.js.snap b/ui/components/ui/button-group/__snapshots__/button-group-component.test.js.snap new file mode 100644 index 000000000..7e8116227 --- /dev/null +++ b/ui/components/ui/button-group/__snapshots__/button-group-component.test.js.snap @@ -0,0 +1,30 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ButtonGroup Component should match snapshot 1`] = ` +
+
+ +
+
+`; diff --git a/ui/components/ui/button-group/button-group-component.test.js b/ui/components/ui/button-group/button-group-component.test.js index 64aef67b4..2aaccad78 100644 --- a/ui/components/ui/button-group/button-group-component.test.js +++ b/ui/components/ui/button-group/button-group-component.test.js @@ -1,130 +1,30 @@ import React from 'react'; -import { shallow } from 'enzyme'; -import sinon from 'sinon'; -import ButtonGroup from './button-group.component'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; +import ButtonGroup from '.'; describe('ButtonGroup Component', () => { - let wrapper; - - const childButtonSpies = { - onClick: sinon.spy(), + const props = { + defaultActiveButtonIndex: 1, + disabled: false, + className: 'someClassName', + style: { + color: 'red', + }, }; const mockButtons = [ - , - , - , + , + , ]; - beforeAll(() => { - sinon.spy(ButtonGroup.prototype, 'handleButtonClick'); - sinon.spy(ButtonGroup.prototype, 'renderButtons'); - }); - - beforeEach(() => { - wrapper = shallow( - - {mockButtons} - , + it('should match snapshot', () => { + const { container } = renderWithProvider( + {mockButtons}, ); - }); - - afterEach(() => { - childButtonSpies.onClick.resetHistory(); - ButtonGroup.prototype.handleButtonClick.resetHistory(); - ButtonGroup.prototype.renderButtons.resetHistory(); - }); - - afterAll(() => { - sinon.restore(); - }); - - describe('componentDidUpdate', () => { - it('should set the activeButtonIndex to the updated newActiveButtonIndex', () => { - expect(wrapper.state('activeButtonIndex')).toStrictEqual(1); - wrapper.setProps({ newActiveButtonIndex: 2 }); - expect(wrapper.state('activeButtonIndex')).toStrictEqual(2); - }); - - it('should not set the activeButtonIndex to an updated newActiveButtonIndex that is not a number', () => { - expect(wrapper.state('activeButtonIndex')).toStrictEqual(1); - wrapper.setProps({ newActiveButtonIndex: null }); - expect(wrapper.state('activeButtonIndex')).toStrictEqual(1); - }); - }); - - describe('handleButtonClick', () => { - it('should set the activeButtonIndex', () => { - expect(wrapper.state('activeButtonIndex')).toStrictEqual(1); - wrapper.instance().handleButtonClick(2); - expect(wrapper.state('activeButtonIndex')).toStrictEqual(2); - }); - }); - - describe('renderButtons', () => { - it('should render a button for each child', () => { - const childButtons = wrapper.find('.button-group__button'); - expect(childButtons).toHaveLength(3); - }); - - it('should render the correct button with an active state', () => { - const childButtons = wrapper.find('.button-group__button'); - const activeChildButton = wrapper.find('.button-group__button--active'); - expect(childButtons.get(1)).toStrictEqual(activeChildButton.get(0)); - }); - - it("should call handleButtonClick and the respective button's onClick method when a button is clicked", () => { - expect(ButtonGroup.prototype.handleButtonClick.callCount).toStrictEqual( - 0, - ); - expect(childButtonSpies.onClick.callCount).toStrictEqual(0); - const childButtons = wrapper.find('.button-group__button'); - childButtons.at(0).props().onClick(); - childButtons.at(1).props().onClick(); - childButtons.at(2).props().onClick(); - expect(ButtonGroup.prototype.handleButtonClick.callCount).toStrictEqual( - 3, - ); - expect(childButtonSpies.onClick.callCount).toStrictEqual(3); - }); - - it('should render all child buttons as disabled if props.disabled is true', () => { - const childButtons = wrapper.find('.button-group__button'); - childButtons.forEach((button) => { - expect(button.props().disabled).toBeUndefined(); - }); - wrapper.setProps({ disabled: true }); - const disabledChildButtons = wrapper.find('[disabled=true]'); - expect(disabledChildButtons).toHaveLength(3); - }); - - it('should render the children of the button', () => { - const mockClass = wrapper.find('.mockClass'); - expect(mockClass).toHaveLength(1); - }); - }); - - describe('render', () => { - it('should render a div with the expected class and style', () => { - expect(wrapper.find('div').at(0).props().className).toStrictEqual( - 'someClassName', - ); - expect(wrapper.find('div').at(0).props().style).toStrictEqual({ - color: 'red', - }); - }); - it('should call renderButtons when rendering', () => { - expect(ButtonGroup.prototype.renderButtons.callCount).toStrictEqual(1); - wrapper.instance().render(); - expect(ButtonGroup.prototype.renderButtons.callCount).toStrictEqual(2); - }); + expect(container).toMatchSnapshot(); }); }); diff --git a/ui/components/ui/page-container/page-container-footer/__snapshots__/page-container-footer.component.test.js.snap b/ui/components/ui/page-container/page-container-footer/__snapshots__/page-container-footer.component.test.js.snap new file mode 100644 index 000000000..d738bd4b1 --- /dev/null +++ b/ui/components/ui/page-container/page-container-footer/__snapshots__/page-container-footer.component.test.js.snap @@ -0,0 +1,62 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Page Footer should match snapshot 1`] = ` +
+
+
+ + +
+
+
+`; + +exports[`Page Footer should render a secondary footer inside page-container__footer when given children 1`] = ` +
+
+
+ + +
+
+
+ Works +
+
+
+
+`; diff --git a/ui/components/ui/page-container/page-container-footer/page-container-footer.component.test.js b/ui/components/ui/page-container/page-container-footer/page-container-footer.component.test.js index 0cf5d6f93..7c9bc6758 100644 --- a/ui/components/ui/page-container/page-container-footer/page-container-footer.component.test.js +++ b/ui/components/ui/page-container/page-container-footer/page-container-footer.component.test.js @@ -1,87 +1,55 @@ import React from 'react'; -import { shallow } from 'enzyme'; -import sinon from 'sinon'; -import Button from '../../button'; -import PageFooter from './page-container-footer.component'; +import { fireEvent } from '@testing-library/react'; +import { renderWithProvider } from '../../../../../test/lib/render-helpers'; +import PageFooter from '.'; describe('Page Footer', () => { - let wrapper; - const onCancel = sinon.spy(); - const onSubmit = sinon.spy(); - - beforeEach(() => { - wrapper = shallow( - , - ); - }); - - it('renders page container footer', () => { - expect(wrapper.find('.page-container__footer')).toHaveLength(1); + const props = { + onCancel: jest.fn(), + onSubmit: jest.fn(), + cancelText: 'Cancel', + submitText: 'Submit', + disabled: false, + submitButtonType: 'Test Type', + }; + + it('should match snapshot', () => { + const { container } = renderWithProvider(); + + expect(container).toMatchSnapshot(); }); it('should render a secondary footer inside page-container__footer when given children', () => { - wrapper = shallow( + const { container } = renderWithProvider(
Works
, - { context: { t: sinon.spy((k) => `[${k}]`) } }, ); - expect(wrapper.find('.page-container__footer-secondary')).toHaveLength(1); - }); - - it('renders two button components', () => { - expect(wrapper.find(Button)).toHaveLength(2); + expect(container).toMatchSnapshot(); }); describe('Cancel Button', () => { - it('has button type of default', () => { - expect( - wrapper.find('.page-container__footer-button').first().prop('type'), - ).toStrictEqual('secondary'); - }); + it('should call cancel when click is simulated', () => { + const { queryByTestId } = renderWithProvider(); - it('has children text of Cancel', () => { - expect( - wrapper.find('.page-container__footer-button').first().prop('children'), - ).toStrictEqual('Cancel'); - }); + const cancelButton = queryByTestId('page-container-footer-cancel'); - it('should call cancel when click is simulated', () => { - wrapper.find('.page-container__footer-button').first().prop('onClick')(); - expect(onCancel.callCount).toStrictEqual(1); + fireEvent.click(cancelButton); + + expect(props.onCancel).toHaveBeenCalled(); }); }); describe('Submit Button', () => { - it('assigns button type based on props', () => { - expect( - wrapper.find('.page-container__footer-button').last().prop('type'), - ).toStrictEqual('Test Type'); - }); + it('should call submit when click is simulated', () => { + const { queryByTestId } = renderWithProvider(); - it('has disabled prop', () => { - expect( - wrapper.find('.page-container__footer-button').last().prop('disabled'), - ).toStrictEqual(false); - }); + const submitButton = queryByTestId('page-container-footer-next'); - it('has children text when submitText prop exists', () => { - expect( - wrapper.find('.page-container__footer-button').last().prop('children'), - ).toStrictEqual('Submit'); - }); + fireEvent.click(submitButton); - it('should call submit when click is simulated', () => { - wrapper.find('.page-container__footer-button').last().prop('onClick')(); - expect(onSubmit.callCount).toStrictEqual(1); + expect(props.onSubmit).toHaveBeenCalled(); }); }); }); diff --git a/ui/components/ui/site-origin/__snapshots__/site-origin.test.js.snap b/ui/components/ui/site-origin/__snapshots__/site-origin.test.js.snap new file mode 100644 index 000000000..c1acfdd1f --- /dev/null +++ b/ui/components/ui/site-origin/__snapshots__/site-origin.test.js.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SiteOrigin renders number and hyphen prefixed domains correctly 1`] = ` +
+
+ + 0-example.com + +
+
+`; diff --git a/ui/components/ui/site-origin/site-origin.test.js b/ui/components/ui/site-origin/site-origin.test.js index d27f1ce73..6c2b42674 100644 --- a/ui/components/ui/site-origin/site-origin.test.js +++ b/ui/components/ui/site-origin/site-origin.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; import SiteOrigin from './site-origin'; describe('SiteOrigin', () => { @@ -14,11 +14,10 @@ describe('SiteOrigin', () => { it('renders number and hyphen prefixed domains correctly', () => { const numberHyphenPrefixOrigin = '0-example.com'; - const wrapper = shallow( + const { container } = renderWithProvider( , ); - const bdiElement = wrapper.find('bdi'); - expect(bdiElement.text()).toBe('0-example.com'); + expect(container).toMatchSnapshot(); }); }); diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.js b/ui/pages/settings/advanced-tab/advanced-tab.component.js index 54b49309f..330c8b871 100644 --- a/ui/pages/settings/advanced-tab/advanced-tab.component.js +++ b/ui/pages/settings/advanced-tab/advanced-tab.component.js @@ -205,6 +205,7 @@ export default class AdvancedTab extends PureComponent {
+
+ + + + + + +`; + +exports[`View Price Quote Difference displays an error when in high bucket 1`] = ` +
+
+
+ +
+
+
+
+
+ Price difference of ~% +
+
+
+ +
+
+
+ You are about to swap 1 ETH (~) for 42.947749 LINK (~). +
+ +
+
+
+
+
+
+
+`; + +exports[`View Price Quote Difference displays an error when in medium bucket 1`] = ` +
+
+
+ +
+
+
+
+
+ Price difference of ~% +
+
+
+ +
+
+
+ You are about to swap 1 ETH (~) for 42.947749 LINK (~). +
+ +
+
+
+
+
+
+
+`; + +exports[`View Price Quote Difference should match snapshot 1`] = ` +
+
+
+ +
+
+
+
+
+ Price difference of ~% +
+
+
+ +
+
+
+ You are about to swap 1 ETH (~) for 42.947749 LINK (~). +
+ +
+
+
+
+
+
+
+`; diff --git a/ui/pages/swaps/view-quote/view-quote-price-difference.test.js b/ui/pages/swaps/view-quote/view-quote-price-difference.test.js index 08aef036b..806d4b9c0 100644 --- a/ui/pages/swaps/view-quote/view-quote-price-difference.test.js +++ b/ui/pages/swaps/view-quote/view-quote-price-difference.test.js @@ -1,15 +1,12 @@ import React from 'react'; -import { shallow } from 'enzyme'; -import { Provider } from 'react-redux'; import configureMockStore from 'redux-mock-store'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; import { NETWORK_TYPES } from '../../../../shared/constants/network'; import { GAS_RECOMMENDATIONS } from '../../../../shared/constants/gas'; import ViewQuotePriceDifference from './view-quote-price-difference'; describe('View Price Quote Difference', () => { - const t = (key) => `translate ${key}`; - - const state = { + const mockState = { metamask: { tokens: [], provider: { type: NETWORK_TYPES.RPC, nickname: '', rpcUrl: '' }, @@ -19,7 +16,7 @@ describe('View Price Quote Difference', () => { }, }; - const store = configureMockStore()(state); + const mockStore = configureMockStore()(mockState); // Sample transaction is 1 $ETH to ~42.880915 $LINK const DEFAULT_PROPS = { @@ -85,57 +82,37 @@ describe('View Price Quote Difference', () => { destinationTokenValue: '42.947749', }; - let component; - function renderComponent(props) { - component = shallow( - - - , - { - context: { t }, - }, + it('should match snapshot', () => { + const { container } = renderWithProvider( + , + mockStore, ); - } - afterEach(() => { - component.unmount(); - }); - - it('does not render when there is no quote', () => { - const props = { ...DEFAULT_PROPS, usedQuote: null }; - renderComponent(props); - - const wrappingDiv = component.find( - '.view-quote__price-difference-warning-wrapper', - ); - expect(wrappingDiv).toHaveLength(0); - }); - - it('does not render when the item is in the low bucket', () => { - const props = { ...DEFAULT_PROPS }; - props.usedQuote.priceSlippage.bucket = GAS_RECOMMENDATIONS.LOW; - - renderComponent(props); - const wrappingDiv = component.find( - '.view-quote__price-difference-warning-wrapper', - ); - expect(wrappingDiv).toHaveLength(0); + expect(container).toMatchSnapshot(); }); it('displays an error when in medium bucket', () => { const props = { ...DEFAULT_PROPS }; props.usedQuote.priceSlippage.bucket = GAS_RECOMMENDATIONS.MEDIUM; - renderComponent(props); - expect(component.html()).toContain(GAS_RECOMMENDATIONS.MEDIUM); + const { container } = renderWithProvider( + , + mockStore, + ); + + expect(container).toMatchSnapshot(); }); it('displays an error when in high bucket', () => { const props = { ...DEFAULT_PROPS }; props.usedQuote.priceSlippage.bucket = GAS_RECOMMENDATIONS.HIGH; - renderComponent(props); - expect(component.html()).toContain(GAS_RECOMMENDATIONS.HIGH); + const { container } = renderWithProvider( + , + mockStore, + ); + + expect(container).toMatchSnapshot(); }); it('displays a fiat error when calculationError is present', () => { @@ -143,7 +120,11 @@ describe('View Price Quote Difference', () => { props.usedQuote.priceSlippage.calculationError = 'Could not determine price.'; - renderComponent(props); - expect(component.html()).toContain(GAS_RECOMMENDATIONS.HIGH); + const { container } = renderWithProvider( + , + mockStore, + ); + + expect(container).toMatchSnapshot(); }); });