Merge pull request #72 from swup/fix/tests

fix: compatibility with swup 4.6.0

Author: hirasso

README.md

@@ -3,6 +3,7 @@
 <div class="shields">
 
 <!--[![npm version](https://img.shields.io/npm/v/@swup/fragment-plugin.svg)](https://www.npmjs.com/package/@swup/fragment-plugin) -->
+
 [![Unit Tests](https://img.shields.io/github/actions/workflow/status/swup/fragment-plugin/unit-tests.yml?branch=master&label=vitest)](https://github.com/swup/fragment-plugin/actions/workflows/unit-tests.yml)
 [![E2E Tests](https://img.shields.io/github/actions/workflow/status/swup/fragment-plugin/e2e-tests.yml?branch=master&label=playwright)](https://github.com/swup/fragment-plugin/actions/workflows/e2e-tests.yml)
 [![License](https://img.shields.io/github/license/swup/fragment-plugin.svg)](https://github.com/swup/fragment-plugin/blob/master/LICENSE)

package-lock.json

@@ -62,7 +62,7 @@
     "vitest": "^0.34.6"
   },
   "peerDependencies": {
-    "swup": "^4.0.0"
+    "swup": "^4.6.0"
   },
   "browserslist": [
     "extends @swup/browserslist-config"

package.json

@@ -20,7 +20,7 @@ type InitOptions = RequireKeys<Options, 'rules'>;
  */
 export default class SwupFragmentPlugin extends PluginBase {
 	readonly name = 'SwupFragmentPlugin';
-	readonly requires = { swup: '>=4' };
+	readonly requires = { swup: '>=4.6' };
 
 	protected _rawRules: Rule[] = [];
 	protected _parsedRules: ParsedRule[] = [];

src/SwupFragmentPlugin.ts

@@ -20,8 +20,8 @@ type Options = {
  * Represents a Rule
  */
 export default class ParsedRule {
-	readonly matchesFrom;
-	readonly matchesTo;
+	readonly matchesFrom: ReturnType<typeof matchPath>;
+	readonly matchesTo: ReturnType<typeof matchPath>;
 
 	swup: Swup;
 	from: Path;

src/inc/ParsedRule.ts

@@ -316,7 +316,6 @@ export const cacheForeignFragmentElements = ({ swup, logger }: FragmentPlugin):
 
 	// Update the cache of the current page with the updated html
 	cache.update(currentUrl, {
-		...currentCache,
 		fragmentHtml: currentCachedDocument.documentElement.outerHTML
 	});
 

src/inc/functions.ts

@@ -130,7 +130,9 @@ export const beforeContentReplace: Handler<'content:replace'> = function (
 	const cache = this.swup.cache.get(visit.to.url);
 	if (!cache || !cache.fragmentHtml) return;
 
-	args.page.html = cache.fragmentHtml;
+	visit.to.document = new DOMParser().parseFromString(cache.fragmentHtml, 'text/html');
+	visit.to.html = cache.fragmentHtml;
+
 	if (__DEV__) this.logger?.log(`fragment cache used for ${highlight(visit.to.url!)}`);
 };
 

src/inc/handlers.ts

@@ -3,19 +3,15 @@
  * @see https://vitest.dev/config/
  */
 
-import path from "path";
+import path from 'path';
 import { defineConfig } from 'vitest/config';
 
 const __dirname = path.dirname(__filename);
 
 export default defineConfig({
 	test: {
 		environment: 'jsdom',
-		include: [
-			'tests/vitest/**/*.test.ts'
-		],
-		setupFiles: [
-			path.resolve(__dirname, './vitest.setup.ts')
-		]
+		include: ['tests/vitest/**/*.test.ts'],
+		setupFiles: [path.resolve(__dirname, './vitest.setup.ts')]
 	}
 });

tests/config/vitest.config.ts

@@ -42,14 +42,13 @@ const allContainers = [...new Set([...swup.options.containers, ...fragmentContai
  * This will help to identify persisted elements more easily
  */
 function addUniqueIds(selectors) {
-	selectors.forEach(selector => {
+	selectors.forEach((selector) => {
 		document.querySelector(selector)?.setAttribute('data-uniqueid', uniqueId());
-	})
+	});
 }
 
 addUniqueIds(allContainers);
 swup.hooks.on('content:replace', ({ containers }) => addUniqueIds(containers));
 
-
 swup.hooks.on('visit:start', () => document.documentElement.setAttribute('aria-busy', 'true'));
 swup.hooks.on('visit:end', () => document.documentElement.removeAttribute('aria-busy'));

tests/fixtures/assets/script.js

@@ -1,105 +1,108 @@
-@import url("./transitions.css");
+@import url('./transitions.css');
 
-*, *:before, *:after {
-  box-sizing: border-box;
+*,
+*:before,
+*:after {
+	box-sizing: border-box;
 }
 
 :root {
-  --red: hsl(0, 74%, 67%);
-  --green: hsl(100, 68%, 58%);
-  --blue: oklch(59.12% 0.153 230.82);
+	--red: hsl(0, 74%, 67%);
+	--green: hsl(100, 68%, 58%);
+	--blue: oklch(59.12% 0.153 230.82);
 }
 body {
-  font-family: system-ui;
-  padding: 1rem;
-  max-width: 800px;
-  margin: 5% auto;
-  padding-bottom: 100vh;
+	font-family: system-ui;
+	padding: 1rem;
+	max-width: 800px;
+	margin: 5% auto;
+	padding-bottom: 100vh;
 }
 
-h1, h2, ul {
-  margin-bottom: 1rem;
+h1,
+h2,
+ul {
+	margin-bottom: 1rem;
 }
 
 :focus-visible {
-  box-shadow: 0 0 0 3px gold;
-  outline: 0;
+	box-shadow: 0 0 0 3px gold;
+	outline: 0;
 }
 
 /*
 * Lists
 */
 :where(ul[class]) {
-  list-style: none;
-  padding: 0;
+	list-style: none;
+	padding: 0;
 }
 :where(ul:not([class])) {
-  list-style-type: "> ";
-  padding-left: 1rem;
-  & li {
-    padding-block: 0.2em;
-  }
+	list-style-type: '> ';
+	padding-left: 1rem;
+	& li {
+		padding-block: 0.2em;
+	}
 }
 :where(a) {
-  color: var(--blue);
-  text-decoration: none;
+	color: var(--blue);
+	text-decoration: none;
 }
 
 /*
 * List
 */
 .filters {
-  display: flex;
-  gap: 1rem;
+	display: flex;
+	gap: 1rem;
 }
 .filters a,
 a.button {
-  padding: 0.2em 0.5em;
-  border: 1px solid var(--blue);
-  border-radius: 0.5em;
-  &.is-active,
-  &:hover {
-    background: var(--blue);
-    color: white;
-  }
+	padding: 0.2em 0.5em;
+	border: 1px solid var(--blue);
+	border-radius: 0.5em;
+	&.is-active,
+	&:hover {
+		background: var(--blue);
+		color: white;
+	}
 }
 .list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-  gap: 1rem;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+	gap: 1rem;
 }
 .list_item {
-  border-radius: 100%;
-  background: black;
+	border-radius: 100%;
+	background: black;
 }
 .list_item--red {
-  background: var(--red);
+	background: var(--red);
 }
 .list_item--green {
-  background: var(--green);
+	background: var(--green);
 }
 .list_item_link {
-  display: flex;
-  color: white;
-  aspect-ratio: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100%;
-  text-decoration: none;
-  font-size: 2rem;
+	display: flex;
+	color: white;
+	aspect-ratio: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 100%;
+	text-decoration: none;
+	font-size: 2rem;
 }
 
 /*
 * Modals
 */
 .modal {
-  max-width: 600px;
-  padding: 1rem;
+	max-width: 600px;
+	padding: 1rem;
 }
 .modal_close {
-  position: absolute;
-  inset-block-start: 1rem;
-  inset-inline-end: 1rem;
+	position: absolute;
+	inset-block-start: 1rem;
+	inset-inline-end: 1rem;
 }
-

tests/fixtures/assets/style.css

@@ -2,32 +2,36 @@
 * Default
 */
 html.is-changing .transition-main {
-	transition: opacity 250ms, transform 250ms;
+	transition:
+		opacity 250ms,
+		transform 250ms;
 }
 html.is-animating .transition-main {
 	opacity: 0;
-  transform: translateY(-30px);
+	transform: translateY(-30px);
 }
 html.is-leaving .transition-main {
-  transform: translateY(30px);
+	transform: translateY(30px);
 }
 /*
 * List
 */
 #list.is-changing {
-  transition: opacity 300ms;
+	transition: opacity 300ms;
 }
 #list.is-animating {
-  opacity: 0;
+	opacity: 0;
 }
 
 /*
 * Modal
 */
 #detail.is-changing {
-  transition: transform 300ms, opacity 300ms;
+	transition:
+		transform 300ms,
+		opacity 300ms;
 }
 #detail.is-animating {
-  opacity: 0;
-  transform: scale(0.9);
+	opacity: 0;
+	transform: scale(0.9);
 }

tests/fixtures/assets/transitions.css

@@ -86,7 +86,9 @@ describe('ParsedRule', () => {
 	});
 
 	it('should correctly match a rule', () => {
-		stubGlobalDocument(/*html*/ `<div id="swup" class="transition-main"><div id="fragment-1"></div></div>`);
+		stubGlobalDocument(
+			/*html*/ `<div id="swup" class="transition-main"><div id="fragment-1"></div></div>`
+		);
 		const rule = new ParsedRule({
 			from: '/users/',
 			to: '/user/:slug',
@@ -115,7 +117,9 @@ describe('ParsedRule', () => {
 		expect(console.error).toBeCalledWith(new Error('skipping rule since #fragment-1 doesn\'t exist in the current document'), expect.any(Object)) // prettier-ignore
 
 		/** fragment element outside of swup's default containers */
-		stubGlobalDocument(/*html*/ `<div id="swup" class="transition-main"></div><div id="fragment-1"></div>`);
+		stubGlobalDocument(
+			/*html*/ `<div id="swup" class="transition-main"></div><div id="fragment-1"></div>`
+		);
 		expect(rule.matches({ from: '/foo/', to: '/bar/' })).toBe(false);
 		expect(console.error).toBeCalledWith(new Error('skipping rule since #fragment-1 is outside of swup\'s default containers'), expect.any(Object)) // prettier-ignore
 	});

tests/vitest/ParsedRule.test.ts

@@ -13,7 +13,9 @@ const fragmentPlugin = getMountedPluginInstance({
 
 describe('getFragmentVisit()', () => {
 	beforeEach(() => {
-		stubGlobalDocument(/*html*/ `<div id="swup" class="transition-main"><div id="fragment-1"></div></div>`);
+		stubGlobalDocument(
+			/*html*/ `<div id="swup" class="transition-main"><div id="fragment-1"></div></div>`
+		);
 	});
 	afterEach(() => {
 		vi.restoreAllMocks();

tests/vitest/getFragmentVisit.test.ts

@@ -52,15 +52,19 @@ describe('handlePageView()', () => {
 	});
 
 	it('should handle <dialog> fragment elements', () => {
-		stubGlobalDocument(/*html*/ `<div id="swup" class="transition-main"><dialog open id="fragment-1"></div></div>`);
+		stubGlobalDocument(
+			/*html*/ `<div id="swup" class="transition-main"><dialog open id="fragment-1"></div></div>`
+		);
 		handlePageView(fragmentPlugin);
 
 		const dialog = document.querySelector<HTMLDialogElement & FragmentElement>('#fragment-1');
 		expect(dialog?.__swupFragment?.modalShown).toEqual(true);
 	});
 
 	it("should ignore fragments outside of swup's main containers", () => {
-		stubGlobalDocument(/*html*/ `<div id="swup" class="transition-main"></div><div id="fragment-1"></div>`);
+		stubGlobalDocument(
+			/*html*/ `<div id="swup" class="transition-main"></div><div id="fragment-1"></div>`
+		);
 		handlePageView(fragmentPlugin);
 
 		const el = document.querySelector('#fragment-1');