From aff2d82bb98e98607e7d27e1923e52baa454f1c4 Mon Sep 17 00:00:00 2001 From: Thomas Huang Date: Fri, 23 Sep 2022 07:41:35 -0700 Subject: [PATCH] Continue converting tests from enzyme to @testing-library/react. (#15941) --- .../__snapshots__/currency-input.test.js.snap | 216 ++++++++++ .../app/currency-input/currency-input.js | 7 +- .../app/currency-input/currency-input.test.js | 374 +++++------------- .../__snapshots__/dropdown.test.js.snap | 12 + ui/components/app/dropdowns/dropdown.js | 1 + ui/components/app/dropdowns/dropdown.test.js | 43 +- .../__snapshots__/info-box.test.js.snap | 24 ++ .../app/info-box/info-box.component.js | 6 +- ui/components/app/info-box/info-box.test.js | 31 +- .../modal.component.test.js.snap | 157 ++++++++ .../modal-content.component.test.js.snap | 20 + .../modal-content.component.test.js | 43 +- ui/components/app/modal/modal.component.js | 6 +- .../app/modal/modal.component.test.js | 168 ++++---- .../ui/unit-input/unit-input.component.js | 12 +- 15 files changed, 660 insertions(+), 460 deletions(-) create mode 100644 ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap create mode 100644 ui/components/app/dropdowns/__snapshots__/dropdown.test.js.snap create mode 100644 ui/components/app/info-box/__snapshots__/info-box.test.js.snap create mode 100644 ui/components/app/modal/__snapshots__/modal.component.test.js.snap create mode 100644 ui/components/app/modal/modal-content/__snapshots__/modal-content.component.test.js.snap diff --git a/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap new file mode 100644 index 000000000..de6f2afcc --- /dev/null +++ b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap @@ -0,0 +1,216 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CurrencyInput Component rendering should render properly with a fiat value 1`] = ` +
+
+
+
+ +
+ USD +
+
+
+ + + 0.00432788 + + + ETH + +
+
+ +
+
+`; + +exports[`CurrencyInput Component rendering should render properly with a native value when hideSecondary is true 1`] = ` +
+
+
+
+ +
+ ETH +
+
+
+ No conversion rate available +
+
+ +
+
+`; + +exports[`CurrencyInput Component rendering should render properly with an ETH value 1`] = ` +
+
+
+
+ +
+ ETH +
+
+
+ + + $231.06 + + + USD + +
+
+ +
+
+`; + +exports[`CurrencyInput Component rendering should render properly without a suffix 1`] = ` +
+
+
+
+ +
+ ETH +
+
+
+ + + $0.00 + + + USD + +
+
+ +
+
+`; diff --git a/ui/components/app/currency-input/currency-input.js b/ui/components/app/currency-input/currency-input.js index df8e85660..a822a9db9 100644 --- a/ui/components/app/currency-input/currency-input.js +++ b/ui/components/app/currency-input/currency-input.js @@ -146,11 +146,16 @@ export default function CurrencyInput({ onChange, onPreferenceToggle, }} + dataTestId="currency-input" suffix={shouldUseFiat ? secondarySuffix : primarySuffix} onChange={handleChange} value={initialDecimalValue} actionComponent={ - } diff --git a/ui/components/app/currency-input/currency-input.test.js b/ui/components/app/currency-input/currency-input.test.js index 0b452307d..48670f3f7 100644 --- a/ui/components/app/currency-input/currency-input.test.js +++ b/ui/components/app/currency-input/currency-input.test.js @@ -1,344 +1,160 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { mount } from 'enzyme'; -import sinon from 'sinon'; -import { Provider } from 'react-redux'; import configureMockStore from 'redux-mock-store'; -import UnitInput from '../../ui/unit-input'; -import CurrencyDisplay from '../../ui/currency-display'; -import CurrencyInput from './currency-input'; +import { fireEvent, waitFor } from '@testing-library/react'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; +import CurrencyInput from '.'; describe('CurrencyInput Component', () => { + const mockStore = { + metamask: { + nativeCurrency: 'ETH', + currentCurrency: 'usd', + conversionRate: 231.06, + provider: { + chainId: '0x4', + }, + preferences: { + showFiatInTestnets: true, + }, + }, + }; describe('rendering', () => { it('should render properly without a suffix', () => { - const mockStore = { - metamask: { - nativeCurrency: 'ETH', - currentCurrency: 'usd', - conversionRate: 231.06, - provider: { - chainId: '0x4', - }, - preferences: { - showFiatInTestnets: true, - }, - }, - }; - const store = configureMockStore()(mockStore); - const wrapper = mount( - - - , - ); - - expect(wrapper).toHaveLength(1); - expect(wrapper.find(UnitInput)).toHaveLength(1); - }); - - it('should render properly with a suffix', () => { - const mockStore = { - metamask: { - nativeCurrency: 'ETH', - currentCurrency: 'usd', - conversionRate: 231.06, - provider: { - chainId: '0x4', - }, - preferences: { - showFiatInTestnets: true, - }, - }, - }; const store = configureMockStore()(mockStore); - const wrapper = mount( - - - , - ); + const { container } = renderWithProvider(, store); - expect(wrapper).toHaveLength(1); - expect(wrapper.find('.unit-input__suffix')).toHaveLength(1); - expect(wrapper.find('.unit-input__suffix').text()).toStrictEqual('ETH'); - expect(wrapper.find(CurrencyDisplay)).toHaveLength(1); + expect(container).toMatchSnapshot(); }); it('should render properly with an ETH value', () => { - const mockStore = { - metamask: { - nativeCurrency: 'ETH', - currentCurrency: 'usd', - conversionRate: 231.06, - provider: { - chainId: '0x4', - }, - preferences: { - showFiatInTestnets: true, - }, - }, - }; const store = configureMockStore()(mockStore); - const wrapper = mount( - - - , + const props = { + hexValue: 'de0b6b3a7640000', + }; + + const { container } = renderWithProvider( + , + store, ); - expect(wrapper).toHaveLength(1); - expect(wrapper.find('.unit-input__suffix')).toHaveLength(1); - expect(wrapper.find('.unit-input__suffix').text()).toStrictEqual('ETH'); - expect(wrapper.find('.unit-input__input').props().value).toStrictEqual(1); - expect(wrapper.find('.currency-display-component').text()).toStrictEqual( - '$231.06USD', - ); + expect(container).toMatchSnapshot(); }); it('should render properly with a fiat value', () => { - const mockStore = { - metamask: { - nativeCurrency: 'ETH', - currentCurrency: 'usd', - conversionRate: 231.06, - provider: { - chainId: '0x4', - }, - preferences: { - showFiatInTestnets: true, - }, - }, - }; const store = configureMockStore()(mockStore); - const handleChangeSpy = sinon.spy(); - const wrapper = mount( - - - , + const props = { + onChange: jest.fn(), + hexValue: 'f602f2234d0ea', + featureSecondary: true, + }; + + const { container } = renderWithProvider( + , + store, ); - expect(wrapper).toHaveLength(1); - expect(wrapper.find('.unit-input__suffix')).toHaveLength(1); - expect(wrapper.find('.unit-input__suffix').text()).toStrictEqual('USD'); - expect(wrapper.find('.unit-input__input').props().value).toStrictEqual(1); - expect(wrapper.find('.currency-display-component').text()).toStrictEqual( - '0.00432788ETH', - ); + expect(container).toMatchSnapshot(); }); it('should render properly with a native value when hideSecondary is true', () => { - const mockStore = { + const hideSecondaryState = { metamask: { - nativeCurrency: 'ETH', - currentCurrency: 'usd', - conversionRate: 231.06, - provider: { - chainId: '0x4', - }, + ...mockStore.metamask, preferences: { showFiatInTestnets: false, }, + hideSecondary: true, }, - hideSecondary: true, }; - const store = configureMockStore()(mockStore); - const handleChangeSpy = sinon.spy(); - const wrapper = mount( - - - , - { - context: { t: (str) => `${str}_t` }, - childContextTypes: { t: PropTypes.func }, - }, + const store = configureMockStore()(hideSecondaryState); + + const props = { + onChange: jest.fn(), + hexValue: 'f602f2234d0ea', + featureSecondary: true, + }; + + const { container } = renderWithProvider( + , + store, ); - expect(wrapper).toHaveLength(1); - expect(wrapper.find('.unit-input__suffix')).toHaveLength(1); - expect(wrapper.find('.unit-input__suffix').text()).toStrictEqual('ETH'); - expect(wrapper.find('.unit-input__input').props().value).toStrictEqual( - 0.00432788, - ); - expect( - wrapper.find('.currency-input__conversion-component').text(), - ).toStrictEqual('[noConversionRateAvailable]'); + expect(container).toMatchSnapshot(); }); }); describe('handling actions', () => { - const handleChangeSpy = sinon.spy(); - const handleBlurSpy = sinon.spy(); - const handleChangeToggle = sinon.spy(); - - afterEach(() => { - handleChangeSpy.resetHistory(); - handleBlurSpy.resetHistory(); - handleChangeToggle.resetHistory(); - }); - it('should call onChange on input changes with the hex value for ETH', () => { - const mockStore = { - metamask: { - nativeCurrency: 'ETH', - currentCurrency: 'usd', - conversionRate: 231.06, - provider: { - chainId: '0x4', - }, - preferences: { - showFiatInTestnets: true, - }, - }, - }; const store = configureMockStore()(mockStore); - const wrapper = mount( - - - , + + const props = { + onChange: jest.fn(), + hexValue: 'f602f2234d0ea', + }; + + const { queryByTestId, queryByTitle } = renderWithProvider( + , + store, ); - expect(wrapper).toHaveLength(1); - expect(handleChangeSpy.callCount).toStrictEqual(0); - expect(handleBlurSpy.callCount).toStrictEqual(0); + const currencyInput = queryByTestId('currency-input'); - const input = wrapper.find('input'); - expect(input.props().value).toStrictEqual(0.00432788); + fireEvent.change(currencyInput, { target: { value: 1 } }); - input.simulate('change', { target: { value: 1 } }); - expect(handleChangeSpy.callCount).toStrictEqual(1); - expect(handleChangeSpy.calledWith('de0b6b3a7640000')).toStrictEqual(true); - expect(wrapper.find('.currency-display-component').text()).toStrictEqual( - '$231.06USD', - ); + expect(props.onChange).toHaveBeenCalledWith('de0b6b3a7640000'); + expect(queryByTitle('$231.06 USD')).toBeInTheDocument(); }); it('should call onChange on input changes with the hex value for fiat', () => { - const mockStore = { - metamask: { - nativeCurrency: 'ETH', - currentCurrency: 'usd', - conversionRate: 231.06, - provider: { - chainId: '0x4', - }, - preferences: { - showFiatInTestnets: true, - }, - }, - }; const store = configureMockStore()(mockStore); - const wrapper = mount( - - - , + + const props = { + onChange: jest.fn(), + hexValue: 'f602f2234d0ea', + featureSecondary: true, + }; + + const { queryByTestId, queryByTitle } = renderWithProvider( + , + store, ); - expect(wrapper).toHaveLength(1); - expect(handleChangeSpy.callCount).toStrictEqual(1); - expect(handleBlurSpy.callCount).toStrictEqual(0); + const currencyInput = queryByTestId('currency-input'); - expect(wrapper.find('.currency-display-component').text()).toStrictEqual( - '0ETH', - ); - const input = wrapper.find('input'); - expect(input.props().value).toStrictEqual(0); + fireEvent.change(currencyInput, { target: { value: 1 } }); - input.simulate('change', { target: { value: 1 } }); - expect(handleChangeSpy.callCount).toStrictEqual(2); - expect(handleChangeSpy.calledWith('f602f2234d0ea')).toStrictEqual(true); - expect(wrapper.find('.currency-display-component').text()).toStrictEqual( - '0.00432788ETH', - ); + expect(props.onChange).toHaveBeenCalledWith('f602f2234d0ea'); + expect(queryByTitle('0.00432788 ETH')).toBeInTheDocument(); }); - it('should change the state and pass in a new decimalValue when props.value changes', () => { - const mockStore = { - metamask: { - nativeCurrency: 'ETH', - currentCurrency: 'usd', - conversionRate: 231.06, - provider: { - chainId: '0x4', - }, - preferences: { - showFiatInTestnets: true, - }, - }, - }; + it('should swap selected currency when swap icon is clicked', async () => { const store = configureMockStore()(mockStore); - const wrapper = mount( - - - , - ); - - expect(wrapper).toHaveLength(1); - const input = wrapper.find('input'); - expect(input.props().value).toStrictEqual(0); - - wrapper.setProps({ hexValue: '1ec05e43e72400' }); - input.update(); - expect(input.props().value).toStrictEqual(0); - }); - - it('should swap selected currency when swap icon is clicked', () => { - const mockStore = { - metamask: { - nativeCurrency: 'ETH', - currentCurrency: 'usd', - conversionRate: 231.06, - provider: { - chainId: '0x4', - }, - preferences: { - showFiatInTestnets: true, - }, - }, + const props = { + onChange: jest.fn(), + onPreferenceToggle: jest.fn(), + featureSecondary: true, }; - const store = configureMockStore()(mockStore); - const wrapper = mount( - - - , + + const { queryByTestId, queryByTitle } = renderWithProvider( + , + store, ); - expect(wrapper).toHaveLength(1); - expect(handleChangeSpy.callCount).toStrictEqual(1); - expect(handleBlurSpy.callCount).toStrictEqual(0); + const currencyInput = queryByTestId('currency-input'); + fireEvent.change(currencyInput, { target: { value: 1 } }); - expect(wrapper.find('.currency-display-component').text()).toStrictEqual( - '0ETH', - ); - const input = wrapper.find('input'); - expect(input.props().value).toStrictEqual(0); + expect(queryByTitle('0.00432788 ETH')).toBeInTheDocument(); - input.simulate('change', { target: { value: 1 } }); - expect(handleChangeSpy.callCount).toStrictEqual(2); - expect(handleChangeSpy.calledWith('de0b6b3a7640000')).toStrictEqual( - false, - ); - expect(wrapper.find('.currency-display-component').text()).toStrictEqual( - '0.00432788ETH', - ); + const currencySwap = queryByTestId('currency-swap'); + fireEvent.click(currencySwap); - const swap = wrapper.find('.currency-input__swap-component'); - swap.simulate('click'); - expect(wrapper.find('.currency-display-component').text()).toStrictEqual( - '0.00432788ETH', - ); + await waitFor(() => { + expect(queryByTitle('$1.00 USD')).toBeInTheDocument(); + }); }); }); }); diff --git a/ui/components/app/dropdowns/__snapshots__/dropdown.test.js.snap b/ui/components/app/dropdowns/__snapshots__/dropdown.test.js.snap new file mode 100644 index 000000000..3ba2ca611 --- /dev/null +++ b/ui/components/app/dropdowns/__snapshots__/dropdown.test.js.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Dropdown should matchsnapshot 1`] = ` +
+
  • +
    • +`; diff --git a/ui/components/app/dropdowns/dropdown.js b/ui/components/app/dropdowns/dropdown.js index de296034b..d364c2cec 100644 --- a/ui/components/app/dropdowns/dropdown.js +++ b/ui/components/app/dropdowns/dropdown.js @@ -68,6 +68,7 @@ export class DropdownMenuItem extends Component { return (
  • { onClick(); closeMenu(); diff --git a/ui/components/app/dropdowns/dropdown.test.js b/ui/components/app/dropdowns/dropdown.test.js index be01c89af..9dc4b1421 100644 --- a/ui/components/app/dropdowns/dropdown.test.js +++ b/ui/components/app/dropdowns/dropdown.test.js @@ -1,34 +1,31 @@ import React from 'react'; -import sinon from 'sinon'; -import { shallow } from 'enzyme'; +import { fireEvent } from '@testing-library/react'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; import { DropdownMenuItem } from './dropdown'; describe('Dropdown', () => { - let wrapper; - const onClickSpy = sinon.spy(); - const closeMenuSpy = sinon.spy(); + const props = { + onClick: jest.fn(), + closeMenu: jest.fn(), + style: { test: 'style' }, + }; - beforeEach(() => { - wrapper = shallow( - , - ); - }); + it('should matchsnapshot', () => { + const { container } = renderWithProvider(); - it('renders li with dropdown-menu-item class', () => { - expect(wrapper.find('li.dropdown-menu-item')).toHaveLength(1); - }); - - it('adds style based on props passed', () => { - expect(wrapper.prop('style').test).toStrictEqual('style'); + expect(container).toMatchSnapshot(); }); it('simulates click event and calls onClick and closeMenu', () => { - wrapper.prop('onClick')(); - expect(onClickSpy.callCount).toStrictEqual(1); - expect(closeMenuSpy.callCount).toStrictEqual(1); + const { queryByTestId } = renderWithProvider( + , + ); + + const dropdownItem = queryByTestId('dropdown-menu-item'); + + fireEvent.click(dropdownItem); + + expect(props.onClick).toHaveBeenCalledTimes(1); + expect(props.closeMenu).toHaveBeenCalledTimes(1); }); }); diff --git a/ui/components/app/info-box/__snapshots__/info-box.test.js.snap b/ui/components/app/info-box/__snapshots__/info-box.test.js.snap new file mode 100644 index 000000000..50c78bdb9 --- /dev/null +++ b/ui/components/app/info-box/__snapshots__/info-box.test.js.snap @@ -0,0 +1,24 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`InfoBox should match snapshot 1`] = ` +
    +
    +
    +
    + Title +
    +
    + Description +
    +
    +
    +`; diff --git a/ui/components/app/info-box/info-box.component.js b/ui/components/app/info-box/info-box.component.js index 8ef9dc5f3..2e3c28bbe 100644 --- a/ui/components/app/info-box/info-box.component.js +++ b/ui/components/app/info-box/info-box.component.js @@ -31,7 +31,11 @@ export default class InfoBox extends Component { return this.state.isShowing ? (
    -
    this.handleClose()} /> +
    this.handleClose()} + />
    {title}
    {description}
    diff --git a/ui/components/app/info-box/info-box.test.js b/ui/components/app/info-box/info-box.test.js index 0d81f7372..3bcad6dc2 100644 --- a/ui/components/app/info-box/info-box.test.js +++ b/ui/components/app/info-box/info-box.test.js @@ -1,35 +1,26 @@ import React from 'react'; -import sinon from 'sinon'; -import { shallow } from 'enzyme'; +import { fireEvent } from '@testing-library/react'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; import InfoBox from './info-box.component'; describe('InfoBox', () => { - let wrapper; - const props = { title: 'Title', description: 'Description', - onClose: sinon.spy(), + onClose: jest.fn(), }; - beforeEach(() => { - wrapper = shallow(); + it('should match snapshot', () => { + const { container } = renderWithProvider(); + expect(container).toMatchSnapshot(); }); - it('renders title from props', () => { - const title = wrapper.find('.info-box__title'); - expect(title.text()).toStrictEqual(props.title); - }); + it('should call handleClose on info close element', () => { + const { queryByTestId } = renderWithProvider(); + const infoBoxClose = queryByTestId('info-box-close'); - it('renders description from props', () => { - const description = wrapper.find('.info-box__description'); - expect(description.text()).toStrictEqual(props.description); - }); - - it('closes info box', () => { - const close = wrapper.find('.info-box__close'); - close.simulate('click'); - expect(props.onClose.calledOnce).toStrictEqual(true); + fireEvent.click(infoBoxClose); + expect(props.onClose).toHaveBeenCalled(); }); }); diff --git a/ui/components/app/modal/__snapshots__/modal.component.test.js.snap b/ui/components/app/modal/__snapshots__/modal.component.test.js.snap new file mode 100644 index 000000000..afd63d7dc --- /dev/null +++ b/ui/components/app/modal/__snapshots__/modal.component.test.js.snap @@ -0,0 +1,157 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Modal Component should render a modal with a cancel and a submit button 1`] = ` +
    +
    +
    +
    + + +
    +
    +
    +`; + +exports[`Modal Component should render a modal with a header 1`] = ` +
    +
    +
    +
    + My Header +
    +
    +
    +
    +
    + + +
    +
    +
    +`; + +exports[`Modal Component should render a modal with a submit button 1`] = ` +
    +
    +
    +
    +
    +
    +
    +`; + +exports[`Modal Component should render a modal with children 1`] = ` +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +`; + +exports[`Modal Component should render a modal with different button types 1`] = ` +
    +
    +
    +
    + + +
    +
    +
    +`; diff --git a/ui/components/app/modal/modal-content/__snapshots__/modal-content.component.test.js.snap b/ui/components/app/modal/modal-content/__snapshots__/modal-content.component.test.js.snap new file mode 100644 index 000000000..4b678cce1 --- /dev/null +++ b/ui/components/app/modal/modal-content/__snapshots__/modal-content.component.test.js.snap @@ -0,0 +1,20 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ModalContent Component should match snapshot 1`] = ` +
    +
    +
    + Modal Title +
    +
    + Modal Description +
    +
    +
    +`; diff --git a/ui/components/app/modal/modal-content/modal-content.component.test.js b/ui/components/app/modal/modal-content/modal-content.component.test.js index ec7bc725d..0a9701630 100644 --- a/ui/components/app/modal/modal-content/modal-content.component.test.js +++ b/ui/components/app/modal/modal-content/modal-content.component.test.js @@ -1,40 +1,15 @@ import React from 'react'; -import { shallow } from 'enzyme'; -import ModalContent from './modal-content.component'; +import { renderWithProvider } from '../../../../../test/lib/render-helpers'; +import ModalContent from '.'; describe('ModalContent Component', () => { - it('should render a title', () => { - const wrapper = shallow(); + const props = { + title: 'Modal Title', + description: 'Modal Description', + }; + it('should match snapshot', () => { + const { container } = renderWithProvider(); - expect(wrapper.find('.modal-content__title')).toHaveLength(1); - expect(wrapper.find('.modal-content__title').text()).toStrictEqual( - 'Modal Title', - ); - expect(wrapper.find('.modal-content__description')).toHaveLength(0); - }); - - it('should render a description', () => { - const wrapper = shallow(); - - expect(wrapper.find('.modal-content__title')).toHaveLength(0); - expect(wrapper.find('.modal-content__description')).toHaveLength(1); - expect(wrapper.find('.modal-content__description').text()).toStrictEqual( - 'Modal Description', - ); - }); - - it('should render both a title and a description', () => { - const wrapper = shallow( - , - ); - - expect(wrapper.find('.modal-content__title')).toHaveLength(1); - expect(wrapper.find('.modal-content__title').text()).toStrictEqual( - 'Modal Title', - ); - expect(wrapper.find('.modal-content__description')).toHaveLength(1); - expect(wrapper.find('.modal-content__description').text()).toStrictEqual( - 'Modal Description', - ); + expect(container).toMatchSnapshot(); }); }); diff --git a/ui/components/app/modal/modal.component.js b/ui/components/app/modal/modal.component.js index 14335c634..e2896a030 100644 --- a/ui/components/app/modal/modal.component.js +++ b/ui/components/app/modal/modal.component.js @@ -50,7 +50,11 @@ export default class Modal extends PureComponent { {headerText && (
    {headerText}
    -
    +
    )}
    diff --git a/ui/components/app/modal/modal.component.test.js b/ui/components/app/modal/modal.component.test.js index 646c9b11a..21fae44f4 100644 --- a/ui/components/app/modal/modal.component.test.js +++ b/ui/components/app/modal/modal.component.test.js @@ -1,133 +1,103 @@ import React from 'react'; -import { mount, shallow } from 'enzyme'; -import sinon from 'sinon'; -import Button from '../../ui/button'; +import { fireEvent } from '@testing-library/react'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; import Modal from './modal.component'; describe('Modal Component', () => { it('should render a modal with a submit button', () => { - const wrapper = shallow(); + const { container } = renderWithProvider(); - expect(wrapper.find('.modal-container')).toHaveLength(1); - const buttons = wrapper.find(Button); - expect(buttons).toHaveLength(1); - expect(buttons.at(0).props().type).toStrictEqual('primary'); + expect(container).toMatchSnapshot(); }); it('should render a modal with a cancel and a submit button', () => { - const handleCancel = sinon.spy(); - const handleSubmit = sinon.spy(); - const wrapper = shallow( - , - ); + const props = { + onCancel: jest.fn(), + cancelText: 'Cancel', + onSubmit: jest.fn(), + submitText: 'Submit', + }; + const { container, queryByText } = renderWithProvider(); + expect(container).toMatchSnapshot(); - const buttons = wrapper.find(Button); - expect(buttons).toHaveLength(2); - const cancelButton = buttons.at(0); - const submitButton = buttons.at(1); + const cancelButton = queryByText(props.cancelText); + const submitButton = queryByText(props.submitText); - expect(cancelButton.props().type).toStrictEqual('secondary'); - expect(cancelButton.props().children).toStrictEqual('Cancel'); - expect(handleCancel.callCount).toStrictEqual(0); - cancelButton.simulate('click'); - expect(handleCancel.callCount).toStrictEqual(1); + expect(props.onCancel).not.toHaveBeenCalled(); + fireEvent.click(cancelButton); + expect(props.onCancel).toHaveBeenCalled(); - expect(submitButton.props().type).toStrictEqual('primary'); - expect(submitButton.props().children).toStrictEqual('Submit'); - expect(handleSubmit.callCount).toStrictEqual(0); - submitButton.simulate('click'); - expect(handleSubmit.callCount).toStrictEqual(1); + expect(props.onSubmit).not.toHaveBeenCalled(); + fireEvent.click(submitButton); + expect(props.onSubmit).toHaveBeenCalled(); }); it('should render a modal with different button types', () => { - const wrapper = shallow( - undefined} - cancelText="Cancel" - cancelType="default" - onSubmit={() => undefined} - submitText="Submit" - submitType="confirm" - />, - ); + const props = { + onCancel: () => undefined, + cancelText: 'Cancel', + cancelType: 'default', + onSubmit: () => undefined, + submitText: 'Submit', + submitType: 'confirm', + }; - const buttons = wrapper.find(Button); - expect(buttons).toHaveLength(2); - expect(buttons.at(0).props().type).toStrictEqual('default'); - expect(buttons.at(1).props().type).toStrictEqual('confirm'); + const { container } = renderWithProvider(); + + expect(container).toMatchSnapshot(); }); it('should render a modal with children', () => { - const wrapper = shallow( - undefined} - cancelText="Cancel" - onSubmit={() => undefined} - submitText="Submit" - > + const props = { + onCancel: () => undefined, + cancelText: 'Cancel', + onSubmit: () => undefined, + submitText: 'Submit', + }; + const { container } = renderWithProvider( +
    , ); - expect(wrapper.find('.test-child')).toHaveLength(1); + expect(container).toMatchSnapshot(); }); it('should render a modal with a header', () => { - const handleCancel = sinon.spy(); - const handleSubmit = sinon.spy(); - const wrapper = shallow( - , - ); + const props = { + onCancel: jest.fn(), + cancelText: 'Cancel', + onSubmit: jest.fn(), + submitText: 'Submit', + headerText: 'My Header', + onClose: jest.fn(), + }; - expect(wrapper.find('.modal-container__header')).toHaveLength(1); - expect(wrapper.find('.modal-container__header-text').text()).toStrictEqual( - 'My Header', + const { container, queryByTestId } = renderWithProvider( + , ); - expect(handleCancel.callCount).toStrictEqual(0); - expect(handleSubmit.callCount).toStrictEqual(0); - wrapper.find('.modal-container__header-close').simulate('click'); - expect(handleCancel.callCount).toStrictEqual(1); - expect(handleSubmit.callCount).toStrictEqual(0); + expect(container).toMatchSnapshot(); + + const modalClose = queryByTestId('modal-header-close'); + fireEvent.click(modalClose); + expect(props.onClose).toHaveBeenCalled(); }); it('should disable the submit button if submitDisabled is true', () => { - const handleCancel = sinon.spy(); - const handleSubmit = sinon.spy(); - const wrapper = mount( - , - ); + const props = { + onCancel: jest.fn(), + cancelText: 'Cancel', + onSubmit: jest.fn(), + submitText: 'Submit', + submitDisabled: true, + headerText: 'My Header', + onClose: jest.fn(), + }; + const { queryByText } = renderWithProvider(); + const submitButton = queryByText(props.submitText); - const buttons = wrapper.find(Button); - expect(buttons).toHaveLength(2); - const cancelButton = buttons.at(0); - const submitButton = buttons.at(1); + expect(submitButton).toHaveAttribute('disabled'); - expect(handleCancel.callCount).toStrictEqual(0); - cancelButton.simulate('click'); - expect(handleCancel.callCount).toStrictEqual(1); - - expect(submitButton.props().disabled).toStrictEqual(true); - expect(handleSubmit.callCount).toStrictEqual(0); - submitButton.simulate('click'); - expect(handleSubmit.callCount).toStrictEqual(0); + fireEvent.click(submitButton); + expect(props.onSubmit).not.toHaveBeenCalled(); }); }); diff --git a/ui/components/ui/unit-input/unit-input.component.js b/ui/components/ui/unit-input/unit-input.component.js index de48c76b3..1a186e012 100644 --- a/ui/components/ui/unit-input/unit-input.component.js +++ b/ui/components/ui/unit-input/unit-input.component.js @@ -13,6 +13,7 @@ function removeLeadingZeroes(str) { */ export default class UnitInput extends PureComponent { static propTypes = { + dataTestId: PropTypes.string, children: PropTypes.node, actionComponent: PropTypes.node, error: PropTypes.bool, @@ -80,8 +81,14 @@ export default class UnitInput extends PureComponent { } render() { - const { error, placeholder, suffix, actionComponent, children } = - this.props; + const { + error, + placeholder, + suffix, + actionComponent, + children, + dataTestId, + } = this.props; const { value } = this.state; return ( @@ -92,6 +99,7 @@ export default class UnitInput extends PureComponent {