michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Adds tests for tailwind support in dev and build (#2809)

Browse source 
* adding basic dev and build tests for TailwindCSS

* adding tests to validate tailwind classes are maintained in HTML output

* fixing indent spacing

* updating lock file
This commit is contained in:
Tony Sullivan 2022-03-16 17:35:49 +00:00 committed by GitHub
parent 279774c48e
commit 4914e1f70d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 818 additions and 484 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/astro/test/fixtures/tailwindcss/package.json vendored Normal file
View file

@ -0,0 +1,11 @@
{
"name": "@test/tailwindcss",
"version": "0.0.0",
"private": true,
"dependencies": {
"astro": "workspace:*",
"autoprefixer": "^10.4.2",
"postcss": "^8.4.8",
"tailwindcss": "^3.0.23"
}
}

10
packages/astro/test/fixtures/tailwindcss/postcss.config.js vendored Normal file
View file

@ -0,0 +1,10 @@
const path = require('path');
module.exports = {
plugins: {
tailwindcss: {
config: path.join(__dirname, 'tailwind.config.js'), // update this if your path differs!
},
autoprefixer: {}
},
};

10
packages/astro/test/fixtures/tailwindcss/src/components/Button.astro vendored Normal file
View file

@ -0,0 +1,10 @@
---
let { type = 'button' } = Astro.props;
---
<button
class="py-2 px-4 lg:py-3 lg:px-5 bg-purple-600 text-white font-[900] rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
{type}
>
<slot />
</button>

20
packages/astro/test/fixtures/tailwindcss/src/pages/index.astro vendored Normal file
View file

@ -0,0 +1,20 @@
---
// Component Imports
import Button from '../components/Button.astro';
import "../styles/global.css";
// Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/
---
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<title>Astro + TailwindCSS</title>
</head>
<body>
<Button>I’m a Tailwind Button!</Button>
</body>
</html>

3
packages/astro/test/fixtures/tailwindcss/src/styles/global.css vendored Normal file
View file

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

5
packages/astro/test/fixtures/tailwindcss/tailwind.config.js vendored Normal file
View file

@ -0,0 +1,5 @@
const path = require('path');
module.exports = {
content: [path.join(__dirname, 'src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}')],
};

101
packages/astro/test/tailwindcss.test.js Normal file
View file

@ -0,0 +1,101 @@
import { expect } from 'chai';
import cheerio from 'cheerio';
import { loadFixture } from './test-utils.js';
let fixture;
describe('Tailwind', () => {
let fixture;
before(async () => {
fixture = await loadFixture({
projectRoot: './fixtures/tailwindcss/',
renderers: [],
vite: {
build: {
assetsInlineLimit: 0,
},
},
});
});
// 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^=/assets/]').attr('href');
bundledCSS = await fixture.readFile(bundledCSSHREF.replace(/^\/?/, '/'));
});
it('resolves CSS in src/styles', async () => {
expect(bundledCSS, 'includes used component classes').to.match(/\.bg-purple-600{/);
// tests a random tailwind class that isn't used on the page
expect(bundledCSS, 'purges unused classes').not.to.match(/\.bg-blue-600{/);
// tailwind escapes colons, `lg:py-3` compiles to `lg\:py-3`
expect(bundledCSS, 'includes responsive classes').to.match(/\.lg\\:py-3{/);
// tailwind escapes brackets, `font-[900]` compiles to `font-\[900\]`
expect(bundledCSS, 'supports arbitrary value classes').to.match(/\.font-\\\[900\\\]{font-weight:900}/);
});
it('maintains classes in HTML', async () => {
const button = $('button');
expect(button.hasClass('text-white'), 'basic class').to.be.true;
expect(button.hasClass('lg:py-3'), 'responsive class').to.be.true;
expect(button.hasClass('font-[900]', 'arbitrary value')).to.be.true;
});
});
// with "build" handling CSS checking, the dev tests are mostly testing the paths resolve in dev
describe('dev', () => {
let devServer;
let $;
before(async () => {
devServer = await fixture.startDevServer();
const html = await fixture.fetch('/').then((res) => res.text());
$ = cheerio.load(html);
});
after(async () => {
devServer && (await devServer.stop());
});
it('resolves CSS in src/styles', async () => {
const href = $(`link[href$="/src/styles/global.css"]`).attr('href');
const res = await fixture.fetch(href);
expect(res.status).to.equal(200);
const text = await res.text();
expect(text, 'includes used component classes').to.match(/\.bg-purple-600/);
// tests a random tailwind class that isn't used on the page
expect(text, 'purges unused classes').not.to.match(/\.bg-blue-600/);
// tailwind escapes colons, `lg:py-3` compiles to `lg\:py-3`
expect(text, 'includes responsive classes').to.match(/\.lg\\\\:py-3/);
// tailwind escapes brackets, `font-[900]` compiles to `font-\[900\]`
expect(text, 'supports arbitrary value classes').to.match(/.font-\\[900\\]/);
});
it('maintains classes in HTML', async () => {
const button = $('button');
expect(button.hasClass('text-white'), 'basic class').to.be.true;
expect(button.hasClass('lg:py-3'), 'responsive class').to.be.true;
expect(button.hasClass('font-[900]', 'arbitrary value')).to.be.true;
});
});
});

1142
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff