Skip to content

Commit 37f5997

Browse files
Gigabyte5671Gigabyte5671
committed
Run tests on both the static script and the bundle
1 parent 5a2e3cb commit 37f5997

File tree

10 files changed

+339
-226
lines changed

10 files changed

+339
-226
lines changed

‎test-server/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>CSS to HTML</title>
77
<script type="module" src="/src/main.ts" defer></script>
88
</head>
9-
<body style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
9+
<body style="font-family: sans-serif;">
1010
<p>Press <kbd>F12</kbd> to open the console.</p>
1111
</body>
1212
</html>

‎test-server/src/main.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
import { cssToHtml } from '../../dist';
2+
import cssToHtmlStatic from '../../static/css-to-html.js?url';
23

34
declare global {
45
interface Window { cssToHtml: typeof cssToHtml; }
56
}
6-
window.cssToHtml = cssToHtml;
7+
8+
if (window.location.pathname === '/static') {
9+
const script = document.createElement('script');
10+
script.src = cssToHtmlStatic;
11+
document.head.appendChild(script);
12+
console.info('Using static script.');
13+
} else {
14+
window.cssToHtml = cssToHtml;
15+
console.info('Using bundle script.');
16+
}

‎tests/cascading.spec.ts‎

Lines changed: 44 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -22,40 +22,49 @@ a {
2222
`;
2323

2424
test('Cascading', async ({ page }) => {
25+
const conditions = async () => {
26+
const body = await page.evaluate(async css => { document.body = await cssToHtml(css); return document.body.outerHTML; }, css);
27+
28+
// The body should have exactly two direct children.
29+
const bodyDirectChildren = page.locator('body > *');
30+
expect(await bodyDirectChildren.count()).toBe(2);
31+
32+
// There should be exactly one anchor element.
33+
const anchor = page.locator('a');
34+
expect(await anchor.count()).toBe(1);
35+
const anchorElement = await anchor.elementHandle();
36+
expect(anchorElement).toBeTruthy();
37+
38+
// The anchor's href attribute should be populated.
39+
const anchorHref = await anchorElement?.getAttribute('href');
40+
expect(anchorHref).toBe('https://example.com/page');
41+
42+
// The anchor should not have any text content.
43+
const anchorContent = await anchorElement?.innerHTML();
44+
expect(anchorContent).toBe('');
45+
46+
// The element with class `.more` should follow the anchor.
47+
const more = page.locator('a + .more');
48+
expect(await more.count()).toBe(1);
49+
const moreElement = await more.elementHandle();
50+
expect(moreElement).toBeTruthy();
51+
52+
// There should be exactly one span element.
53+
const span = page.locator('span');
54+
expect(await span.count()).toBe(1);
55+
const spanElement = await span.elementHandle();
56+
expect(spanElement).toBeTruthy();
57+
58+
// The span should have specific text content.
59+
const spanContent = await spanElement?.innerHTML();
60+
expect(spanContent).toBe('B');
61+
};
62+
63+
// Bundle.
2564
await page.goto('http://localhost:5173/');
26-
const body = await page.evaluate(async (css) => { document.body = await cssToHtml(css); return document.body.outerHTML; }, css);
27-
28-
// The body should have exactly two direct children.
29-
const bodyDirectChildren = page.locator('body > *');
30-
expect(await bodyDirectChildren.count()).toBe(2);
31-
32-
// There should be exactly one anchor element.
33-
const anchor = page.locator('a');
34-
expect(await anchor.count()).toBe(1);
35-
const anchorElement = await anchor.elementHandle();
36-
expect(anchorElement).toBeTruthy();
37-
38-
// The anchor's href attribute should be populated.
39-
const anchorHref = await anchorElement?.getAttribute('href');
40-
expect(anchorHref).toBe('https://example.com/page');
41-
42-
// The anchor should not have any text content.
43-
const anchorContent = await anchorElement?.innerHTML();
44-
expect(anchorContent).toBe('');
45-
46-
// The element with class `.more` should follow the anchor.
47-
const more = page.locator('a + .more');
48-
expect(await more.count()).toBe(1);
49-
const moreElement = await more.elementHandle();
50-
expect(moreElement).toBeTruthy();
51-
52-
// There should be exactly one span element.
53-
const span = page.locator('span');
54-
expect(await span.count()).toBe(1);
55-
const spanElement = await span.elementHandle();
56-
expect(spanElement).toBeTruthy();
57-
58-
// The span should have specific text content.
59-
const spanContent = await spanElement?.innerHTML();
60-
expect(spanContent).toBe('B');
65+
await conditions();
66+
67+
// Static.
68+
await page.goto('http://localhost:5173/static');
69+
await conditions();
6170
});

‎tests/comma.spec.ts‎

Lines changed: 44 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -14,40 +14,49 @@ p.content {
1414
`;
1515

1616
test('Comma', async ({ page }) => {
17+
const conditions = async () => {
18+
const body = await page.evaluate(async css => { document.body = await cssToHtml(css); return document.body.outerHTML; }, css);
19+
20+
// The body should have exactly three direct children.
21+
const bodyDirectChildren = page.locator('body > *');
22+
expect(await bodyDirectChildren.count()).toBe(3);
23+
24+
// There should be exactly one heading element.
25+
const heading = page.locator('h1');
26+
expect(await heading.count()).toBe(1);
27+
const headingElement = await heading.elementHandle();
28+
expect(headingElement).toBeTruthy();
29+
30+
// The heading should have specific text content.
31+
const headingContent = await headingElement?.innerHTML();
32+
expect(headingContent).toBe('A');
33+
34+
// There should be exactly one element with class `.subtitle`.
35+
const subtitle = page.locator('.subtitle');
36+
expect(await subtitle.count()).toBe(1);
37+
const subtitleElement = await subtitle.elementHandle();
38+
expect(subtitleElement).toBeTruthy();
39+
40+
// The element with class `.subtitle` should have specific text content.
41+
const subtitleContent = await subtitleElement?.innerHTML();
42+
expect(subtitleContent).toBe('A');
43+
44+
// There should be exactly one element with class `.content`.
45+
const content = page.locator('.content');
46+
expect(await content.count()).toBe(1);
47+
const contentElement = await content.elementHandle();
48+
expect(contentElement).toBeTruthy();
49+
50+
// The element with class `.content` should have specific text content.
51+
const contentContent = await contentElement?.innerHTML();
52+
expect(contentContent).toBe('A');
53+
};
54+
55+
// Bundle.
1756
await page.goto('http://localhost:5173/');
18-
const body = await page.evaluate(async (css) => { document.body = await cssToHtml(css); return document.body.outerHTML; }, css);
19-
20-
// The body should have exactly three direct children.
21-
const bodyDirectChildren = page.locator('body > *');
22-
expect(await bodyDirectChildren.count()).toBe(3);
23-
24-
// There should be exactly one heading element.
25-
const heading = page.locator('h1');
26-
expect(await heading.count()).toBe(1);
27-
const headingElement = await heading.elementHandle();
28-
expect(headingElement).toBeTruthy();
29-
30-
// The heading should have specific text content.
31-
const headingContent = await headingElement?.innerHTML();
32-
expect(headingContent).toBe('A');
33-
34-
// There should be exactly one element with class `.subtitle`.
35-
const subtitle = page.locator('.subtitle');
36-
expect(await subtitle.count()).toBe(1);
37-
const subtitleElement = await subtitle.elementHandle();
38-
expect(subtitleElement).toBeTruthy();
39-
40-
// The element with class `.subtitle` should have specific text content.
41-
const subtitleContent = await subtitleElement?.innerHTML();
42-
expect(subtitleContent).toBe('A');
43-
44-
// There should be exactly one element with class `.content`.
45-
const content = page.locator('.content');
46-
expect(await content.count()).toBe(1);
47-
const contentElement = await content.elementHandle();
48-
expect(contentElement).toBeTruthy();
49-
50-
// The element with class `.content` should have specific text content.
51-
const contentContent = await contentElement?.innerHTML();
52-
expect(contentContent).toBe('A');
57+
await conditions();
58+
59+
// Static.
60+
await page.goto('http://localhost:5173/static');
61+
await conditions();
5362
});

‎tests/ignored.spec.ts‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,25 @@ div:hover {
3030
`;
3131

3232
test('Ignored', async ({ page }) => {
33-
await page.goto('http://localhost:5173/');
34-
const body = await page.evaluate(async (css) => { document.body = await cssToHtml(css); return document.body.outerHTML; }, css);
33+
const conditions = async () => {
34+
const body = await page.evaluate(async css => { document.body = await cssToHtml(css); return document.body.outerHTML; }, css);
35+
36+
// The body should have exactly one child.
37+
const bodyDirectChildren = page.locator('body *');
38+
expect(await bodyDirectChildren.count()).toBe(1);
39+
const element = await bodyDirectChildren.elementHandle();
40+
expect(element).toBeTruthy();
3541

36-
// The body should have exactly one child.
37-
const bodyDirectChildren = page.locator('body *');
38-
expect(await bodyDirectChildren.count()).toBe(1);
39-
const element = await bodyDirectChildren.elementHandle();
40-
expect(element).toBeTruthy();
42+
// That element should have specific text content.
43+
const content = await element?.innerHTML();
44+
expect(content).toBe('C');
45+
};
46+
47+
// Bundle.
48+
await page.goto('http://localhost:5173/');
49+
await conditions();
4150

42-
// That element should have specific text content.
43-
const content = await element?.innerHTML();
44-
expect(content).toBe('C');
51+
// Static.
52+
await page.goto('http://localhost:5173/static');
53+
await conditions();
4554
});

‎tests/import.spec.ts‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,26 +13,35 @@ div.last {
1313
`;
1414

1515
test('Import', async ({ page }) => {
16+
const conditions = async () => {
17+
const body = await page.evaluate(async css => { document.body = await cssToHtml(css, { imports: 'include' }); return document.body.outerHTML; }, css);
18+
19+
// The body should have exactly four direct children.
20+
const bodyDirectChildren = page.locator('body > *');
21+
expect(await bodyDirectChildren.count()).toBe(4);
22+
23+
// The body's direct children should be in a specific order.
24+
const last = page.locator('.first:first-child + .second + .third + .last:last-child');
25+
expect(await last.count()).toBe(1);
26+
const lastElement = await last.elementHandle();
27+
expect(lastElement).toBeTruthy();
28+
29+
// There should be exactly one span element.
30+
const span = page.locator('span');
31+
expect(await span.count()).toBe(1);
32+
const spanElement = await span.elementHandle();
33+
expect(spanElement).toBeTruthy();
34+
35+
// The span should have specific text content.
36+
const spanContent = await spanElement?.innerHTML();
37+
expect(spanContent).toBe('A');
38+
};
39+
40+
// Bundle.
1641
await page.goto('http://localhost:5173/');
17-
const body = await page.evaluate(async (css) => { document.body = await cssToHtml(css, { imports: 'include' }); return document.body.outerHTML; }, css);
18-
19-
// The body should have exactly four direct children.
20-
const bodyDirectChildren = page.locator('body > *');
21-
expect(await bodyDirectChildren.count()).toBe(4);
22-
23-
// The body's direct children should be in a specific order.
24-
const last = page.locator('.first:first-child + .second + .third + .last:last-child');
25-
expect(await last.count()).toBe(1);
26-
const lastElement = await last.elementHandle();
27-
expect(lastElement).toBeTruthy();
28-
29-
// There should be exactly one span element.
30-
const span = page.locator('span');
31-
expect(await span.count()).toBe(1);
32-
const spanElement = await span.elementHandle();
33-
expect(spanElement).toBeTruthy();
34-
35-
// The span should have specific text content.
36-
const spanContent = await spanElement?.innerHTML();
37-
expect(spanContent).toBe('A');
42+
await conditions();
43+
44+
// Static.
45+
await page.goto('http://localhost:5173/static');
46+
await conditions();
3847
});

‎tests/nested.spec.ts‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,10 +78,19 @@ main {
7878
const html = `<body><nav><a href="" class="icon" id="logo"><img src="https://example.com/image2"></a><input placeholder="Search" readonly="" type="text" class="search"></nav><main><section><div class="foo">C</div></section></main></body>`;
7979

8080
test('Nested', async ({ page }) => {
81+
const conditions = async () => {
82+
const body = await page.evaluate(async css => { document.body = await cssToHtml(css); return document.body.outerHTML; }, css);
83+
const nestedBody = await page.evaluate(async css => { document.body = await cssToHtml(css); return document.body.outerHTML; }, nestedCss);
84+
85+
expect(body).toBe(html);
86+
expect(nestedBody).toBe(html);
87+
};
88+
89+
// Bundle.
8190
await page.goto('http://localhost:5173/');
82-
const body = await page.evaluate(async (css) => { document.body = await cssToHtml(css); return document.body.outerHTML; }, css);
83-
const nestedBody = await page.evaluate(async (css) => { document.body = await cssToHtml(css); return document.body.outerHTML; }, nestedCss);
91+
await conditions();
8492

85-
expect(body).toBe(html);
86-
expect(nestedBody).toBe(html);
93+
// Static.
94+
await page.goto('http://localhost:5173/static');
95+
await conditions();
8796
});

‎tests/nth-child.spec.ts‎

Lines changed: 40 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -27,41 +27,50 @@ span.second-to-last:nth-last-child(2) {
2727
`;
2828

2929
test('Nth-Child', async ({ page }) => {
30-
await page.goto('http://localhost:5173/');
31-
const body = await page.evaluate(async (css) => { document.body = await cssToHtml(css); return document.body.outerHTML; }, css);
30+
const conditions = async () => {
31+
const body = await page.evaluate(async css => { document.body = await cssToHtml(css); return document.body.outerHTML; }, css);
32+
33+
// The body should have exactly eight direct children.
34+
const bodyDirectChildren = page.locator('body > *');
35+
expect(await bodyDirectChildren.count()).toBe(8);
3236

33-
// The body should have exactly eight direct children.
34-
const bodyDirectChildren = page.locator('body > *');
35-
expect(await bodyDirectChildren.count()).toBe(8);
37+
// The body's direct children should be in a specific order.
38+
const last = page.locator('div.first:first-child + span + span + span + span.last + span + span.second-to-last + span:last-child');
39+
expect(await last.count()).toBe(1);
40+
const lastElement = await last.elementHandle();
41+
expect(lastElement).toBeTruthy();
3642

37-
// The body's direct children should be in a specific order.
38-
const last = page.locator('div.first:first-child + span + span + span + span.last + span + span.second-to-last + span:last-child');
39-
expect(await last.count()).toBe(1);
40-
const lastElement = await last.elementHandle();
41-
expect(lastElement).toBeTruthy();
43+
// The first element should have specific text content.
44+
const first = page.locator('div.first:first-child');
45+
expect(await first.count()).toBe(1);
46+
const firstElement = await first.elementHandle();
47+
const firstContent = await firstElement?.innerHTML();
48+
expect(firstContent).toBe('B');
4249

43-
// The first element should have specific text content.
44-
const first = page.locator('div.first:first-child');
45-
expect(await first.count()).toBe(1);
46-
const firstElement = await first.elementHandle();
47-
const firstContent = await firstElement?.innerHTML();
48-
expect(firstContent).toBe('B');
50+
// The fifth element should have specific text content.
51+
const fifth = page.locator('span.last:nth-child(5)');
52+
expect(await fifth.count()).toBe(1);
53+
const fifthElement = await fifth.elementHandle();
54+
const fifthContent = await fifthElement?.innerHTML();
55+
expect(fifthContent).toBe('C');
4956

50-
// The fifth element should have specific text content.
51-
const fifth = page.locator('span.last:nth-child(5)');
52-
expect(await fifth.count()).toBe(1);
53-
const fifthElement = await fifth.elementHandle();
54-
const fifthContent = await fifthElement?.innerHTML();
55-
expect(fifthContent).toBe('C');
57+
// The seventh element should have specific text content.
58+
const seventh = page.locator('span.second-to-last:nth-child(7)');
59+
expect(await seventh.count()).toBe(1);
60+
const seventhElement = await seventh.elementHandle();
61+
const seventhContent = await seventhElement?.innerHTML();
62+
expect(seventhContent).toBe('F');
5663

57-
// The seventh element should have specific text content.
58-
const seventh = page.locator('span.second-to-last:nth-child(7)');
59-
expect(await seventh.count()).toBe(1);
60-
const seventhElement = await seventh.elementHandle();
61-
const seventhContent = await seventhElement?.innerHTML();
62-
expect(seventhContent).toBe('F');
64+
// The last element should have specific text content.
65+
const lastContent = await lastElement?.innerHTML();
66+
expect(lastContent).toBe('E');
67+
};
68+
69+
// Bundle.
70+
await page.goto('http://localhost:5173/');
71+
await conditions();
6372

64-
// The last element should have specific text content.
65-
const lastContent = await lastElement?.innerHTML();
66-
expect(lastContent).toBe('E');
73+
// Static.
74+
await page.goto('http://localhost:5173/static');
75+
await conditions();
6776
});

0 commit comments

Comments
 (0)