adding tests for custom selectors

packages/labs/prefetch/playwright.config.js

@@ -0,0 +1,41 @@
+import { devices } from '@playwright/test';
+
+const config = {
+	testMatch: 'test/*.test.js',
+	/* Maximum time one test can run for. */
+	timeout: 30 * 1000,
+	expect: {
+		/**
+		 * Maximum time expect() should wait for the condition to be met.
+		 * For example in `await expect(locator).toHaveText();`
+		 */
+		timeout: 5000,
+	},
+	/* Fail the build on CI if you accidentally left test in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 5 : 0,
+	/* Opt out of parallel tests on CI. */
+	workers: 1,
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+		actionTimeout: 0,
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:3000',
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry',
+	},
+	projects: [
+		{
+			name: 'Chrome Stable',
+			use: {
+				browserName: 'chromium',
+				channel: 'chrome',
+			},
+		},
+	],
+};
+
+export default config;

packages/labs/prefetch/src/client.ts

@@ -58,11 +58,9 @@ async function preloadHref(link: HTMLAnchorElement) {
 
 export interface PrefetchOptions {
 	selectors?: string | HTMLAnchorElement[];
-	root?: ParentNode;
 }
 
 export default function prefetch({
-	root = document,
 	selectors = 'a[href][rel="prefetch"]',
 }: PrefetchOptions) {
 	const [toAdd, isDone] = throttle();
@@ -79,7 +77,7 @@ export default function prefetch({
 
 	requestIdleCallback(() => {
 		const links = Array.from(
-			typeof selectors === 'string' ? root.querySelectorAll<HTMLAnchorElement>(selectors) : selectors
+			typeof selectors === 'string' ? document.querySelectorAll<HTMLAnchorElement>(selectors) : selectors
 		).filter(shouldPreload);
 
 		for (const link of links) {

packages/labs/prefetch/test/basic-prefetch.test.js

@@ -3,60 +3,62 @@ import { testFactory } from './test-utils.js';
 
 const test = testFactory({ root: './fixtures/basic-prefetch/' });
 
-test.describe('dev', () => {
+test.describe('Basic prefetch', () => {
-	let devServer;
+	test.describe('dev', () => {
+		let devServer;
 
-	test.beforeEach(async ({ astro }) => {
+		test.beforeEach(async ({ astro }) => {
-		devServer = await astro.startDevServer();
+			devServer = await astro.startDevServer();
+		});
+
+		test.afterEach(async () => {
+			await devServer.stop();
+		});
+
+		test.describe('prefetches rel="prefetch" links', () => {
+			test('skips /admin', async ({ page, astro }) => {
+				const requests = new Set();
+
+				page.on('request', async (request) => requests.add(request.url()));
+
+				await page.goto(astro.resolveUrl('/'));
+
+				await page.waitForLoadState('networkidle');
+
+				await expect(requests.has(astro.resolveUrl('/about')), '/about was prefetched').toBeTruthy();
+				await expect(requests.has(astro.resolveUrl('/contact')), '/contact was prefetched').toBeTruthy();
+				await expect(requests.has(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
+			});
+		});
 	});
 
-	test.afterEach(async () => {
+	test.describe('build', () => {
-		await devServer.stop();
+		let previewServer;
-	});
 
-	test.describe('prefetches rel="prefetch" links', () => {
+		test.beforeAll(async ({ astro }) => {
-		test('skips /admin', async ({ page, astro }) => {
+			await astro.build();
-			const requests = new Set();
+			previewServer = await astro.preview();
+		});
 
-			page.on('request', async (request) => requests.add(request.url()));
+		// important: close preview server (free up port and connection)
+		test.afterAll(async () => {
+			await previewServer.stop();
+		});
 
-			await page.goto(astro.resolveUrl('/'));
+		test.describe('prefetches rel="prefetch" links', () => {
+			test('skips /admin', async ({ page, astro }) => {
+				const requests = new Set();
 
-			await page.waitForLoadState('networkidle');
+				page.on('request', async (request) => requests.add(request.url()));
 
-			await expect(requests.has(astro.resolveUrl('/about'))).toBeTruthy();
+				await page.goto(astro.resolveUrl('/'));
-			await expect(requests.has(astro.resolveUrl('/contact'))).toBeTruthy();
+
-			await expect(requests.has(astro.resolveUrl('/admin'))).toBeFalsy();
+				await page.waitForLoadState('networkidle');
-		});
+
-	});
+				await expect(requests.has(astro.resolveUrl('/about')), '/about was prefetched').toBeTruthy();
-});
+				await expect(requests.has(astro.resolveUrl('/contact')), '/contact was prefetched').toBeTruthy();
-
+				await expect(requests.has(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
-test.describe('build', () => {
+			});
-	let previewServer;
-
-	test.beforeAll(async ({ astro }) => {
-		await astro.build();
-		previewServer = await astro.preview();
-	});
-
-	// important: close preview server (free up port and connection)
-	test.afterAll(async () => {
-		await previewServer.stop();
-	});
-
-	test.describe('prefetches rel="prefetch" links', () => {
-		test('skips /admin', async ({ page, astro }) => {
-			const requests = new Set();
-
-			page.on('request', async (request) => requests.add(request.url()));
-
-			await page.goto(astro.resolveUrl('/'));
-
-			await page.waitForLoadState('networkidle');
-
-			await expect(requests.has(astro.resolveUrl('/about'))).toBeTruthy();
-			await expect(requests.has(astro.resolveUrl('/contact'))).toBeTruthy();
-			await expect(requests.has(astro.resolveUrl('/admin'))).toBeFalsy();
 		});
 	});
 });

packages/labs/prefetch/test/custom-selectors.test.js

@@ -0,0 +1,72 @@
+import { expect } from '@playwright/test';
+import { testFactory } from './test-utils.js';
+import prefetch from '../dist/index.js';
+
+const test = testFactory({
+	root: './fixtures/basic-prefetch/',
+	integrations: [
+		prefetch({
+			selectors: 'a[href="/admin"]'
+		}),
+	]
+});
+
+test.describe('Custom prefetch selectors', () => {
+	test.describe('dev', () => {
+		let devServer;
+
+		test.beforeEach(async ({ astro }) => {
+			devServer = await astro.startDevServer();
+		});
+
+		test.afterEach(async () => {
+			await devServer.stop();
+		});
+
+		test.describe('prefetches links by custom selector', () => {
+			test('only prefetches /contact', async ({ page, astro }) => {
+				const requests = new Set();
+
+				page.on('request', async (request) => requests.add(request.url()));
+
+				await page.goto(astro.resolveUrl('/'));
+
+				await page.waitForLoadState('networkidle');
+
+				await expect(requests.has(astro.resolveUrl('/about')), '/about was skipped').toBeFalsy();
+				await expect(requests.has(astro.resolveUrl('/contact')), '/contact was prefetched').toBeTruthy();
+				await expect(requests.has(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
+			});
+		});
+	});
+
+	test.describe('build', () => {
+		let previewServer;
+
+		test.beforeAll(async ({ astro }) => {
+			await astro.build();
+			previewServer = await astro.preview();
+		});
+
+		// important: close preview server (free up port and connection)
+		test.afterAll(async () => {
+			await previewServer.stop();
+		});
+
+		test.describe('prefetches links by custom selector', () => {
+			test('only prefetches /contact', async ({ page, astro }) => {
+				const requests = new Set();
+
+				page.on('request', async (request) => requests.add(request.url()));
+
+				await page.goto(astro.resolveUrl('/'));
+
+				await page.waitForLoadState('networkidle');
+
+				await expect(requests.has(astro.resolveUrl('/about')), '/about was skipped').toBeFalsy();
+				await expect(requests.has(astro.resolveUrl('/contact')), '/contact was prefetched').toBeTruthy();
+				await expect(requests.has(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
+			});
+		});
+	});
+});

packages/labs/prefetch/test/fixtures/basic-prefetch/src/pages/index.astro

@@ -13,13 +13,14 @@
 			<li>
 				<a href="/about" rel="prefetch">About</a>
 			</li>
-			<li>
-				<a href="/contact" rel="prefetch">Contact</a>
-			</li>
 			<li>
 				<a href="/admin">Admin</a>
 			</li>
 		</ul>
 	</nav>
+
+	<footer>
+		<a href="/contact" rel="prefetch">Contact</a>
+	</footer>
 </body>
 </html>