hmr.test.js — astro Source File

Architecture documentation for hmr.test.js, a javascript file in the astro codebase. 3 imports, 0 dependents.

File javascript E2ETesting TestFixtures 3 imports 1 functions

Entity Profile

E2ETesting→ TestFixtures→ hmr.test.js — astro Source File

Dependency Diagram

graph LR
  0a01b26a_77ca_799d_1169_8906242950c6["hmr.test.js"]
  2ca394f6_a63d_3921_1f12_c5a979ea0039["test-utils.js"]
  0a01b26a_77ca_799d_1169_8906242950c6 --> 2ca394f6_a63d_3921_1f12_c5a979ea0039
  e27f6887_ea47_dd44_7933_5faa0f6bcf4d["testFactory"]
  0a01b26a_77ca_799d_1169_8906242950c6 --> e27f6887_ea47_dd44_7933_5faa0f6bcf4d
  f8fbe851_c5d6_c4ee_c044_67a751668c18["test"]
  0a01b26a_77ca_799d_1169_8906242950c6 --> f8fbe851_c5d6_c4ee_c044_67a751668c18
  style 0a01b26a_77ca_799d_1169_8906242950c6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { expect } from '@playwright/test';
import { testFactory } from './test-utils.js';

const test = testFactory(import.meta.url, {
	root: './fixtures/hmr/',
	devToolbar: {
		enabled: false,
	},
});

let devServer;

function throwPageShouldNotReload() {
	throw new Error('Page should not reload in HMR');
}

test.beforeAll(async ({ astro }) => {
	devServer = await astro.startDevServer();
});

test.afterEach(({ page }) => {
	page.off('load', throwPageShouldNotReload);
});

test.afterAll(async () => {
	await devServer.stop();
});

test.describe('Scripts with dependencies', () => {
	test('refresh with HMR', async ({ page, astro }) => {
		await page.goto(astro.resolveUrl('/script-dep'));

		const h = page.locator('h1');
		await expect(h, 'original text set').toHaveText('before');

		await astro.editFile('./src/scripts/heading.js', (original) =>
			original.replace('before', 'after'),
		);

		await expect(h, 'text changed').toHaveText('after');
	});
});

test.describe('Styles', () => {
	test('dependencies cause refresh with HMR', async ({ page, astro }) => {
		await page.goto(astro.resolveUrl('/css-dep'));

		page.once('load', throwPageShouldNotReload);

		const h = page.locator('h1');
		await expect(h).toHaveCSS('color', 'rgb(0, 0, 255)');

		await astro.editFile('./src/styles/vars.scss', (original) => original.replace('blue', 'red'));

		await expect(h).toHaveCSS('color', 'rgb(255, 0, 0)');
	});

	test('external CSS refresh with HMR', async ({ page, astro }) => {
		await page.goto(astro.resolveUrl('/css-external'));

// ... (66 more lines)