Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-03 22:57:08 -05:00
Code Issues Activity

adding a basic HMR test for tailwind styles

Browse source
This commit is contained in:
Tony Sullivan 2022-05-15 12:08:47 -06:00
parent 0b3c6c2a0e
commit c0bd9da291
4 changed files with 51 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { test as base, expect } from '@playwright/test';
import { loadFixture } from './test-utils.js';
import { loadFixture, onAfterHMR } from './test-utils.js';
const test = base.extend({
astro: async ({}, use) => {
@ -18,6 +18,10 @@ test.afterAll(async ({ astro }) => {
await devServer.stop();
});
test.afterEach(async ({ astro }) => {
astro.clean();
});
test('Tailwind CSS', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
@ -48,4 +52,23 @@ test('Tailwind CSS', async ({ page, astro }) => {
await expect(button, 'should have font-[900]').toHaveClass(/font-\[900\]/);
await expect(button, 'should have font weight').toHaveCSS('font-weight', '900');
});
await test.step('HMR', async () => {
const afterHMR = onAfterHMR(page);
await astro.writeFile(
'src/components/Button.astro',
(original) => original.replace('bg-purple-600', 'bg-purple-400')
);
await afterHMR;
const button = page.locator('button');
await expect(button, 'should have bg-purple-400').toHaveClass(/bg-purple-400/);
await expect(button, 'should have background color').toHaveCSS(
'background-color',
'rgb(192, 132, 252)'
);
});
});

4
packages/astro/e2e/test-utils.js
View file

@ -11,3 +11,7 @@ export function loadFixture(inlineConfig) {
root: new URL(inlineConfig.root, import.meta.url).toString()
})
}
export function onAfterHMR(page) {
return page.waitForEvent('console', message => message.text() === 'astro:hmr:after')
}

8
packages/astro/src/runtime/client/hmr.ts
View file

@ -14,7 +14,11 @@ if (import.meta.hot) {
root.innerHTML = current?.innerHTML;
}
}
return diff(document, doc);
const result = diff(document, doc);
// event used for synchronizing E2E tests
console.log('astro:hmr:after');
return result;
}
async function updateAll(files: any[]) {
let hasAstroUpdate = false;
@ -31,7 +35,7 @@ if (import.meta.hot) {
}
}
if (hasAstroUpdate) {
return updatePage();
return await updatePage();
}
}
import.meta.hot.on('vite:beforeUpdate', async (event) => {

18
packages/astro/test/test-utils.js
View file

@ -28,6 +28,7 @@ polyfill(globalThis, {
* @property {(url: string) => string} resolveUrl
* @property {(url: string, opts: any) => Promise<Response>} fetch
* @property {(path: string) => Promise<string>} readFile
* @property {(path: string, updater: (content: string) => string) => Promise<void>} writeFile
* @property {(path: string) => Promise<string[]>} readdir
* @property {() => Promise<DevServer>} startDevServer
* @property {() => Promise<PreviewServer>} preview
@ -96,6 +97,17 @@ export async function loadFixture(inlineConfig) {
const resolveUrl = (url) => `http://${'127.0.0.1'}:${config.server.port}${url.replace(/^\/?/, '/')}`;
let cleanupCallbacks = [];
async function writeFile(filePath, updater) {
const pathname = new URL(filePath.replace(/^\//, ''), config.root);
const initial = await fs.promises.readFile(pathname, 'utf8');
await fs.promises.writeFile(pathname, updater(initial), 'utf-8');
cleanupCallbacks.push(() => fs.promises.writeFile(pathname, initial, 'utf-8'));
}
return {
build: (opts = {}) => build(config, { mode: 'development', logging, telemetry, ...opts }),
startDevServer: async (opts = {}) => {
@ -113,8 +125,12 @@ export async function loadFixture(inlineConfig) {
},
readFile: (filePath) =>
fs.promises.readFile(new URL(filePath.replace(/^\//, ''), config.outDir), 'utf8'),
writeFile,
readdir: (fp) => fs.promises.readdir(new URL(fp.replace(/^\//, ''), config.outDir)),
clean: () => fs.promises.rm(config.outDir, { maxRetries: 10, recursive: true, force: true }),
clean: async () => {
await fs.promises.rm(config.outDir, { maxRetries: 10, recursive: true, force: true });
await Promise.all(cleanupCallbacks.map(cb => cb()));
},
loadTestAdapterApp: async () => {
const url = new URL('./server/entry.mjs', config.outDir);
const { createApp } = await import(url);