Skip to content

Commit 5e35c37

Browse files
ciampociampo
committed
Test: Use native Vite transforms for unit tests
1 parent d5e3139 commit 5e35c37

17 files changed

Lines changed: 635 additions & 294 deletions

File tree

‎package-lock.json‎

Lines changed: 330 additions & 19 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/components/src/card/test/__snapshots__/index.tsx.snap‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ Snapshot Diff:
88
@@ -1,8 +1,8 @@
99
<div>
1010
<div
11-
- class="css-1klm29z-Body css-156bl4t-borderRadius css-2ktc4y-medium components-card__body components-card-body"
12-
+ class="css-drdujb-Scrollable css-9laccq-scrollableScrollbar css-flie1-scrollY components-scrollable css-1klm29z-Body css-156bl4t-borderRadius css-2ktc4y-medium components-card__body components-card-body"
11+
- class="emotion-diff-0-Body emotion-diff-1-borderRadius emotion-diff-2-medium components-card__body components-card-body"
12+
+ class="emotion-diff-3-Scrollable emotion-diff-4-scrollableScrollbar emotion-diff-5-scrollY components-scrollable emotion-diff-0-Body emotion-diff-1-borderRadius emotion-diff-2-medium components-card__body components-card-body"
1313
data-wp-c16t="true"
1414
data-wp-component="CardBody"
1515
>
@@ -25,8 +25,8 @@ Snapshot Diff:
2525
@@ -1,8 +1,8 @@
2626
<div>
2727
<div
28-
- class="css-1klm29z-Body css-156bl4t-borderRadius css-2ktc4y-medium components-card__body components-card-body"
29-
+ class="css-1klm29z-Body css-156bl4t-borderRadius css-2ktc4y-medium css-1284mxe-shady components-card__body components-card-body"
28+
- class="emotion-diff-0-Body emotion-diff-1-borderRadius emotion-diff-2-medium components-card__body components-card-body"
29+
+ class="emotion-diff-0-Body emotion-diff-1-borderRadius emotion-diff-2-medium emotion-diff-3-shady components-card__body components-card-body"
3030
data-wp-c16t="true"
3131
data-wp-component="CardBody"
3232
>
@@ -42,8 +42,8 @@ Snapshot Diff:
4242
@@ -1,8 +1,8 @@
4343
<div>
4444
<div
45-
- class="style-flex style-items-row style-expanded-row components-flex css-14ezg3c-Footer-borderRadius-borderColor-medium-footerStyles components-card__footer components-card-footer"
46-
+ class="style-flex style-items-row style-expanded-row components-flex css-zu9yjw-Footer-borderRadius-borderColor-medium-shady-footerStyles components-card__footer components-card-footer"
45+
- class="style-flex style-items-row style-expanded-row components-flex emotion-diff-0-Footer-borderRadius-borderColor-medium-footerStyles components-card__footer components-card-footer"
46+
+ class="style-flex style-items-row style-expanded-row components-flex emotion-diff-1-Footer-borderRadius-borderColor-medium-shady-footerStyles components-card__footer components-card-footer"
4747
data-wp-c16t="true"
4848
data-wp-component="CardFooter"
4949
style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"
@@ -58,7 +58,7 @@ Snapshot Diff:
5858
5959
<div>
6060
<div
61-
class="style-flex style-items-row style-expanded-row components-flex css-14ezg3c-Footer-borderRadius-borderColor-medium-footerStyles components-card__footer components-card-footer"
61+
class="style-flex style-items-row style-expanded-row components-flex emotion-diff-0-Footer-borderRadius-borderColor-medium-footerStyles components-card__footer components-card-footer"
6262
data-wp-c16t="true"
6363
data-wp-component="CardFooter"
6464
- style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"
@@ -77,8 +77,8 @@ Snapshot Diff:
7777
@@ -1,8 +1,8 @@
7878
<div>
7979
<div
80-
- class="style-flex style-items-row style-expanded-row components-flex css-knjbwb-Header-borderRadius-borderColor-medium-headerStyles components-card__header components-card-header"
81-
+ class="style-flex style-items-row style-expanded-row components-flex css-1e8qxyk-Header-borderRadius-borderColor-medium-shady-headerStyles components-card__header components-card-header"
80+
- class="style-flex style-items-row style-expanded-row components-flex emotion-diff-0-Header-borderRadius-borderColor-medium-headerStyles components-card__header components-card-header"
81+
+ class="style-flex style-items-row style-expanded-row components-flex emotion-diff-1-Header-borderRadius-borderColor-medium-shady-headerStyles components-card__header components-card-header"
8282
data-wp-c16t="true"
8383
data-wp-component="CardHeader"
8484
style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"
@@ -94,20 +94,20 @@ Snapshot Diff:
9494
@@ -6,19 +6,19 @@
9595
>
9696
<div
97-
class="css-1ruapvy-Content"
97+
class="emotion-diff-1-Content"
9898
>
9999
<div
100-
- class="style-flex style-items-row style-expanded-row components-flex css-knjbwb-Header-borderRadius-borderColor-medium-headerStyles components-card__header components-card-header"
101-
+ class="style-flex style-items-row style-expanded-row components-flex css-1to91lo-Header-borderRadius-borderColor-large-headerStyles components-card__header components-card-header"
100+
- class="style-flex style-items-row style-expanded-row components-flex emotion-diff-2-Header-borderRadius-borderColor-medium-headerStyles components-card__header components-card-header"
101+
+ class="style-flex style-items-row style-expanded-row components-flex emotion-diff-8-Header-borderRadius-borderColor-large-headerStyles components-card__header components-card-header"
102102
data-wp-c16t="true"
103103
data-wp-component="CardHeader"
104104
style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"
105105
>
106106
Header
107107
</div>
108108
<div
109-
- class="css-1klm29z-Body css-156bl4t-borderRadius css-2ktc4y-medium components-card__body components-card-body"
110-
+ class="css-1klm29z-Body css-156bl4t-borderRadius css-1url6g9-large components-card__body components-card-body"
109+
- class="emotion-diff-3-Body emotion-diff-4-borderRadius emotion-diff-5-medium components-card__body components-card-body"
110+
+ class="emotion-diff-3-Body emotion-diff-4-borderRadius emotion-diff-9-large components-card__body components-card-body"
111111
data-wp-c16t="true"
112112
data-wp-component="CardBody"
113113
>
@@ -137,28 +137,28 @@ Snapshot Diff:
137137
@@ -6,26 +6,26 @@
138138
>
139139
<div
140-
class="css-1ruapvy-Content"
140+
class="emotion-diff-1-Content"
141141
>
142142
<div
143-
- class="style-flex style-items-row style-expanded-row components-flex css-1knfgzz-Header-borderRadius-borderColor-large-borderless-headerStyles components-card__header components-card-header"
144-
+ class="style-flex style-items-row style-expanded-row components-flex css-utqozr-Header-borderRadius-borderColor-small-headerStyles components-card__header components-card-header"
143+
- class="style-flex style-items-row style-expanded-row components-flex emotion-diff-2-Header-borderRadius-borderColor-large-borderless-headerStyles components-card__header components-card-header"
144+
+ class="style-flex style-items-row style-expanded-row components-flex emotion-diff-9-Header-borderRadius-borderColor-small-headerStyles components-card__header components-card-header"
145145
data-wp-c16t="true"
146146
data-wp-component="CardHeader"
147147
style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"
148148
>
149149
Header
150150
</div>
151151
<div
152-
- class="css-1klm29z-Body css-156bl4t-borderRadius css-1url6g9-large components-card__body components-card-body"
153-
+ class="css-1klm29z-Body css-156bl4t-borderRadius css-2ktc4y-medium components-card__body components-card-body"
152+
- class="emotion-diff-3-Body emotion-diff-4-borderRadius emotion-diff-5-large components-card__body components-card-body"
153+
+ class="emotion-diff-3-Body emotion-diff-4-borderRadius emotion-diff-10-medium components-card__body components-card-body"
154154
data-wp-c16t="true"
155155
data-wp-component="CardBody"
156156
>
157157
Body
158158
</div>
159159
<div
160-
- class="style-flex style-items-row style-expanded-row components-flex css-jtu0fc-Footer-borderRadius-borderColor-large-borderless-footerStyles components-card__footer components-card-footer"
161-
+ class="style-flex style-items-row style-expanded-row components-flex css-egj1bt-Footer-borderRadius-borderColor-xSmallCardPadding-footerStyles components-card__footer components-card-footer"
160+
- class="style-flex style-items-row style-expanded-row components-flex emotion-diff-6-Footer-borderRadius-borderColor-large-borderless-footerStyles components-card__footer components-card-footer"
161+
+ class="style-flex style-items-row style-expanded-row components-flex emotion-diff-11-Footer-borderRadius-borderColor-xSmallCardPadding-footerStyles components-card__footer components-card-footer"
162162
data-wp-c16t="true"
163163
data-wp-component="CardFooter"
164164
style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"
@@ -174,34 +174,34 @@ Snapshot Diff:
174174
@@ -1,31 +1,31 @@
175175
<div>
176176
<div
177-
- class="style-surface components-surface css-2wm9l0-Card-boxShadowless-rounded-cardStyles components-card"
178-
+ class="style-surface components-surface css-9kgksu-Card-rounded-cardStyles components-card"
177+
- class="style-surface components-surface emotion-diff-0-Card-boxShadowless-rounded-cardStyles components-card"
178+
+ class="style-surface components-surface emotion-diff-9-Card-rounded-cardStyles components-card"
179179
data-wp-c16t="true"
180180
data-wp-component="Card"
181181
>
182182
<div
183-
class="css-1ruapvy-Content"
183+
class="emotion-diff-1-Content"
184184
>
185185
<div
186-
- class="style-flex style-items-row style-expanded-row components-flex css-1knfgzz-Header-borderRadius-borderColor-large-borderless-headerStyles components-card__header components-card-header"
187-
+ class="style-flex style-items-row style-expanded-row components-flex css-utqozr-Header-borderRadius-borderColor-small-headerStyles components-card__header components-card-header"
186+
- class="style-flex style-items-row style-expanded-row components-flex emotion-diff-2-Header-borderRadius-borderColor-large-borderless-headerStyles components-card__header components-card-header"
187+
+ class="style-flex style-items-row style-expanded-row components-flex emotion-diff-10-Header-borderRadius-borderColor-small-headerStyles components-card__header components-card-header"
188188
data-wp-c16t="true"
189189
data-wp-component="CardHeader"
190190
style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"
191191
>
192192
Header
193193
</div>
194194
<div
195-
- class="css-1klm29z-Body css-156bl4t-borderRadius css-1url6g9-large components-card__body components-card-body"
196-
+ class="css-1klm29z-Body css-156bl4t-borderRadius css-5swhss-small components-card__body components-card-body"
195+
- class="emotion-diff-3-Body emotion-diff-4-borderRadius emotion-diff-5-large components-card__body components-card-body"
196+
+ class="emotion-diff-3-Body emotion-diff-4-borderRadius emotion-diff-11-small components-card__body components-card-body"
197197
data-wp-c16t="true"
198198
data-wp-component="CardBody"
199199
>
200200
Body
201201
</div>
202202
<div
203-
- class="style-flex style-items-row style-expanded-row components-flex css-jtu0fc-Footer-borderRadius-borderColor-large-borderless-footerStyles components-card__footer components-card-footer"
204-
+ class="style-flex style-items-row style-expanded-row components-flex css-zrnqar-Footer-borderRadius-borderColor-small-footerStyles components-card__footer components-card-footer"
203+
- class="style-flex style-items-row style-expanded-row components-flex emotion-diff-6-Footer-borderRadius-borderColor-large-borderless-footerStyles components-card__footer components-card-footer"
204+
+ class="style-flex style-items-row style-expanded-row components-flex emotion-diff-12-Footer-borderRadius-borderColor-small-footerStyles components-card__footer components-card-footer"
205205
data-wp-c16t="true"
206206
data-wp-component="CardFooter"
207207
style="--wp-components-flex-align: center; --wp-components-flex-direction: row; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 2); --wp-components-flex-justify: space-between;"
@@ -423,15 +423,15 @@ Snapshot Diff:
423423
</div>
424424
<div
425425
aria-hidden="true"
426-
- class="css-jirgir-Elevation-sx-Base-sx-Base-elevationStyles components-elevation css-3cgmlt-elevationClassName"
427-
+ class="css-pudyh0-Elevation-sx-Base-sx-Base-elevationStyles components-elevation css-3cgmlt-elevationClassName"
426+
- class="emotion-diff-2-Elevation-sx-elevationStyles components-elevation emotion-diff-3-elevationClassName"
427+
+ class="emotion-diff-5-Elevation-sx-elevationStyles components-elevation emotion-diff-3-elevationClassName"
428428
data-wp-c16t="true"
429429
data-wp-component="Elevation"
430430
/>
431431
<div
432432
aria-hidden="true"
433-
- class="css-12yxda4-Elevation-sx-Base-sx-Base-elevationStyles components-elevation css-3cgmlt-elevationClassName"
434-
+ class="css-pudyh0-Elevation-sx-Base-sx-Base-elevationStyles components-elevation css-3cgmlt-elevationClassName"
433+
- class="emotion-diff-4-Elevation-sx-elevationStyles components-elevation emotion-diff-3-elevationClassName"
434+
+ class="emotion-diff-5-Elevation-sx-elevationStyles components-elevation emotion-diff-3-elevationClassName"
435435
data-wp-c16t="true"
436436
data-wp-component="Elevation"
437437
/>

