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

tailwindcss.test.js — astro Source File

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

File javascript E2ETesting 3 imports

Entity Profile

Dependency Diagram

graph LR
  452c3dd1_476f_5358_00c9_306a106cc4c1["tailwindcss.test.js"]
  2ca394f6_a63d_3921_1f12_c5a979ea0039["test-utils.js"]
  452c3dd1_476f_5358_00c9_306a106cc4c1 --> 2ca394f6_a63d_3921_1f12_c5a979ea0039
  e27f6887_ea47_dd44_7933_5faa0f6bcf4d["testFactory"]
  452c3dd1_476f_5358_00c9_306a106cc4c1 --> e27f6887_ea47_dd44_7933_5faa0f6bcf4d
  f8fbe851_c5d6_c4ee_c044_67a751668c18["test"]
  452c3dd1_476f_5358_00c9_306a106cc4c1 --> f8fbe851_c5d6_c4ee_c044_67a751668c18
  style 452c3dd1_476f_5358_00c9_306a106cc4c1 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/tailwindcss/' });

let devServer;

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

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

test.describe('Tailwind CSS', () => {
	test('body', async ({ page, astro }) => {
		await page.goto(astro.resolveUrl('/'));

		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('button', async ({ page, astro }) => {
		await page.goto(astro.resolveUrl('/'));

		const button = page.locator('button');

		await expect(button, 'should have appearance none').toHaveClass(/appearance-none/);
		await expect(button, 'should have appearance: none').toHaveCSS('appearance', 'none');
		await expect(button, 'should have appearance-none with webkit prefix').toHaveCSS(
			'-webkit-appearance',
			'none',
		);

		await expect(button, 'should have bg-purple-600').toHaveClass(/bg-purple-600/);
		await expect(button, 'should have background color').toHaveCSS(
			'background-color',
			'oklch(0.558 0.288 302.321)',
		);

		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('HMR', async ({ page, astro }) => {
		await page.goto(astro.resolveUrl('/'));

		await astro.editFile('./src/components/Button.astro', (original) =>
			original.replace('bg-purple-600', 'bg-purple-400'),
		);

		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',
			'oklch(0.714 0.203 305.504)',
		);
	});
});

Domain

Dependencies

Source

Frequently Asked Questions

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