Skip to content

Commit 1cbb44b

Browse files
adigubaadiguba
committed
add test
1 parent 2b3fb8e commit 1cbb44b

File tree

2 files changed

+187
-0
lines changed

2 files changed

+187
-0
lines changed

‎packages/svelte/tests/runtime-runes/samples/class-directive/_config.js‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import { flushSync } from 'svelte';
2+
import { test } from '../../test';
3+
4+
export default test({
5+
html: `
6+
<div class="svelte-tza1s0"></div>
7+
<span></span>
8+
<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
9+
10+
<div class="foo svelte-tza1s0"></div>
11+
<span class="foo"></span>
12+
<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
13+
14+
15+
<div class="foo svelte-tza1s0 bar"></div>
16+
<span class="foo bar"></span>
17+
<div class="svelte-tza1s0"><span class="foo svelte-tza1s0 bar"></span></div>
18+
19+
<div class="svelte-tza1s0"></div>
20+
<span></span>
21+
<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
22+
23+
<div class="svelte-tza1s0 bar"></div>
24+
<span class="bar"></span>
25+
<div class="svelte-tza1s0"><span class="svelte-tza1s0 bar"></span></div>
26+
27+
<div class="football svelte-tza1s0 bar"></div>
28+
<span class="football bar"></span>
29+
<div class="svelte-tza1s0"><span class="football svelte-tza1s0 bar"></span></div>
30+
31+
<div class="svelte-tza1s0 bar not-foo"></div>
32+
<span class="bar not-foo"></span>
33+
<div class="svelte-tza1s0"><span class="svelte-tza1s0 bar not-foo"></span></div>
34+
35+
`,
36+
test({ assert, target, component }) {
37+
component.foo = true;
38+
flushSync();
39+
40+
assert.htmlEqual(
41+
target.innerHTML,
42+
`
43+
<div class="svelte-tza1s0"></div>
44+
<span></span>
45+
<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
46+
47+
<div class="foo svelte-tza1s0"></div>
48+
<span class="foo"></span>
49+
<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
50+
51+
<div class="foo svelte-tza1s0 bar"></div>
52+
<span class="foo bar"></span>
53+
<div class="svelte-tza1s0"><span class="foo svelte-tza1s0 bar"></span></div>
54+
55+
<div class="svelte-tza1s0 foo"></div>
56+
<span class="foo"></span>
57+
<div class="svelte-tza1s0"><span class="svelte-tza1s0 foo"></span></div>
58+
59+
<div class="svelte-tza1s0 bar foo"></div>
60+
<span class="bar foo"></span>
61+
<div class="svelte-tza1s0"><span class="svelte-tza1s0 bar foo"></span></div>
62+
63+
<div class="football svelte-tza1s0 bar foo"></div>
64+
<span class="football bar foo"></span>
65+
<div class="svelte-tza1s0"><span class="football svelte-tza1s0 bar foo"></span></div>
66+
67+
<div class="svelte-tza1s0 bar foo"></div>
68+
<span class="bar foo"></span>
69+
<div class="svelte-tza1s0"><span class="svelte-tza1s0 bar foo"></span></div>
70+
`
71+
);
72+
73+
component.bar = false;
74+
flushSync();
75+
76+
assert.htmlEqual(
77+
target.innerHTML,
78+
`
79+
<div class="svelte-tza1s0"></div>
80+
<span></span>
81+
<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
82+
83+
<div class="foo svelte-tza1s0"></div>
84+
<span class="foo"></span>
85+
<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
86+
87+
<div class="foo svelte-tza1s0"></div>
88+
<span class="foo"></span>
89+
<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
90+
91+
<div class="svelte-tza1s0 foo"></div>
92+
<span class="foo"></span>
93+
<div class="svelte-tza1s0"><span class="svelte-tza1s0 foo"></span></div>
94+
95+
<div class="svelte-tza1s0 foo"></div>
96+
<span class="foo"></span>
97+
<div class="svelte-tza1s0"><span class="svelte-tza1s0 foo"></span></div>
98+
99+
<div class="football svelte-tza1s0 foo"></div>
100+
<span class="football foo"></span>
101+
<div class="svelte-tza1s0"><span class="football svelte-tza1s0 foo"></span></div>
102+
103+
<div class="svelte-tza1s0 foo"></div>
104+
<span class="foo"></span>
105+
<div class="svelte-tza1s0"><span class="svelte-tza1s0 foo"></span></div>
106+
`
107+
);
108+
109+
component.foo = false;
110+
flushSync();
111+
112+
assert.htmlEqual(
113+
target.innerHTML,
114+
`
115+
<div class="svelte-tza1s0"></div>
116+
<span></span>
117+
<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
118+
119+
<div class="foo svelte-tza1s0"></div>
120+
<span class="foo"></span>
121+
<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
122+
123+
<div class="foo svelte-tza1s0"></div>
124+
<span class="foo"></span>
125+
<div class="svelte-tza1s0"><span class="foo svelte-tza1s0"></span></div>
126+
127+
<div class="svelte-tza1s0"></div>
128+
<span class=""></span>
129+
<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
130+
131+
<div class="svelte-tza1s0"></div>
132+
<span class=""></span>
133+
<div class="svelte-tza1s0"><span class="svelte-tza1s0"></span></div>
134+
135+
<div class="football svelte-tza1s0"></div>
136+
<span class="football"></span>
137+
<div class="svelte-tza1s0"><span class="football svelte-tza1s0"></span></div>
138+
139+
<div class="svelte-tza1s0 not-foo"></div>
140+
<span class="not-foo"></span>
141+
<div class="svelte-tza1s0"><span class="svelte-tza1s0 not-foo"></span></div>
142+
`
143+
);
144+
}
145+
});

‎packages/svelte/tests/runtime-runes/samples/class-directive/main.svelte‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<script>
2+
let { foo = false, bar = true } = $props();
3+
</script>
4+
5+
6+
<div></div>
7+
<span></span>
8+
<div><span></span></div>
9+
10+
<div class="foo"></div>
11+
<span class="foo"></span>
12+
<div><span class="foo"></span></div>
13+
14+
15+
<div class="foo" class:bar></div>
16+
<span class="foo" class:bar></span>
17+
<div><span class="foo" class:bar></span></div>
18+
19+
<div class="foo" class:foo></div>
20+
<span class="foo" class:foo></span>
21+
<div><span class="foo" class:foo></span></div>
22+
23+
<div class="foo" class:bar class:foo></div>
24+
<span class="foo" class:bar class:foo></span>
25+
<div><span class="foo" class:bar class:foo></span></div>
26+
27+
<div class="football" class:bar class:foo></div>
28+
<span class="football" class:bar class:foo></span>
29+
<div><span class="football" class:bar class:foo></span></div>
30+
31+
<div class="foo" class:bar class:foo class:not-foo={!foo}></div>
32+
<span class="foo" class:bar class:foo class:not-foo={!foo}></span>
33+
<div><span class="foo" class:bar class:foo class:not-foo={!foo}></span></div>
34+
35+
<style>
36+
div {
37+
color: red;
38+
}
39+
div > span {
40+
font-weight: bold;
41+
}
42+
</style>

0 commit comments

Comments
 (0)