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

using e2e for dev tests, mocha for build tests

Browse source
This commit is contained in:
Tony Sullivan 2022-05-11 15:39:53 -06:00
parent 29cc61cb3c
commit e105bacea9
2 changed files with 31 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
packages/astro/e2e/tailwindcss.test.js
View file

@ -2,97 +2,50 @@ import { test as base, expect } from '@playwright/test';
import { loadFixture } from './test-utils.js';
const test = base.extend({
astro: async ({ }, use) => {
astro: async ({}, use) => {
const fixture = await loadFixture({ root: './fixtures/tailwindcss/' });
await use(fixture);
},
});
test.describe('dev', () => {
let devServer;
let devServer;
test.beforeAll(async ({ astro }) => {
devServer = await astro.startDevServer();
});
test.afterAll(async ({ astro }) => {
await devServer.stop();
});
test('Tailwind CSS', async ({ page }) => {
await page.goto(`localhost:${devServer.address.port}/`);
await test.step('body', async () => {
const body = page.locator('body');
await expect(body, 'should have classes').toHaveClass('bg-dawn text-midnight');
await expect(body, 'should have background color').toHaveCSS(
'background-color',
'rgb(243, 233, 250)'
);
await expect(body, 'should have color').toHaveCSS('color', 'rgb(49, 39, 74)');
});
await test.step('button', async () => {
const button = page.locator('button');
await expect(button, 'should have bg-purple-600').toHaveClass(/bg-purple-600/);
await expect(button, 'should have background color').toHaveCSS(
'background-color',
'rgb(147, 51, 234)'
);
await expect(button, 'should have lg:py-3').toHaveClass(/lg:py-3/);
await expect(button, 'should have padding bottom').toHaveCSS('padding-bottom', '12px');
await expect(button, 'should have padding top').toHaveCSS('padding-top', '12px');
await expect(button, 'should have font-[900]').toHaveClass(/font-\[900\]/);
await expect(button, 'should have font weight').toHaveCSS('font-weight', '900');
});
});
test.beforeAll(async ({ astro }) => {
devServer = await astro.startDevServer();
});
test.describe('build', () => {
let previewServer;
test.afterAll(async ({ astro }) => {
await devServer.stop();
});
test.beforeAll(async ({ astro }) => {
await astro.build();
previewServer = await astro.preview();
test('Tailwind CSS', async ({ page }) => {
await page.goto(`localhost:${devServer.address.port}/`);
await test.step('body', async () => {
const body = page.locator('body');
await expect(body, 'should have classes').toHaveClass('bg-dawn text-midnight');
await expect(body, 'should have background color').toHaveCSS(
'background-color',
'rgb(243, 233, 250)'
);
await expect(body, 'should have color').toHaveCSS('color', 'rgb(49, 39, 74)');
});
test.afterAll(async ({ astro }) => {
await previewServer.stop();
})
await test.step('button', async () => {
const button = page.locator('button');
test('Tailwind CSS', async ({ page }) => {
await page.goto(`localhost:3000/`);
await expect(button, 'should have bg-purple-600').toHaveClass(/bg-purple-600/);
await expect(button, 'should have background color').toHaveCSS(
'background-color',
'rgb(147, 51, 234)'
);
await test.step('body', async () => {
const body = page.locator('body');
await expect(button, 'should have lg:py-3').toHaveClass(/lg:py-3/);
await expect(button, 'should have padding bottom').toHaveCSS('padding-bottom', '12px');
await expect(button, 'should have padding top').toHaveCSS('padding-top', '12px');
await expect(body, 'should have classes').toHaveClass('bg-dawn text-midnight');
await expect(body, 'should have background color').toHaveCSS(
'background-color',
'rgb(243, 233, 250)'
);
await expect(body, 'should have color').toHaveCSS('color', 'rgb(49, 39, 74)');
});
await test.step('button', async () => {
const button = page.locator('button');
await expect(button, 'should have bg-purple-600').toHaveClass(/bg-purple-600/);
await expect(button, 'should have background color').toHaveCSS(
'background-color',
'rgb(147, 51, 234)'
);
await expect(button, 'should have lg:py-3').toHaveClass(/lg:py-3/);
await expect(button, 'should have padding bottom').toHaveCSS('padding-bottom', '12px');
await expect(button, 'should have padding top').toHaveCSS('padding-top', '12px');
await expect(button, 'should have font-[900]').toHaveClass(/font-\[900\]/);
await expect(button, 'should have font weight').toHaveCSS('font-weight', '900');
});
await expect(button, 'should have font-[900]').toHaveClass(/font-\[900\]/);
await expect(button, 'should have font weight').toHaveCSS('font-weight', '900');
});
});

46
packages/astro/test/tailwindcss.test.js
View file

@ -70,50 +70,4 @@ describe('Tailwind', () => {
expect(bundledCSS, 'includes used component classes').to.match(/\.bg-purple-600{/);
});
});
// 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 bundledCSSHREF = $('link[rel=stylesheet]').attr('href');
const res = await fixture.fetch(bundledCSSHREF);
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\\]/);
// custom theme colors were included
expect(text, 'includes custom theme colors').to.match(/\.text-midnight/);
expect(text, 'includes custom theme colors').to.match(/\.bg-dawn/);
});
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;
});
});
});