Add tests for respecting link selector

swup · Jan 29, 2024 · 54e0f8c · 54e0f8c
1 parent 0a795db
commit 54e0f8c
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 9 deletions.
diff --git a/tests/fixtures/link-selector-default.html b/tests/fixtures/link-selector-default.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Link types</title>
+		<link rel="stylesheet" href="/assets/style.css" />
+	</head>
+	<body>
+		<main id="swup" class="transition-main">
+			<h1>Link types</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">Page 1</a></li>
+			</ul>
+
+			<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+				<a xlink:href="/page-2.html">
+					<text x="10" y="10" font-size="2">SVG link</text>
+				</a>
+			</svg>
+		</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/fixtures/link-types.html → tests/fixtures/link-selector-modified.html b/tests/fixtures/link-types.html → tests/fixtures/link-selector-modified.html
@@ -17,14 +17,9 @@ <h1>Link types</h1>
 
 			<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
 				<a xlink:href="/page-2.html">
-					<text x="10" y="10" font-size="2">SVG link to page</text>
+					<text x="10" y="10" font-size="2">SVG link</text>
 				</a>
 			</svg>
-
-			<img src="data:image/gif;base64,R0lGODlhAQABAAAAACw=" usemap="#imagemap" width="100" height="100" />
-			<map name="imagemap">
-					<area shape="rect" coords="0,0,100,100" href="/page-3.html" alt="Map link to page" />
-			</map>
 		</main>
 		<script src="/dist/swup.umd.js"></script>
 		<script src="/dist/index.umd.js"></script>

diff --git a/tests/fixtures/visible-links-selector.html b/tests/fixtures/visible-links-selector.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Preload visible links with options</title>
+		<link rel="stylesheet" href="/assets/style.css" />
+	</head>
+	<body>
+		<main id="swup" class="transition-main">
+			<h1>Preload visible links with modified selector</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">Page 1</a></li>
+				<li><a href="/page-2.html">Page 2</a></li>
+				<li><a href="/page-3.html">Page 3</a></li>
+				<li><a href="/page-4.html">Page 4</a></li>
+				<li>
+					<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
+						<a xlink:href="/page-5.html"><text x="10" y="10" font-size="2">Page 5</text></a>
+					</svg>
+				</li>
+			</ul>
+		</main>
+		<script src="/dist/swup.umd.js"></script>
+		<script src="/dist/index.umd.js"></script>
+		<script>
+			window._swup = new Swup({
+				linkSelector: 'li:nth-child(odd) a, svg a',
+				plugins: [new SwupPreloadPlugin({
+					preloadVisibleLinks: {
+						enabled: true,
+						delay: 10
+					}
+				})]
+			});
+		</script>
+	</body>
+</html>
diff --git a/tests/functional/preload-plugin.spec.ts b/tests/functional/preload-plugin.spec.ts
@@ -94,11 +94,18 @@ test.describe('active links', () => {
 		await expectSwupToHaveCacheEntry(page, '/page-3.html');
 	});
 
-	test('preloads svg links', async ({ page }) => {
-		await page.goto('/link-types.html');
+	test('respects swup link selector', async ({ page }) => {
+		await page.goto('/link-selector-default.html');
 		await waitForSwup(page);
+		await page.focus('svg a');
+		await sleep(200);
 		await expectSwupNotToHaveCacheEntry(page, '/page-2.html');
-		await page.focus('svg a', { strict: true });
+	});
+
+	test('allows modified swup link selector', async ({ page }) => {
+		await page.goto('/link-selector-modified.html');
+		await waitForSwup(page);
+		await page.focus('svg a');
 		await expectSwupToHaveCacheEntry(page, '/page-2.html');
 	});
 });
@@ -155,6 +162,14 @@ test.describe('visible links', () => {
 		await expectSwupNotToHaveCacheEntries(page, ['/page-2.html']); // ignored via ignore()
 		await expectSwupNotToHaveCacheEntries(page, ['/page-9.html']); // ignored via containers
 	});
+
+	test('respects swup link selector', async ({ page }) => {
+		await page.goto('/visible-links-selector.html');
+		// await scroll(page, { direction: 'down', delay: 10 });
+		await sleep(200);
+		await expectSwupToHaveCacheEntries(page, ['/page-1.html', '/page-3.html', '/page-5.html']);
+		await expectSwupNotToHaveCacheEntries(page, ['/page-2.html', '/page-4.html']); // ignored via linkSelector option
+	});
 });
 
 test.describe('throttle', () => {