astro/packages/astro/test/astro-css-bundling.test.js
Tony Sullivan b8c6dabfb7
Enables eslint on the full repo and adds a rule for no only() tests (#3659)
* enabling eslint on the all packages and tests

* enabling for all packages

* TEMP: adding an only() test to verify it fails CI

* using our eslint config and ignore in CI

* removing the temporary .only() test

* update lock file

* lint: fixing new test with a no-shadow warning

* chore: update lock file
2022-06-22 15:59:49 +00:00

60 lines
1.8 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 * as 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/'], // dont match hashes, which change based on content
'/one/index.html': ['/assets/'],
'/two/index.html': ['/assets/'],
};
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({
root: './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.length).to.be.greaterThanOrEqual(1);
const outHref = link.attr('href');
builtCSS.add(outHref.startsWith('../') ? outHref.slice(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: assert all bundled CSS was built and contains CSS
for (const url of builtCSS.keys()) {
const bundledCss = await fixture.readFile(url);
expect(bundledCss).to.be.ok;
}
}
});
});