Skip to content

Commit

Permalink
test: prepare-bridge-page
Browse files Browse the repository at this point in the history
  • Loading branch information
@micaelae
micaelae committed Oct 10, 2024
1 parent 8668a19 commit 403d594
Show file tree
Hide file tree
Showing 2 changed files with 314 additions and 6 deletions.
258 changes: 256 additions & 2 deletions ui/pages/bridge/prepare/__snapshots__/prepare-bridge-page.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`PrepareBridgePage should render the component 1`] = `
exports[`PrepareBridgePage should render the component, with initial state 1`] = `
<div>
<div
class="prepare-bridge-page"
Expand Down Expand Up @@ -118,8 +118,9 @@ exports[`PrepareBridgePage should render the component 1`] = `
>
<button
aria-label="switch-tokens"
class="mm-box mm-button-icon mm-button-icon--size-lg mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
class="mm-box mm-button-icon mm-button-icon--size-lg mm-button-icon--disabled mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
data-testid="switch-tokens"
disabled=""
>
<span
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
Expand Down Expand Up @@ -200,3 +201,256 @@ exports[`PrepareBridgePage should render the component 1`] = `
</div>
</div>
`;

exports[`PrepareBridgePage should render the component, with inputs set 1`] = `
<div>
<div
class="prepare-bridge-page"
>
<div
class="mm-box prepare-bridge-page__content"
>
<div
class="mm-box prepare-bridge-page__from"
>
<div
class="mm-box prepare-bridge-page__input-row"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md asset-picker mm-text--body-md-medium mm-box--padding-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent mm-box--rounded-pill"
data-testid="asset-picker-button"
>
<span
class="mm-box mm-text mm-text--inherit mm-box--color-text-default"
>
<div
class="mm-box mm-box--display-flex mm-box--gap-3 mm-box--align-items-center"
>
<div
class="mm-box mm-box--display-flex"
>
<div
class="mm-box mm-badge-wrapper mm-box--display-inline-block"
>
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full"
>
<img
alt="ETH logo"
class="mm-avatar-token__token-image"
src="./images/eth_logo.svg"
/>
</div>
<div
class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
>
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
>
<img
alt="Ethereum Mainnet logo"
class="mm-avatar-network__network-image"
src="./images/eth_logo.svg"
/>
</div>
</div>
</div>
</div>
<div
class="mm-box"
>
<div
class=""
style="display: inline;"
tabindex="0"
title=""
>
<p
class="mm-box mm-text asset-picker__symbol mm-text--body-md mm-box--color-text-default"
>
ETH
</p>
</div>
</div>
</div>
</span>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-0 mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/arrow-down.svg');"
/>
</button>
<div>
<div
class="amount-tooltip"
style="display: inherit;"
tabindex="0"
title=""
>
<div
class="mm-box mm-text-field mm-text-field--size-md mm-text-field--focused mm-text-field--truncate amount-input mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-sm mm-box--border-width-1 box--border-style-solid"
>
<input
autocomplete="off"
class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
data-testid="from-amount"
focused="true"
placeholder="0"
type="number"
value="1"
/>
</div>
</div>
</div>
</div>
<div
class="mm-box prepare-bridge-page__amounts-row"
>
<p
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
>
</p>
<div
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="$0.00"
>
<span
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
$0.00
</span>
</div>
</div>
</div>
<div
class="mm-box prepare-bridge-page__switch-tokens"
>
<button
aria-label="switch-tokens"
class="mm-box mm-button-icon mm-button-icon--size-lg mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
data-testid="switch-tokens"
>
<span
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/arrow-2-down.svg');"
/>
</button>
</div>
<div
class="mm-box prepare-bridge-page__to"
>
<div
class="mm-box prepare-bridge-page__input-row"
>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-md asset-picker mm-text--body-md-medium mm-box--padding-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--color-text-default mm-box--background-color-transparent mm-box--rounded-pill"
data-testid="asset-picker-button"
>
<span
class="mm-box mm-text mm-text--inherit mm-box--color-text-default"
>
<div
class="mm-box mm-box--display-flex mm-box--gap-3 mm-box--align-items-center"
>
<div
class="mm-box mm-box--display-flex"
>
<div
class="mm-box mm-badge-wrapper mm-box--display-inline-block"
>
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full"
>
<img
alt="UNI logo"
class="mm-avatar-token__token-image"
src="http://url"
/>
</div>
<div
class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
>
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
>
<img
alt="Linea Mainnet logo"
class="mm-avatar-network__network-image"
src="./images/linea-logo-mainnet.svg"
/>
</div>
</div>
</div>
</div>
<div
class="mm-box"
>
<div
class=""
style="display: inline;"
tabindex="0"
title=""
>
<p
class="mm-box mm-text asset-picker__symbol mm-text--body-md mm-box--color-text-default"
>
UNI
</p>
</div>
</div>
</div>
</span>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-0 mm-box--display-inline-block mm-box--color-icon-default"
style="mask-image: url('./images/icons/arrow-down.svg');"
/>
</button>
<div>
<div
class="amount-tooltip"
style="display: inherit;"
tabindex="0"
title=""
>
<div
class="mm-box mm-text-field mm-text-field--size-md mm-text-field--disabled mm-text-field--truncate amount-input mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-sm mm-box--border-width-1 box--border-style-solid"
>
<input
autocomplete="off"
class="mm-box mm-text mm-input mm-input--disable-state-styles mm-input--disabled mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
data-testid="to-amount"
disabled=""
focused="false"
placeholder="0"
readonly=""
type="number"
value="0"
/>
</div>
</div>
</div>
</div>
<div
class="mm-box prepare-bridge-page__amounts-row"
>
<p
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
>
</p>
<div
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="$0.00"
>
<span
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
$0.00
</span>
</div>
</div>
</div>
</div>
</div>
</div>
`;
62 changes: 58 additions & 4 deletions ui/pages/bridge/prepare/prepare-bridge-page.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { renderWithProvider } from '../../../../test/jest';
import { act } from '@testing-library/react';
import { fireEvent, renderWithProvider } from '../../../../test/jest';
import configureStore from '../../../store/store';
import { createBridgeMockStore } from '../../../../test/jest/mock-store';
import { CHAIN_IDS } from '../../../../shared/constants/network';
Expand All @@ -17,16 +18,15 @@ describe('PrepareBridgePage', () => {
global.ethereumProvider = provider as any;
});

it('should render the component', () => {
it('should render the component, with initial state', async () => {
const mockStore = createBridgeMockStore(
{
srcNetworkAllowlist: [CHAIN_IDS.MAINNET, CHAIN_IDS.OPTIMISM],
destNetworkAllowlist: [CHAIN_IDS.OPTIMISM],
},
{},
{ fromTokenInputValue: 1 },
);
const { container, getByRole } = renderWithProvider(
const { container, getByRole, getByTestId } = renderWithProvider(
<PrepareBridgePage />,
configureStore(mockStore),
);
Expand All @@ -35,5 +35,59 @@ describe('PrepareBridgePage', () => {

expect(getByRole('button', { name: /ETH/u })).toBeInTheDocument();
expect(getByRole('button', { name: /Select token/u })).toBeInTheDocument();

expect(getByTestId('from-amount')).toBeInTheDocument();
expect(getByTestId('from-amount').closest('input')).not.toBeDisabled();
await act(() => {
fireEvent.change(getByTestId('from-amount'), { target: { value: '2' } });
});
expect(getByTestId('from-amount').closest('input')).toHaveValue(2);

expect(getByTestId('to-amount')).toBeInTheDocument();
expect(getByTestId('to-amount').closest('input')).toBeDisabled();

expect(getByTestId('switch-tokens').closest('button')).toBeDisabled();
});

it('should render the component, with inputs set', async () => {
const mockStore = createBridgeMockStore(
{
srcNetworkAllowlist: [CHAIN_IDS.MAINNET, CHAIN_IDS.LINEA_MAINNET],
destNetworkAllowlist: [CHAIN_IDS.LINEA_MAINNET],
},
{
fromTokenInputValue: 1,
fromToken: { address: '0x3103910' },
toToken: {
iconUrl: 'http://url',
symbol: 'UNI',
address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
},
toChainId: CHAIN_IDS.LINEA_MAINNET,
},
{},
);
const { container, getByRole, getByTestId } = renderWithProvider(
<PrepareBridgePage />,
configureStore(mockStore),
);

expect(container).toMatchSnapshot();

expect(getByRole('button', { name: /ETH/u })).toBeInTheDocument();
expect(getByRole('button', { name: /UNI/u })).toBeInTheDocument();

expect(getByTestId('from-amount')).toBeInTheDocument();
expect(getByTestId('from-amount').closest('input')).not.toBeDisabled();
expect(getByTestId('from-amount').closest('input')).toHaveValue(1);
await act(() => {
fireEvent.change(getByTestId('from-amount'), { target: { value: '2' } });
});
expect(getByTestId('from-amount').closest('input')).toHaveValue(2);

expect(getByTestId('to-amount')).toBeInTheDocument();
expect(getByTestId('to-amount').closest('input')).toBeDisabled();

expect(getByTestId('switch-tokens').closest('button')).not.toBeDisabled();
});
});

0 comments on commit 403d594

Please sign in to comment.