Updates prefetch integration to add "only prefetch link on hover/mouseover/focus" option (#6585)

* modifies prefetch to add the option to only prefetch certain pages on hover

* adds new pages to the test website to showcase prefetch-intent functionality

* adds tests to verify prefetch-intent behavior

* adds changelog

* waits until networkidle to check if the prefetching worked instead of waiting on a specific url load

* allows intentSelector to be either a string or array of strings

* Revert "allows intentSelector to be either a string or array of strings"

This reverts commit b0268eb0d5220ad2b08b0b7aee23f43e4caf879f.

* fixes the multiple selector logic and adds tests

* updates docs to include new prefetch-intent integration

* Update packages/integrations/prefetch/README.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update packages/integrations/prefetch/README.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update packages/integrations/prefetch/README.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update .changeset/little-cars-exist.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update packages/integrations/prefetch/README.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

---------

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

1 files changed, 175 insertions, 3 deletions

diff --git a/packages/integrations/prefetch/test/custom-selectors.test.js b/packages/integrations/prefetch/test/custom-selectors.test.js
index 803e1dc3b..ac15d7d5f 100644
--- a/packages/integrations/prefetch/test/custom-selectors.test.js
+++ b/packages/integrations/prefetch/test/custom-selectors.test.js
@@ -2,11 +2,19 @@ import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 import prefetch from '../dist/index.js';
 
+const customSelector = 'a[href="/contact"]';
+const customIntentSelector = [
+	'a[href][rel~="custom-intent"]',
+	'a[href][rel~="customer-intent"]',
+	'a[href][rel~="customest-intent"]',
+];
+
 const test = testFactory({
 	root: './fixtures/basic-prefetch/',
 	integrations: [
 		prefetch({
-			selector: 'a[href="/contact"]',
+			selector: customSelector,
+			intentSelector: customIntentSelector,
 		}),
 	],
 });
@@ -50,13 +58,13 @@ test.describe('Custom prefetch selectors', () => {
 	test.describe('build', () => {
 		let previewServer;
 
-		test.beforeAll(async ({ astro }) => {
+		test.beforeEach(async ({ astro }) => {
 			await astro.build();
 			previewServer = await astro.preview();
 		});
 
 		// important: close preview server (free up port and connection)
-		test.afterAll(async () => {
+		test.afterEach(async () => {
 			await previewServer.stop();
 		});
 
@@ -84,3 +92,167 @@ test.describe('Custom prefetch selectors', () => {
 		});
 	});
 });
+
+test.describe('Custom prefetch intent selectors', () => {
+	test.describe('dev', () => {
+		let devServer;
+
+		test.beforeEach(async ({ astro }) => {
+			devServer = await astro.startDevServer();
+		});
+
+		test.afterEach(async () => {
+			await devServer.stop();
+		});
+
+		test('prefetches custom intent links only on hover if provided an array', async ({
+			page,
+			astro,
+		}) => {
+			const requests = [];
+
+			page.on('request', (request) => requests.push(request.url()));
+
+			await page.goto(astro.resolveUrl('/'));
+
+			await page.waitForLoadState('networkidle');
+
+			expect(
+				requests.includes(astro.resolveUrl('/terms')),
+				'/terms was not prefetched initially'
+			).toBeFalsy();
+
+			expect(
+				requests.includes(astro.resolveUrl('/conditions')),
+				'/conditions was not prefetched initially'
+			).toBeFalsy();
+
+			const combinedIntentSelectors = customIntentSelector.join(',');
+			const intentElements = await page.$$(combinedIntentSelectors);
+
+			for (const element of intentElements) {
+				await element.hover();
+			}
+
+			await page.waitForLoadState('networkidle');
+
+			expect(
+				requests.includes(astro.resolveUrl('/terms')),
+				'/terms was prefetched on hover'
+			).toBeTruthy();
+			expect(
+				requests.includes(astro.resolveUrl('/conditions')),
+				'/conditions was prefetched on hover'
+			).toBeTruthy();
+		});
+
+		test('prefetches custom intent links only on hover if provided a string', async ({
+			page,
+			astro,
+		}) => {
+			const requests = [];
+
+			page.on('request', (request) => requests.push(request.url()));
+
+			await page.goto(astro.resolveUrl('/'));
+
+			await page.waitForLoadState('networkidle');
+
+			expect(
+				requests.includes(astro.resolveUrl('/terms')),
+				'/terms was not prefetched initially'
+			).toBeFalsy();
+
+			await page.hover(customIntentSelector[0]);
+
+			await page.waitForLoadState('networkidle');
+
+			expect(
+				requests.includes(astro.resolveUrl('/terms')),
+				'/terms was prefetched on hover'
+			).toBeTruthy();
+		});
+	});
+
+	test.describe('build', () => {
+		let previewServer;
+
+		test.beforeEach(async ({ astro }) => {
+			await astro.build();
+			previewServer = await astro.preview();
+		});
+
+		// important: close preview server (free up port and connection)
+		test.afterEach(async () => {
+			await previewServer.stop();
+		});
+
+		test('prefetches custom intent links only on hover if provided an array', async ({
+			page,
+			astro,
+		}) => {
+			const requests = [];
+
+			page.on('request', (request) => requests.push(request.url()));
+
+			await page.goto(astro.resolveUrl('/'));
+
+			await page.waitForLoadState('networkidle');
+
+			expect(
+				requests.includes(astro.resolveUrl('/terms')),
+				'/terms was not prefetched initially'
+			).toBeFalsy();
+
+			expect(
+				requests.includes(astro.resolveUrl('/conditions')),
+				'/conditions was not prefetched initially'
+			).toBeFalsy();
+
+			const combinedIntentSelectors = customIntentSelector.join(',');
+			const intentElements = await page.$$(combinedIntentSelectors);
+
+			for (const element of intentElements) {
+				await element.hover();
+			}
+
+			await page.waitForLoadState('networkidle');
+
+			expect(
+				requests.includes(astro.resolveUrl('/terms')),
+				'/terms was prefetched on hover'
+			).toBeTruthy();
+			expect(
+				requests.includes(astro.resolveUrl('/conditions')),
+				'/conditions was prefetched on hover'
+			).toBeTruthy();
+		});
+
+		test('prefetches custom intent links only on hover if provided a string', async ({
+			page,
+			astro,
+		}) => {
+			const requests = [];
+
+			page.on('request', (request) => requests.push(request.url()));
+
+			await page.goto(astro.resolveUrl('/'));
+
+			await page.waitForLoadState('networkidle');
+
+			expect(
+				requests.includes(astro.resolveUrl('/terms')),
+				'/terms was not prefetched initially'
+			).toBeFalsy();
+
+			await page.hover(customIntentSelector[0]);
+
+			await page.waitForLoadState('networkidle');
+
+			expect(
+				requests.includes(astro.resolveUrl('/terms')),
+				'/terms was prefetched on hover'
+			).toBeTruthy();
+		});
+	});
+});