Update unit tests with a more verbose testing style

Author: Gigabyte5671

test-server/public/import1.css

@@ -0,0 +1,6 @@
+@import url('./import2.css');
+@import url('./import3.css');
+
+.third p {
+	content: 'C';
+}

test-server/public/import2.css

@@ -0,0 +1,3 @@
+.first .inner > p span {
+	content: 'A';
+}

test-server/public/import3.css

@@ -0,0 +1,5 @@
+@import url('./import1.css');
+
+.second {
+	content: 'B';
+}

tests/cascading.spec.ts

@@ -1,5 +1,5 @@
 /*
- * Verify that styles and content will cascade.
+ * Verify that content will cascade.
  */
 
 import { test, expect } from '@playwright/test';
@@ -8,32 +8,54 @@ import { cssToHtml } from '../src/index';
 const css = `
 a {
 	content: 'https://example.com/';
-	border-radius: 5px;
 }
 a {
 	content: 'https://example.com/page';
-	border-radius: 10px;
+}
+.more p {}
+.more p span {
+	content: 'A';
+}
+.more p span {
+	content: 'B';
 }
 `;
 
 test('Cascading', async ({ page }) => {
-	await page.addScriptTag({ path: './dist/Generator.script.js' });
-
-	const result = await page.evaluate(async (css) => {
-		document.body = await cssToHtml(css);
-		const styleElement = document.createElement('style');
-		styleElement.innerText = css;
-		document.head.append(styleElement);
-
-		const element = document.body.querySelector('a');
-		return element
-			&& element.href === 'https://example.com/page'
-			&& element.innerHTML === ''
-			&& window.getComputedStyle(element).borderRadius === '10px'
-			&& element.previousSibling === null
-			&& element.nextSibling === null;
-	}, css);
-
-	expect(result).toBeDefined();
-	expect(result).toBe(true);
+	await page.goto('http://localhost:5173/');
+	const body = await page.evaluate(async (css) => { document.body = await cssToHtml(css); return document.body.outerHTML; }, css);
+
+	// The body should have exactly two direct children.
+	const bodyDirectChildren = page.locator('body > *');
+	expect(await bodyDirectChildren.count()).toBe(2);
+
+	// There should be exactly one anchor element.
+	const anchor = page.locator('a');
+	expect(await anchor.count()).toBe(1);
+	const anchorElement = await anchor.elementHandle();
+	expect(anchorElement).toBeTruthy();
+
+	// The anchor's href attribute should be populated.
+	const anchorHref = await anchorElement?.getAttribute('href');
+	expect(anchorHref).toBe('https://example.com/page');
+
+	// The anchor should not have any text content.
+	const anchorContent = await anchorElement?.innerHTML();
+	expect(anchorContent).toBe('');
+
+	// The element with class `.more` should follow the anchor.
+	const more = page.locator('a + .more');
+	expect(await more.count()).toBe(1);
+	const moreElement = await more.elementHandle();
+	expect(moreElement).toBeTruthy();
+
+	// There should be exactly one span element.
+	const span = page.locator('span');
+	expect(await span.count()).toBe(1);
+	const spanElement = await span.elementHandle();
+	expect(spanElement).toBeTruthy();
+
+	// The span should have specific text content.
+	const spanContent = await spanElement?.innerHTML();
+	expect(spanContent).toBe('B');
 });

tests/comma.spec.ts

@@ -9,21 +9,45 @@ const css = `
 h1,
 p.subtitle,
 p.content {
-	content: 'a';
+	content: 'A';
 }
 `;
 
 test('Comma', async ({ page }) => {
-	await page.addScriptTag({ path: './dist/Generator.script.js' });
+	await page.goto('http://localhost:5173/');
+	const body = await page.evaluate(async (css) => { document.body = await cssToHtml(css); return document.body.outerHTML; }, css);
 
-	const result = await page.evaluate(async (css) => {
-		document.body = await cssToHtml(css);
+	// The body should have exactly three direct children.
+	const bodyDirectChildren = page.locator('body > *');
+	expect(await bodyDirectChildren.count()).toBe(3);
 
-		return document.body.querySelector('h1')?.innerHTML === 'a'
-			&& document.body.querySelector('p.subtitle')?.innerHTML === 'a'
-			&& document.body.querySelector('p.content')?.innerHTML === 'a';
-	}, css);
+	// There should be exactly one heading element.
+	const heading = page.locator('h1');
+	expect(await heading.count()).toBe(1);
+	const headingElement = await heading.elementHandle();
+	expect(headingElement).toBeTruthy();
 
-	expect(result).toBeDefined();
-	expect(result).toBe(true);
+	// The heading should have specific text content.
+	const headingContent = await headingElement?.innerHTML();
+	expect(headingContent).toBe('A');
+
+	// There should be exactly one element with class `.subtitle`.
+	const subtitle = page.locator('.subtitle');
+	expect(await subtitle.count()).toBe(1);
+	const subtitleElement = await subtitle.elementHandle();
+	expect(subtitleElement).toBeTruthy();
+
+	// The element with class `.subtitle` should have specific text content.
+	const subtitleContent = await subtitleElement?.innerHTML();
+	expect(subtitleContent).toBe('A');
+
+	// There should be exactly one element with class `.content`.
+	const content = page.locator('.content');
+	expect(await content.count()).toBe(1);
+	const contentElement = await content.elementHandle();
+	expect(contentElement).toBeTruthy();
+
+	// The element with class `.content` should have specific text content.
+	const contentContent = await contentElement?.innerHTML();
+	expect(contentContent).toBe('A');
 });

