astro Architecture Docs
Home / File/ dev-toolbar-audits.test.js — astro Source File

dev-toolbar-audits.test.js — astro Source File

Architecture documentation for dev-toolbar-audits.test.js, a javascript file in the astro codebase. 3 imports, 0 dependents.

File javascript E2ETesting 3 imports

Entity Profile

Dependency Diagram

graph LR
  61e09955_556e_7401_f537_b2f8b4417178["dev-toolbar-audits.test.js"]
  2ca394f6_a63d_3921_1f12_c5a979ea0039["test-utils.js"]
  61e09955_556e_7401_f537_b2f8b4417178 --> 2ca394f6_a63d_3921_1f12_c5a979ea0039
  e27f6887_ea47_dd44_7933_5faa0f6bcf4d["testFactory"]
  61e09955_556e_7401_f537_b2f8b4417178 --> e27f6887_ea47_dd44_7933_5faa0f6bcf4d
  f8fbe851_c5d6_c4ee_c044_67a751668c18["test"]
  61e09955_556e_7401_f537_b2f8b4417178 --> f8fbe851_c5d6_c4ee_c044_67a751668c18
  style 61e09955_556e_7401_f537_b2f8b4417178 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/dev-toolbar/',
});

let devServer;

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

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

test.describe('Dev Toolbar - Audits', () => {
	test('can warn about perf issues', async ({ page, astro }) => {
		await page.goto(astro.resolveUrl('/audits-perf'));

		const toolbar = page.locator('astro-dev-toolbar');
		const appButton = toolbar.locator('button[data-app-id="astro:audit"]');
		await appButton.click();

		const auditCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:audit"]');
		const auditHighlights = auditCanvas.locator('astro-dev-toolbar-highlight');

		const count = await auditHighlights.count();
		expect(count).toEqual(2);

		for (const auditHighlight of await auditHighlights.all()) {
			await expect(auditHighlight).toBeVisible();

			const auditCode = await auditHighlight.getAttribute('data-audit-code');
			expect(auditCode.startsWith('perf-')).toBe(true);

			await auditHighlight.hover();
			const auditHighlightTooltip = auditHighlight.locator('astro-dev-toolbar-tooltip');
			await expect(auditHighlightTooltip).toBeVisible();
		}

		// Toggle app off
		await appButton.click();
	});

	test('does not warn about perf issue for below the fold image after mutation when body is unscrollable', async ({
		page,
		astro,
	}) => {
		await page.goto(astro.resolveUrl('/audits-perf-body-unscrollable'));

		const toolbar = page.locator('astro-dev-toolbar');
		const appButton = toolbar.locator('button[data-app-id="astro:audit"]');
		await appButton.click();

		const auditCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:audit"]');
		const auditHighlights = auditCanvas.locator('astro-dev-toolbar-highlight');

		expect(auditHighlights).toHaveCount(1);
// ... (203 more lines)

Domain

Dependencies

Source

Frequently Asked Questions

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