astro Architecture Docs
Home / File/ css.test.js — astro Source File

css.test.js — astro Source File

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

File javascript E2ETesting 3 imports

Entity Profile

Dependency Diagram

graph LR
  7bead430_eddd_2f70_9d4e_53c80216a9b3["css.test.js"]
  2ca394f6_a63d_3921_1f12_c5a979ea0039["test-utils.js"]
  7bead430_eddd_2f70_9d4e_53c80216a9b3 --> 2ca394f6_a63d_3921_1f12_c5a979ea0039
  e27f6887_ea47_dd44_7933_5faa0f6bcf4d["testFactory"]
  7bead430_eddd_2f70_9d4e_53c80216a9b3 --> e27f6887_ea47_dd44_7933_5faa0f6bcf4d
  f8fbe851_c5d6_c4ee_c044_67a751668c18["test"]
  7bead430_eddd_2f70_9d4e_53c80216a9b3 --> f8fbe851_c5d6_c4ee_c044_67a751668c18
  style 7bead430_eddd_2f70_9d4e_53c80216a9b3 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/css/',
	devToolbar: {
		enabled: false,
	},
});

let devServer;

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

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

test.describe('CSS HMR', () => {
	test('edit CSS from @import', async ({ page, astro }) => {
		await page.goto(astro.resolveUrl('/'));

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

		await astro.editFile('./src/styles/main.css', (original) =>
			original.replace('--h1-color: red;', '--h1-color: green;'),
		);

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

	test('removes Astro-injected CSS once Vite-injected CSS loads', async ({ astro }) => {
		const html = await astro.fetch('/').then((res) => res.text());
		// style[data-vite-dev-id] should exist in initial SSR'd markup
		expect(html).toMatch('data-vite-dev-id');
	});
});

Domain

Dependencies

Source

Frequently Asked Questions

What does css.test.js do?
css.test.js is a source file in the astro codebase, written in javascript. It belongs to the E2ETesting domain.
What does css.test.js depend on?
css.test.js imports 3 module(s): test, test-utils.js, testFactory.
Where is css.test.js in the architecture?
css.test.js is located at packages/astro/e2e/css.test.js (domain: E2ETesting, directory: packages/astro/e2e).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free