astro/packages/astro/test/astro-css-bundling.test.js
Matthew Phillips 71ca09125a
Fix subpath support regressions (#2330)
* Fix subpath support regressions

* Adds a changeset

* Update tests to reflect relative URL change

* Pick a different port and hopefully windows works

* Remove bad lint warning

* Better handling of relative paths

* or

* Fixes use with pageUrlFormat

* Update the pageDirectoryUrl test
2022-01-06 16:32:24 -05:00

67 lines
2.5 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { expect } from 'chai';
import cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';
// note: the hashes should be deterministic, but updating the file contents will change hashes
// be careful not to test that the HTML simply contains CSS, because it always will! filename and quanity matter here (bundling).
const EXPECTED_CSS = {
'/index.html': ['./assets/index', './assets/typography'], // dont match hashes, which change based on content
'/one/index.html': ['../assets/one'],
'/two/index.html': ['../assets/two', '../assets/typography'],
'/preload/index.html': ['../assets/preload'],
'/preload-merge/index.html': ['../assets/preload-merge'],
};
const UNEXPECTED_CSS = ['/src/components/nav.css', '../css/typography.css', '../css/colors.css', '../css/page-index.css', '../css/page-one.css', '../css/page-two.css'];
describe('CSS Bundling', function () {
let fixture;
before(async () => {
fixture = await loadFixture({ projectRoot: './fixtures/astro-css-bundling/' });
await fixture.build({ mode: 'production' });
});
it('Bundles CSS', async () => {
const builtCSS = new Set();
// for all HTML files…
for (const [filepath, css] of Object.entries(EXPECTED_CSS)) {
const html = await fixture.readFile(filepath);
const $ = cheerio.load(html);
// test 1: assert new bundled CSS is present
for (const href of css) {
const link = $(`link[rel="stylesheet"][href^="${href}"]`);
expect(link).to.have.lengthOf(1);
const outHref = link.attr('href');
builtCSS.add(outHref.startsWith('../') ? outHref.substr(2) : outHref);
}
// test 2: assert old CSS was removed
for (const href of UNEXPECTED_CSS) {
const link = $(`link[rel="stylesheet"][href="${href}"]`);
expect(link).to.have.lengthOf(0);
}
// test 3: preload tags was not removed and attributes was preserved
if (filepath === '/preload/index.html') {
const stylesheet = $('link[rel="stylesheet"][href^="../assets/preload"]');
const preload = $('link[rel="preload"][href^="../assets/preload"]');
expect(stylesheet[0].attribs.media).to.equal('print');
expect(preload).to.have.lengthOf(1); // Preload tag was removed
}
// test 4: preload tags was not removed and attributes was preserved
if (filepath === '/preload-merge/index.html') {
const preload = $('link[rel="preload"]');
expect(preload).to.have.lengthOf(1);
}
// test 5: assert all bundled CSS was built and contains CSS
for (const url of builtCSS.keys()) {
const css = await fixture.readFile(url);
expect(css).to.be.ok;
}
}
});
});