Skip to content

Commit f40a9a7

Browse files
chore: Refactor to remove warnings in confirmations' confirm.test.tsx
1 parent 6e9ff43 commit f40a9a7

File tree

11 files changed

+390
-211
lines changed

11 files changed

+390
-211
lines changed

shared/modules/selectors/smart-transactions.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,10 @@ export const getSmartTransactionsMigrationAppliedInternal = createSelector(
111111
// @ts-expect-error TODO: Fix types for `getSmartTransactionsOptInStatusInternal` once `getPreferences is converted to TypeScript
112112
export const getSmartTransactionsOptInStatusForMetrics = createSelector(
113113
getSmartTransactionsOptInStatusInternal,
114-
(optInStatus: boolean): boolean => optInStatus,
114+
(optInStatus: boolean | null | undefined): boolean | null =>
115+
optInStatus === undefined || optInStatus === null
116+
? null
117+
: Boolean(optInStatus),
115118
);
116119

117120
/**
@@ -124,11 +127,13 @@ export const getSmartTransactionsOptInStatusForMetrics = createSelector(
124127
// @ts-expect-error TODO: Fix types for `getSmartTransactionsOptInStatusInternal` once `getPreferences is converted to TypeScript
125128
export const getSmartTransactionsPreferenceEnabled = createSelector(
126129
getSmartTransactionsOptInStatusInternal,
127-
(optInStatus: boolean): boolean => {
130+
(optInStatus: boolean | null | undefined): boolean => {
128131
// In the absence of an explicit opt-in or opt-out,
129132
// the Smart Transactions toggle is enabled.
130133
const DEFAULT_SMART_TRANSACTIONS_ENABLED = true;
131-
return optInStatus ?? DEFAULT_SMART_TRANSACTIONS_ENABLED;
134+
return optInStatus === undefined || optInStatus === null
135+
? DEFAULT_SMART_TRANSACTIONS_ENABLED
136+
: Boolean(optInStatus);
132137
},
133138
);
134139

test/jest/setup.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,33 @@
11
// This file is for Jest-specific setup only and runs before our Jest tests.
2+
import { setBackgroundConnection } from '../../ui/store/background-connection';
23
import '../helpers/setup-after-helper';
34

5+
const backgroundMethodCache = new Map();
6+
7+
const backgroundStub = new Proxy(
8+
{},
9+
{
10+
get: (_target, prop) => {
11+
if (prop === '__esModule') {
12+
return undefined;
13+
}
14+
15+
const cacheKey = String(prop);
16+
17+
if (!backgroundMethodCache.has(cacheKey)) {
18+
backgroundMethodCache.set(
19+
cacheKey,
20+
jest.fn().mockResolvedValue(undefined),
21+
);
22+
}
23+
24+
return backgroundMethodCache.get(cacheKey);
25+
},
26+
},
27+
);
28+
29+
setBackgroundConnection(backgroundStub);
30+
431
jest.mock('webextension-polyfill', () => {
532
return {
633
runtime: {

ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap

Lines changed: 188 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -284,15 +284,48 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
284284
>
285285
<div
286286
class="flex [&>div]:!rounded-none"
287-
/>
287+
>
288+
<div
289+
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(200, 20, 59);"
290+
>
291+
<svg
292+
height="32"
293+
width="32"
294+
x="0"
295+
y="0"
296+
>
297+
<rect
298+
fill="#017B8E"
299+
height="32"
300+
transform="translate(0.79944606935671 -0.82160111569698) rotate(317.9 16.00000000000000 16.00000000000000)"
301+
width="32"
302+
x="0"
303+
y="0"
304+
/>
305+
<rect
306+
fill="#F2B602"
307+
height="32"
308+
transform="translate(-7.49339603691225 11.40993542828480) rotate(134.1 16.00000000000000 16.00000000000000)"
309+
width="32"
310+
x="0"
311+
y="0"
312+
/>
313+
<rect
314+
fill="#FA8E00"
315+
height="32"
316+
transform="translate(-25.71227269075480 -11.55888104326888) rotate(364.0 16.00000000000000 16.00000000000000)"
317+
width="32"
318+
x="0"
319+
y="0"
320+
/>
321+
</svg>
322+
</div>
323+
</div>
288324
</div>
289325
<div
290326
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"
291327
>
292-
<img
293-
alt="Goerli logo"
294-
class="mm-avatar-network__network-image"
295-
/>
328+
G
296329
</div>
297330
</div>
298331
<div
@@ -349,6 +382,16 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
349382
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"
350383
style="overflow: auto;"
351384
>
385+
<h2
386+
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"
387+
>
388+
Spending cap request
389+
</h2>
390+
<p
391+
class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-bottom-4 mm-box--color-text-alternative"
392+
>
393+
This site wants permission to spend your tokens.
394+
</p>
352395
<div
353396
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"
354397
data-testid="confirmation__simulation_section"
@@ -434,9 +477,9 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
434477
style="min-width: 0;"
435478
>
436479
<div
437-
aria-describedby="tippy-tooltip-24"
480+
aria-describedby="tippy-tooltip-30"
438481
class=""
439-
data-original-title="1,461,501,637,330,902,918,203,684,832,716,283,019,655,932,542,975"
482+
data-original-title="14,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
440483
data-tooltipped=""
441484
style="display: inline;"
442485
tabindex="0"
@@ -487,9 +530,9 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
487530
style="min-width: 0;"
488531
>
489532
<div
490-
aria-describedby="tippy-tooltip-25"
533+
aria-describedby="tippy-tooltip-31"
491534
class=""
492-
data-original-title="2,461,501,637,330,902,918,203,684,832,716,283,019,655,932,542,975"
535+
data-original-title="24,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
493536
data-tooltipped=""
494537
style="display: inline;"
495538
tabindex="0"
@@ -772,15 +815,48 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
772815
>
773816
<div
774817
class="flex [&>div]:!rounded-none"
775-
/>
818+
>
819+
<div
820+
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(200, 20, 59);"
821+
>
822+
<svg
823+
height="32"
824+
width="32"
825+
x="0"
826+
y="0"
827+
>
828+
<rect
829+
fill="#017B8E"
830+
height="32"
831+
transform="translate(0.79944606935671 -0.82160111569698) rotate(317.9 16.00000000000000 16.00000000000000)"
832+
width="32"
833+
x="0"
834+
y="0"
835+
/>
836+
<rect
837+
fill="#F2B602"
838+
height="32"
839+
transform="translate(-7.49339603691225 11.40993542828480) rotate(134.1 16.00000000000000 16.00000000000000)"
840+
width="32"
841+
x="0"
842+
y="0"
843+
/>
844+
<rect
845+
fill="#FA8E00"
846+
height="32"
847+
transform="translate(-25.71227269075480 -11.55888104326888) rotate(364.0 16.00000000000000 16.00000000000000)"
848+
width="32"
849+
x="0"
850+
y="0"
851+
/>
852+
</svg>
853+
</div>
854+
</div>
776855
</div>
777856
<div
778857
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"
779858
>
780-
<img
781-
alt="Goerli logo"
782-
class="mm-avatar-network__network-image"
783-
/>
859+
G
784860
</div>
785861
</div>
786862
<div
@@ -837,6 +913,16 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
837913
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"
838914
style="overflow: auto;"
839915
>
916+
<h2
917+
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"
918+
>
919+
Spending cap request
920+
</h2>
921+
<p
922+
class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-bottom-4 mm-box--color-text-alternative"
923+
>
924+
This site wants permission to spend your tokens.
925+
</p>
840926
<div
841927
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"
842928
data-testid="confirmation__simulation_section"
@@ -922,9 +1008,9 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
9221008
style="min-width: 0;"
9231009
>
9241010
<div
925-
aria-describedby="tippy-tooltip-17"
1011+
aria-describedby="tippy-tooltip-21"
9261012
class=""
927-
data-original-title="1,461,501,637,330,902,918,203,684,832,716,283,019,655,932,542,975"
1013+
data-original-title="14,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
9281014
data-tooltipped=""
9291015
style="display: inline;"
9301016
tabindex="0"
@@ -3153,16 +3239,48 @@ exports[`Confirm should render SmartTransactionsBannerAlert for transaction type
31533239
>
31543240
<div
31553241
class="flex [&>div]:!rounded-none"
3156-
/>
3242+
>
3243+
<div
3244+
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(200, 20, 77);"
3245+
>
3246+
<svg
3247+
height="32"
3248+
width="32"
3249+
x="0"
3250+
y="0"
3251+
>
3252+
<rect
3253+
fill="#FB1860"
3254+
height="32"
3255+
transform="translate(0.38420016497540 1.18314235782117) rotate(143.0 16.00000000000000 16.00000000000000)"
3256+
width="32"
3257+
x="0"
3258+
y="0"
3259+
/>
3260+
<rect
3261+
fill="#FA7500"
3262+
height="32"
3263+
transform="translate(-5.51153595943918 -16.80366850522900) rotate(382.5 16.00000000000000 16.00000000000000)"
3264+
width="32"
3265+
x="0"
3266+
y="0"
3267+
/>
3268+
<rect
3269+
fill="#F93F01"
3270+
height="32"
3271+
transform="translate(-14.39950470474085 -21.15933077974193) rotate(411.5 16.00000000000000 16.00000000000000)"
3272+
width="32"
3273+
x="0"
3274+
y="0"
3275+
/>
3276+
</svg>
3277+
</div>
3278+
</div>
31573279
</div>
31583280
<div
31593281
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-background-alternative mm-box--rounded-md mm-box--border-color-background-default mm-box--border-width-1 box--border-style-solid"
31603282
>
3161-
<img
3162-
alt="network logo"
3163-
class="mm-avatar-network__network-image"
3164-
src=""
3165-
/>
3283+
?
31663284
</div>
31673285
</div>
31683286
<div
@@ -3264,15 +3382,48 @@ exports[`Confirm should render SmartTransactionsBannerAlert for transaction type
32643382
>
32653383
<div
32663384
class="flex [&>div]:!rounded-none"
3267-
/>
3385+
>
3386+
<div
3387+
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(250, 58, 0);"
3388+
>
3389+
<svg
3390+
height="32"
3391+
width="32"
3392+
x="0"
3393+
y="0"
3394+
>
3395+
<rect
3396+
fill="#18CDF2"
3397+
height="32"
3398+
transform="translate(-1.04839350379394 -3.30428406946050) rotate(328.9 16.00000000000000 16.00000000000000)"
3399+
width="32"
3400+
x="0"
3401+
y="0"
3402+
/>
3403+
<rect
3404+
fill="#035E56"
3405+
height="32"
3406+
transform="translate(-18.29846170883204 10.59246187174860) rotate(176.2 16.00000000000000 16.00000000000000)"
3407+
width="32"
3408+
x="0"
3409+
y="0"
3410+
/>
3411+
<rect
3412+
fill="#F26602"
3413+
height="32"
3414+
transform="translate(16.66784201822392 -14.20513972299708) rotate(468.9 16.00000000000000 16.00000000000000)"
3415+
width="32"
3416+
x="0"
3417+
y="0"
3418+
/>
3419+
</svg>
3420+
</div>
3421+
</div>
32683422
</div>
32693423
<div
32703424
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"
32713425
>
3272-
<img
3273-
alt="Goerli logo"
3274-
class="mm-avatar-network__network-image"
3275-
/>
3426+
G
32763427
</div>
32773428
</div>
32783429
<div
@@ -3331,6 +3482,16 @@ exports[`Confirm should render SmartTransactionsBannerAlert for transaction type
33313482
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"
33323483
style="overflow: auto;"
33333484
>
3485+
<h2
3486+
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"
3487+
>
3488+
Signature request
3489+
</h2>
3490+
<p
3491+
class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--padding-bottom-4 mm-box--color-text-alternative"
3492+
>
3493+
Review request details before you confirm.
3494+
</p>
33343495
<div
33353496
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"
33363497
data-testid="confirmation_request-section"

0 commit comments

Comments
 (0)