Skip to content

Commit

Permalink
test: add asset-picker-modal-network tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@micaelae
micaelae committed Sep 26, 2024
1 parent 6177fcb commit 4f3298b
Show file tree
Hide file tree
Showing 3 changed files with 525 additions and 1 deletion.
392 changes: 392 additions & 0 deletions ...t-picker-amount/asset-picker-modal/__snapshots__/asset-picker-modal-network.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,392 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`AssetPickerModalNetwork renders modal with no network list by default 1`] = `
<body>
<div
id="popover-content"
/>
<div />
<div
class="mm-modal multichain-asset-picker__network-modal"
>
<div
aria-hidden="true"
class="mm-box mm-modal-overlay mm-box--width-full mm-box--height-full mm-box--background-color-overlay-default"
/>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
data-focus-lock-disabled="false"
>
<div
class="mm-box mm-modal-content mm-box--padding-top-4 mm-box--sm:padding-top-8 mm-box--md:padding-top-12 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--sm:padding-bottom-8 mm-box--md:padding-bottom-12 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-flex-start mm-box--width-screen mm-box--height-screen"
>
<section
aria-modal="true"
class="mm-box mm-modal-content__dialog mm-modal-content__dialog--size-sm mm-box--padding-0 mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--background-color-background-default mm-box--rounded-lg"
role="dialog"
>
<header
class="mm-box mm-header-base mm-modal-header mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-space-between"
>
<div
class="mm-box"
style="min-width: 0px;"
>
<button
aria-label="Back"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/arrow-left.svg');"
/>
</button>
</div>
<div
class="mm-box mm-box--width-full"
>
<h4
class="mm-box mm-text mm-text--heading-sm mm-text--text-align-center mm-box--color-text-default"
>
Select network
</h4>
</div>
<div
class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
style="min-width: 0px;"
>
<button
aria-label="Close"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/close.svg');"
/>
</button>
</div>
</header>
<div
class="mm-box multichain-asset-picker__network-list"
>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--height-full"
style="grid-column-start: 1; grid-column-end: 3;"
/>
</div>
</section>
</div>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</div>
</body>
`;

exports[`AssetPickerModalNetwork should not show selected network when network prop is not passed in 1`] = `
<body>
<div
id="popover-content"
/>
<div />
<div
class="mm-modal multichain-asset-picker__network-modal"
>
<div
aria-hidden="true"
class="mm-box mm-modal-overlay mm-box--width-full mm-box--height-full mm-box--background-color-overlay-default"
/>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
data-focus-lock-disabled="false"
>
<div
class="mm-box mm-modal-content mm-box--padding-top-4 mm-box--sm:padding-top-8 mm-box--md:padding-top-12 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--sm:padding-bottom-8 mm-box--md:padding-bottom-12 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-flex-start mm-box--width-screen mm-box--height-screen"
>
<section
aria-modal="true"
class="mm-box mm-modal-content__dialog mm-modal-content__dialog--size-sm mm-box--padding-0 mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--background-color-background-default mm-box--rounded-lg"
role="dialog"
>
<header
class="mm-box mm-header-base mm-modal-header mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-space-between"
>
<div
class="mm-box"
style="min-width: 0px;"
>
<button
aria-label="Back"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/arrow-left.svg');"
/>
</button>
</div>
<div
class="mm-box mm-box--width-full"
>
<h4
class="mm-box mm-text mm-text--heading-sm mm-text--text-align-center mm-box--color-text-default"
>
Select network
</h4>
</div>
<div
class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
style="min-width: 0px;"
>
<button
aria-label="Close"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/close.svg');"
/>
</button>
</div>
</header>
<div
class="mm-box multichain-asset-picker__network-list"
>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--height-full"
style="grid-column-start: 1; grid-column-end: 3;"
>
<div
class="mm-box multichain-network-list-item mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--gap-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
>
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network 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 mm-box--border-color-background-default box--border-style-solid box--border-width-1"
>
<img
alt="Network name 3 logo"
class="mm-avatar-network__network-image"
src="./images/eth_logo.svg"
/>
</div>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-flex-start mm-box--align-items-flex-start mm-box--width-full"
style="overflow: hidden;"
>
<div
class="mm-box mm-box--display-flex mm-box--align-items-center mm-box--width-full"
data-testid="Network name 3"
>
<p
class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
tabindex="0"
>
Network name 3
</p>
</div>
</div>
</div>
<div
class="mm-box multichain-network-list-item mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--gap-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
>
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network 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 mm-box--border-color-background-default box--border-style-solid box--border-width-1"
>
<img
alt="Network name 4 logo"
class="mm-avatar-network__network-image"
src="./images/optimism.svg"
/>
</div>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-flex-start mm-box--align-items-flex-start mm-box--width-full"
style="overflow: hidden;"
>
<div
class="mm-box mm-box--display-flex mm-box--align-items-center mm-box--width-full"
data-testid="Network name 4"
>
<p
class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
tabindex="0"
>
Network name 4
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</div>
</body>
`;

