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, 54 insertions, 2 deletions

diff --git a/packages/integrations/prefetch/test/basic-prefetch.test.js b/packages/integrations/prefetch/test/basic-prefetch.test.js
index 6bab8a478..5fab536aa 100644
--- a/packages/integrations/prefetch/test/basic-prefetch.test.js
+++ b/packages/integrations/prefetch/test/basic-prefetch.test.js
@@ -37,18 +37,44 @@ test.describe('Basic prefetch', () => {
 				).toBeTruthy();
 			});
 		});
+
+		test.describe('prefetches rel="prefetch-intent" links only on hover', () => {
+			test('prefetches /uses on hover', 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('/uses')),
+					'/uses was not prefetched'
+				).toBeFalsy();
+
+				await page.hover('a[href="/uses"]');
+
+				await page.waitForLoadState('networkidle');
+
+				expect(
+					requests.includes(astro.resolveUrl('/uses')),
+					'/uses was prefetched on hover'
+				).toBeTruthy();
+			});
+		});
 	});
 
 	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();
 		});
 
@@ -74,5 +100,31 @@ test.describe('Basic prefetch', () => {
 				).toBeTruthy();
 			});
 		});
+
+		test.describe('prefetches rel="prefetch-intent" links only on hover', () => {
+			test('prefetches /uses on hover', 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('/uses')),
+					'/uses was not prefetched'
+				).toBeFalsy();
+
+				await page.hover('a[href="/uses"]');
+
+				await page.waitForLoadState('networkidle');
+
+				expect(
+					requests.includes(astro.resolveUrl('/uses')),
+					'/uses was prefetched on hover'
+				).toBeTruthy();
+			});
+		});
 	});
 });