testClientDirectivesShared() — astro Function Reference

Architecture documentation for the testClientDirectivesShared() function in custom-client-directives.test.js from the astro codebase.

Function javascript E2ETesting TestFixtures calls 1

Entity Profile

E2ETesting→ TestFixtures→ testClientDirectivesShared() — astro Function Reference

Dependency Diagram

graph TD
  7ce5058c_7bda_dfaa_d85a_e1df327dc642["testClientDirectivesShared()"]
  0f73a651_d35e_b6e6_5487_2bad4a73cff5["custom-client-directives.test.js"]
  7ce5058c_7bda_dfaa_d85a_e1df327dc642 -->|defined in| 0f73a651_d35e_b6e6_5487_2bad4a73cff5
  c373140e_7fdf_7fff_8884_991b85bc22b5["waitForHydrate()"]
  7ce5058c_7bda_dfaa_d85a_e1df327dc642 -->|calls| c373140e_7fdf_7fff_8884_991b85bc22b5
  style 7ce5058c_7bda_dfaa_d85a_e1df327dc642 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/e2e/custom-client-directives.test.js lines 61–110

function testClientDirectivesShared() {
	test('client:click should work', async ({ astro, page }) => {
		await page.goto(astro.resolveUrl('/'));

		const incrementBtn = page.locator('#client-click .increment');
		const counterValue = page.locator('#client-click pre');

		await expect(counterValue).toHaveText('0');

		// Component only hydrates on first click
		await Promise.all([waitForHydrate(page, counterValue), incrementBtn.click()]);

		// Since first click only triggers hydration, this should stay 0
		await expect(counterValue).toHaveText('0');
		await incrementBtn.click();
		// Hydrated, this should be 1
		await expect(counterValue).toHaveText('1');
	});

	test('client:password should work', async ({ astro, page }) => {
		await page.goto(astro.resolveUrl('/'));

		const incrementBtn = page.locator('#client-password .increment');
		const counterValue = page.locator('#client-password pre');

		await expect(counterValue).toHaveText('0');
		await incrementBtn.click();
		// Not hydrated, so this should stay 0
		await expect(counterValue).toHaveText('0');

		// Type super cool password to activate password!
		await Promise.all([waitForHydrate(page, counterValue), page.keyboard.type('hunter2')]);

		await incrementBtn.click();
		// Hydrated, this should be 1
		await expect(counterValue).toHaveText('1');
	});

	test('Client directives should be passed options correctly', async ({ astro, page }) => {
		await page.goto(astro.resolveUrl('/'));

		const optionsContent = page.locator('#client-has-options pre');
		await waitForHydrate(page, optionsContent);

		const clientOptions = page.locator('#options');
		await expect(clientOptions).toHaveText(
			'Passed options are: {"message":"Hello! I was passed as an option"}',
		);
	});
}