0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-23 21:53:55 -05:00
astro/packages/astro/test/tailwindcss.test.js
Emanuele Stoppa ddf0f924b5
chore: move nodetest.js to test.js (#10142)
* chore: move `nodetest.js` to `test.js`

* chore: move `nodetest.js` to `test.js`

* remove script
2024-02-16 16:20:49 +00:00

71 lines
2.5 KiB
JavaScript

import assert from 'node:assert/strict';
import { before, describe, it } from 'node:test';
import * as cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';
describe('Tailwind', () => {
/** @type {import('./test-utils.js').Fixture} */
let fixture;
before(async () => {
fixture = await loadFixture({
root: './fixtures/tailwindcss/',
});
});
// test HTML and CSS contents for accuracy
describe('build', () => {
let $;
let bundledCSS;
before(async () => {
await fixture.build();
// get bundled CSS (will be hashed, hence DOM query)
const html = await fixture.readFile('/index.html');
$ = cheerio.load(html);
const bundledCSSHREF = $('link[rel=stylesheet][href^=/_astro/]').attr('href');
bundledCSS = await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/'));
});
it('resolves CSS in src/styles', async () => {
assert.match(bundledCSS, /\.bg-purple-600\{/, 'includes used component classes');
// tests a random tailwind class that isn't used on the page
assert.doesNotMatch(bundledCSS, /\.bg-blue-600\{/, 'purges unused classes');
// tailwind escapes colons, `lg:py-3` compiles to `lg\:py-3`
assert.match(bundledCSS, /\.lg\\:py-3\{/, 'includes responsive classes');
// tailwind escapes brackets, `font-[900]` compiles to `font-\[900\]`
assert.match(bundledCSS, /\.font-\\\[900\\\]\{/, 'supports arbitrary value classes');
// custom theme colors were included
assert.match(bundledCSS, /\.text-midnight\{/, 'includes custom theme colors');
assert.match(bundledCSS, /\.bg-dawn\{/, 'includes custom theme colors');
});
it('maintains classes in HTML', async () => {
const button = $('button');
assert.equal(button.hasClass('text-white'), true, 'basic class');
assert.equal(button.hasClass('lg:py-3'), true, 'responsive class');
assert.equal(button.hasClass('font-[900]'), true, 'arbitrary value');
});
it('handles complex classes in HTML', async () => {
const button = $('#complex');
assert.equal(button.hasClass('w-10/12'), true, 'solidus');
assert.equal(button.hasClass('2xl:w-[80%]'), true, 'complex class');
});
it('handles MDX pages (with integration)', async () => {
const html = await fixture.readFile('/mdx-page/index.html');
const $md = cheerio.load(html);
const bundledCSSHREF = $md('link[rel=stylesheet][href^=/_astro/]').attr('href');
const mdBundledCSS = await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/'));
assert.match(mdBundledCSS, /\.bg-purple-600\{/, 'includes used component classes');
});
});
});