exports[`AssetPickerModalNetwork should use passed in network as default when network prop is passed in 1`] = `
<body>
<div
id="popover-content"
/>
<div />
<div
class="mm-modal multichain-asset-picker__network-modal"
>
<div
aria-hidden="true"
class="mm-box mm-modal-overlay mm-box--width-full mm-box--height-full mm-box--background-color-overlay-default"
/>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
data-focus-lock-disabled="false"
>
<div
class="mm-box mm-modal-content mm-box--padding-top-4 mm-box--sm:padding-top-8 mm-box--md:padding-top-12 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--sm:padding-bottom-8 mm-box--md:padding-bottom-12 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-flex-start mm-box--width-screen mm-box--height-screen"
>
<section
aria-modal="true"
class="mm-box mm-modal-content__dialog mm-modal-content__dialog--size-sm mm-box--padding-0 mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--background-color-background-default mm-box--rounded-lg"
role="dialog"
>
<header
class="mm-box mm-header-base mm-modal-header mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-space-between"
>
<div
class="mm-box"
style="min-width: 0px;"
>
<button
aria-label="Back"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/arrow-left.svg');"
/>
</button>
</div>
<div
class="mm-box mm-box--width-full"
>
<h4
class="mm-box mm-text mm-text--heading-sm mm-text--text-align-center mm-box--color-text-default"
>
Select network
</h4>
</div>
<div
class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
style="min-width: 0px;"
>
<button
aria-label="Close"
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
>
<span
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
style="mask-image: url('./images/icons/close.svg');"
/>
</button>
</div>
</header>
<div
class="mm-box multichain-asset-picker__network-list"
>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--height-full"
style="grid-column-start: 1; grid-column-end: 3;"
>
<div
class="mm-box multichain-network-list-item multichain-network-list-item--selected mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--gap-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-primary-muted"
>
<div
class="mm-box multichain-network-list-item__selected-indicator mm-box--background-color-primary-default mm-box--rounded-pill"
/>
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network 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 mm-box--border-color-background-default box--border-style-solid box--border-width-1"
>
<img
alt="Network name 3 logo"
class="mm-avatar-network__network-image"
src="./images/eth_logo.svg"
/>
</div>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-flex-start mm-box--align-items-flex-start mm-box--width-full"
style="overflow: hidden;"
>
<div
class="mm-box mm-box--display-flex mm-box--align-items-center mm-box--width-full"
data-testid="Network name 3"
>
<p
class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
tabindex="0"
>
Network name 3
</p>
</div>
</div>
</div>
<div
class="mm-box multichain-network-list-item mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--gap-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
>
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network 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 mm-box--border-color-background-default box--border-style-solid box--border-width-1"
>
<img
alt="Network name 4 logo"
class="mm-avatar-network__network-image"
src="./images/optimism.svg"
/>
</div>
<div
class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-flex-start mm-box--align-items-flex-start mm-box--width-full"
style="overflow: hidden;"
>
<div
class="mm-box mm-box--display-flex mm-box--align-items-center mm-box--width-full"
data-testid="Network name 4"
>
<p
class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
tabindex="0"
>
Network name 4
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</div>
</body>
`;
Loading

0 comments on commit 4f3298b

Please sign in to comment.