chore: move css- related tests to node:test (#10114)

packages/astro/test/css-assets.nodetest.js

@@ -1,4 +1,5 @@
-import { expect } from 'chai';
+import * as assert from 'node:assert/strict';
+import { describe, before, it } from 'node:test';
 import * as cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
@@ -35,15 +36,15 @@ describe('Assets in CSS', () => {
 
 	it('Bundled CSS does not have __VITE_ASSET__', async () => {
 		let css = await getCSSForPage('/one/index.html');
-		expect(css).to.not.contain('__VITE_ASSET__');
+		assert.equal(css.includes('__VITE_ASSET__'), false);
 		css = await getCSSForPage('/two/index.html');
-		expect(css).to.not.contain('__VITE_ASSET__');
+		assert.equal(css.includes('__VITE_ASSET__'), false);
 	});
 
 	it('Pages contain only their own CSS', async () => {
 		let css = await getCSSForPage('/one/index.html');
-		expect(getAllMatches(/font-face/g, css)).to.equal(1);
+		assert.equal(getAllMatches(/font-face/g, css), 1);
 		css = await getCSSForPage('/two/index.html');
-		expect(getAllMatches(/font-face/g, css)).to.equal(1);
+		assert.equal(getAllMatches(/font-face/g, css), 1);
 	});
 });

packages/astro/test/css-dangling-references.nodetest.js

@@ -1,4 +1,5 @@
-import { expect } from 'chai';
+import * as assert from 'node:assert/strict';
+import { describe, before, it } from 'node:test';
 import { loadFixture } from './test-utils.js';
 
 const cssAssetReferenceRegExp = /_astro\/[A-Za-z\d\-]+\.[\da-f]{8}\.css/g;
@@ -25,10 +26,9 @@ describe("When Vite's preloadModule polyfill is used", async () => {
 
 				if (cssReferences === null) return;
 
-				expect(filePaths).to.contain.members(
-					cssReferences,
-					filePath + ' contains a reference to a deleted css asset: ' + cssReferences
-				);
+				const missingReferences = cssReferences.filter(ref => !filePaths.includes(ref));
+				assert.equal(missingReferences.length, 0, `${filePath} contains a reference to a deleted css asset: ${missingReferences}`);
+
 			});
 
 		await Promise.all(expectations);

packages/astro/test/css-import-as-inline.nodetest.js

@@ -1,4 +1,5 @@
-import { expect } from 'chai';
+import * as assert from 'node:assert/strict';
+import { describe, before, it, after } from 'node:test';
 import * as cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
@@ -19,18 +20,18 @@ describe('Importing raw/inlined CSS', () => {
 			const html = await fixture.readFile('/index.html');
 			const $ = cheerio.load(html);
 
-			expect($('#inline').text()).to.contain('tomato');
-			expect($('link[rel=stylesheet]')).to.have.lengthOf(1);
-			expect($('style')).to.have.lengthOf(0);
+			assert.ok($('#inline').text().includes('tomato'));
+			assert.equal($('link[rel=stylesheet]').length, 1);
+			assert.equal($('style').length, 0);
 		});
 
 		it('?raw is imported as a string', async () => {
 			const html = await fixture.readFile('/index.html');
 			const $ = cheerio.load(html);
 
-			expect($('#raw').text()).to.contain('plum');
-			expect($('link[rel=stylesheet]')).to.have.lengthOf(1);
-			expect($('style')).to.have.lengthOf(0);
+			assert.ok($('#raw').text().includes('plum'));
+			assert.equal($('link[rel=stylesheet]').length, 1);
+			assert.equal($('style').length, 0);
 		});
 	});
 
@@ -51,9 +52,9 @@ describe('Importing raw/inlined CSS', () => {
 			const html = await response.text();
 			const $ = cheerio.load(html);
 
-			expect($('#inline').text()).to.contain('tomato');
-			expect($('link[rel=stylesheet]')).to.have.lengthOf(0);
-			expect($('style')).to.have.lengthOf(1);
+			assert.ok($('#inline').text().includes('tomato'));
+			assert.equal($('link[rel=stylesheet]').length, 0);
+			assert.equal($('style').length, 1);
 		});
 
 		it("?raw is imported as a string and doesn't make css bundled", async () => {
@@ -61,9 +62,9 @@ describe('Importing raw/inlined CSS', () => {
 			const html = await response.text();
 			const $ = cheerio.load(html);
 
-			expect($('#raw').text()).to.contain('plum');
-			expect($('link[rel=stylesheet]')).to.have.lengthOf(0);
-			expect($('style')).to.have.lengthOf(1);
+			assert.ok($('#raw').text().includes('plum'));
+			assert.equal($('link[rel=stylesheet]').length, 0);
+			assert.equal($('style').length, 1);
 		});
 	});
 });

packages/astro/test/css-inline-stylesheets.nodetest.js

@@ -1,4 +1,5 @@
-import { expect } from 'chai';
+import * as assert from 'node:assert/strict';
+import { describe, before, it } from 'node:test';
 import * as cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 import testAdapter from './test-adapter.js';
