8000 Unit tests for classes & selectors · ulyssear/css-in-js-in-html@d21f6a2 · GitHub
[go: up one dir, main page]
Skip to content

Commit d21f6a2

Browse files
ulyssearulyssear
committed
Unit tests for classes & selectors
1 parent 76e581c commit d21f6a2

File tree

6 files changed

+112
-27
lines changed

6 files changed

+112
-27
lines changed

‎jest-puppeteer.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
module.exports = {
22
"launch": {
3-
"headless": "false"
3+
"headless": "true"
44
},
55
"browserContext": "default"
66
}

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"devDependencies": {
3131
"concurrently": "^7.6.0",
3232
"jest": "^29.3.1",
33-
"jest-puppeteer": "^6.2.0"
33+
"jest-puppeteer": "^6.2.0",
34+
"puppeteer": "^19.5.0"
3435
}
3536
}

‎tests/classes.test.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const utils = require('./utils');
2+
const {COLORS, onBeforeAll, onBeforeEach, assert} = utils;
3+
4+
module.exports = describe('Classes', () => {
5+
beforeAll(async () => {
6+
await onBeforeAll();
7+
});
8+
9+
beforeEach(async () => {
10+
// await onBeforeEach();
11+
});
12+
13+
it('Simple class', async () => {
14+
await assert('#example', 'background-[red]', {backgroundColor: COLORS.red});
15+
});
16+
17+
it('Multiple classes', async () => {
18+
await assert('#example', '{background-[red] color-[white]}', {
19+
backgroundColor: COLORS.red,
20+
color: COLORS.white
21+
});
22+
});
23+
});

‎tests/index.test.js

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎tests/selectors.test.js

Lines changed: 77 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,85 @@
11
const utils = require('./utils');
2-
const {COLORS, onBeforeAll, assert} = utils;
2+
const {COLORS, onBeforeAll, onBeforeEach, assert} = utils;
33

4-
describe('Selectors', () => {
5-
beforeAll(onBeforeAll);
4+
module.exports = describe('Selectors', () => {
5+
beforeAll(async () => {
6+
await onBeforeAll();
7+
});
8+
9+
beforeEach(async () => {
10+
await onBeforeEach();
11+
});
612

713
it('Simple selector with simple class', async () => {
8-
assert('#example', '[ul]:background-[red]', {});
9-
const children = await page.$$('#example ul');
14+
await assert('#example-second', '[ul]:background-[red]', {});
15+
const children = await page.$$('#example-second ul');
16+
for (const child of children) {
17+
await assert(child, null, {backgroundColor: COLORS.red});
18+
}
19+
});
20+
21+
it('Simple selector with multiple classes', async () => {
22+
await assert('#example-second', '[ul]:background-[red] color-[white]', {});
23+
const children = await page.$$('#example-second ul');
24+
for (const child of children) {
25+
await assert(child, null, {
26+
backgroundColor: COLORS.red,
27+
color: COLORS.white
28+
});
29+
}
30+
});
31+
32+
it('Selector ">" with simple class', async () => {
33+
await assert('#example-second', '[> ul]:display-[flex]', {});
34+
const children = await page.$$('#example-second > ul');
35+
for (const child of children) {
36+
await assert(child, null, {display: 'flex'});
37+
}
38+
});
39+
40+
it('Selector ">" with multiple classes', async () => {
41+
await assert('#example-second', '[> ul]:{display-[flex] flex-direction-[row]}', {});
42+
const children = await page.$$('#example-second > ul');
43+
for (const child of children) {
44+
await assert(child, null, {
45+
display: 'flex',
46+
flexDirection: 'row'
47+
});
48+
}
49+
});
50+
51+
it('Selector "+" with simple class', async () => {
52+
await assert('#example', '[+ div]:justify-content-[space-between]', {});
53+
const element = await page.$('#example + div');
54+
await assert(element, null, {justifyContent: 'space-between'});
55+
});
56+
57+
it('Selector "+" with multiple classes', async () => {
58+
await assert('#example', '[+ div]:{justify-content-[space-between] align-items-[center]}', {});
59+
const element = await page.$('#example + div');
60+
await assert(element, null, {
61+
justifyContent: 'space-between',
62+
alignItems: 'center'
63+
});
64+
});
65+
66+
it('Selector "~" with simple class', async () => {
67+
await assert('#example', '[~ div]:align-items-[center]', {});
68+
const children = await page.$$('#example ~ div');
69+
for (const child of children) {
70+
await assert(child, null, {alignItems: 'center'});
71+
}
72+
});
73+
74+
it('Selector "~" with multiple classes', async () => {
75+
await assert('#example', '[~ div]:{align-items-[center] flex-direction-[row]}', {});
76+
const children = await page.$$('#example ~ div');
1077
for (const child of children) {
11-
assert(child, null, {backgroundColor: COLORS.red});
78+
await assert(child, null, {
79+
alignItems: 'center',
80+
flexDirection: 'row'
81+
});
1282
}
1383
});
84+
1485
});

‎tests/utils.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ const COLORS = {
1616
};
1717

1818
async function onBeforeAll () {
19+
jest.setTimeout(100000)
20+
1921
const url = 'file://' + path.join(__dirname, 'index.html');
2022

2123
await page.goto(url);
@@ -26,6 +28,10 @@ async function onBeforeAll () {
2628
});
2729
}
2830

31+
async function onBeforeEach() {
32+
await page.reload();
33+
}
34+
2935
async function assert(element, classes, styles = {}) {
3036
if ('string' !== typeof element) {
3137
return assert_element(element, classes, styles);
@@ -42,7 +48,7 @@ async function assert(element, classes, styles = {}) {
4248
}, selector, classes);
4349

4450
for (const style in styles) {
45-
expect(computedStyle[style]).toBe(styles[style]);
51+
await expect(computedStyle[style]).toBe(styles[style]);
4652
}
4753
}
4854

@@ -57,7 +63,7 @@ async function assert_element(element, styles, classes = null) {
5763
}, element, classes);
5864

5965
for (const style in styles) {
60-
expect(computedStyle[style]).toBe(styles[style]);
66+
await expect(computedStyle[style]).toBe(styles[style]);
6167
}
6268
}
6369

@@ -66,5 +72,6 @@ module.exports = {
6672
COLORS,
6773
// getComputedStyle,
6874
onBeforeAll,
75+
onBeforeEach,
6976
assert
7077
};

0 commit comments

Comments
 (0)
0