Continue converting tests from enzyme to @testing-library/react (#16401)

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`] = `
+<div>
+  <div
+    class="someClassName"
+    style="color: red;"
+  >
+    <button
+      aria-checked="false"
+      class="button-group__button"
+      data-testid="button-group__button0"
+    >
+      <div
+        class="mockClass"
+      />
+    </button>
+    <button
+      aria-checked="true"
+      class="button-group__button button-group__button--active"
+      data-testid="button-group__button1"
+    />
+    <button
+      aria-checked="false"
+      class="button-group__button"
+      data-testid="button-group__button2"
+    />
+  </div>
+</div>
+`;

ui/components/ui/button-group/button-group-component.test.js

@@ -1,130 +1,30 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
-import sinon from 'sinon';
+import ButtonGroup from '.';
-import ButtonGroup from './button-group.component';
 
 describe('ButtonGroup Component', () => {
-  let wrapper;
+  const props = {
-
+    defaultActiveButtonIndex: 1,
-  const childButtonSpies = {
+    disabled: false,
-    onClick: sinon.spy(),
+    className: 'someClassName',
+    style: {
+      color: 'red',
+    },
   };
 
   const mockButtons = [
-    <button onClick={childButtonSpies.onClick} key="a">
+    <button key="a">
       <div className="mockClass" />
     </button>,
-    <button onClick={childButtonSpies.onClick} key="b"></button>,
+    <button key="b"></button>,
-    <button onClick={childButtonSpies.onClick} key="c"></button>,
+    <button key="c"></button>,
   ];
 
-  beforeAll(() => {
+  it('should match snapshot', () => {
-    sinon.spy(ButtonGroup.prototype, 'handleButtonClick');
+    const { container } = renderWithProvider(
-    sinon.spy(ButtonGroup.prototype, 'renderButtons');
+      <ButtonGroup {...props}>{mockButtons}</ButtonGroup>,
-  });
-
-  beforeEach(() => {
-    wrapper = shallow(
-      <ButtonGroup
-        defaultActiveButtonIndex={1}
-        disabled={false}
-        className="someClassName"
-        style={{ color: 'red' }}
-      >
-        {mockButtons}
-      </ButtonGroup>,
     );
-  });
-
-  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', () => {
+    expect(container).toMatchSnapshot();
-      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);
-    });
   });
 });

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`] = `
+<div>
+  <div
+    class="page-container__footer"
+  >
+    <footer>
+      <button
+        class="button btn--rounded btn-secondary page-container__footer-button"
+        data-testid="page-container-footer-cancel"
+        role="button"
+        tabindex="0"
+      >
+        Cancel
+      </button>
+      <button
+        class="button btn--rounded btn-default page-container__footer-button"
+        data-testid="page-container-footer-next"
+        role="button"
+        tabindex="0"
+      >
+        Submit
+      </button>
+    </footer>
+  </div>
+</div>
+`;
+
+exports[`Page Footer should render a secondary footer inside page-container__footer when given children 1`] = `
+<div>
+  <div
+    class="page-container__footer"
+  >
+    <footer>
+      <button
+        class="button btn--rounded btn-secondary page-container__footer-button"
+        data-testid="page-container-footer-cancel"
+        role="button"
+        tabindex="0"
+      >
+        [cancel]
+      </button>
+      <button
+        class="button btn--rounded btn-primary page-container__footer-button"
+        data-testid="page-container-footer-next"
+        role="button"
+        tabindex="0"
+      >
+        [next]
+      </button>
+    </footer>
+    <div
+      class="page-container__footer-secondary"
+    >
+      <div>
+        Works
+      </div>
+    </div>
+  </div>
+</div>
+`;

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 { fireEvent } from '@testing-library/react';
-import sinon from 'sinon';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
-import Button from '../../button';
+import PageFooter from '.';
-import PageFooter from './page-container-footer.component';
 
 describe('Page Footer', () => {
-  let wrapper;
+  const props = {
-  const onCancel = sinon.spy();
+    onCancel: jest.fn(),
-  const onSubmit = sinon.spy();
+    onSubmit: jest.fn(),
+    cancelText: 'Cancel',
+    submitText: 'Submit',
+    disabled: false,
+    submitButtonType: 'Test Type',
+  };
 
-  beforeEach(() => {
+  it('should match snapshot', () => {
-    wrapper = shallow(
+    const { container } = renderWithProvider(<PageFooter {...props} />);
-      <PageFooter
-        onCancel={onCancel}
-        onSubmit={onSubmit}
-        cancelText="Cancel"
-        submitText="Submit"
-        disabled={false}
-        submitButtonType="Test Type"
-      />,
-    );
-  });
 
-  it('renders page container footer', () => {
+    expect(container).toMatchSnapshot();
-    expect(wrapper.find('.page-container__footer')).toHaveLength(1);
   });
 
   it('should render a secondary footer inside page-container__footer when given children', () => {
-    wrapper = shallow(
+    const { container } = renderWithProvider(
       <PageFooter>
         <div>Works</div>
       </PageFooter>,
-      { context: { t: sinon.spy((k) => `[${k}]`) } },
     );
 
-    expect(wrapper.find('.page-container__footer-secondary')).toHaveLength(1);
+    expect(container).toMatchSnapshot();
-  });
-
-  it('renders two button components', () => {
-    expect(wrapper.find(Button)).toHaveLength(2);
   });
 
   describe('Cancel Button', () => {
-    it('has button type of default', () => {
+    it('should call cancel when click is simulated', () => {
-      expect(
+      const { queryByTestId } = renderWithProvider(<PageFooter {...props} />);
-        wrapper.find('.page-container__footer-button').first().prop('type'),
-      ).toStrictEqual('secondary');
-    });
 
-    it('has children text of Cancel', () => {
+      const cancelButton = queryByTestId('page-container-footer-cancel');
-      expect(
-        wrapper.find('.page-container__footer-button').first().prop('children'),
-      ).toStrictEqual('Cancel');
-    });
 
-    it('should call cancel when click is simulated', () => {
+      fireEvent.click(cancelButton);
-      wrapper.find('.page-container__footer-button').first().prop('onClick')();
+
-      expect(onCancel.callCount).toStrictEqual(1);
+      expect(props.onCancel).toHaveBeenCalled();
     });
   });
 
   describe('Submit Button', () => {
-    it('assigns button type based on props', () => {
+    it('should call submit when click is simulated', () => {
-      expect(
+      const { queryByTestId } = renderWithProvider(<PageFooter {...props} />);
-        wrapper.find('.page-container__footer-button').last().prop('type'),
-      ).toStrictEqual('Test Type');
-    });
 
-    it('has disabled prop', () => {
+      const submitButton = queryByTestId('page-container-footer-next');
-      expect(
-        wrapper.find('.page-container__footer-button').last().prop('disabled'),
-      ).toStrictEqual(false);
-    });
 
-    it('has children text when submitText prop exists', () => {
+      fireEvent.click(submitButton);
-      expect(
-        wrapper.find('.page-container__footer-button').last().prop('children'),
-      ).toStrictEqual('Submit');
-    });
 
-    it('should call submit when click is simulated', () => {
+      expect(props.onSubmit).toHaveBeenCalled();
-      wrapper.find('.page-container__footer-button').last().prop('onClick')();
-      expect(onSubmit.callCount).toStrictEqual(1);
     });
   });
 });

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`] = `
+<div>
+  <div
+    class="site-origin"
+  >
+    <bdi
+      dir="ltr"
+    >
+      0-example.com
+    </bdi>
+  </div>
+</div>
+`;

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(
       <SiteOrigin {...defaultProps} siteOrigin={numberHyphenPrefixOrigin} />,
     );
-    const bdiElement = wrapper.find('bdi');
 
-    expect(bdiElement.text()).toBe('0-example.com');
+    expect(container).toMatchSnapshot();
   });
 });

ui/pages/settings/advanced-tab/advanced-tab.component.js

@@ -205,6 +205,7 @@ export default class AdvancedTab extends PureComponent {
             </label>
             <input
               id="restore-file"
+              data-testid="restore-file"
               style={{ visibility: 'hidden' }}
               type="file"
               accept=".json"
@@ -260,6 +261,7 @@ export default class AdvancedTab extends PureComponent {
         <div className="settings-page__content-item">
           <div className="settings-page__content-item-col">
             <Button
+              data-testid="backup-button"
               type="secondary"
               large
               onClick={() => this.backupUserData()}
@@ -544,6 +546,7 @@ export default class AdvancedTab extends PureComponent {
             <TextField
               type="number"
               id="autoTimeout"
+              data-testid="auto-lockout-time"
               placeholder="5"
               value={this.state.autoLockTimeLimit}
               onChange={(e) => this.handleLockChange(e.target.value)}
@@ -554,6 +557,7 @@ export default class AdvancedTab extends PureComponent {
             />
             <Button
               type="primary"
+              data-testid="auto-lockout-button"
               className="settings-tab__rpc-save-button"
               disabled={lockTimeError !== ''}
               onClick={() => {

ui/pages/settings/advanced-tab/advanced-tab.component.test.js

@@ -1,180 +1,69 @@
 import React from 'react';
-import sinon from 'sinon';
+import { fireEvent } from '@testing-library/react';
-import { shallow } from 'enzyme';
+import configureMockStore from 'redux-mock-store';
-import TextField from '../../../components/ui/text-field';
+import thunk from 'redux-thunk';
-import { LEDGER_TRANSPORT_TYPES } from '../../../../shared/constants/hardware-wallets';
+import mockState from '../../../../test/data/mock-state.json';
-import ToggleButton from '../../../components/ui/toggle-button';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
-import AdvancedTab from './advanced-tab.component';
+import AdvancedTab from '.';
+
+const mockSetAutoLockTimeLimit = jest.fn();
+const mockSetShowTestNetworks = jest.fn();
+const mockSetUseTokenDetection = jest.fn();
+
+jest.mock('../../../store/actions.js', () => {
+  return {
+    setAutoLockTimeLimit: () => mockSetAutoLockTimeLimit,
+    setShowTestNetworks: () => mockSetShowTestNetworks,
+    setUseTokenDetection: () => mockSetUseTokenDetection,
+  };
+});
 
 describe('AdvancedTab Component', () => {
-  let component;
+  const mockStore = configureMockStore([thunk])(mockState);
-  let setAutoLockTimeLimitSpy = sinon.spy();
-  const toggleTestnet = sinon.spy();
-  const toggleTokenDetection = sinon.spy();
-
-  beforeAll(() => {
-    component = shallow(
-      <AdvancedTab
-        ipfsGateway=""
-        setAutoLockTimeLimit={setAutoLockTimeLimitSpy}
-        setIpfsGateway={() => undefined}
-        setShowFiatConversionOnTestnetsPreference={() => undefined}
-        setShowTestNetworks={toggleTestnet}
-        showTestNetworks={false}
-        ledgerTransportType={LEDGER_TRANSPORT_TYPES.U2F}
-        setLedgerTransportPreference={() => undefined}
-        setDismissSeedBackUpReminder={() => undefined}
-        dismissSeedBackUpReminder={false}
-        useTokenDetection
-        setUseTokenDetection={toggleTokenDetection}
-        userHasALedgerAccount
-        backupUserData={() => undefined}
-        restoreUserData={() => undefined}
-      />,
-      {
-        context: {
-          t: (s) => `_${s}`,
-        },
-      },
-    );
-  });
 
   it('should render backup button', () => {
-    expect(component.find('.settings-page__content-row')).toHaveLength(15);
+    const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
-
+    const backupButton = queryByTestId('backup-button');
-    expect(
+    expect(backupButton).toBeInTheDocument();
-      component
-        .find('.settings-page__content-row')
-        .at(10)
-        .find('.settings-page__content-item'),
-    ).toHaveLength(2);
-
-    expect(
-      component
-        .find('.settings-page__content-row')
-        .at(10)
-        .find('.settings-page__content-item')
-        .at(0)
-        .find('.settings-page__content-description')
-        .props().children,
-    ).toStrictEqual('_backupUserDataDescription');
-
-    expect(
-      component
-        .find('.settings-page__content-row')
-        .at(10)
-        .find('.settings-page__content-item')
-        .at(1)
-        .find('Button')
-        .props().children,
-    ).toStrictEqual('_backup');
   });
 
   it('should render restore button', () => {
-    expect(component.find('.settings-page__content-row')).toHaveLength(15);
+    const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
-
+    const restoreFile = queryByTestId('restore-file');
-    expect(
+    expect(restoreFile).toBeInTheDocument();
-      component
-        .find('.settings-page__content-row')
-        .at(11)
-        .find('.settings-page__content-item'),
-    ).toHaveLength(2);
-
-    expect(
-      component
-        .find('.settings-page__content-row')
-        .at(11)
-        .find('.settings-page__content-item')
-        .at(0)
-        .find('.settings-page__content-description')
-        .props().children,
-    ).toStrictEqual('_restoreUserDataDescription');
-
-    expect(
-      component
-        .find('.settings-page__content-row')
-        .at(11)
-        .find('.settings-page__content-item')
-        .at(1)
-        .find('label')
-        .props().children,
-    ).toStrictEqual('_restore');
   });
 
   it('should update autoLockTimeLimit', () => {
-    setAutoLockTimeLimitSpy = sinon.spy();
+    const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
-    component = shallow(
+    const autoLockoutTime = queryByTestId('auto-lockout-time');
-      <AdvancedTab
+    const autoLockoutButton = queryByTestId('auto-lockout-button');
-        ipfsGateway=""
+
-        setAutoLockTimeLimit={setAutoLockTimeLimitSpy}
+    fireEvent.change(autoLockoutTime, { target: { value: 1440 } });
-        setIpfsGateway={() => undefined}
+
-        setShowFiatConversionOnTestnetsPreference={() => undefined}
+    expect(autoLockoutTime).toHaveValue(1440);
-        ledgerTransportType={LEDGER_TRANSPORT_TYPES.U2F}
+
-        setLedgerTransportPreference={() => undefined}
+    fireEvent.click(autoLockoutButton);
-        setDismissSeedBackUpReminder={() => undefined}
+
-        dismissSeedBackUpReminder={false}
+    expect(mockSetAutoLockTimeLimit).toHaveBeenCalled();
-        setShowTestNetworks={toggleTestnet}
-        useTokenDetection
-        setUseTokenDetection={toggleTokenDetection}
-        userHasALedgerAccount
-        backupUserData={() => undefined}
-        restoreUserData={() => undefined}
-      />,
-      {
-        context: {
-          t: (s) => `_${s}`,
-        },
-      },
-    );
-
-    const autoTimeout = component.find('.settings-page__content-row').at(9);
-    const textField = autoTimeout.find(TextField);
-
-    textField.props().onChange({ target: { value: 1440 } });
-    expect(component.state().autoLockTimeLimit).toStrictEqual(1440);
-
-    autoTimeout.find('.settings-tab__rpc-save-button').simulate('click');
-    expect(setAutoLockTimeLimitSpy.args[0][0]).toStrictEqual(1440);
   });
 
   it('should toggle show test networks', () => {
-    const testNetworks = component.find('.settings-page__content-row').at(7);
+    const { queryAllByRole } = renderWithProvider(<AdvancedTab />, mockStore);
-    const toggleButton = testNetworks.find(ToggleButton);
+
-    toggleButton.first().simulate('toggle');
+    const testNetworkToggle = queryAllByRole('checkbox')[4];
-    expect(toggleTestnet.calledOnce).toStrictEqual(true);
+
+    fireEvent.click(testNetworkToggle);
+
+    expect(mockSetShowTestNetworks).toHaveBeenCalled();
   });
 
   it('should toggle token detection', () => {
-    component = shallow(
+    const { queryAllByRole } = renderWithProvider(<AdvancedTab />, mockStore);
-      <AdvancedTab
+
-        ipfsGateway=""
+    const tokenDetectionToggle = queryAllByRole('checkbox')[1];
-        setAutoLockTimeLimit={setAutoLockTimeLimitSpy}
+
-        setIpfsGateway={() => undefined}
+    fireEvent.click(tokenDetectionToggle);
-        setShowFiatConversionOnTestnetsPreference={() => undefined}
+
-        setShowTestNetworks={toggleTestnet}
+    expect(mockSetUseTokenDetection).toHaveBeenCalled();
-        showTestNetworks={false}
-        ledgerTransportType={LEDGER_TRANSPORT_TYPES.U2F}
-        setLedgerTransportPreference={() => undefined}
-        setDismissSeedBackUpReminder={() => undefined}
-        dismissSeedBackUpReminder={false}
-        useTokenDetection
-        setUseTokenDetection={toggleTokenDetection}
-        userHasALedgerAccount
-        backupUserData={() => undefined}
-        restoreUserData={() => undefined}
-      />,
-      {
-        context: {
-          trackEvent: () => undefined,
-          t: (s) => `_${s}`,
-        },
-      },
-    );
-    const useTokenDetection = component
-      .find('.settings-page__content-row')
-      .at(4);
-    const toggleButton = useTokenDetection.find(ToggleButton);
-    toggleButton.first().simulate('toggle');
-    expect(toggleTokenDetection.calledOnce).toStrictEqual(true);
   });
 });

ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap

@@ -0,0 +1,229 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`View Price Quote Difference displays a fiat error when calculationError is present 1`] = `
+<div>
+  <div
+    class="view-quote__price-difference-warning-wrapper high"
+  >
+    <div
+      class="actionable-message"
+    >
+      
+      <div
+        class="actionable-message__message"
+      >
+        <div
+          class="view-quote__price-difference-warning-contents"
+        >
+          <div
+            class="view-quote__price-difference-warning-contents-text"
+          >
+            <div
+              class="box box--padding-bottom-2 box--display-flex box--flex-direction-row box--justify-content-space-between"
+            >
+              <div
+                class="view-quote__price-difference-warning-contents-title"
+              >
+                Check your rate before proceeding
+              </div>
+              <div>
+                <div
+                  aria-describedby="tippy-tooltip-4"
+                  class=""
+                  data-original-title="Price impact is the difference between the current market price and the amount received during transaction execution. Price impact is a function of the size of your trade relative to the size of the liquidity pool."
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
+                >
+                  <i
+                    class="fa fa-info-circle"
+                  />
+                </div>
+              </div>
+            </div>
+            Price impact could not be determined due to lack of market price data. Please confirm that you are comfortable with the amount of tokens you are about to receive before swapping.
+            <div
+              class="view-quote__price-difference-warning-contents-actions"
+            >
+              <button>
+                I understand
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`View Price Quote Difference displays an error when in high bucket 1`] = `
+<div>
+  <div
+    class="view-quote__price-difference-warning-wrapper high"
+  >
+    <div
+      class="actionable-message"
+    >
+      
+      <div
+        class="actionable-message__message"
+      >
+        <div
+          class="view-quote__price-difference-warning-contents"
+        >
+          <div
+            class="view-quote__price-difference-warning-contents-text"
+          >
+            <div
+              class="box box--padding-bottom-2 box--display-flex box--flex-direction-row box--justify-content-space-between"
+            >
+              <div
+                class="view-quote__price-difference-warning-contents-title"
+              >
+                Price difference of ~%
+              </div>
+              <div>
+                <div
+                  aria-describedby="tippy-tooltip-3"
+                  class=""
+                  data-original-title="Price impact is the difference between the current market price and the amount received during transaction execution. Price impact is a function of the size of your trade relative to the size of the liquidity pool."
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
+                >
+                  <i
+                    class="fa fa-info-circle"
+                  />
+                </div>
+              </div>
+            </div>
+            You are about to swap 1 ETH (~) for 42.947749 LINK (~).
+            <div
+              class="view-quote__price-difference-warning-contents-actions"
+            >
+              <button>
+                I understand
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`View Price Quote Difference displays an error when in medium bucket 1`] = `
+<div>
+  <div
+    class="view-quote__price-difference-warning-wrapper medium"
+  >
+    <div
+      class="actionable-message"
+    >
+      
+      <div
+        class="actionable-message__message"
+      >
+        <div
+          class="view-quote__price-difference-warning-contents"
+        >
+          <div
+            class="view-quote__price-difference-warning-contents-text"
+          >
+            <div
+              class="box box--padding-bottom-2 box--display-flex box--flex-direction-row box--justify-content-space-between"
+            >
+              <div
+                class="view-quote__price-difference-warning-contents-title"
+              >
+                Price difference of ~%
+              </div>
+              <div>
+                <div
+                  aria-describedby="tippy-tooltip-2"
+                  class=""
+                  data-original-title="Price impact is the difference between the current market price and the amount received during transaction execution. Price impact is a function of the size of your trade relative to the size of the liquidity pool."
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
+                >
+                  <i
+                    class="fa fa-info-circle"
+                  />
+                </div>
+              </div>
+            </div>
+            You are about to swap 1 ETH (~) for 42.947749 LINK (~).
+            <div
+              class="view-quote__price-difference-warning-contents-actions"
+            >
+              <button>
+                I understand
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`View Price Quote Difference should match snapshot 1`] = `
+<div>
+  <div
+    class="view-quote__price-difference-warning-wrapper low"
+  >
+    <div
+      class="actionable-message"
+    >
+      
+      <div
+        class="actionable-message__message"
+      >
+        <div
+          class="view-quote__price-difference-warning-contents"
+        >
+          <div
+            class="view-quote__price-difference-warning-contents-text"
+          >
+            <div
+              class="box box--padding-bottom-2 box--display-flex box--flex-direction-row box--justify-content-space-between"
+            >
+              <div
+                class="view-quote__price-difference-warning-contents-title"
+              >
+                Price difference of ~%
+              </div>
+              <div>
+                <div
+                  aria-describedby="tippy-tooltip-1"
+                  class=""
+                  data-original-title="Price impact is the difference between the current market price and the amount received during transaction execution. Price impact is a function of the size of your trade relative to the size of the liquidity pool."
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
+                >
+                  <i
+                    class="fa fa-info-circle"
+                  />
+                </div>
+              </div>
+            </div>
+            You are about to swap 1 ETH (~) for 42.947749 LINK (~).
+            <div
+              class="view-quote__price-difference-warning-contents-actions"
+            >
+              <button>
+                I understand
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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 mockState = {
-
-  const state = {
     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;
+  it('should match snapshot', () => {
-  function renderComponent(props) {
+    const { container } = renderWithProvider(
-    component = shallow(
+      <ViewQuotePriceDifference {...DEFAULT_PROPS} />,
-      <Provider store={store}>
+      mockStore,
-        <ViewQuotePriceDifference {...props} />
-      </Provider>,
-      {
-        context: { t },
-      },
     );
-  }
 
-  afterEach(() => {
+    expect(container).toMatchSnapshot();
-    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);
   });
 
   it('displays an error when in medium bucket', () => {
     const props = { ...DEFAULT_PROPS };
     props.usedQuote.priceSlippage.bucket = GAS_RECOMMENDATIONS.MEDIUM;
 
-    renderComponent(props);
+    const { container } = renderWithProvider(
-    expect(component.html()).toContain(GAS_RECOMMENDATIONS.MEDIUM);
+      <ViewQuotePriceDifference {...props} />,
+      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);
+    const { container } = renderWithProvider(
-    expect(component.html()).toContain(GAS_RECOMMENDATIONS.HIGH);
+      <ViewQuotePriceDifference {...props} />,
+      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);
+    const { container } = renderWithProvider(
-    expect(component.html()).toContain(GAS_RECOMMENDATIONS.HIGH);
+      <ViewQuotePriceDifference {...props} />,
+      mockStore,
+    );
+
+    expect(container).toMatchSnapshot();
   });
 });