0-css.test.js — astro Source File

Source Code

/**
 * CSS test
 * Run this test first! This uses quite a bit of memory, so prefixing with `0-` helps it start and finish early,
 * rather than trying to start up when all other threads are busy and having to fight for resources
 */

import assert from 'node:assert/strict';
import { after, before, describe, it } from 'node:test';
import * as cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';

/** @type {import('./test-utils').Fixture} */
let fixture;

describe('CSS', function () {
	before(async () => {
		fixture = await loadFixture({ root: './fixtures/0-css/' });
	});

	// test HTML and CSS contents for accuracy
	describe('build', () => {
		let $;
		let html;
		let bundledCSS;

		before(
			async () => {
				await fixture.build();

				// get bundled CSS (will be hashed, hence DOM query)
				html = await fixture.readFile('/index.html');
				$ = cheerio.load(html);
				const bundledCSSHREF = $('link[rel=stylesheet][href^=/_astro/]').attr('href');
				const bundledCSSFilePath = bundledCSSHREF.replace(/^\/?/, '/');
				bundledCSS = (await fixture.readFile(bundledCSSFilePath))
					.replace(/\s/g, '')
					.replace('/n', '');
			},
			{
				timeout: 45000,
			},
		);

		describe('Astro Styles', () => {
			it('HTML and CSS scoped correctly', async () => {
				const el1 = $('#dynamic-class');
				const el2 = $('#dynamic-vis');
				const classes = $('#class');
				let scopedAttribute;
				for (const [key] of Object.entries(classes[0].attribs)) {
					if (/^data-astro-cid-[A-Za-z\d-]+/.test(key)) {
						// Ema: this is ugly, but for reasons that I don't want to explore, cheerio
						// lower case the hash of the attribute
						scopedAttribute = key;
					}
				}
				if (!scopedAttribute) {
					throw new Error("Couldn't find scoped attribute");
				}

// ... (408 more lines)