@@ -25,7 +26,7 @@ describe('Setting inlineStylesheets to never in static output', () => {
 		const html = await fixture.readFile('/index.html');
 		const $ = cheerio.load(html);
 
-		expect($('style').toArray()).to.be.empty;
+		assert.equal($('style').toArray().length, 0);
 	});
 
 	describe('Inspect linked stylesheets', () => {
@@ -66,7 +67,7 @@ describe('Setting inlineStylesheets to never in server output', () => {
 		const html = await response.text();
 		const $ = cheerio.load(html);
 
-		expect($('style').toArray()).to.be.empty;
+		assert.equal($('style').toArray().length, 0);
 	});
 
 	describe('Inspect linked stylesheets', () => {
@@ -109,8 +110,8 @@ describe('Setting inlineStylesheets to auto in static output', () => {
 
 		// the count of style/link tags depends on our css chunking logic
 		// this test should be updated if it changes
-		expect($('style')).to.have.lengthOf(3);
-		expect($('link[rel=stylesheet]')).to.have.lengthOf(1);
+		assert.equal($('style').length, 3);
+		assert.equal($('link[rel=stylesheet]').length, 1);
 	});
 
 	describe('Inspect linked and inlined stylesheets', () => {
@@ -157,8 +158,8 @@ describe('Setting inlineStylesheets to auto in server output', () => {
 
 		// the count of style/link tags depends on our css chunking logic
 		// this test should be updated if it changes
-		expect($('style')).to.have.lengthOf(3);
-		expect($('link[rel=stylesheet]')).to.have.lengthOf(1);
+		assert.equal($('style').length, 3);
+		assert.equal($('link[rel=stylesheet]').length, 1);
 	});
 
 	describe('Inspect linked and inlined stylesheets', () => {
@@ -194,7 +195,7 @@ describe('Setting inlineStylesheets to always in static output', () => {
 		const html = await fixture.readFile('/index.html');
 		const $ = cheerio.load(html);
 
-		expect($('link[rel=stylesheet]').toArray()).to.be.empty;
+		assert.equal($('link[rel=stylesheet]').toArray().length, 0);
 	});
 
 	describe('Inspect inlined stylesheets', () => {
@@ -234,7 +235,7 @@ describe('Setting inlineStylesheets to always in server output', () => {
 		const html = await response.text();
 		const $ = cheerio.load(html);
 
-		expect($('link[rel=stylesheet]').toArray()).to.be.empty;
+		assert.equal($('link[rel=stylesheet]').toArray().length, 0);
 	});
 
 	describe('Inspect inlined stylesheets', () => {
@@ -290,20 +291,20 @@ async function stylesFromServer(app) {
 function commonExpectations(allStyles) {
 	it('Includes all authored css', () => {
 		// authored in imported.css
-		expect(allStyles.value).to.include('.bg-lightcoral');
+		assert.ok(allStyles.value.includes('.bg-lightcoral'));
 
 		// authored in index.astro
-		expect(allStyles.value).to.include('#welcome');
+		assert.ok(allStyles.value.includes('#welcome'));
 
 		// authored in components/Button.astro
-		expect(allStyles.value).to.include('.variant-outline');
+		assert.ok(allStyles.value.includes('.variant-outline'));
 
 		// authored in layouts/Layout.astro
-		expect(allStyles.value).to.include('Menlo');
+		assert.ok(allStyles.value.includes('Menlo'));
 	});
 
 	it('Styles used both in content layout and directly in page are included only once', () => {
 		// authored in components/Button.astro
-		expect(allStyles.value.match(/cubic-bezier/g)).to.have.lengthOf(1);
+		assert.equal(allStyles.value.match(/cubic-bezier/g).length, 1);
 	});
 }

packages/astro/test/css-no-code-split.nodetest.js

@@ -1,4 +1,5 @@
-import { expect } from 'chai';
+import * as assert from 'node:assert/strict';
+import { describe, before, it } from 'node:test';
 import * as cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
@@ -19,6 +20,6 @@ describe('vite.build.cssCodeSplit: false', () => {
 		let html = await fixture.readFile('/index.html');
 		let $ = cheerio.load(html);
 		const cssHref = $('link[rel=stylesheet][href^=/_astro/]').attr('href');
-		expect(cssHref).to.match(/\/_astro\/style\..*?\.css/);
+		assert.match(cssHref, /\/_astro\/style\..*?\.css/);
 	});
 });

packages/astro/test/css-order-import.nodetest.js

@@ -1,4 +1,5 @@
-import { expect } from 'chai';
+import * as assert from 'node:assert/strict';
+import { describe, before, it, after } from 'node:test';
 import * as cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
@@ -63,8 +64,8 @@ describe('CSS ordering - import order', () => {
 			let html = await res.text();
 			let [style1, style2] = getStyles(html);
 
-			expect(style1).to.include('green');
-			expect(style2).to.include('salmon');
+			assert.ok(style1.includes('green'));
+			assert.ok(style2.includes('salmon'));
 		});
 
 		it('import order is depth-first', async () => {
@@ -72,9 +73,9 @@ describe('CSS ordering - import order', () => {
 			let html = await res.text();
 			let [style1, style2, style3] = getStyles(html);
 
-			expect(style1).to.include('burlywood');
-			expect(style2).to.include('aliceblue');
-			expect(style3).to.include('whitesmoke');
+			assert.ok(style1.includes('burlywood'));
+			assert.ok(style2.includes('aliceblue'));
+			assert.ok(style3.includes('whitesmoke'));
 		});
 	});
 
@@ -92,7 +93,7 @@ describe('CSS ordering - import order', () => {
 			let idx1 = css.indexOf('salmon');
 			let idx2 = css.indexOf('green');
 
-			expect(idx1).to.be.greaterThan(idx2, 'Page level CSS should be placed after imported CSS');
+			assert.equal(idx1 > idx2, true, 'Page level CSS should be placed after imported CSS');
 		});
 
 		it('import order is depth-first', async () => {
@@ -105,8 +106,8 @@ describe('CSS ordering - import order', () => {
 			let idx2 = css.indexOf('#f0f8ff'); // aliceblue minified
 			let idx3 = css.indexOf('#deb887'); // burlywoord minified
 
-			expect(idx1).to.be.greaterThan(idx2);
-			expect(idx2).to.be.greaterThan(idx3);
+			assert.ok(idx1 > idx2);
+			assert.ok(idx2 > idx3);
 		});
 
 		it('correctly chunks css import from framework components', async () => {
@@ -114,8 +115,8 @@ describe('CSS ordering - import order', () => {
 
 			const content = await Promise.all(getLinks(html).map((href) => getLinkContent(href)));
 			const [, { css }] = content;
-			expect(css).to.not.include(
-				'.client-1{background:red!important}',
+			assert.ok(
+				!css.includes('.client-1{background:red!important}'),
 				'CSS from Client2.jsx leaked into index.astro when chunking'
 			);
 		});
@@ -125,7 +126,7 @@ describe('CSS ordering - import order', () => {
 
 			const content = await Promise.all(getLinks(html).map((href) => getLinkContent(href)));
 			const css = content.map((c) => c.css).join('');
-			expect(css.match(/\.astro-jsx/)?.length).to.eq(1, '.astro-jsx class is duplicated');
+			assert.equal(css.match(/\.astro-jsx/).length, 1, '.astro-jsx class is duplicated');
 		});
 	});
 
@@ -147,8 +148,8 @@ describe('CSS ordering - import order', () => {
 				getLinks(html).map((href) => getLinkContent(href, fixture))
 			);
 			let [link1, link2] = content;
-			expect(link1.css).to.contain('f0f8ff'); // aliceblue minified
-			expect(link2.css).to.contain('#ff0'); // yellow minified
+			assert.ok(link1.css.includes('f0f8ff')); // aliceblue minified
+			assert.ok(link2.css.includes('ff0')); // yellow minified
 		});
 	});
 });

packages/astro/test/css-order-layout.nodetest.js

@@ -1,4 +1,5 @@
-import { expect } from 'chai';
+import * as assert from 'node:assert/strict';
+import { describe, before, it } from 'node:test';
 import * as cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
@@ -57,8 +58,8 @@ describe('CSS ordering - import order with layouts', () => {
 				}
 			}
 
-			expect(globalCSS).to.equal(0, 'global css sorted on top');
-			expect(specialButtonCSS).to.equal(1, 'component level css sorted last');
+			assert.equal(globalCSS, 0, 'global css sorted on top');
+			assert.equal(specialButtonCSS, 1, 'component level css sorted last');
 		});
 	});
 });

packages/astro/test/css-order.nodetest.js

@@ -1,4 +1,5 @@
-import { expect } from 'chai';
+import * as assert from 'node:assert/strict';
+import { describe, before, it } from 'node:test';
 import * as cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
 import testAdapter from './test-adapter.js';
@@ -65,7 +66,7 @@ describe('CSS production ordering', () => {
 			const staticContent = staticCSS.map((o) => o.css);
 			const serverContent = serverCSS.map((o) => o.css);
 
-			expect(staticContent).to.deep.equal(serverContent);
+			assert.deepEqual(staticContent, serverContent);
 		});
 	});
 
@@ -88,11 +89,11 @@ describe('CSS production ordering', () => {
 				getLinks(html).map((href) => getLinkContent(fixture, href))
 			);
 
-			expect(content).to.have.a.lengthOf(3, 'there are 3 stylesheets');
+			assert.ok(content.length, 3, 'there are 3 stylesheets');
 			const [, sharedStyles, pageStyles] = content;
 
-			expect(sharedStyles.css).to.match(/red/);
-			expect(pageStyles.css).to.match(/#00f/);
+			assert.ok(sharedStyles.css.match(/red/));
+			assert.ok(pageStyles.css.match(/#00f/));
 		});
 
 		it('CSS injected by injectScript comes first because of import order', async () => {
@@ -106,7 +107,7 @@ describe('CSS production ordering', () => {
 				);
 
 				const [first] = content;
-				expect(first.css).to.include('green', 'Came from the injected script');
+				assert.ok(first.css.includes('green'), 'Came from the injected script');
 			}
 		});
 	});