‎packages/components/src/item-group/test/__snapshots__/index.jsx.snap‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,25 @@ Snapshot Diff:
77
88
@@ -8,11 +8,11 @@
99
<div
10-
class="css-dcjs67-itemWrapper"
10+
class="emotion-diff-1-itemWrapper"
1111
role="listitem"
1212
>
1313
<div
14-
- class="css-17kujwd-medium css-1izz8ne-item css-166x88h-spacedAround components-item"
15-
+ class="css-o0djae-large css-1izz8ne-item css-166x88h-spacedAround components-item"
14+
- class="emotion-diff-2-medium emotion-diff-3-item emotion-diff-4-spacedAround components-item"
15+
+ class="emotion-diff-6-large emotion-diff-3-item emotion-diff-4-spacedAround components-item"
1616
data-wp-c16t="true"
1717
data-wp-component="Item"
1818
>
1919
Code
2020
</div>
2121
@@ -20,11 +20,11 @@
2222
<div
23-
class="css-dcjs67-itemWrapper"
23+
class="emotion-diff-1-itemWrapper"
2424
role="listitem"
2525
>
2626
<div
27-
- class="css-17kujwd-medium css-1izz8ne-item css-166x88h-spacedAround components-item"
28-
+ class="css-o0djae-large css-1izz8ne-item css-166x88h-spacedAround components-item"
27+
- class="emotion-diff-2-medium emotion-diff-3-item emotion-diff-4-spacedAround components-item"
28+
+ class="emotion-diff-6-large emotion-diff-3-item emotion-diff-4-spacedAround components-item"
2929
data-wp-c16t="true"
3030
data-wp-component="Item"
3131
>
@@ -40,12 +40,12 @@ Snapshot Diff:
4040
4141
@@ -2,11 +2,11 @@
4242
<div
43-
class="css-dcjs67-itemWrapper"
43+
class="emotion-diff-0-itemWrapper"
4444
role="listitem"
4545
>
4646
<div
47-
- class="css-17kujwd-medium css-1izz8ne-item components-item"
48-
+ class="css-o0djae-large css-1izz8ne-item components-item"
47+
- class="emotion-diff-1-medium emotion-diff-2-item components-item"
48+
+ class="emotion-diff-3-large emotion-diff-2-item components-item"
4949
data-wp-c16t="true"
5050
data-wp-component="Item"
5151
>
@@ -120,19 +120,19 @@ Snapshot Diff:
120120
@@ -1,18 +1,18 @@
121121
<div>
122122
<div
123-
- class="css-1e6snp6-rounded components-item-group"
124-
+ class="css-qr0sb5-separated css-1e6snp6-rounded components-item-group"
123+
- class="emotion-diff-0-rounded components-item-group"
124+
+ class="emotion-diff-5-separated emotion-diff-0-rounded components-item-group"
125125
data-wp-c16t="true"
126126
data-wp-component="ItemGroup"
127127
role="list"
128128
>
129129
<div
130-
class="css-dcjs67-itemWrapper"
130+
class="emotion-diff-1-itemWrapper"
131131
role="listitem"
132132
>
133133
<div
134-
- class="css-17kujwd-medium css-1izz8ne-item css-166x88h-spacedAround components-item"
135-
+ class="css-17kujwd-medium css-1izz8ne-item components-item"
134+
- class="emotion-diff-2-medium emotion-diff-3-item emotion-diff-4-spacedAround components-item"
135+
+ class="emotion-diff-2-medium emotion-diff-3-item components-item"
136136
data-wp-c16t="true"
137137
data-wp-component="Item"
138138
>
@@ -148,19 +148,19 @@ Snapshot Diff:
148148
@@ -1,18 +1,18 @@
149149
<div>
150150
<div
151-
- class="css-1e6snp6-rounded components-item-group"
152-
+ class="css-9rmwob-bordered css-1e6snp6-rounded components-item-group"
151+
- class="emotion-diff-0-rounded components-item-group"
152+
+ class="emotion-diff-5-bordered emotion-diff-0-rounded components-item-group"
153153
data-wp-c16t="true"
154154
data-wp-component="ItemGroup"
155155
role="list"
156156
>
157157
<div
158-
class="css-dcjs67-itemWrapper"
158+
class="emotion-diff-1-itemWrapper"
159159
role="listitem"
160160
>
161161
<div
162-
- class="css-17kujwd-medium css-1izz8ne-item css-166x88h-spacedAround components-item"
163-
+ class="css-17kujwd-medium css-1izz8ne-item components-item"
162+
- class="emotion-diff-2-medium emotion-diff-3-item emotion-diff-4-spacedAround components-item"
163+
+ class="emotion-diff-2-medium emotion-diff-3-item components-item"
164164
data-wp-c16t="true"
165165
data-wp-component="Item"
166166
>
@@ -176,7 +176,7 @@ Snapshot Diff:
176176
@@ -1,8 +1,8 @@
177177
<div>
178178
<div
179-
- class="css-1e6snp6-rounded components-item-group"
179+
- class="emotion-diff-0-rounded components-item-group"
180180
+ class="components-item-group"
181181
data-wp-c16t="true"
182182
data-wp-component="ItemGroup"

