astro Architecture Docs
Home / File/ vue-component.test.js — astro Source File

vue-component.test.js — astro Source File

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

File javascript E2ETesting 3 imports

Entity Profile

Dependency Diagram

graph LR
  60876243_29ba_b94f_9ca8_3a6ab41b177b["vue-component.test.js"]
  f50170e1_d539_f9d5_a768_c073a3afcfd4["shared-component-tests.js"]
  60876243_29ba_b94f_9ca8_3a6ab41b177b --> f50170e1_d539_f9d5_a768_c073a3afcfd4
  4471adac_6b72_7031_4587_e50c8db5a233["prepareTestFactory"]
  60876243_29ba_b94f_9ca8_3a6ab41b177b --> 4471adac_6b72_7031_4587_e50c8db5a233
  f8fbe851_c5d6_c4ee_c044_67a751668c18["test"]
  60876243_29ba_b94f_9ca8_3a6ab41b177b --> f8fbe851_c5d6_c4ee_c044_67a751668c18
  style 60876243_29ba_b94f_9ca8_3a6ab41b177b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { expect } from '@playwright/test';
import { prepareTestFactory } from './shared-component-tests.js';

const { test, createTests } = prepareTestFactory(import.meta.url, {
	root: './fixtures/vue-component/',
});

const config = {
	componentFilePath: './src/components/VueComponent.vue',
	counterCssFilePath: './src/components/Counter.vue',
	counterComponentFilePath: './src/components/Counter.vue',
};

test.describe('Vue components in Astro files', () => {
	createTests({
		...config,
		pageUrl: '/',
		pageSourceFilePath: './src/pages/index.astro',
	});
});

test.describe('Vue components in MDX files', () => {
	createTests({
		...config,
		pageUrl: '/mdx/',
		pageSourceFilePath: './src/pages/mdx.mdx',
	});
});

test('test the async vue component in astro', async ({ page, astro }) => {
	await page.goto(astro.resolveUrl('/'));

	const label = page.locator('#client-test');

	await expect(label, 'component not hydrated').toHaveText('2');
});

test('test the async vue component in mdx', async ({ page, astro }) => {
	await page.goto(astro.resolveUrl('/mdx/'));

	const label = page.locator('#client-test');

	await expect(label, 'component not hydrated').toHaveText('2');
});

test('hmr works', async ({ page, astro }) => {
	await page.goto(astro.resolveUrl('/'));

	const span = page.locator('#state');
	await expect(span).toHaveText('Count is 1');

	await astro.editFile('./src/components/State.vue', (content) =>
		content.replace('ref(1)', 'ref(2)'),
	);

	await expect(span).toHaveText('Count is 2');
});

Domain

Dependencies

Source

Frequently Asked Questions

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