Skip to content

Commit bdd5c39

Browse files
hyu-devhyu-dev
committed
Fix Checkbox component test docs and snapshot
1 parent ffde0ed commit bdd5c39

File tree

2 files changed

+61
-47
lines changed

2 files changed

+61
-47
lines changed

‎packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap‎

Lines changed: 56 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,22 @@ exports[`Checkbox > should render basic checkbox 1`] = `
55
<div
66
class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
77
>
8-
<div
9-
class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
8+
<label
9+
class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
10+
for="_r_0_"
1011
>
1112
<input
1213
class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
1314
id="_r_0_"
1415
type="checkbox"
1516
/>
16-
</div>
17+
</label>
1718
<label
1819
class="cursor-0-pointer--255"
1920
for="_r_0_"
2021
>
2122
<span
22-
class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255"
23+
class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
2324
>
2425
Test Checkbox
2526
</span>
@@ -33,15 +34,16 @@ exports[`Checkbox > should render checkbox with custom child 1`] = `
3334
<div
3435
class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
3536
>
36-
<div
37-
class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
37+
<label
38+
class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
39+
for="_r_4_"
3840
>
3941
<input
4042
class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
4143
id="_r_4_"
4244
type="checkbox"
4345
/>
44-
</div>
46+
</label>
4547
<label
4648
class="cursor-0-pointer--255"
4749
for="_r_4_"
@@ -59,8 +61,9 @@ exports[`Checkbox > should render checked checkbox 1`] = `
5961
<div
6062
class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
6163
>
62-
<div
63-
class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
64+
<label
65+
class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
66+
for="_r_1_"
6467
>
6568
<input
6669
checked=""
@@ -69,7 +72,7 @@ exports[`Checkbox > should render checked checkbox 1`] = `
6972
type="checkbox"
7073
/>
7174
<svg
72-
class="left-0-50%--255 pointer-events-0-none--255 position-0-absolute--255 top-0-60%--255 transform-0-translate(-50%,-50%)--255"
75+
class="opacity-0-1--255 pointer-events-0-none--255 z-index-0-1--255"
7376
height="10"
7477
viewBox="0 0 12 10"
7578
width="12"
@@ -82,13 +85,13 @@ exports[`Checkbox > should render checked checkbox 1`] = `
8285
fill-rule="evenodd"
8386
/>
8487
</svg>
85-
</div>
88+
</label>
8689
<label
8790
class="cursor-0-pointer--255"
8891
for="_r_1_"
8992
>
9093
<span
91-
class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255"
94+
class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
9295
>
9396
Test Checkbox
9497
</span>
@@ -102,8 +105,9 @@ exports[`Checkbox > should render checked checkbox with custom colors 1`] = `
102105
<div
103106
class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
104107
>
105-
<div
106-
class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
108+
<label
109+
class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
110+
for="_r_j_"
107111
>
108112
<input
109113
checked=""
@@ -113,8 +117,9 @@ exports[`Checkbox > should render checked checkbox with custom colors 1`] = `
113117
type="checkbox"
114118
/>
115119
<svg
116-
class="left-0-50%--255 pointer-events-0-none--255 position-0-absolute--255 top-0-60%--255 transform-0-translate(-50%,-50%)--255"
120+
class="opacity-0-1--255 pointer-events-0-none--255 z-index-0-1--255"
117121
height="10"
122+
style="--checkIcon: #000000;"
118123
viewBox="0 0 12 10"
119124
width="12"
120125
xmlns="http://www.w3.org/2000/svg"
@@ -126,13 +131,14 @@ exports[`Checkbox > should render checked checkbox with custom colors 1`] = `
126131
fill-rule="evenodd"
127132
/>
128133
</svg>
129-
</div>
134+
</label>
130135
<label
131136
class="cursor-0-pointer--255"
132137
for="_r_j_"
133138
>
134139
<span
135-
class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255"
140+
class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
141+
style="--text: #0000ff;"
136142
>
137143
Test Checkbox
138144
</span>
@@ -146,18 +152,19 @@ exports[`Checkbox > should render disabled and checked checkbox 1`] = `
146152
<div
147153
class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
148154
>
149-
<div
150-
class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
155+
<label
156+
class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255"
157+
for="_r_3_"
151158
>
152159
<input
153160
checked=""
154-
class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 cursor-0-not-allowed--1 "
161+
class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 cursor-0-not-allowed--1 "
155162
disabled=""
156163
id="_r_3_"
157164
type="checkbox"
158165
/>
159166
<svg
160-
class="left-0-50%--255 pointer-events-0-none--255 position-0-absolute--255 top-0-60%--255 transform-0-translate(-50%,-50%)--255"
167+
class="opacity-0-1--255 pointer-events-0-none--255 z-index-0-1--255"
161168
height="10"
162169
viewBox="0 0 12 10"
163170
width="12"
@@ -166,17 +173,17 @@ exports[`Checkbox > should render disabled and checked checkbox 1`] = `
166173
<path
167174
clip-rule="evenodd"
168175
d="M11.6474 0.807113C12.0992 1.23373 12.1195 1.94575 11.6929 2.39745L5.31789 9.14745C5.10214 9.37589 4.80069 9.50369 4.48649 9.49992C4.1723 9.49615 3.874 9.36114 3.6638 9.12759L0.288803 5.37759C-0.126837 4.91576 -0.0893993 4.20444 0.372424 3.7888C0.834247 3.37315 1.54557 3.41059 1.96121 3.87242L4.51994 6.71544L10.0571 0.852551C10.4837 0.400843 11.1957 0.3805 11.6474 0.807113Z"
169-
fill="light-dark(#D6D7DE, #373737)"
176+
fill="light-dark(#D6D7DE, #47474A)"
170177
fill-rule="evenodd"
171178
/>
172179
</svg>
173-
</div>
180+
</label>
174181
<label
175182
class="cursor-0-not-allowed--255"
176183
for="_r_3_"
177184
>
178185
<span
179-
class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#373737)--255"
186+
class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#6F6E6E)--255"
180187
>
181188
Test Checkbox
182189
</span>
@@ -190,22 +197,23 @@ exports[`Checkbox > should render disabled checkbox 1`] = `
190197
<div
191198
class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
192199
>
193-
<div
194-
class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
200+
<label
201+
class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255"
202+
for="_r_2_"
195203
>
196204
<input
197-
class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 cursor-0-not-allowed--1 "
205+
class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 cursor-0-not-allowed--1 "
198206
disabled=""
199207
id="_r_2_"
200208
type="checkbox"
201209
/>
202-
</div>
210+
</label>
203211
<label
204212
class="cursor-0-not-allowed--255"
205213
for="_r_2_"
206214
>
207215
<span
208-
class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#373737)--255"
216+
class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#6F6E6E)--255"
209217
>
210218
Test Checkbox
211219
</span>
@@ -219,23 +227,25 @@ exports[`Checkbox > should render disabled checkbox with custom colors 1`] = `
219227
<div
220228
class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
221229
>
222-
<div
223-
class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
230+
<label
231+
class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255"
232+
for="_r_k_"
224233
>
225234
<input
226-
class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 cursor-0-not-allowed--1 "
235+
class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 cursor-0-not-allowed--1 "
227236
disabled=""
228237
id="_r_k_"
229238
style="--primary: #ff0000; --border: #00ff00; --text: #0000ff; --inputBg: #ffff00; --checkIcon: #000000;"
230239
type="checkbox"
231240
/>
232-
</div>
241+
</label>
233242
<label
234243
class="cursor-0-not-allowed--255"
235244
for="_r_k_"
236245
>
237246
<span
238-
class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#373737)--255"
247+
class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#6F6E6E)--255"
248+
style="--text: #0000ff;"
239249
>
240250
Test Checkbox
241251
</span>
@@ -249,22 +259,24 @@ exports[`Checkbox > should render with custom colors 1`] = `
249259
<div
250260
class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
251261
>
252-
<div
253-
class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
262+
<label
263+
class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
264+
for="_r_h_"
254265
>
255266
<input
256267
class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
257268
id="_r_h_"
258269
style="--primary: #ff0000; --border: #00ff00; --text: #0000ff; --inputBg: #ffff00;"
259270
type="checkbox"
260271
/>
261-
</div>
272+
</label>
262273
<label
263274
class="cursor-0-pointer--255"
264275
for="_r_h_"
265276
>
266277
<span
267-
class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255"
278+
class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
279+
style="--text: #0000ff;"
268280
>
269281
Test Checkbox
270282
</span>
@@ -278,22 +290,24 @@ exports[`Checkbox > should render with partial custom colors 1`] = `
278290
<div
279291
class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
280292
>
281-
<div
282-
class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
293+
<label
294+
class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
295+
for="_r_i_"
283296
>
284297
<input
285298
class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
286299
id="_r_i_"
287300
style="--primary: #ff0000; --text: #0000ff;"
288301
type="checkbox"
289302
/>
290-
</div>
303+
</label>
291304
<label
292305
class="cursor-0-pointer--255"
293306
for="_r_i_"
294307
>
295308
<span
296-
class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255"
309+
class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
310+
style="--text: #0000ff;"
297311
>
298312
Test Checkbox
299313
</span>

‎packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,7 @@ describe('Checkbox', () => {
325325
<Checkbox colors={customColors}>Test Checkbox</Checkbox>,
326326
)
327327

328-
const input = container.querySelector('input')
328+
const input = container.querySelector('span')
329329
expect(input).toHaveStyle({
330330
'--text': '#text-custom',
331331
})
@@ -352,10 +352,12 @@ describe('Checkbox', () => {
352352
}
353353

354354
const { container } = render(
355-
<Checkbox colors={customColors}>Test Checkbox</Checkbox>,
355+
<Checkbox checked colors={customColors}>
356+
Test Checkbox
357+
</Checkbox>,
356358
)
357359

358-
const input = container.querySelector('input')
360+
const input = container.querySelector('label svg')
359361
expect(input).toHaveStyle({
360362
'--checkIcon': '#checkIcon-custom',
361363
})
@@ -378,9 +380,7 @@ describe('Checkbox', () => {
378380
expect(input).toHaveStyle({
379381
'--primary': '#primary-custom',
380382
'--border': '#border-custom',
381-
'--text': '#text-custom',
382383
'--inputBg': '#inputBg-custom',
383-
'--checkIcon': '#checkIcon-custom',
384384
})
385385
})
386386

0 commit comments

Comments
 (0)