‎packages/components/src/scrollable/test/__snapshots__/index.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`props > should render correctly 1`] = `
55
height: 100%;
66
}
77
8-
@media only screen and ( min-device-width: 40em ) {
8+
@media only screen and ( min-device-width:40em ) {
99
.emotion-1::-webkit-scrollbar {
1010
height: 12px;
1111
width: 12px;
@@ -24,7 +24,7 @@ exports[`props > should render correctly 1`] = `
2424
-webkit-background-clip: padding-box;
2525
background-clip: padding-box;
2626
background-color: rgba(0, 0, 0, 0.2);
27-
border: 2px solid rgba( 0, 0, 0, 0 );
27+
border: 2px solid rgba( 0,0,0,0 );
2828
border-radius: 7px;
2929
}
3030

‎packages/components/src/text/test/__snapshots__/index.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ exports[`Text > should render highlighted words with highlightCaseSensitive 1`]
3030
.emotion-0 mark {
3131
background: #f0b849;
3232
border-radius: 2px;
33-
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;
33+
box-shadow: 0 0 0 1px rgba( 0,0,0,0.05 ) inset,0 -1px 0 rgba( 0,0,0,0.1 ) inset;
3434
}
3535
3636
<div>

‎test/unit/config/matchers/test/to-match-diff-snapshot.vitest.test.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
*/
44
import { describe, expect, it } from 'vitest';
55

