8000 test: Added unit tests for new pseudo-classes · NativeScript/NativeScript@0c4c505 · GitHub
[go: up one dir, main page]
Skip to content

Commit 0c4c505

Browse files
CatchABusCatchABus
committed
test: Added unit tests for new pseudo-classes
1 parent 68f6e41 commit 0c4c505

File tree

1 file changed

+82
-9
lines changed

1 file changed

+82
-9
lines changed

‎packages/core/ui/styling/css-selector.spec.ts

Lines changed: 82 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ describe('css-selector', () => {
88
sel.match(<any>{
99
cssType: 'button',
1010
testAttr: true,
11-
})
11+
}),
1212
).toBeTruthy();
1313
expect(
1414
sel.match(<any>{
1515
cssType: 'button',
16-
})
16+
}),
1717
).toBeFalsy();
1818
});
1919

@@ -119,7 +119,7 @@ describe('css-selector', () => {
119119
}
120120
});
121121

122-
it('direct parent combinator', () => {
122+
it('direct child combinator', () => {
123123
const rule = createOne(`listview > item:selected { color: red; }`);
124124
expect(
125125
rule.selectors[0].match({
@@ -128,7 +128,7 @@ describe('css-selector', () => {
128128
parent: {
129129
cssType: 'listview',
130130
},
131-
})
131+
}),
132132
).toBe(true);
133133
expect(
134134
rule.selectors[0].match({
@@ -140,11 +140,11 @@ describe('css-selector', () => {
140140
cssType: 'listview',
141141
},
142142
},
143-
})
143+
}),
144144
).toBe(false);
145145
});
146146

147-
it('ancestor combinator', () => {
147+
it('descendant combinator', () => {
148148
const rule = createOne(`listview item:selected { color: red; }`);
149149
expect(
150150
rule.selectors[0].match({
@@ -153,7 +153,7 @@ describe('css-selector', () => {
153153
parent: {
154154
cssType: 'listview',
155155
},
156-
})
156+
}),
157157
).toBe(true);
158158
expect(
159159
rule.selectors[0].match({
@@ -165,7 +165,7 @@ describe('css-selector', () => {
165165
cssType: 'listview',
166166
},
167167
},
168-
})
168+
}),
169169
).toBe(true);
170170
expect(
171171
rule.selectors[0].match({
@@ -177,7 +177,7 @@ describe('css-selector', () => {
177177
cssType: 'page',
178178
},
179179
},
180-
})
180+
}),
181181
).toBe(false);
182182
});
183183

@@ -202,6 +202,79 @@ describe('css-selector', () => {
202202
expect(sel.match(child)).toBe(true);
203203
});
204204

205+
it(':not() pseudo-class', () => {
206+
const rule = createOne(`listview :not(item:selected) { color: red; }`);
207+
expect(
208+
rule.selectors[0].match({
209+
cssType: 'item',
210+
cssPseudoClasses: new Set(['selected']),
211+
parent: {
212+
cssType: 'listview',
213+
},
214+
}),
215+
).toBe(false);
216+
expect(
217+
rule.selectors[0].match({
218+
cssType: 'item',
219+
parent: {
220+
cssType: 'listview',
221+
},
222+
}),
223+
).toBe(true);
224+
expect(
225+
rule.selectors[0].match({
226+
cssType: 'label',
227+
parent: {
228+
cssType: 'listview',
229+
},
230+
}),
231+
).toBe(true);
232+
});
233+
234+
it(':is() pseudo-class', () => {
235+
const rule = createOne(`listview :is(item:selected) { color: red; }`);
236+
expect(
237+
rule.selectors[0].match({
238+
cssType: 'item',
239+
cssPseudoClasses: new Set(['selected']),
240+
parent: {
241+
cssType: 'listview',
242+
},
243+
}),
244+
).toBe(true);
245+
expect(
246+
rule.selectors[0].match({
247+
cssType: 'item',
248+
parent: {
249+
cssType: 'listview',
250+
},
251+
}),
252+
).toBe(false);
253+
});
254+
255+
it(':where() pseudo-class', () => {
256+
const rule = createOne(`listview :is(item:selected) { color: red; }`);
257+
expect(
258+
rule.selectors[0].match({
259+
cssType: 'item',
260+
cssPseudoClasses: new Set(['selected']),
261+
parent: {
262+
cssType: 'listview',
263+
},
264+
}),
265+
).toBe(true);
266+
expect(
267+
rule.selectors[0].match({
268+
cssType: 'item',
269+
parent: {
270+
cssType: 'listview',
271+
},
272+
}),
273+
).toBe(false);
274+
// TODO: Re-add this when decorators actually work with ts-jest
275+
//expect(rule.selectors[0].specificity).toEqual(0);
276+
});
277+
205278
function toString() {
206279
return this.cssType;
207280
}

0 commit comments

Comments
 (0)
0