tests/ignored.spec.ts

@@ -10,31 +10,33 @@ const css = `
 	background: #000;
 }
 * {
-	content: 'a';
+	content: 'A';
 	box-sizing: border-box;
 }
 @media screen and (max-width: 200px) {}
 div {
-	content: 'a';
+	content: 'B';
 }
 div:hover {
-	content: 'b';
+	content: 'C';
+}
+@media screen and (max-width: 800px) {}
+.ignored > section::-webkit-scrollbar {
+	width: 0.5rem;
 }
 `;
 
 test('Ignored', async ({ page }) => {
-	await page.addScriptTag({ path: './dist/Generator.script.js' });
-
-	const result = await page.evaluate(async (css) => {
-		document.body = await cssToHtml(css);
+	await page.goto('http://localhost:5173/');
+	const body = await page.evaluate(async (css) => { document.body = await cssToHtml(css); return document.body.outerHTML; }, css);
 
-		const element = document.body.querySelector('div');
-		return element
-			&& element.innerHTML === 'a'
-			&& element.previousSibling === null
-			&& element.nextSibling === null;
-	}, css);
+	// The body should have exactly one child.
+	const bodyDirectChildren = page.locator('body *');
+	expect(await bodyDirectChildren.count()).toBe(1);
+	const element = await bodyDirectChildren.elementHandle();
+	expect(element).toBeTruthy();
 
-	expect(result).toBeDefined();
-	expect(result).toBe(true);
+	// That element should have specific text content.
+	const content = await element?.innerHTML();
+	expect(content).toBe('B');
 });

tests/import.spec.ts

@@ -6,28 +6,33 @@ import { test, expect } from '@playwright/test';
 import { cssToHtml } from '../src/index';
 
 const css = `
-@import url('https://cascades.app/project/wBcGlZUV.css');
+@import url('http://localhost:5173/import1.css');
 div.last {
-	content: 'a';
+	content: 'D';
 }
 `;
 
 test('Import', async ({ page }) => {
-	await page.addScriptTag({ path: './dist/Generator.script.js' });
+	await page.goto('http://localhost:5173/');
+	const body = await page.evaluate(async (css) => { document.body = await cssToHtml(css, { imports: 'include' }); return document.body.outerHTML; }, css);
 
-	page.on('console', msg => console.log(msg.text()));
+	// The body should have exactly four direct children.
+	const bodyDirectChildren = page.locator('body > *');
+	expect(await bodyDirectChildren.count()).toBe(4);
 
-	const result = await page.evaluate(async (css) => {
-		document.body = await cssToHtml(css);
+	// The body's direct children should be in a specific order.
+	const last = page.locator('.first:first-child + .second + .third + .last:last-child');
+	expect(await last.count()).toBe(1);
+	const lastElement = await last.elementHandle();
+	expect(lastElement).toBeTruthy();
 
-		const element = document.body.querySelector('div.last');
-		return element
-			&& element.innerHTML === 'a'
-			&& element.previousElementSibling !== null
-			&& element.previousElementSibling.innerHTML === 'Test'
-			&& element.nextSibling === null;
-	}, css);
+	// There should be exactly one span element.
+	const span = page.locator('span');
+	expect(await span.count()).toBe(1);
+	const spanElement = await span.elementHandle();
+	expect(spanElement).toBeTruthy();
 
-	expect(result).toBeDefined();
-	expect(result).toBe(true);
+	// The span should have specific text content.
+	const spanContent = await spanElement?.innerHTML();
+	expect(spanContent).toBe('A');
 });

tests/nth-child.spec.ts

