astro/packages/astro/test/astro-partial-html.test.js
Nate Moore 1215e731b8
Preserve authored CSS specificity (#4024)
* feat: preserve authored CSS specificity

* chore: update tests to use :where()

* test: fix HTML and CSS test

* test: fix imported markdown CSS test

Co-authored-by: Nate Moore <nate@astro.build>
2022-07-23 13:11:12 -05:00

49 lines
1.4 KiB
JavaScript

import { expect } from 'chai';
import * as cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';
describe('Partial HTML', async () => {
let fixture;
let devServer;
before(async () => {
fixture = await loadFixture({
root: './fixtures/astro-partial-html/',
});
devServer = await fixture.startDevServer();
});
after(async () => {
await devServer.stop();
});
it('injects Astro styles and scripts', async () => {
const html = await fixture.fetch('/astro').then((res) => res.text());
const $ = cheerio.load(html);
// test 1: Doctype first
expect(html).to.match(/^<!DOCTYPE html/);
// test 2: correct CSS present
const allInjectedStyles = $('style[data-astro-injected]').text();
expect(allInjectedStyles).to.match(/\:where\(\.astro-[^{]+{color:red}/);
});
it('injects framework styles', async () => {
const html = await fixture.fetch('/jsx').then((res) => res.text());
const $ = cheerio.load(html);
// test 1: Doctype first
expect(html).to.match(/^<!DOCTYPE html/);
// test 2: link tag present
const allInjectedStyles = $('style[data-astro-injected]').text().replace(/\s*/g, '');
expect(allInjectedStyles).to.match(/h1{color:red;}/);
});
it('pages with a head, injection happens inside', async () => {
const html = await fixture.fetch('/with-head').then((res) => res.text());
const $ = cheerio.load(html);
expect($('style')).to.have.lengthOf(1);
});
});