Merge pull request #167 from WordPress/refactor-e2e-tests

Refactor e2e tests and add `goToFile` fixture

e2e/directives-class.spec.ts → e2e/specs/directives-class.spec.ts

@@ -1,9 +1,8 @@
-import { join } from 'path';
-import { test, expect } from '@playwright/test';
+import { test, expect } from '../tests';
 
 test.describe('wp-class', () => {
-	test.beforeEach(async ({ page }) => {
-		await page.goto('file://' + join(__dirname, 'directives-class.html'));
+	test.beforeEach(async ({ goToFile }) => {
+		await goToFile('directives-class.html');
 	});
 
 	test('remove class if callback returns falsy value', async ({ page }) => {

e2e/directives-context.spec.ts → e2e/specs/directives-context.spec.ts

@@ -1,12 +1,12 @@
-import { join } from 'path';
-import { test, expect, Locator } from '@playwright/test';
+import { Locator } from '@playwright/test';
+import { test, expect } from '../tests';
 
 const parseContent = async (loc: Locator) =>
 	JSON.parse((await loc.textContent()) || '');
 
 test.describe('wp-context', () => {
-	test.beforeEach(async ({ page }) => {
-		await page.goto('file://' + join(__dirname, 'directives-context.html'));
+	test.beforeEach(async ({ goToFile }) => {
+		await goToFile('directives-context.html');
 	});
 
 	test('is correctly initialized', async ({ page }) => {

e2e/directives-show.spec.ts → e2e/specs/directives-show.spec.ts

@@ -1,9 +1,8 @@
-import { join } from 'path';
-import { test, expect } from '@playwright/test';
+import { test, expect } from '../tests';
 
 test.describe('wp-show', () => {
-	test.beforeEach(async ({ page }) => {
-		await page.goto('file://' + join(__dirname, 'directives-show.html'));
+	test.beforeEach(async ({ goToFile }) => {
+		await goToFile('directives-show.html');
 	});
 
 	test('show if callback returns truthy value', async ({ page }) => {
@@ -13,7 +12,9 @@ test.describe('wp-show', () => {
 	});
 
 	test('do not show if callback returns falsy value', async ({ page }) => {
-		const el = page.getByTestId('do not show if callback returns false value')
+		const el = page.getByTestId(
+			'do not show if callback returns false value'
+		);
 		await expect(el).toBeHidden();
 	});
 
@@ -27,7 +28,9 @@ test.describe('wp-show', () => {
 	});
 
 	test('show when toggling false value to truthy', async ({ page }) => {
-		const el = page.getByTestId('do not show if callback returns false value');
+		const el = page.getByTestId(
+			'do not show if callback returns false value'
+		);
 		await expect(el).toBeHidden();
 		page.getByTestId('toggle falseValue').click();
 		await expect(el).toBeVisible();

e2e/store-tag.spec.ts → e2e/specs/store-tag.spec.ts

@@ -1,9 +1,9 @@
-import { join } from 'path';
-import { test, expect } from '@playwright/test';
+import { test, expect } from '../tests';
 
 test.describe('store tag', () => {
-	test('hydrates when it is well defined', async ({ page }) => {
-		await page.goto('file://' + join(__dirname, 'store-tag-ok.html'));
+	test('hydrates when it is well defined', async ({ goToFile, page }) => {
+		await goToFile('store-tag-ok.html');
+
 		const value = page.getByTestId('counter value');
 		const double = page.getByTestId('counter double');
 		const clicks = page.getByTestId('counter clicks');
@@ -19,19 +19,20 @@ test.describe('store tag', () => {
 		await expect(clicks).toHaveText('1');
 	});
 
-	test('does not break the page when missing', async ({ page }) => {
-		await page.goto('file://' + join(__dirname, 'store-tag-missing.html'));
+	test('does not break the page when missing', async ({ goToFile, page }) => {
+		await goToFile('store-tag-missing.html');
 
 		const clicks = page.getByTestId('counter clicks');
 		await expect(clicks).toHaveText('0');
 		page.getByTestId('counter button').click();
 		await expect(clicks).toHaveText('1');
 	});
 
-	test('does not break the page when corrupted', async ({ page }) => {
-		await page.goto(
-			'file://' + join(__dirname, 'store-tag-corrupted-json.html')
-		);
+	test('does not break the page when corrupted', async ({
+		goToFile,
+		page,
+	}) => {
+		await goToFile('store-tag-corrupted-json.html');
 
 		const clicks = page.getByTestId('counter clicks');
 		await expect(clicks).toHaveText('0');
@@ -40,11 +41,10 @@ test.describe('store tag', () => {
 	});
 
 	test('does not break the page when it contains an invalid state', async ({
+		goToFile,
 		page,
 	}) => {
-		await page.goto(
-			'file://' + join(__dirname, 'store-tag-invalid-state.html')
-		);
+		await goToFile('store-tag-invalid-state.html');
 
 		const clicks = page.getByTestId('counter clicks');
 		await expect(clicks).toHaveText('0');

e2e/tovdom-full.spec.ts → e2e/specs/tovdom-full.spec.ts

@@ -1,20 +1,8 @@
-import { join } from 'path';
-import { test, expect } from '@playwright/test';
+import { test, expect } from '../tests';
 
 test.describe('toVdom - full', () => {
-	test.beforeEach(async ({ page }) => {
-		// Helpers to use URLs with http:// instead of file:// to avoid errors
-		// inside `fetch` calls.
-		await page.route('**/*.html', async (route, req) => {
-			const { pathname } = new URL(req.url());
-			route.fulfill({ path: join(__dirname, pathname) });
-		});
-		await page.route('**/*.js', async (route, req) => {
-			const { pathname } = new URL(req.url());
-			route.fulfill({ path: join(__dirname, '..', pathname) });
-		});
-
-		await page.goto('http://a.b/tovdom-full.html');
+	test.beforeEach(async ({ goToFile }) => {
+		await goToFile('tovdom-full.html');
 	});
 
 	test('it should stop when it founds wp-ignore', async ({ page }) => {

e2e/tovdom-islands.spec.ts → e2e/specs/tovdom-islands.spec.ts

@@ -1,9 +1,8 @@
-import { join } from 'path';
-import { test, expect } from '@playwright/test';
+import { test, expect } from '../tests';
 
 test.describe('toVdom - isands', () => {
-	test.beforeEach(async ({ page }) => {
-		await page.goto('file://' + join(__dirname, 'tovdom-islands.html'));
+	test.beforeEach(async ({ goToFile }) => {
+		await goToFile('tovdom-islands.html');
 	});
 
 	test('directives that are not inside islands should not be hydrated', async ({

e2e/tests.ts

@@ -0,0 +1,44 @@
+import { test as base, type Page } from '@playwright/test';
+import { join } from 'path';
+
+type Fixtures = {
+	/**
+	 * Allow visiting local HTML files as if they were under a real domain,
+	 * mainly to avoid errors from `fetch` calls
+	 *
+	 * It looks for HTML files inside the `/e2e/html` folder, and uses
+	 * `Page.goto` under the hood.
+	 *
+	 * @example
+	 * ```ts
+	 * test.beforeEach(async ({ goToFile }) => {
+	 *     await goToFile('directives-context.html');
+	 * });
+	 * ```
+	 *
+	 * @param filename The name of the HTML file to visit.
+	 * @param options Same options object accepted by `page.goto`.
+	 *
+	 * @returns Promise.
+	 */
+	goToFile: (...params: Parameters<Page['goto']>) => ReturnType<Page['goto']>;
+};
+
+export const test = base.extend<Fixtures>({
+	goToFile: async ({ page }, use) => {
+		await page.route('**/*.html', async (route, req) => {
+			const { pathname } = new URL(req.url());
+			route.fulfill({ path: join(__dirname, './html', pathname) });
+		});
+		await page.route('**/*.js', async (route, req) => {
+			const { pathname } = new URL(req.url());
+			route.fulfill({ path: join(__dirname, '..', pathname) });
+		});
+
+		await use(async (filename, options) =>
+			page.goto(join('http://a.b', filename), options)
+		);
+	},
+});
+
+export { expect } from '@playwright/test';