Skip to content

Commit e771290

Browse files
Gigabyte5671Gigabyte5671
committed
Fix test inaccuracies
- Captured console messages in the Sanitize test were being shared between the "bundle" and "static" runs. - The Nested and Selector tests were relying on the browser to consistently serialize HTML.
1 parent c40b8ac commit e771290

File tree

3 files changed

+85
-23
lines changed

3 files changed

+85
-23
lines changed

‎tests/nested.spec.ts‎

Lines changed: 44 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*/
44

55
import { test, expect } from '@playwright/test';
6-
import { evaluate } from './utilities';
6+
import { evaluate, innerHTML } from './utilities';
77

88
const css = `
99
nav > a#logo.icon img {
@@ -75,22 +75,59 @@ main {
7575
}
7676
`;
7777

78-
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>`;
79-
8078
test('Nested', async ({ page }) => {
8179
const conditions = async () => {
80+
// The body should have exactly two direct children.
81+
const bodyDirectChildren = page.locator('body > *');
82+
await expect(bodyDirectChildren).toHaveCount(2);
83+
84+
// The body's direct children should be in a specific order.
85+
const last = page.locator('body > nav + main:last-child');
86+
await expect(last).toHaveCount(1);
87+
88+
// The anchor should have an empty link.
89+
const anchor = page.locator('nav > a#logo.icon');
90+
await expect(anchor).toHaveCount(1);
91+
await expect(anchor).toHaveAttribute('href', '');
92+
93+
// The image should have a specific src.
94+
const image = anchor.locator('> img');
95+
await expect(image).toHaveCount(1);
96+
await expect(image).toHaveAttribute('src', 'https://example.com/image2');
97+
98+
// The input should follow the anchor, and have specific attributes.
99+
const input = anchor.locator('+ input.search');
100+
await expect(input).toHaveCount(1);
101+
await expect(input).toHaveAttribute('placeholder', 'Search');
102+
await expect(input).toHaveAttribute('readonly', '');
103+
await expect(input).toHaveAttribute('type', 'text');
104+
105+
// There should only be one div on the page.
106+
const divs = page.locator('div');
107+
await expect(divs).toHaveCount(1);
108+
109+
// The div with class `.foo` should have specific text content.
110+
const div = page.locator('nav + main > section > div.foo');
111+
await expect(div).toHaveCount(1);
112+
await expect(innerHTML(div)).resolves.toBe('C');
113+
};
114+
115+
const tests = async () => {
82116
const body = await evaluate(page, css);
117+
await conditions();
118+
83119
const nestedBody = await evaluate(page, nestedCss);
120+
await conditions();
84121

85-
expect(body).toBe(html);
86-
expect(nestedBody).toBe(html);
122+
// The outer HTML produced by both inputs should match.
123+
expect(body).toBe(nestedBody);
87124
};
88125

89126
// Bundle.
90127
await page.goto('http://localhost:5173/');
91-
await conditions();
128+
await tests();
92129

93130
// Static.
94131
await page.goto('http://localhost:5173/static');
95-
await conditions();
132+
await tests();
96133
});

‎tests/sanitize.spec.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ div.last[onclick="console.log('foo')"] {
1515
`;
1616

1717
test('Sanitization Off', async ({ page }) => {
18-
const consoleMessages = new Array<string>();
19-
page.on('console', message => consoleMessages.push(message.text()));
20-
2118
const conditions = async () => {
19+
const consoleMessages = new Array<string>();
20+
page.on('console', message => consoleMessages.push(message.text()));
21+
2222
await evaluate(page, css, { imports: 'include', sanitize: 'off' });
2323

2424
// The body should have exactly two direct children.
@@ -60,10 +60,10 @@ test('Sanitization Off', async ({ page }) => {
6060
});
6161

6262
test('Sanitize Imports Only', async ({ page }) => {
63-
const consoleMessages = new Array<string>();
64-
page.on('console', message => consoleMessages.push(message.text()));
65-
6663
const conditions = async () => {
64+
const consoleMessages = new Array<string>();
65+
page.on('console', message => consoleMessages.push(message.text()));
66+
6767
await evaluate(page, css, { imports: 'include', sanitize: 'imports' });
6868

6969
// The body should have exactly two direct children.
@@ -132,10 +132,10 @@ async function expectEverythingToBeSanitized (page: Page): Promise<void> {
132132
}
133133

134134
test('Sanitize Everything', async ({ page }) => {
135-
const consoleMessages = new Array<string>();
136-
page.on('console', message => consoleMessages.push(message.text()));
137-
138135
const conditions = async () => {
136+
const consoleMessages = new Array<string>();
137+
page.on('console', message => consoleMessages.push(message.text()));
138+
139139
await evaluate(page, css, { imports: 'include', sanitize: 'all' });
140140

141141
await expectEverythingToBeSanitized(page);
@@ -154,10 +154,10 @@ test('Sanitize Everything', async ({ page }) => {
154154
});
155155

156156
test('Sanitize Everything By Default', async ({ page }) => {
157-
const consoleMessages = new Array<string>();
158-
page.on('console', message => consoleMessages.push(message.text()));
159-
160157
const conditions = async () => {
158+
const consoleMessages = new Array<string>();
159+
page.on('console', message => consoleMessages.push(message.text()));
160+
161161
await evaluate(page, css, { imports: 'include' });
162162

163163
await expectEverythingToBeSanitized(page);

‎tests/selector.spec.ts‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,38 @@ nav input[type="text"].search[readonly] {
2222
}
2323
`;
2424

25-
const html = `<body><div id="cat"></div><div class="mouse"><span class="flea"></span><i></i></div><nav><a href="" class="icon" id="logo"><img src="https://example.com/image2"></a><input placeholder="Search" readonly="" type="text" class="search"></nav></body>`;
26-
2725
test('Selector', async ({ page }) => {
2826
const conditions = async () => {
29-
const body = await evaluate(page, css);
27+
await evaluate(page, css);
28+
29+
// The body should have exactly three direct children.
30+
const bodyDirectChildren = page.locator('body > *');
31+
await expect(bodyDirectChildren).toHaveCount(3);
32+
33+
// The body's direct children should be in a specific order.
34+
const last = page.locator('body > div#cat + div.mouse + nav:last-child');
35+
await expect(last).toHaveCount(1);
36+
37+
// The div with class `.mouse` should have exactly two children.
38+
const mouse = page.locator('.mouse > span.flea:first-child + i:last-child');
39+
await expect(mouse).toHaveCount(1);
40+
41+
// The anchor should have an empty link.
42+
const anchor = page.locator('nav > a#logo.icon');
43+
await expect(anchor).toHaveCount(1);
44+
await expect(anchor).toHaveAttribute('href', '');
45+
46+
// The image should have a specific src.
47+
const image = anchor.locator('> img');
48+
await expect(image).toHaveCount(1);
49+
await expect(image).toHaveAttribute('src', 'https://example.com/image2');
3050

31-
expect(body).toBe(html);
51+
// The input should follow the anchor, and have specific attributes.
52+
const input = anchor.locator('+ input.search');
53+
await expect(input).toHaveCount(1);
54+
await expect(input).toHaveAttribute('placeholder', 'Search');
55+
await expect(input).toHaveAttribute('readonly', '');
56+
await expect(input).toHaveAttribute('type', 'text');
3257
};
3358

3459
// Bundle.

0 commit comments

Comments
 (0)