Skip to content

chore: Refactor to remove warnings in confirmations' confirm.test.tsx #37431

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+559 −471
Open

chore: Refactor to remove warnings in confirmations' confirm.test.tsx #37431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions shared/modules/selectors/smart-transactions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,10 @@ export const getSmartTransactionsMigrationAppliedInternal = createSelector(
// @ts-expect-error TODO: Fix types for `getSmartTransactionsOptInStatusInternal` once `getPreferences is converted to TypeScript
export const getSmartTransactionsOptInStatusForMetrics = createSelector(
getSmartTransactionsOptInStatusInternal,
(optInStatus: boolean): boolean => optInStatus,
(optInStatus: boolean | null | undefined): boolean | null =>
optInStatus === undefined || optInStatus === null
? null
: Boolean(optInStatus),
);

/**
Expand All @@ -124,11 +127,13 @@ export const getSmartTransactionsOptInStatusForMetrics = createSelector(
// @ts-expect-error TODO: Fix types for `getSmartTransactionsOptInStatusInternal` once `getPreferences is converted to TypeScript
export const getSmartTransactionsPreferenceEnabled = createSelector(
getSmartTransactionsOptInStatusInternal,
(optInStatus: boolean): boolean => {
(optInStatus: boolean | null | undefined): boolean => {
// In the absence of an explicit opt-in or opt-out,
// the Smart Transactions toggle is enabled.
const DEFAULT_SMART_TRANSACTIONS_ENABLED = true;
return optInStatus ?? DEFAULT_SMART_TRANSACTIONS_ENABLED;
return optInStatus === undefined || optInStatus === null
? DEFAULT_SMART_TRANSACTIONS_ENABLED
: Boolean(optInStatus);
},
);

Expand Down
27 changes: 27 additions & 0 deletions test/jest/setup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,33 @@
// This file is for Jest-specific setup only and runs before our Jest tests.
import { setBackgroundConnection } from '../../ui/store/background-connection';
import '../helpers/setup-after-helper';

const backgroundMethodCache = new Map();

const backgroundStub = new Proxy(
{},
{
get: (_target, prop) => {
if (prop === '__esModule') {
return undefined;
}

const cacheKey = String(prop);

if (!backgroundMethodCache.has(cacheKey)) {
backgroundMethodCache.set(
cacheKey,
jest.fn().mockResolvedValue(undefined),
);
}

return backgroundMethodCache.get(cacheKey);
},
},
);

setBackgroundConnection(backgroundStub);

jest.mock('webextension-polyfill', () => {
return {
runtime: {
Expand Down
22 changes: 21 additions & 1 deletion ui/components/multichain/account-list-menu/account-list-menu.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,21 @@
state: 'OPEN',
},
};
const store = configureStore(merge(defaultState, state));
const combinedState = merge({}, defaultState, state);
if (state?.metamask?.internalAccounts) {

Check failure on line 102 in ui/components/multichain/account-list-menu/account-list-menu.test.tsx

View workflow job for this annotation

GitHub Actions / test-lint / Test lint 

Property 'metamask' does not exist on type '{}'.
if ('accounts' in state.metamask.internalAccounts) {

Check failure on line 103 in ui/components/multichain/account-list-menu/account-list-menu.test.tsx

View workflow job for this annotation

GitHub Actions / test-lint / Test lint 

Property 'metamask' does not exist on type '{}'.
combinedState.metamask.internalAccounts.accounts =
state.metamask.internalAccounts.accounts;

Check failure on line 105 in ui/components/multichain/account-list-menu/account-list-menu.test.tsx

View workflow job for this annotation

GitHub Actions / test-lint / Test lint 

Property 'metamask' does not exist on type '{}'.
}
if ('selectedAccount' in state.metamask.internalAccounts) {

Check failure on line 107 in ui/components/multichain/account-list-menu/account-list-menu.test.tsx

View workflow job for this annotation

GitHub Actions / test-lint / Test lint 

Property 'metamask' does not exist on type '{}'.
combinedState.metamask.internalAccounts.selectedAccount =
state.metamask.internalAccounts.selectedAccount;

Check failure on line 109 in ui/components/multichain/account-list-menu/account-list-menu.test.tsx

View workflow job for this annotation

GitHub Actions / test-lint / Test lint 

Property 'metamask' does not exist on type '{}'.
}
}
if (state?.metamask && 'keyrings' in state.metamask) {

Check failure on line 112 in ui/components/multichain/account-list-menu/account-list-menu.test.tsx

View workflow job for this annotation

GitHub Actions / test-lint / Test lint 

Property 'metamask' does not exist on type '{}'.

Check failure on line 112 in ui/components/multichain/account-list-menu/account-list-menu.test.tsx

View workflow job for this annotation

GitHub Actions / test-lint / Test lint 

Property 'metamask' does not exist on type '{}'.
combinedState.metamask.keyrings = state.metamask.keyrings;

Check failure on line 113 in ui/components/multichain/account-list-menu/account-list-menu.test.tsx

View workflow job for this annotation

GitHub Actions / test-lint / Test lint 

Property 'metamask' does not exist on type '{}'.
}
const store = configureStore(combinedState);
return renderWithProvider(<AccountListMenu {...props} />, store, location);
};

Expand Down Expand Up @@ -395,10 +409,16 @@
{
type: 'HD Key Tree',
accounts: [mockAccount.address],
metadata: {
id: 'mock-hd-keyring-id',
},
},
{
type: 'Snap Keyring',
accounts: [mockBtcAccount.address],
metadata: {
id: 'mock-snap-keyring-id',
},
},
],
},
Expand Down
171 changes: 150 additions & 21 deletions ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,15 +284,48 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
>
<div
class="flex [&>div]:!rounded-none"
/>
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(200, 20, 59);"
>
<svg
height="32"
width="32"
x="0"
y="0"
>
<rect
fill="#017B8E"
height="32"
transform="translate(0.79944606935671 -0.82160111569698) rotate(317.9 16.00000000000000 16.00000000000000)"
width="32"
x="0"
y="0"
/>
<rect
fill="#F2B602"
height="32"
transform="translate(-7.49339603691225 11.40993542828480) rotate(134.1 16.00000000000000 16.00000000000000)"
width="32"
x="0"
y="0"
/>
<rect
fill="#FA8E00"
height="32"
transform="translate(-25.71227269075480 -11.55888104326888) rotate(364.0 16.00000000000000 16.00000000000000)"
width="32"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__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-goerli mm-box--rounded-md mm-box--border-color-background-default mm-box--border-width-1 box--border-style-solid"
>
<img
alt="Goerli logo"
class="mm-avatar-network__network-image"
/>
G
</div>
</div>
<div
Expand Down Expand Up @@ -349,6 +382,16 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
class="mm-box mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--height-full"
style="overflow: auto;"
>
<h2
class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--padding-top-4 mm-box--padding-bottom-2 mm-box--color-text-default"
>
Spending cap request
</h2>
<p
class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-bottom-4 mm-box--color-text-alternative"
>
This site wants permission to spend your tokens.
</p>
<div
class="mm-box mm-box--margin-bottom-4 mm-box--padding-top-1 mm-box--padding-bottom-1 mm-box--padding-inline-2 mm-box--background-color-background-section mm-box--rounded-lg"
data-testid="confirmation__simulation_section"
Expand Down Expand Up @@ -434,9 +477,9 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
style="min-width: 0;"
>
<div
aria-describedby="tippy-tooltip-23"
aria-describedby="tippy-tooltip-29"
class=""
data-original-title="1,461,501,637,330,902,918,203,684,832,716,283,019,655,932,542,975"
data-original-title="14,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
data-tooltipped=""
style="display: inline;"
tabindex="0"
Expand Down Expand Up @@ -487,9 +530,9 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
style="min-width: 0;"
>
<div
aria-describedby="tippy-tooltip-24"
aria-describedby="tippy-tooltip-30"
class=""
data-original-title="2,461,501,637,330,902,918,203,684,832,716,283,019,655,932,542,975"
data-original-title="24,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
data-tooltipped=""
style="display: inline;"
tabindex="0"
Expand Down Expand Up @@ -772,15 +815,48 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
>
<div
class="flex [&>div]:!rounded-none"
/>
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(200, 20, 59);"
>
<svg
height="32"
width="32"
x="0"
y="0"
>
<rect
fill="#017B8E"
height="32"
transform="translate(0.79944606935671 -0.82160111569698) rotate(317.9 16.00000000000000 16.00000000000000)"
width="32"
x="0"
y="0"
/>
<rect
fill="#F2B602"
height="32"
transform="translate(-7.49339603691225 11.40993542828480) rotate(134.1 16.00000000000000 16.00000000000000)"
width="32"
x="0"
y="0"
/>
<rect
fill="#FA8E00"
height="32"
transform="translate(-25.71227269075480 -11.55888104326888) rotate(364.0 16.00000000000000 16.00000000000000)"
width="32"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__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-goerli mm-box--rounded-md mm-box--border-color-background-default mm-box--border-width-1 box--border-style-solid"
>
<img
alt="Goerli logo"
class="mm-avatar-network__network-image"
/>
G
</div>
</div>
<div
Expand Down Expand Up @@ -837,6 +913,16 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
class="mm-box mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--height-full"
style="overflow: auto;"
>
<h2
class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--padding-top-4 mm-box--padding-bottom-2 mm-box--color-text-default"
>
Spending cap request
</h2>
<p
class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-bottom-4 mm-box--color-text-alternative"
>
This site wants permission to spend your tokens.
</p>
<div
class="mm-box mm-box--margin-bottom-4 mm-box--padding-top-1 mm-box--padding-bottom-1 mm-box--padding-inline-2 mm-box--background-color-background-section mm-box--rounded-lg"
data-testid="confirmation__simulation_section"
Expand Down Expand Up @@ -922,9 +1008,9 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
style="min-width: 0;"
>
<div
aria-describedby="tippy-tooltip-16"
aria-describedby="tippy-tooltip-20"
class=""
data-original-title="1,461,501,637,330,902,918,203,684,832,716,283,019,655,932,542,975"
data-original-title="14,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
data-tooltipped=""
style="display: inline;"
tabindex="0"
Expand Down Expand Up @@ -3196,15 +3282,48 @@ exports[`Confirm should render SmartTransactionsBannerAlert for transaction type
>
<div
class="flex [&>div]:!rounded-none"
/>
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(250, 58, 0);"
>
<svg
height="32"
width="32"
x="0"
y="0"
>
<rect
fill="#18CDF2"
height="32"
transform="translate(-1.04839350379394 -3.30428406946050) rotate(328.9 16.00000000000000 16.00000000000000)"
width="32"
x="0"
y="0"
/>
<rect
fill="#035E56"
height="32"
transform="translate(-18.29846170883204 10.59246187174860) rotate(176.2 16.00000000000000 16.00000000000000)"
width="32"
x="0"
y="0"
/>
<rect
fill="#F26602"
height="32"
transform="translate(16.66784201822392 -14.20513972299708) rotate(468.9 16.00000000000000 16.00000000000000)"
width="32"
x="0"
y="0"
/>
</svg>
</div>
</div>
</div>
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network confirm_header__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-goerli mm-box--rounded-md mm-box--border-color-background-default mm-box--border-width-1 box--border-style-solid"
>
<img
alt="Goerli logo"
class="mm-avatar-network__network-image"
/>
G
</div>
</div>
<div
Expand Down Expand Up @@ -3263,6 +3382,16 @@ exports[`Confirm should render SmartTransactionsBannerAlert for transaction type
class="mm-box mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--height-full"
style="overflow: auto;"
>
<h2
class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--padding-top-4 mm-box--padding-bottom-2 mm-box--color-text-default"
>
Signature request
</h2>
<p
class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-bottom-4 mm-box--color-text-alternative"
>
Review request details before you confirm.
</p>
<div
class="mm-box mm-box--margin-bottom-4 mm-box--padding-top-1 mm-box--padding-bottom-1 mm-box--padding-inline-2 mm-box--background-color-background-section mm-box--rounded-lg"
data-testid="confirmation_request-section"
Expand Down
Loading
Loading