Skip to content

Commit 24305d7

Browse files
tenphitenphi
committed
chore: fix tasty tests
1 parent 7a89b11 commit 24305d7

File tree

2 files changed

+81
-33
lines changed

2 files changed

+81
-33
lines changed

‎src/tasty/__snapshots__/tasty.test.tsx.snap‎

Lines changed: 70 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ exports[`tasty() API should allow multiple wrapping 1`] = `
2222
}
2323
2424
.c0.c0 {
25-
color: var(--white-color,rgba(0,0,0,1));
26-
--current-color: var(--white-color,white);
25+
color: var(--white-color, rgba(0, 0, 0, 1));
26+
--current-color: var(--white-color, white);
2727
--current-color-rgb: var(--white-color-rgb);
2828
}
2929
@@ -80,8 +80,12 @@ exports[`tasty() API should be able to override styles 1`] = `
8080
}
8181
8282
.c0.c0 {
83-
color: rgba(var(--black-color-rgb),0.1);
84-
--current-color: var(--black-color,black);
83+
display: block;
84+
}
85+
86+
.c0.c0 {
87+
color: rgba(var(--black-color-rgb), 0.1);
88+
--current-color: var(--black-color, black);
8589
--current-color-rgb: var(--black-color-rgb);
8690
}
8791
@@ -111,13 +115,13 @@ exports[`tasty() API should create element styles 1`] = `
111115
112116
.c0.c0:not([data-is-modified]) [data-element="Element"] {
113117
color: var(--dark-color);
114-
--current-color: var(--dark-color,dark);
118+
--current-color: var(--dark-color, dark);
115119
--current-color-rgb: var(--dark-color-rgb);
116120
}
117121
118122
.c0.c0[data-is-modified] [data-element="Element"] {
119-
color: var(--purple-color,rgba(0,0,0,1));
120-
--current-color: var(--purple-color,purple);
123+
color: var(--purple-color, rgba(0, 0, 0, 1));
124+
--current-color: var(--purple-color, purple);
121125
--current-color-rgb: var(--purple-color-rgb);
122126
}
123127
@@ -137,13 +141,13 @@ exports[`tasty() API should create responsive styles 1`] = `
137141
display: none !important;
138142
}
139143
140-
@media (min-width:980px) {
144+
@media (min-width: 980px) {
141145
.c0.c0 {
142146
display: grid;
143147
}
144148
}
145149
146-
@media (max-width:979px) {
150+
@media (max-width: 979px) {
147151
.c0.c0 {
148152
display: flex;
149153
}
@@ -186,8 +190,8 @@ exports[`tasty() API should fallback to default variant 1`] = `
186190
}
187191
188192
.c0.c0 {
189-
color: var(--white-color,rgba(0,0,0,1));
190-
--current-color: var(--white-color,white);
193+
color: var(--white-color, rgba(0, 0, 0, 1));
194+
--current-color: var(--white-color, white);
191195
--current-color-rgb: var(--white-color-rgb);
192196
}
193197
@@ -217,13 +221,13 @@ exports[`tasty() API should merge element styles 1`] = `
217221
218222
.c0.c0:not([data-is-modified]) [data-element="Element"] {
219223
color: var(--dark-color);
220-
--current-color: var(--dark-color,dark);
224+
--current-color: var(--dark-color, dark);
221225
--current-color-rgb: var(--dark-color-rgb);
222226
}
223227
224228
.c0.c0[data-is-modified] [data-element="Element"] {
225-
color: var(--purple-color,rgba(0,0,0,1));
226-
--current-color: var(--purple-color,purple);
229+
color: var(--purple-color, rgba(0, 0, 0, 1));
230+
--current-color: var(--purple-color, purple);
227231
--current-color-rgb: var(--purple-color-rgb);
228232
}
229233
@@ -254,13 +258,13 @@ exports[`tasty() API should merge styles 1`] = `
254258
255259
.c0.c0:not([data-is-modified]) {
256260
color: var(--dark-color);
257-
--current-color: var(--dark-color,dark);
261+
--current-color: var(--dark-color, dark);
258262
--current-color-rgb: var(--dark-color-rgb);
259263
}
260264
261265
.c0.c0[data-is-modified] {
262-
color: var(--purple-color,rgba(0,0,0,1));
263-
--current-color: var(--purple-color,purple);
266+
color: var(--purple-color, rgba(0, 0, 0, 1));
267+
--current-color: var(--purple-color, purple);
264268
--current-color-rgb: var(--purple-color-rgb);
265269
}
266270
@@ -289,6 +293,27 @@ exports[`tasty() API should merge styles in custom prop 1`] = `
289293
display: none !important;
290294
}
291295
296+
.c0.c0:not([data-is-modified]) {
297+
color: var(--dark-color);
298+
--current-color: var(--dark-color, dark);
299+
--current-color-rgb: var(--dark-color-rgb);
300+
}
301+
302+
.c0.c0[data-is-modified] {
303+
color: var(--purple-color, rgba(0, 0, 0, 1));
304+
--current-color: var(--purple-color, purple);
305+
--current-color-rgb: var(--purple-color-rgb);
306+
}
307+
308+
.c0.c0 {
309+
background-color: var(--black-color);
310+
}
311+
312+
.c0.c0>* {
313+
--context-fill-color: var(--black-color);
314+
--context-fill-color-rgb: var(--black-color-rgb);
315+
}
316+
292317
<div>
293318
<div
294319
class="c0"
@@ -306,8 +331,12 @@ exports[`tasty() API should pass styles from tasty 1`] = `
306331
}
307332
308333
.c0.c0 {
309-
color: rgba(var(--clear-color-rgb),0.1);
310-
--current-color: var(--clear-color,clear);
334+
display: block;
335+
}
336+
337+
.c0.c0 {
338+
color: rgba(var(--clear-color-rgb), 0.1);
339+
--current-color: var(--clear-color, clear);
311340
--current-color-rgb: var(--clear-color-rgb);
312341
}
313342
@@ -327,15 +356,19 @@ exports[`tasty() API should support camelCase modifiers 1`] = `
327356
display: none !important;
328357
}
329358
359+
.c0.c0 {
360+
display: block;
361+
}
362+
330363
.c0.c0:not([data-is-somehow-modified]) {
331364
color: var(--dark-color);
332-
--current-color: var(--dark-color,dark);
365+
--current-color: var(--dark-color, dark);
333366
--current-color-rgb: var(--dark-color-rgb);
334367
}
335368
336369
.c0.c0[data-is-somehow-modified] {
337-
color: var(--purple-color,rgba(0,0,0,1));
338-
--current-color: var(--purple-color,purple);
370+
color: var(--purple-color, rgba(0, 0, 0, 1));
371+
--current-color: var(--purple-color, purple);
339372
--current-color-rgb: var(--purple-color-rgb);
340373
}
341374
@@ -356,15 +389,19 @@ exports[`tasty() API should support kebab-case modifiers 1`] = `
356389
display: none !important;
357390
}
358391
392+
.c0.c0 {
393+
display: block;
394+
}
395+
359396
.c0.c0:not([data-is-somehow-modified]) {
360397
color: var(--dark-color);
361-
--current-color: var(--dark-color,dark);
398+
--current-color: var(--dark-color, dark);
362399
--current-color-rgb: var(--dark-color-rgb);
363400
}
364401
365402
.c0.c0[data-is-somehow-modified] {
366-
color: var(--purple-color,rgba(0,0,0,1));
367-
--current-color: var(--purple-color,purple);
403+
color: var(--purple-color, rgba(0, 0, 0, 1));
404+
--current-color: var(--purple-color, purple);
368405
--current-color-rgb: var(--purple-color-rgb);
369406
}
370407
@@ -385,15 +422,19 @@ exports[`tasty() API should support modifiers 1`] = `
385422
display: none !important;
386423
}
387424
425+
.c0.c0 {
426+
display: block;
427+
}
428+
388429
.c0.c0:not([data-is-modified]) {
389430
color: var(--dark-color);
390-
--current-color: var(--dark-color,dark);
431+
--current-color: var(--dark-color, dark);
391432
--current-color-rgb: var(--dark-color-rgb);
392433
}
393434
394435
.c0.c0[data-is-modified] {
395-
color: var(--purple-color,rgba(0,0,0,1));
396-
--current-color: var(--purple-color,purple);
436+
color: var(--purple-color, rgba(0, 0, 0, 1));
437+
--current-color: var(--purple-color, purple);
397438
--current-color-rgb: var(--purple-color-rgb);
398439
}
399440
@@ -416,7 +457,7 @@ exports[`tasty() API should support variants 1`] = `
416457
417458
.c0.c0 {
418459
color: var(--black-color);
419-
--current-color: var(--black-color,black);
460+
--current-color: var(--black-color, black);
420461
--current-color-rgb: var(--black-color-rgb);
421462
}
422463

‎src/tasty/tasty.test.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,16 +73,23 @@ describe('tasty() API', () => {
7373
});
7474

7575
it('should merge styles in custom prop', () => {
76-
const Block = tasty({
76+
const Block = tasty({});
77+
78+
function BlockWithInput(props) {
79+
return <Block styles={props.inputStyles} />;
80+
}
81+
82+
const StyledOnceBlock = tasty(BlockWithInput, {
7783
inputStyles: {
7884
color: { '': '#dark', modified: '#purple' },
7985
fill: '#white',
8086
},
8187
});
82-
const StyledBlock = tasty(Block, {
88+
89+
const StyledTwiceBlock = tasty(StyledOnceBlock, {
8390
inputStyles: { fill: '#black' },
8491
});
85-
const { container } = render(<StyledBlock />);
92+
const { container } = render(<StyledTwiceBlock />);
8693

8794
expect(container).toMatchSnapshot();
8895
});
@@ -208,7 +215,7 @@ describe('tasty() API', () => {
208215
expect(container).toMatchSnapshot();
209216
});
210217

211-
it.only('should allow nested modifiers', () => {
218+
it('should allow nested modifiers', () => {
212219
const StyledBlock = tasty(Block, {
213220
styles: { color: { '': '#clear', ':not(:first-child)': '#black' } },
214221
});

0 commit comments

Comments
 (0)