{this.context.t('newTotal')}
diff --git 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
new file mode 100644
index 000000000..5e8660608
--- /dev/null
+++ 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(
+
,
+ );
+ 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();
+ });
+});
diff --git 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
new file mode 100644
index 000000000..18bac9511
--- /dev/null
+++ 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(
+
,
+ 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();
+ });
+});
diff --git a/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap b/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
new file mode 100644
index 000000000..49d491b37
--- /dev/null
+++ 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`] = `
+
+
+ 10
+
+
+
+ DAI
+
+
+`;
+
+exports[`ViewQuote renders the component with initial props 2`] = `
+
+
+
+ 1
+
+
+ DAI
+
+
+ =
+
+
+ 2.2
+
+
+ USDC
+
+
+
+
+`;
+
+exports[`ViewQuote renders the component with initial props 3`] = `
+
+`;
+
+exports[`ViewQuote renders the component with initial props 4`] = `
+
+`;
diff --git a/ui/pages/swaps/view-quote/view-quote.test.js b/ui/pages/swaps/view-quote/view-quote.test.js
new file mode 100644
index 000000000..51dae8a3e
--- /dev/null
+++ 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(
+
,
+ 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();
+ });
+});