@@ -6,33 +6,62 @@ import { test, expect } from '@playwright/test';
 import { cssToHtml } from '../src/index';
 
 const css = `
-span:nth-child(10) {
-	color: red;
+span:nth-child(5) {
+	content: 'A';
 }
 div.first:first-child {
-	content: 'a';
+	content: 'B';
 }
 span.last:last-child {
-	content: 'b';
+	content: 'C';
+}
+span:nth-child(8) {
+	content: 'D';
 }
 span:last-child {
-	content: 'c';
+	content: 'E';
+}
+span.second-to-last:nth-last-child(2) {
+	content: 'F';
 }
 `;
 
 test('Nth-Child', async ({ page }) => {
-	await page.addScriptTag({ path: './dist/Generator.script.js' });
+	await page.goto('http://localhost:5173/');
+	const body = await page.evaluate(async (css) => { document.body = await cssToHtml(css); return document.body.outerHTML; }, css);
+
+	// The body should have exactly eight direct children.
+	const bodyDirectChildren = page.locator('body > *');
+	expect(await bodyDirectChildren.count()).toBe(8);
+
+	// The body's direct children should be in a specific order.
+	const last = page.locator('div.first:first-child + span + span + span + span.last + span + span.second-to-last + span:last-child');
+	expect(await last.count()).toBe(1);
+	const lastElement = await last.elementHandle();
+	expect(lastElement).toBeTruthy();
+
+	// The first element should have specific text content.
+	const first = page.locator('div.first:first-child');
+	expect(await first.count()).toBe(1);
+	const firstElement = await first.elementHandle();
+	const firstContent = await firstElement?.innerHTML();
+	expect(firstContent).toBe('B');
 
-	const result = await page.evaluate(async (css) => {
-		document.body = await cssToHtml(css);
+	// The fifth element should have specific text content.
+	const fifth = page.locator('span.last:nth-child(5)');
+	expect(await fifth.count()).toBe(1);
+	const fifthElement = await fifth.elementHandle();
+	const fifthContent = await fifthElement?.innerHTML();
+	expect(fifthContent).toBe('C');
 
-		return document.body.querySelectorAll('*').length === 10
-			&& document.body.querySelector('div.first')?.previousElementSibling === null
-			&& document.body.querySelector('div.first')?.innerHTML === 'a'
-			&& document.body.querySelector('span.last')?.nextElementSibling === null
-			&& document.body.querySelector('span.last')?.innerHTML === 'c';
-	}, css);
+	// The seventh element should have specific text content.
+	const seventh = page.locator('span.second-to-last:nth-child(7)');
+	expect(await seventh.count()).toBe(1);
+	const seventhElement = await seventh.elementHandle();
+	const seventhContent = await seventhElement?.innerHTML();
+	expect(seventhContent).toBe('F');
 
-	expect(result).toBeDefined();
-	expect(result).toBe(true);
+	// The last element should have specific text content.
+	const lastContent = await lastElement?.innerHTML();
+	expect(lastContent).toBe('E');
 });

tests/selector.spec.ts

@@ -17,24 +17,16 @@ nav    a#logo.icon> img {
 nav>a#logo.icon > img {
 	content: 'https://example.com/image2';
 }
+nav input[type="text"].search[readonly] {
+	content: 'Search';
+}
 `;
 
-const html = `<body xmlns="http://www.w3.org/1999/xhtml"><div id="cat"></div><div class="mouse"><span class="flea"></span><i></i></div><nav><a class="icon" id="logo"><img src="https://example.com/image2" /></a></nav></body>`;
+const html = `<body><div id="cat"></div><div class="mouse"><span class="flea"></span><i></i></div><nav><a id="logo" class="icon" href=""><img src="https://example.com/image2"></a><input class="search" type="text" readonly="" placeholder="Search"></nav></body>`;
 
 test('Selector', async ({ page }) => {
-	await page.addScriptTag({ path: './dist/Generator.script.js' });
-
-	const result = await page.evaluate(async ([css, html]) => {
-		document.body = await cssToHtml(css);
-		const styleElement = document.createElement('style');
-		styleElement.innerText = css;
-		document.head.append(styleElement);
-
-		const xml = new XMLSerializer().serializeToString(document.body);
-
-		return xml.trim() === html.trim();
-	}, [css, html]);
+	await page.goto('http://localhost:5173/');
+	const body = await page.evaluate(async (css) => { document.body = await cssToHtml(css); return document.body.outerHTML; }, css);
 
-	expect(result).toBeDefined();
-	expect(result).toBe(true);
+	expect(body).toBe(html);
 });