6+
/**
7+
* Internal dependencies
8+
*/
9+
import { normalizeEmotionClassNames } from '../to-match-diff-snapshot.vitest';
10+
611
describe( 'snapshotDiff', () => {
712
it( 'formats the established uncolored object diff', () => {
813
expect( { visible: false } ).toMatchDiffSnapshot(
@@ -23,6 +28,23 @@ describe( 'snapshotDiff', () => {
2328
);
2429
} );
2530

31+
it( 'normalizes Emotion hashes without hiding distinct classes', () => {
32+
const received = document.createElement( 'div' );
33+
const expected = document.createElement( 'div' );
34+
received.className = 'css-received-Box css-shared-Common';
35+
expected.className = 'css-expected-Box css-shared-Common';
36+
37+
const [ normalizedReceived, normalizedExpected ] =
38+
normalizeEmotionClassNames( received, expected );
39+
40+
expect( normalizedReceived.className ).toBe(
41+
'emotion-diff-0-Box emotion-diff-1-Common'
42+
);
43+
expect( normalizedExpected.className ).toBe(
44+
'emotion-diff-2-Box emotion-diff-1-Common'
45+
);
46+
} );
47+
2648
it( 'captures matching stylesheet declarations', () => {
2749
const style = document.createElement( 'style' );
2850
style.textContent =

0 commit comments

Comments
 (0)