Prefetch styles only once (#5125)

* test1

* fixed test

* removed console.log

* changeset

* pnpm-lock

* fixed test again

* fta

* fta2

* fix: wait for fetch

* -fixed test template

* empty

Co-authored-by: Matthew Phillips <matthew@skypack.dev>
Co-authored-by: Nate Moore <nate@astro.build>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
Co-authored-by: My Name <my.name@my-company.com>

1 files changed, 55 insertions, 0 deletions

diff --git a/packages/integrations/prefetch/test/style-prefetch.test.js b/packages/integrations/prefetch/test/style-prefetch.test.js
new file mode 100644
index 000000000..4e56e01ee
--- /dev/null
+++ b/packages/integrations/prefetch/test/style-prefetch.test.js
@@ -0,0 +1,55 @@
+import { expect } from '@playwright/test';
+import { testFactory } from './test-utils.js';
+
+const test = testFactory({ root: './fixtures/style-prefetch/' });
+
+test.describe('Style prefetch', () => {
+	test.describe('dev', () => {
+		let devServer;
+
+		test.beforeEach(async ({ astro }) => {
+			devServer = await astro.startDevServer();
+		});
+
+		test.afterEach(async () => {
+			await devServer.stop();
+		});
+
+		testPrefetch();
+	});
+
+	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();
+		});
+
+		testPrefetch();
+	});
+
+	function testPrefetch() {
+		test.describe('prefetches rel="prefetch" links', () => {
+			test('style fetching', async ({ page, astro }) => {
+				const requests = [];
+
+				page.on('request', async (request) => requests.push(request.url()));
+
+				await page.goto(astro.resolveUrl('/'));
+
+				await page.waitForLoadState('networkidle');
+
+				await expect(requests.filter(req => req.includes('/style1'))).toBeTruthy();
+				await expect(requests.filter(req => req.includes('/style2'))).toBeTruthy();
+				const cssRequestCount = requests.filter(req => req.includes('/main.css')).length;
+				await expect(cssRequestCount).toBe(1);
+			});
+		});
+	}
+});