Fix same-page transition with different query params (#8042)

.changeset/ten-parrots-burn.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Treat same pathname with different search params as different page

packages/astro/components/ViewTransitions.astro

@@ -263,7 +263,11 @@ const { fallback = 'animate' } = Astro.props as Props;
 				link.href &&
 				(!link.target || link.target === '_self') &&
 				link.origin === location.origin &&
-				location.pathname !== link.pathname &&
+				!(
+					// Same page means same path and same query params
+					location.pathname === link.pathname &&
+					location.search === link.search
+				) &&
 				ev.button === 0 && // left clicks only
 				!ev.metaKey && // new tab (mac)
 				!ev.ctrlKey && // new tab (windows)

packages/astro/e2e/fixtures/view-transitions/astro.config.mjs

@@ -1,8 +1,11 @@
 import { defineConfig } from 'astro/config';
 import react from '@astrojs/react';
+import nodejs from '@astrojs/node';
 
 // https://astro.build/config
 export default defineConfig({
+	output: 'server',
+	adapter: nodejs({ mode: 'standalone' }),
 	integrations: [react()],
 	experimental: {
 		viewTransitions: true,

packages/astro/e2e/fixtures/view-transitions/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "astro": "workspace:*",
+    "@astrojs/node": "workspace:*",
     "@astrojs/react": "workspace:*",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"

packages/astro/e2e/fixtures/view-transitions/src/pages/query.astro

@@ -0,0 +1,9 @@
+---
+import Layout from '../components/Layout.astro';
+
+const page = Astro.url.searchParams.get('page') || 1;
+---
+<Layout>
+	<p id="query-page">Page {page}</p>
+	<a id="click-two" href="/query?page=2">go to 2</a>
+</Layout>

packages/astro/e2e/view-transitions.test.js

@@ -294,4 +294,24 @@ test.describe('View Transitions', () => {
 		const meta = page.locator('[name="script-executions"]');
 		await expect(meta).toHaveAttribute('content', '0');
 	});
+
+	test('Navigating to the same path but with different query params should result in transition', async ({ page, astro }) => {
+		const loads = [];
+		page.addListener('load', (p) => {
+			loads.push(p.title());
+		});
+
+		// Go to page 1
+		await page.goto(astro.resolveUrl('/query'));
+		let p = page.locator('#query-page');
+		await expect(p, 'should have content').toHaveText('Page 1');
+
+		// go to page 2
+		await page.click('#click-two');
+		p = page.locator('#query-page');
+		await expect(p, 'should have content').toHaveText('Page 2');
+
+
+		await expect(loads.length, 'There should only be 1 page load').toEqual(1);
+	});
 });