astro/packages/integrations/prefetch/test/custom-selectors.test.js

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({
	// pass custom prefetch configuration
	configFile: false,
	root: './fixtures/basic-prefetch/',
	integrations: [
		prefetch({
			selector: customSelector,
			intentSelector: customIntentSelector,
		}),
	],
});

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 = [];

				page.on('request', (request) => requests.push(request.url()));

				await page.goto(astro.resolveUrl('/'));

				await page.waitForLoadState('networkidle');

				expect(requests.includes(astro.resolveUrl('/about')), '/about was skipped').toBeFalsy();
				expect(
					requests.includes(astro.resolveUrl('/contact')),
					'/contact was prefetched'
				).toBeTruthy();
				expect(requests.includes(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
				expect(
					requests.filter((r) => r === astro.resolveUrl('/')).length === 1,
					'/ was skipped by prefetch and only queried once'
				).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.describe('prefetches links by custom selector', () => {
			test('only prefetches /contact', 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('/about')), '/about was skipped').toBeFalsy();
				expect(
					requests.includes(astro.resolveUrl('/contact')),
					'/contact was prefetched'
				).toBeTruthy();
				expect(requests.includes(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
				expect(
					requests.filter((r) => r === astro.resolveUrl('/')).length === 1,
					'/ was skipped by prefetch and only queried once'
				).toBeTruthy();
			});
		});
	});
});

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();
		});
	});
});