Increase Jest unit test coverage for the Swaps feature to ~60% (#11343)

2024-12-22 09:23:21 +01:00 · 2021-07-02 15:48:34 +02:00 · 2021-07-02 15:48:34 +02:00 · 8ca0d24f82
commit 8ca0d24f82
parent bda4d0cbca
25 changed files with 772 additions and 103 deletions
--- a/jest.config.js
+++ b/jest.config.js
@ -5,10 +5,10 @@ module.exports = {
  coveragePathIgnorePatterns: ['.stories.js', '.snap'],
  coverageThreshold: {
    global: {
-      branches: 32.75,
-      functions: 42.9,
-      lines: 43.12,
-      statements: 43.67,
+      branches: 45.45,
+      functions: 55.29,
+      lines: 60.22,
+      statements: 60.43,
    },
  },
  setupFiles: ['./test/setup.js', './test/env.js'],
--- a/test/jest/mock-store.js
+++ b/test/jest/mock-store.js
@ -4,7 +4,19 @@ export const createSwapsMockStore = () => {
  return {
    swaps: {
      customGas: {
+        limit: '0x0',
        fallBackPrice: 5,
+        priceEstimates: {
+          blockTime: 14.1,
+          safeLow: 2.5,
+          safeLowWait: 6.6,
+          average: 4,
+          avgWait: 5.3,
+          fast: 5,
+          fastWait: 3.3,
+          fastest: 10,
+          fastestWait: 0.5,
+        },
      },
      fromToken: 'ETH',
    },
@ -84,7 +96,108 @@ export const createSwapsMockStore = () => {
        },
      ],
      swapsState: {
-        quotes: {},
+        quotes: {
+          TEST_AGG_1: {
+            trade: {
+              from: '0xe18035bf8712672935fdb4e5e431b1a0183d2dfc',
+              value: '0x0',
+              gas: '0x61a80', // 4e5
+              to: '0x881D40237659C251811CEC9c364ef91dC08D300C',
+            },
+            sourceAmount: '10000000000000000000', // 10e18
+            destinationAmount: '20000000000000000000', // 20e18
+            error: null,
+            sourceToken: '0x6b175474e89094c44da98b954eedeac495271d0f',
+            destinationToken: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+            approvalNeeded: null,
+            maxGas: 600000,
+            averageGas: 120000,
+            estimatedRefund: 80000,
+            fetchTime: 607,
+            aggregator: 'TEST_AGG_1',
+            aggType: 'AGG',
+            slippage: 2,
+            sourceTokenInfo: {
+              address: '0x6b175474e89094c44da98b954eedeac495271d0f',
+              symbol: 'DAI',
+              decimals: 18,
+              iconUrl: 'https://foo.bar/logo.png',
+            },
+            destinationTokenInfo: {
+              address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+              symbol: 'USDC',
+              decimals: 18,
+            },
+            fee: 1,
+          },
+
+          TEST_AGG_BEST: {
+            trade: {
+              from: '0xe18035bf8712672935fdb4e5e431b1a0183d2dfc',
+              value: '0x0',
+              gas: '0x61a80',
+              to: '0x881D40237659C251811CEC9c364ef91dC08D300C',
+            },
+            sourceAmount: '10000000000000000000',
+            destinationAmount: '25000000000000000000', // 25e18
+            error: null,
+            sourceToken: '0x6b175474e89094c44da98b954eedeac495271d0f',
+            destinationToken: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+            approvalNeeded: null,
+            maxGas: 1100000,
+            averageGas: 411000,
+            estimatedRefund: 343090,
+            fetchTime: 1003,
+            aggregator: 'TEST_AGG_BEST',
+            aggType: 'AGG',
+            slippage: 2,
+            sourceTokenInfo: {
+              address: '0x6b175474e89094c44da98b954eedeac495271d0f',
+              symbol: 'DAI',
+              decimals: 18,
+              iconUrl: 'https://foo.bar/logo.png',
+            },
+            destinationTokenInfo: {
+              address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+              symbol: 'USDC',
+              decimals: 18,
+            },
+            fee: 1,
+          },
+          TEST_AGG_2: {
+            trade: {
+              from: '0xe18035bf8712672935fdb4e5e431b1a0183d2dfc',
+              value: '0x0',
+              gas: '0x61a80',
+              to: '0x881D40237659C251811CEC9c364ef91dC08D300C',
+            },
+            sourceAmount: '10000000000000000000',
+            destinationAmount: '22000000000000000000', // 22e18
+            error: null,
+            sourceToken: '0x6b175474e89094c44da98b954eedeac495271d0f',
+            destinationToken: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+            approvalNeeded: null,
+            maxGas: 368000,
+            averageGas: 197000,
+            estimatedRefund: 18205,
+            fetchTime: 1354,
+            aggregator: 'TEST_AGG_2',
+            aggType: 'AGG',
+            slippage: 2,
+            sourceTokenInfo: {
+              address: '0x6b175474e89094c44da98b954eedeac495271d0f',
+              symbol: 'DAI',
+              decimals: 18,
+              iconUrl: 'https://foo.bar/logo.png',
+            },
+            destinationTokenInfo: {
+              address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+              symbol: 'USDC',
+              decimals: 18,
+            },
+            fee: 1,
+          },
+        },
        fetchParams: {
          metaData: {
            sourceTokenInfo: {
@ -97,10 +210,11 @@ export const createSwapsMockStore = () => {
        },
        tradeTxId: null,
        approveTxId: null,
-        quotesLastFetched: null,
+        quotesLastFetched: 1519211809934,
+        swapsQuoteRefreshTime: 60000,
        customMaxGas: '',
        customGasPrice: null,
-        selectedAggId: null,
+        selectedAggId: 'TEST_AGG_2',
        customApproveTxData: '',
        errorKey: '',
        topAggId: null,
@ -108,5 +222,17 @@ export const createSwapsMockStore = () => {
        swapsFeatureIsLive: false,
      },
    },
+    appState: {
+      modal: {
+        open: true,
+        modalState: {
+          name: 'test',
+          props: {
+            initialGasLimit: 100,
+            minimumGasLimit: 5,
+          },
+        },
+      },
+    },
  };
 };
--- a/ui/mocks/react-router-dom.js
+++ b/ui/mocks/react-router-dom.js
@ -2,7 +2,9 @@ const originalModule = jest.requireActual('react-router-dom');

 module.exports = {
  ...originalModule,
-  useHistory: jest.fn(),
+  useHistory: jest.fn(() => {
+    return [];
+  }),
  useLocation: jest.fn(() => {
    return {
      pathname: '/swaps/build-quote',
--- a/ui/components/ui/button-group/button-group.component.js
+++ b/ui/components/ui/button-group/button-group.component.js
@ -61,6 +61,7 @@ export default class ButtonGroup extends PureComponent {
                  index === this.state.activeButtonIndex,
              },
            )}
+            data-testid={`button-group__button${index}`}
            onClick={() => {
              this.handleButtonClick(index);
              child.props.onClick?.();
--- a/ui/components/ui/page-container/page-container-header/page-container-header.component.js
+++ b/ui/components/ui/page-container/page-container-header/page-container-header.component.js
@ -61,6 +61,7 @@ export default class PageContainerHeader extends Component {
        className={classnames('page-container__header', className, {
          'page-container__header--no-padding-bottom': Boolean(tabs),
        })}
+        data-testid="page-container__header"
      >
        {this.renderHeaderRow()}

--- a/ui/pages/swaps/awaiting-signatures/snapshots/awaiting-signatures.test.js.snap
+++ b/ui/pages/swaps/awaiting-signatures/snapshots/awaiting-signatures.test.js.snap
@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AwaitingSignatures renders the component with initial props for 1 confirmation 1`] = `
-<div
-  class="swaps-footer"
->
-  <div
-    class="swaps-footer__buttons"
-  >
-    <div
-      class="page-container__footer swaps-footer__custom-page-container-footer-class"
-    >
-      <footer>
-        <button
-          class="button btn-primary page-container__footer-button swaps-footer__custom-page-container-footer-button-class swaps-footer__custom-page-container-footer-button-class--single"
-          data-testid="page-container-footer-next"
-          role="button"
-          tabindex="0"
-        >
-          Cancel
-        </button>
-      </footer>
-    </div>
-  </div>
-</div>
-`;
--- a/ui/pages/swaps/awaiting-signatures/awaiting-signatures.test.js
+++ b/ui/pages/swaps/awaiting-signatures/awaiting-signatures.test.js
@ -12,6 +12,6 @@ describe('AwaitingSignatures', () => {
    const store = configureMockStore()(createSwapsMockStore());
    const { getByText } = renderWithProvider(<AwaitingSignatures />, store);
    expect(getByText('Confirm with your hardware wallet')).toBeInTheDocument();
-    expect(document.querySelector('.swaps-footer')).toMatchSnapshot();
+    expect(getByText('Cancel')).toBeInTheDocument();
  });
 });
--- a/ui/pages/swaps/awaiting-swap/snapshots/awaiting-swap.test.js.snap
+++ b/ui/pages/swaps/awaiting-swap/snapshots/awaiting-swap.test.js.snap
@ -17,29 +17,3 @@ exports[`AwaitingSwap renders the component with initial props 1`] = `
  </span>
 </div>
 `;
-
-exports[`AwaitingSwap renders the component with initial props 2`] = `
-<div
-  class="swaps-footer"
->
-  <div
-    class="swaps-footer__buttons"
-  >
-    <div
-      class="page-container__footer swaps-footer__custom-page-container-footer-class"
-    >
-      <footer>
-        <button
-          class="button btn-primary page-container__footer-button swaps-footer__custom-page-container-footer-button-class swaps-footer__custom-page-container-footer-button-class--single"
-          data-testid="page-container-footer-next"
-          disabled=""
-          role="button"
-          tabindex="0"
-        >
-          View in activity
-        </button>
-      </footer>
-    </div>
-  </div>
-</div>
-`;
--- a/ui/pages/swaps/awaiting-swap/awaiting-swap.js
+++ b/ui/pages/swaps/awaiting-swap/awaiting-swap.js
@ -130,9 +130,10 @@ export default function AwaitingSwap({
    { blockExplorerUrl: baseNetworkUrl },
  );

-  const isCustomBlockExplorerUrl =
+  const isCustomBlockExplorerUrl = Boolean(
    SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP[chainId] ||
-    rpcPrefs.blockExplorerUrl;
+      rpcPrefs.blockExplorerUrl,
+  );

  let headerText;
  let statusImage;
--- a/ui/pages/swaps/awaiting-swap/awaiting-swap.test.js
+++ b/ui/pages/swaps/awaiting-swap/awaiting-swap.test.js
@ -32,6 +32,6 @@ describe('AwaitingSwap', () => {
    expect(
      document.querySelector('.awaiting-swap__main-descrption'),
    ).toMatchSnapshot();
-    expect(document.querySelector('.swaps-footer')).toMatchSnapshot();
+    expect(getByText('View in activity')).toBeInTheDocument();
  });
 });
--- a/ui/pages/swaps/build-quote/snapshots/build-quote.test.js.snap
+++ b/ui/pages/swaps/build-quote/snapshots/build-quote.test.js.snap
@ -8,6 +8,7 @@ exports[`BuildQuote renders the component with initial props 1`] = `
  <button
    aria-checked="false"
    class="button-group__button radio-button"
+    data-testid="button-group__button0"
    role="radio"
  >
    2%
@ -15,6 +16,7 @@ exports[`BuildQuote renders the component with initial props 1`] = `
  <button
    aria-checked="false"
    class="button-group__button radio-button"
+    data-testid="button-group__button1"
    role="radio"
  >
    3%
@ -22,6 +24,7 @@ exports[`BuildQuote renders the component with initial props 1`] = `
  <button
    aria-checked="true"
    class="button-group__button slippage-buttons__button-group-custom-button radio-button--danger radio-button button-group__button--active radio-button--active"
+    data-testid="button-group__button2"
    role="radio"
  >
    15
@ -33,34 +36,3 @@ exports[`BuildQuote renders the component with initial props 1`] = `
  </button>
 </div>
 `;
-
-exports[`BuildQuote renders the component with initial props 2`] = `
-<div
-  class="swaps-footer"
->
-  <div
-    class="swaps-footer__buttons"
-  >
-    <div
-      class="page-container__footer swaps-footer__custom-page-container-footer-class"
-    >
-      <footer>
-        <button
-          class="button btn-primary page-container__footer-button swaps-footer__custom-page-container-footer-button-class swaps-footer__custom-page-container-footer-button-class--single"
-          data-testid="page-container-footer-next"
-          disabled=""
-          role="button"
-          tabindex="0"
-        >
-          Review Swap
-        </button>
-      </footer>
-    </div>
-  </div>
-  <div
-    class="swaps-footer__bottom-text"
-  >
-    Terms of Service
-  </div>
-</div>
-`;
--- a/ui/pages/swaps/build-quote/build-quote.test.js
+++ b/ui/pages/swaps/build-quote/build-quote.test.js
@ -42,6 +42,5 @@ describe('BuildQuote', () => {
    expect(
      document.querySelector('.slippage-buttons__button-group'),
    ).toMatchSnapshot();
-    expect(document.querySelector('.swaps-footer')).toMatchSnapshot();
  });
 });
--- a/ui/pages/swaps/fee-card/snapshots/fee-card.test.js.snap
+++ b/ui/pages/swaps/fee-card/snapshots/fee-card.test.js.snap
@ -3,6 +3,7 @@
 exports[`FeeCard renders the component with initial props 1`] = `
 <div
  class="fee-card__savings-and-quotes-header"
+  data-testid="fee-card__savings-and-quotes-header"
 >
  <div
    class="fee-card__savings-and-quotes-row"
--- a/ui/pages/swaps/fee-card/fee-card.js
+++ b/ui/pages/swaps/fee-card/fee-card.js
@ -47,7 +47,10 @@ export default function FeeCard({

  return (
    <div className="fee-card">
-      <div className="fee-card__savings-and-quotes-header">
+      <div
+        className="fee-card__savings-and-quotes-header"
+        data-testid="fee-card__savings-and-quotes-header"
+      >
        <div className="fee-card__savings-and-quotes-row">
          {bestQuoteText && (
            <p className="fee-card__savings-text">{bestQuoteText}</p>
@ -66,7 +69,10 @@ export default function FeeCard({
        </div>
      </div>
      <div className="fee-card__main">
-        <div className="fee-card__row-header">
+        <div
+          className="fee-card__row-header"
+          data-testid="fee-card__row-header"
+        >
          <div>
            <div className="fee-card__row-header-text--bold">
              {t('swapEstimatedNetworkFee')}
--- a/ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.test.js
+++ b/ui/pages/swaps/loading-swaps-quotes/loading-swaps-quotes.test.js
@ -0,0 +1,41 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+
+import {
+  renderWithProvider,
+  createSwapsMockStore,
+} from '../../../../test/jest';
+import LoadingSwapsQuotes from '.';
+
+const createProps = (customProps = {}) => {
+  return {
+    loadingComplete: true,
+    onDone: jest.fn(),
+    aggregatorMetadata: {
+      agg1: {
+        color: '#283B4C',
+        title: 'agg1',
+        icon: 'data:image/png;base64,iVBORw0KGgoAAA',
+      },
+      agg2: {
+        color: '#283B4C',
+        title: 'agg2',
+        icon: 'data:image/png;base64,iVBORw0KGgoAAA',
+      },
+    },
+    ...customProps,
+  };
+};
+
+describe('LoadingSwapsQuotes', () => {
+  it('renders the component with initial props', () => {
+    const store = configureMockStore()(createSwapsMockStore());
+    const { getByText } = renderWithProvider(
+      <LoadingSwapsQuotes {...createProps()} />,
+      store,
+    );
+    expect(getByText('Quote 1 of 2')).toBeInTheDocument();
+    expect(getByText('Checking agg', { exact: false })).toBeInTheDocument();
+    expect(getByText('Back')).toBeInTheDocument();
+  });
+});
--- a/ui/pages/swaps/main-quote-summary/snapshots/main-quote-summary.test.js.snap
+++ b/ui/pages/swaps/main-quote-summary/snapshots/main-quote-summary.test.js.snap
@ -3,6 +3,7 @@
 exports[`MainQuoteSummary renders the component with initial props 1`] = `
 <div
  class="main-quote-summary__source-row"
+  data-testid="main-quote-summary__source-row"
 >
  <span
    class="main-quote-summary__source-row-value"
@ -65,6 +66,7 @@ exports[`MainQuoteSummary renders the component with initial props 3`] = `
 exports[`MainQuoteSummary renders the component with initial props 4`] = `
 <div
  class="main-quote-summary__exchange-rate-container"
+  data-testid="main-quote-summary__exchange-rate-container"
 >
  <div
    class="exchange-rate-display main-quote-summary__exchange-rate-display"
--- a/ui/pages/swaps/main-quote-summary/main-quote-summary.js
+++ b/ui/pages/swaps/main-quote-summary/main-quote-summary.js
@ -52,7 +52,10 @@ export default function MainQuoteSummary({
    <div className="main-quote-summary">
      <div className="main-quote-summary__details">
        <div className="main-quote-summary__quote-details-top">
-          <div className="main-quote-summary__source-row">
+          <div
+            className="main-quote-summary__source-row"
+            data-testid="main-quote-summary__source-row"
+          >
            <span
              className="main-quote-summary__source-row-value"
              title={formatSwapsValueForDisplay(sourceAmount)}
@ -107,7 +110,10 @@ export default function MainQuoteSummary({
            </Tooltip>
          </div>
        </div>
-        <div className="main-quote-summary__exchange-rate-container">
+        <div
+          className="main-quote-summary__exchange-rate-container"
+          data-testid="main-quote-summary__exchange-rate-container"
+        >
          <ExchangeRateDisplay
            primaryTokenValue={sourceValue}
            primaryTokenDecimals={sourceDecimals}
--- a/ui/pages/swaps/slippage-buttons/snapshots/slippage-buttons.test.js.snap
+++ b/ui/pages/swaps/slippage-buttons/snapshots/slippage-buttons.test.js.snap
@ -20,6 +20,7 @@ exports[`SlippageButtons renders the component with initial props 2`] = `
  <button
    aria-checked="false"
    class="button-group__button radio-button"
+    data-testid="button-group__button0"
    role="radio"
  >
    2%
@ -27,6 +28,7 @@ exports[`SlippageButtons renders the component with initial props 2`] = `
  <button
    aria-checked="true"
    class="button-group__button radio-button button-group__button--active radio-button--active"
+    data-testid="button-group__button1"
    role="radio"
  >
    3%
@ -34,6 +36,7 @@ exports[`SlippageButtons renders the component with initial props 2`] = `
  <button
    aria-checked="false"
    class="button-group__button slippage-buttons__button-group-custom-button radio-button"
+    data-testid="button-group__button2"
    role="radio"
  >
    custom
--- a/ui/pages/swaps/swaps-gas-customization-modal/snapshots/swaps-gas-customization-modal.component.test.js.snap
+++ b/ui/pages/swaps/swaps-gas-customization-modal/snapshots/swaps-gas-customization-modal.component.test.js.snap
@ -0,0 +1,136 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GasCustomizationModalComponent renders the component with initial props 1`] = `
+<div
+  class="page-container__header page-container__header--no-padding-bottom"
+  data-testid="page-container__header"
+>
+  <div
+    class="page-container__title"
+  >
+    Customize Gas
+  </div>
+  <div
+    class="page-container__subtitle"
+  >
+    Increasing fee may decrease processing times, but it is not guaranteed.
+  </div>
+  <a
+    class="button btn-link page-container__header-close-text"
+    role="button"
+    tabindex="0"
+  >
+    Close
+  </a>
+  <ul
+    class="page-container__tabs"
+  >
+    <li
+      class="tab page-container__tab tab--active"
+    >
+      <button>
+        Basic
+      </button>
+    </li>
+    <li
+      class="tab page-container__tab"
+    >
+      <button>
+        Advanced
+      </button>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`GasCustomizationModalComponent renders the component with initial props 2`] = `
+<button
+  aria-checked="false"
+  class="button-group__button"
+  data-testid="button-group__button0"
+>
+  <div>
+    <div
+      class="gas-price-button-group__label"
+    >
+      Fast
+    </div>
+    <div
+      class="gas-price-button-group__time-estimate"
+    >
+      ~ 1 min 0 sec
+    </div>
+    <div
+      class="gas-price-button-group__primary-currency"
+    >
+      $0.52
+    </div>
+    <div
+      class="gas-price-button-group__secondary-currency"
+    >
+      0.0048 ETH
+    </div>
+    <div
+      class="button-check-wrapper"
+    >
+      <i
+        class="fa fa-check fa-sm"
+      />
+    </div>
+  </div>
+</button>
+`;
+
+exports[`GasCustomizationModalComponent renders the component with initial props 3`] = `
+<div
+  class="gas-modal-content__info-row__send-info"
+  data-testid="gas-modal-content__info-row__send-info"
+>
+  <span
+    class="gas-modal-content__info-row__send-info__label"
+  >
+    Send Amount
+  </span>
+  <span
+    class="gas-modal-content__info-row__send-info__value"
+  >
+    mockSendAmount
+  </span>
+</div>
+`;
+
+exports[`GasCustomizationModalComponent renders the component with initial props 4`] = `
+<div
+  class="gas-modal-content__info-row__transaction-info"
+  data-testid="gas-modal-content__info-row__transaction-info"
+>
+  <span
+    class="gas-modal-content__info-row__transaction-info__label"
+  >
+    Transaction Fee
+  </span>
+  <span
+    class="gas-modal-content__info-row__transaction-info__value"
+  >
+    mockTransactionFee
+  </span>
+</div>
+`;
+
+exports[`GasCustomizationModalComponent renders the component with initial props 5`] = `
+<div
+  class="gas-modal-content__info-row__total-info"
+  data-testid="gas-modal-content__info-row__total-info"
+>
+  <span
+    class="gas-modal-content__info-row__total-info__label"
+  >
+    New Total
+  </span>
+  <span
+    class="gas-modal-content__info-row__total-info__value"
+  >
+    mockNewTotalEth
+  </span>
+</div>
+`;
--- a/ui/pages/swaps/swaps-gas-customization-modal/snapshots/swaps-gas-customization-modal.container.test.js.snap
+++ b/ui/pages/swaps/swaps-gas-customization-modal/snapshots/swaps-gas-customization-modal.container.test.js.snap
@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GasCustomizationModalContainer renders the component with initial props 1`] = `
+<div
+  class="page-container__header page-container__header--no-padding-bottom"
+  data-testid="page-container__header"
+>
+  <div
+    class="page-container__title"
+  >
+    Customize Gas
+  </div>
+  <div
+    class="page-container__subtitle"
+  >
+    Increasing fee may decrease processing times, but it is not guaranteed.
+  </div>
+  <a
+    class="button btn-link page-container__header-close-text"
+    role="button"
+    tabindex="0"
+  >
+    Close
+  </a>
+  <ul
+    class="page-container__tabs"
+  >
+    <li
+      class="tab page-container__tab tab--active"
+    >
+      <button>
+        Basic
+      </button>
+    </li>
+    <li
+      class="tab page-container__tab"
+    >
+      <button>
+        Advanced
+      </button>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`GasCustomizationModalContainer renders the component with initial props 2`] = `
+<div
+  class="gas-modal-content__info-row__send-info"
+  data-testid="gas-modal-content__info-row__send-info"
+>
+  <span
+    class="gas-modal-content__info-row__send-info__label"
+  >
+    Send Amount
+  </span>
+  <span
+    class="gas-modal-content__info-row__send-info__value"
+  >
+    0 ETH
+  </span>
+</div>
+`;
+
+exports[`GasCustomizationModalContainer renders the component with initial props 3`] = `
+<div
+  class="gas-modal-content__info-row__transaction-info"
+  data-testid="gas-modal-content__info-row__transaction-info"
+>
+  <span
+    class="gas-modal-content__info-row__transaction-info__label"
+  >
+    Transaction Fee
+  </span>
+  <span
+    class="gas-modal-content__info-row__transaction-info__value"
+  >
+    0 ETH
+  </span>
+</div>
+`;
+
+exports[`GasCustomizationModalContainer renders the component with initial props 4`] = `
+<div
+  class="gas-modal-content__info-row__total-info"
+  data-testid="gas-modal-content__info-row__total-info"
+>
+  <span
+    class="gas-modal-content__info-row__total-info__label"
+  >
+    New Total
+  </span>
+  <span
+    class="gas-modal-content__info-row__total-info__value"
+  >
+    0 ETH
+  </span>
+</div>
+`;
--- a/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.js
+++ b/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.js
@ -129,7 +129,10 @@ export default class GasModalPageContainer extends Component {
    return (
      <div className="gas-modal-content__info-row-wrapper">
        <div className="gas-modal-content__info-row">
-          <div className="gas-modal-content__info-row__send-info">
+          <div
+            className="gas-modal-content__info-row__send-info"
+            data-testid="gas-modal-content__info-row__send-info"
+          >
            <span className="gas-modal-content__info-row__send-info__label">
              {this.context.t('sendAmount')}
            </span>
@ -137,7 +140,10 @@ export default class GasModalPageContainer extends Component {
              {sendAmount}
            </span>
          </div>
-          <div className="gas-modal-content__info-row__transaction-info">
+          <div
+            className="gas-modal-content__info-row__transaction-info"
+            data-testid="gas-modal-content__info-row__transaction-info"
+          >
            <span className="gas-modal-content__info-row__transaction-info__label">
              {this.context.t('transactionFee')}
            </span>
@ -155,7 +161,10 @@ export default class GasModalPageContainer extends Component {
              </span>
            </div>
          )}
-          <div className="gas-modal-content__info-row__total-info">
+          <div
+            className="gas-modal-content__info-row__total-info"
+            data-testid="gas-modal-content__info-row__total-info"
+          >
            <span className="gas-modal-content__info-row__total-info__label">
              {this.context.t('newTotal')}
            </span>
--- a/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.test.js
+++ b/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.test.js
@ -0,0 +1,81 @@
+import React from 'react';
+
+import { renderWithProvider } from '../../../../test/jest';
+import GasCustomizationModalComponent from './swaps-gas-customization-modal.component';
+
+const createProps = (customProps = {}) => {
+  return {
+    insufficientBalance: false,
+    onSubmit: jest.fn(),
+    cancelAndClose: jest.fn(),
+    minimumGasLimit: 100,
+    gasPriceButtonGroupProps: {
+      buttonDataLoading: false,
+      className: 'gas-price-button-group',
+      gasButtonInfo: [
+        {
+          feeInPrimaryCurrency: '$0.52',
+          feeInSecondaryCurrency: '0.0048 ETH',
+          timeEstimate: '~ 1 min 0 sec',
+          priceInHexWei: '0xa1b2c3f',
+          gasEstimateType: 'FAST',
+        },
+        {
+          feeInPrimaryCurrency: '$0.39',
+          feeInSecondaryCurrency: '0.004 ETH',
+          timeEstimate: '~ 1 min 30 sec',
+          priceInHexWei: '0xa1b2c39',
+          gasEstimateType: 'FAST',
+        },
+        {
+          feeInPrimaryCurrency: '$0.30',
+          feeInSecondaryCurrency: '0.00354 ETH',
+          timeEstimate: '~ 2 min 1 sec',
+          priceInHexWei: '0xa1b2c30',
+          gasEstimateType: 'FAST',
+        },
+      ],
+      handleGasPriceSelection: 'mockSelectionFunction',
+      noButtonActiveByDefault: true,
+      showCheck: true,
+      newTotalFiat: 'mockNewTotalFiat',
+      newTotalEth: 'mockNewTotalEth',
+    },
+    infoRowProps: {
+      originalTotalFiat: 'mockOriginalTotalFiat',
+      originalTotalEth: 'mockOriginalTotalEth',
+      newTotalFiat: 'mockNewTotalFiat',
+      newTotalEth: 'mockNewTotalEth',
+      sendAmount: 'mockSendAmount',
+      transactionFee: 'mockTransactionFee',
+      extraInfoRow: { label: 'mockLabel', value: 'mockValue' },
+    },
+    ...customProps,
+  };
+};
+
+describe('GasCustomizationModalComponent', () => {
+  it('renders the component with initial props', () => {
+    const props = createProps();
+    const { getByText, getByTestId } = renderWithProvider(
+      <GasCustomizationModalComponent {...props} />,
+    );
+    expect(getByTestId('page-container__header')).toMatchSnapshot();
+    expect(getByText('$0.52')).toBeInTheDocument();
+    expect(getByText('0.0048 ETH')).toBeInTheDocument();
+    expect(getByTestId('button-group__button0')).toMatchSnapshot();
+    expect(getByText('~ 1 min 30 sec')).toBeInTheDocument();
+    expect(getByText('$0.39')).toBeInTheDocument();
+    expect(getByText('0.004 ETH')).toBeInTheDocument();
+    expect(
+      getByTestId('gas-modal-content__info-row__send-info'),
+    ).toMatchSnapshot();
+    expect(
+      getByTestId('gas-modal-content__info-row__transaction-info'),
+    ).toMatchSnapshot();
+    expect(
+      getByTestId('gas-modal-content__info-row__total-info'),
+    ).toMatchSnapshot();
+    expect(getByText('Save')).toBeInTheDocument();
+  });
+});
--- a/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.container.test.js
+++ b/ui/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.container.test.js
@ -0,0 +1,34 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+
+import {
+  renderWithProvider,
+  createSwapsMockStore,
+} from '../../../../test/jest';
+import GasCustomizationModalContainer from '.';
+
+describe('GasCustomizationModalContainer', () => {
+  it('renders the component with initial props', () => {
+    const store = configureMockStore()(createSwapsMockStore());
+    const { getByText, getByTestId } = renderWithProvider(
+      <GasCustomizationModalContainer />,
+      store,
+    );
+    expect(getByTestId('page-container__header')).toMatchSnapshot();
+    expect(getByText('Basic')).toBeInTheDocument();
+    expect(getByText('Advanced')).toBeInTheDocument();
+    expect(getByText('Estimated Processing Times')).toBeInTheDocument();
+    expect(getByText('Send Amount')).toBeInTheDocument();
+    expect(getByText('Transaction Fee')).toBeInTheDocument();
+    expect(
+      getByTestId('gas-modal-content__info-row__send-info'),
+    ).toMatchSnapshot();
+    expect(
+      getByTestId('gas-modal-content__info-row__transaction-info'),
+    ).toMatchSnapshot();
+    expect(
+      getByTestId('gas-modal-content__info-row__total-info'),
+    ).toMatchSnapshot();
+    expect(getByText('Save')).toBeInTheDocument();
+  });
+});
--- a/ui/pages/swaps/view-quote/snapshots/view-quote.test.js.snap
+++ b/ui/pages/swaps/view-quote/snapshots/view-quote.test.js.snap
@ -0,0 +1,150 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ViewQuote renders the component with initial props 1`] = `
+<div
+  class="main-quote-summary__source-row"
+  data-testid="main-quote-summary__source-row"
+>
+  <span
+    class="main-quote-summary__source-row-value"
+    title="10"
+  >
+    10
+  </span>
+  <img
+    alt=""
+    class="url-icon main-quote-summary__icon"
+    src="https://foo.bar/logo.png"
+  />
+  <span
+    class="main-quote-summary__source-row-symbol"
+    title="DAI"
+  >
+    DAI
+  </span>
+</div>
+`;
+
+exports[`ViewQuote renders the component with initial props 2`] = `
+<div
+  class="main-quote-summary__exchange-rate-container"
+  data-testid="main-quote-summary__exchange-rate-container"
+>
+  <div
+    class="exchange-rate-display main-quote-summary__exchange-rate-display"
+  >
+    <span>
+      1
+    </span>
+    <span
+      class=""
+    >
+      DAI
+    </span>
+    <span>
+      =
+    </span>
+    <span>
+      2.2
+    </span>
+    <span
+      class=""
+    >
+      USDC
+    </span>
+    <div
+      class="exchange-rate-display__switch-arrows"
+    >
+      <svg
+        fill="none"
+        height="13"
+        viewBox="0 0 13 13"
+        width="13"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4.15294 4.38514H9.99223L8.50853 5.86884C8.30421 6.07297 8.30421 6.40418 8.50853 6.60869C8.61069 6.71085 8.74443 6.76203 8.87836 6.76203C9.01229 6.76203 9.14603 6.71085 9.24819 6.60869L11.6249 4.23219C11.649 4.20803 11.6707 4.1814 11.6899 4.15305C11.6947 4.14563 11.6981 4.13726 11.7025 4.12965C11.7154 4.10815 11.7282 4.08646 11.7381 4.06325C11.7426 4.05222 11.7447 4.04043 11.7487 4.0292C11.7558 4.00827 11.7636 3.98754 11.7681 3.96547C11.775 3.93161 11.7786 3.89717 11.7786 3.86198C11.7786 3.82678 11.775 3.79235 11.7681 3.75849C11.7638 3.73642 11.756 3.71568 11.7487 3.69476C11.7447 3.68353 11.7428 3.67174 11.7381 3.6607C11.7282 3.63749 11.7156 3.616 11.7025 3.59431C11.6981 3.5867 11.6947 3.57833 11.6899 3.57091C11.6707 3.54256 11.649 3.51593 11.6249 3.49177L9.24876 1.11564C9.04444 0.911322 8.71342 0.911322 8.50891 1.11564C8.30459 1.31977 8.30459 1.65098 8.50891 1.85549L9.99223 3.339H4.15294C2.22978 3.339 0.665039 4.90374 0.665039 6.8269C0.665039 7.11588 0.899227 7.35007 1.1882 7.35007C1.47718 7.35007 1.71137 7.11588 1.71137 6.8269C1.71137 5.48037 2.80659 4.38514 4.15294 4.38514ZM12.2066 6.57445C11.9177 6.57445 11.6835 6.80864 11.6835 7.09762C11.6835 8.44396 10.5883 9.53919 9.24191 9.53919H3.40262L4.88632 8.05549C5.09064 7.85136 5.09064 7.52014 4.88632 7.31563C4.682 7.11112 4.35098 7.11131 4.14647 7.31563L1.76977 9.69233C1.74561 9.71649 1.72393 9.74312 1.70471 9.77147C1.70015 9.7787 1.69691 9.78669 1.69273 9.79392C1.6796 9.81561 1.66647 9.83748 1.65677 9.86126C1.6524 9.87211 1.6503 9.88371 1.64631 9.89475C1.63927 9.91586 1.63128 9.93679 1.62671 9.95905C1.61986 9.99291 1.61625 10.0273 1.61625 10.0625C1.61625 10.0977 1.61986 10.1322 1.62671 10.166C1.63109 10.1883 1.63908 10.2092 1.64631 10.2303C1.6503 10.2414 1.65221 10.253 1.65677 10.2638C1.66666 10.2874 1.6796 10.3093 1.69273 10.3312C1.69691 10.3384 1.70015 10.3464 1.70471 10.3536C1.72393 10.382 1.74561 10.4086 1.76977 10.4328L4.14609 12.8091C4.24825 12.9112 4.38199 12.9624 4.51592 12.9624C4.64985 12.9624 4.78359 12.9112 4.88575 12.8091C5.09007 12.6049 5.09007 12.2737 4.88575 12.0692L3.40243 10.5857H9.24172C11.1649 10.5857 12.7296 9.02097 12.7296 7.09781C12.7298 6.80864 12.4956 6.57445 12.2066 6.57445Z"
+          fill="#037DD6"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ViewQuote renders the component with initial props 3`] = `
+<div
+  class="fee-card__savings-and-quotes-header"
+  data-testid="fee-card__savings-and-quotes-header"
+>
+  <div
+    class="fee-card__savings-and-quotes-row"
+  >
+    
+    <div
+      class="fee-card__quote-link-container"
+    >
+      <p
+        class="fee-card__quote-link-text"
+      >
+        3 quotes
+      </p>
+      <div
+        class="fee-card__caret-right"
+      >
+        <i
+          class="fa fa-angle-up"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ViewQuote renders the component with initial props 4`] = `
+<div
+  class="fee-card__row-header"
+  data-testid="fee-card__row-header"
+>
+  <div>
+    <div
+      class="fee-card__row-header-text--bold"
+    >
+      Estimated network fee
+    </div>
+    <div
+      class="info-tooltip"
+    >
+      <div
+        class="fee-card__row-label fee-card__info-tooltip-container"
+      >
+        <div
+          aria-describedby="tippy-tooltip-2"
+          class="info-tooltip__tooltip-container fee-card__info-tooltip-content-container"
+          data-original-title="null"
+          data-tooltipped=""
+          style="display: inline;"
+          tabindex="0"
+        >
+          <img
+            alt=""
+            src="images/mm-info-icon.svg"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div
+      class="fee-card__row-header-secondary--bold"
+    >
+      0 ETH
+    </div>
+    <div
+      class="fee-card__row-header-primary--bold"
+    >
+      0
+    </div>
+  </div>
+</div>
+`;
--- a/ui/pages/swaps/view-quote/view-quote.test.js
+++ b/ui/pages/swaps/view-quote/view-quote.test.js
@ -0,0 +1,52 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+import {
+  renderWithProvider,
+  createSwapsMockStore,
+  setBackgroundConnection,
+} from '../../../../test/jest';
+import ViewQuote from '.';
+
+const middleware = [thunk];
+const createProps = (customProps = {}) => {
+  return {
+    inputValue: '5',
+    onInputChange: jest.fn(),
+    ethBalance: '6 ETH',
+    setMaxSlippage: jest.fn(),
+    maxSlippage: 15,
+    selectedAccountAddress: 'selectedAccountAddress',
+    isFeatureFlagLoaded: false,
+    ...customProps,
+  };
+};
+
+setBackgroundConnection({
+  resetPostFetchState: jest.fn(),
+  safeRefetchQuotes: jest.fn(),
+  setSwapsErrorKey: jest.fn(),
+});
+
+describe('ViewQuote', () => {
+  it('renders the component with initial props', () => {
+    const store = configureMockStore(middleware)(createSwapsMockStore());
+    const props = createProps();
+    const { getByText, getByTestId } = renderWithProvider(
+      <ViewQuote {...props} />,
+      store,
+    );
+    expect(getByText('New quotes in')).toBeInTheDocument();
+    expect(getByTestId('main-quote-summary__source-row')).toMatchSnapshot();
+    expect(
+      getByTestId('main-quote-summary__exchange-rate-container'),
+    ).toMatchSnapshot();
+    expect(
+      getByTestId('fee-card__savings-and-quotes-header'),
+    ).toMatchSnapshot();
+    expect(getByTestId('fee-card__row-header')).toMatchSnapshot();
+    expect(getByText('Back')).toBeInTheDocument();
+    expect(getByText('Swap')).toBeInTheDocument();
+  });
+});