0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00

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

This commit is contained in:
Atharva 2024-02-15 15:24:45 +05:30 committed by GitHub
parent f24efdb3b1
commit 8701cfee23
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 69 additions and 62 deletions

View file

@ -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 * as cheerio from 'cheerio';
import { loadFixture } from './test-utils.js'; import { loadFixture } from './test-utils.js';
@ -35,15 +36,15 @@ describe('Assets in CSS', () => {
it('Bundled CSS does not have __VITE_ASSET__', async () => { it('Bundled CSS does not have __VITE_ASSET__', async () => {
let css = await getCSSForPage('/one/index.html'); 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'); 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 () => { it('Pages contain only their own CSS', async () => {
let css = await getCSSForPage('/one/index.html'); 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'); css = await getCSSForPage('/two/index.html');
expect(getAllMatches(/font-face/g, css)).to.equal(1); assert.equal(getAllMatches(/font-face/g, css), 1);
}); });
}); });

View file

@ -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'; import { loadFixture } from './test-utils.js';
const cssAssetReferenceRegExp = /_astro\/[A-Za-z\d\-]+\.[\da-f]{8}\.css/g; 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; if (cssReferences === null) return;
expect(filePaths).to.contain.members( const missingReferences = cssReferences.filter(ref => !filePaths.includes(ref));
cssReferences, assert.equal(missingReferences.length, 0, `${filePath} contains a reference to a deleted css asset: ${missingReferences}`);
filePath + ' contains a reference to a deleted css asset: ' + cssReferences
);
}); });
await Promise.all(expectations); await Promise.all(expectations);

View file

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

View file

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

View file

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

View file

@ -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 * as cheerio from 'cheerio';
import { loadFixture } from './test-utils.js'; import { loadFixture } from './test-utils.js';
@ -63,8 +64,8 @@ describe('CSS ordering - import order', () => {
let html = await res.text(); let html = await res.text();
let [style1, style2] = getStyles(html); let [style1, style2] = getStyles(html);
expect(style1).to.include('green'); assert.ok(style1.includes('green'));
expect(style2).to.include('salmon'); assert.ok(style2.includes('salmon'));
}); });
it('import order is depth-first', async () => { it('import order is depth-first', async () => {
@ -72,9 +73,9 @@ describe('CSS ordering - import order', () => {
let html = await res.text(); let html = await res.text();
let [style1, style2, style3] = getStyles(html); let [style1, style2, style3] = getStyles(html);
expect(style1).to.include('burlywood'); assert.ok(style1.includes('burlywood'));
expect(style2).to.include('aliceblue'); assert.ok(style2.includes('aliceblue'));
expect(style3).to.include('whitesmoke'); assert.ok(style3.includes('whitesmoke'));
}); });
}); });
@ -92,7 +93,7 @@ describe('CSS ordering - import order', () => {
let idx1 = css.indexOf('salmon'); let idx1 = css.indexOf('salmon');
let idx2 = css.indexOf('green'); 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 () => { it('import order is depth-first', async () => {
@ -105,8 +106,8 @@ describe('CSS ordering - import order', () => {
let idx2 = css.indexOf('#f0f8ff'); // aliceblue minified let idx2 = css.indexOf('#f0f8ff'); // aliceblue minified
let idx3 = css.indexOf('#deb887'); // burlywoord minified let idx3 = css.indexOf('#deb887'); // burlywoord minified
expect(idx1).to.be.greaterThan(idx2); assert.ok(idx1 > idx2);
expect(idx2).to.be.greaterThan(idx3); assert.ok(idx2 > idx3);
}); });
it('correctly chunks css import from framework components', async () => { 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 content = await Promise.all(getLinks(html).map((href) => getLinkContent(href)));
const [, { css }] = content; const [, { css }] = content;
expect(css).to.not.include( assert.ok(
'.client-1{background:red!important}', !css.includes('.client-1{background:red!important}'),
'CSS from Client2.jsx leaked into index.astro when chunking' '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 content = await Promise.all(getLinks(html).map((href) => getLinkContent(href)));
const css = content.map((c) => c.css).join(''); 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)) getLinks(html).map((href) => getLinkContent(href, fixture))
); );
let [link1, link2] = content; let [link1, link2] = content;
expect(link1.css).to.contain('f0f8ff'); // aliceblue minified assert.ok(link1.css.includes('f0f8ff')); // aliceblue minified
expect(link2.css).to.contain('#ff0'); // yellow minified assert.ok(link2.css.includes('ff0')); // yellow minified
}); });
}); });
}); });

View file

@ -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 * as cheerio from 'cheerio';
import { loadFixture } from './test-utils.js'; 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'); assert.equal(globalCSS, 0, 'global css sorted on top');
expect(specialButtonCSS).to.equal(1, 'component level css sorted last'); assert.equal(specialButtonCSS, 1, 'component level css sorted last');
}); });
}); });
}); });

View file

@ -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 * as cheerio from 'cheerio';
import { loadFixture } from './test-utils.js'; import { loadFixture } from './test-utils.js';
import testAdapter from './test-adapter.js'; import testAdapter from './test-adapter.js';
@ -65,7 +66,7 @@ describe('CSS production ordering', () => {
const staticContent = staticCSS.map((o) => o.css); const staticContent = staticCSS.map((o) => o.css);
const serverContent = serverCSS.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)) 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; const [, sharedStyles, pageStyles] = content;
expect(sharedStyles.css).to.match(/red/); assert.ok(sharedStyles.css.match(/red/));
expect(pageStyles.css).to.match(/#00f/); assert.ok(pageStyles.css.match(/#00f/));
}); });
it('CSS injected by injectScript comes first because of import order', async () => { it('CSS injected by injectScript comes first because of import order', async () => {
@ -106,7 +107,7 @@ describe('CSS production ordering', () => {
); );
const [first] = content; 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');
} }
}); });
}); });