Merge pull request #121 from swup/functional-tests

daun · web-flow · commit ebf90109548a · 2024-01-27T20:29:53.000+01:00
Add functional tests for ignoring external origins
diff --git a/src/index.ts b/src/index.ts
@@ -26,7 +26,7 @@ declare module 'swup' {
 	}
 	export interface HookDefinitions {
 		'link:hover': { el: HTMLAnchorElement; event: DelegateEvent };
-		'page:preload': { page?: PageData };
+		'page:preload': { url: string, page?: PageData };
 	}
 	export interface HookReturnValues {
 		'page:preload': Promise<PageData>;
@@ -393,9 +393,10 @@ export default class SwupPreloadPlugin extends Plugin {
 	/**
 	 * Perform the actual preload fetch and trigger the preload hook.
 	 */
-	protected async performPreload(url: string): Promise<PageData> {
-		const page = await this.swup.hooks.call('page:preload', undefined, {}, async (visit, args) => {
-			args.page = await this.swup.fetchPage(url);
+	protected async performPreload(href: string): Promise<PageData> {
+		const { url } = Location.fromUrl(href);
+		const page = await this.swup.hooks.call('page:preload', undefined, { url }, async (visit, args) => {
+			args.page = await this.swup.fetchPage(href);
 			return args.page;
 		});
 		return page;
diff --git a/tests/fixtures/origins.html b/tests/fixtures/origins.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Origins</title>
+		<link rel="stylesheet" href="/assets/style.css" />
+	</head>
+	<body>
+		<main id="swup" class="transition-main">
+			<h1>Origins</h1>
+			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+			<ul>
+				<li><a href="/page-1.html">Local, relative</a></li>
+				<li><a href="http://localhost:8274/page-2.html">Local, absolute</a></li>
+				<li><a href="https://example.net/page-3.html">External</a></li>
+			</ul>
+		</main>
+		<script src="/dist/swup.umd.js"></script>
+		<script src="/dist/index.umd.js"></script>
+		<script>
+			window._swup = new Swup({
+				plugins: [new SwupPreloadPlugin()]
+			});
+		</script>
+	</body>
+</html>
diff --git a/tests/functional/preload-plugin.spec.ts b/tests/functional/preload-plugin.spec.ts
@@ -199,3 +199,28 @@ test.describe('hooks', () => {
 		await expect(async () => expect(await triggered()).toBe(true)).toPass();
 	});
 });
+
+test.describe('ignores external origins', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto('/origins.html');
+		await waitForSwup(page);
+		await page.evaluate(() => {
+			window.data = [];
+			window._swup.hooks.before('page:preload', (visit, { url }) => (window.data.push(url)));
+		});
+	});
+	test('ignores link elements with external origin', async ({ page }) => {
+		await page.focus('a[href$="/page-1.html"]');
+		await page.focus('a[href$="/page-2.html"]');
+		await page.focus('a[href$="/page-3.html"]');
+		const urls = await page.evaluate(() => window.data);
+		expect(urls).toEqual(['/page-1.html', '/page-2.html']);
+	});
+	test('ignores preload requests with external origin', async ({ page }) => {
+		await page.evaluate(() => {
+			window._swup.preload!(['https://example.net/page-3.html', '/page-1.html', 'page-2.html']);
+		});
+		const urls = await page.evaluate(() => window.data);
+		expect(urls).toEqual(['/page-1.html', '/page-2.html']);
+	});
+});
