fix: preserve query parameters in test server responses

packages/react/test-app/Pages/DeepMergeProps.tsx

@@ -24,7 +24,7 @@ export default ({ bar, foo, baz }: PageProps) => {
 
   const getFresh = () => {
     setPage(0)
-    router.reload({
+    router.visit('/deep-merge-props', {
       reset: ['foo', 'baz'],
     })
   }

packages/react/test-app/Pages/DeferredProps/WithQueryParams.tsx

@@ -0,0 +1,21 @@
+import { Deferred, usePage } from '@inertiajs/react'
+
+const Users = () => {
+  const { users } = usePage<{ users?: { text: string } }>().props
+
+  return <div>{users?.text}</div>
+}
+
+export default () => {
+  const { filter } = usePage<{ filter: string }>().props
+
+  return (
+    <>
+      <div>Filter: {filter}</div>
+
+      <Deferred data="users" fallback={<div>Loading users...</div>}>
+        <Users />
+      </Deferred>
+    </>
+  )
+}

packages/react/test-app/Pages/MatchPropsOnKey.tsx

@@ -26,7 +26,7 @@ export default ({ bar, foo, baz }: PageProps) => {
   const [page, setPage] = useState(foo.page)
 
   const reloadIt = () => {
-    router.reload({
+    router.visit('/match-props-on-key', {
       data: {
         page,
       },
@@ -39,7 +39,7 @@ export default ({ bar, foo, baz }: PageProps) => {
 
   const getFresh = () => {
     setPage(0)
-    router.reload({
+    router.visit('/match-props-on-key', {
       reset: ['foo', 'baz'],
     })
   }

packages/svelte/test-app/Pages/DeepMergeProps.svelte

@@ -21,7 +21,7 @@
 
   const getFresh = () => {
     page = 0
-    router.reload({
+    router.visit('/deep-merge-props', {
       reset: ['foo', 'baz'],
     })
   }

packages/svelte/test-app/Pages/DeferredProps/WithQueryParams.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Deferred } from '@inertiajs/svelte'
+
+  export let filter: string
+  export let users: { text: string } | undefined
+</script>
+
+<div>Filter: {filter}</div>
+
+<Deferred data="users">
+  <svelte:fragment slot="fallback">
+    <div>Loading users...</div>
+  </svelte:fragment>
+  <div>{users?.text}</div>
+</Deferred>

packages/svelte/test-app/Pages/MatchPropsOnKey.svelte

@@ -21,7 +21,7 @@
   let page = foo.page
 
   const reloadIt = () => {
-    router.reload({
+    router.visit('/match-props-on-key', {
       data: {
         page,
       },
@@ -35,7 +35,7 @@
 
   const getFresh = () => {
     page = 0
-    router.reload({
+    router.visit('/match-props-on-key', {
       reset: ['foo', 'baz'],
     })
   }

packages/vue3/test-app/Pages/DeepMergeProps.vue

@@ -34,7 +34,7 @@ const reloadIt = () => {
 
 const getFresh = () => {
   page.value = 0
-  router.reload({
+  router.visit('/deep-merge-props', {
     reset: ['foo', 'baz'],
   })
 }

packages/vue3/test-app/Pages/DeferredProps/WithQueryParams.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Deferred } from '@inertiajs/vue3'
+
+defineProps<{
+  filter: string
+  users?: { text: string }
+}>()
+</script>
+
+<template>
+  <div>Filter: {{ filter }}</div>
+
+  <Deferred data="users">
+    <template #fallback>
+      <div>Loading users...</div>
+    </template>
+    <div>{{ users?.text }}</div>
+  </Deferred>
+</template>

packages/vue3/test-app/Pages/MatchPropsOnKey.vue

@@ -21,7 +21,7 @@ const props = defineProps<ComponentProps>()
 const page = ref(props.foo.page)
 
 const reloadIt = () => {
-  router.reload({
+  router.visit('/match-props-on-key', {
     data: {
       page: page.value,
     },
@@ -36,7 +36,7 @@ const reloadIt = () => {
 
 const getFresh = () => {
   page.value = 0
-  router.reload({
+  router.visit('/match-props-on-key', {
     reset: ['foo', 'baz'],
   })
 }

tests/app/helpers.js

@@ -16,21 +16,16 @@ module.exports = {
         .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
         .join(''),
       props: {},
-      // TODO: url should be req.originalUrl as that includes the query string
-      url: req.path,
+      url: req.originalUrl,
       version: null,
       ...data,
     }
 
-    if (data.component.startsWith('InfiniteScroll')) {
+    if (data.component.startsWith('InfiniteScroll') && req.query.absolutePageUrl) {
       // Support absolute URL format for testing URL preservation
-      if (req.query.absolutePageUrl) {
-        const protocol = req.protocol
-        const host = req.get('host')
-        data.url = `${protocol}://${host}${req.originalUrl}`
-      } else {
-        data.url = req.originalUrl
-      }
+      const protocol = req.protocol
+      const host = req.get('host')
+      data.url = `${protocol}://${host}${req.originalUrl}`
     }
 
     const partialDataHeader = req.headers['x-inertia-partial-data'] || ''

tests/app/server.js

@@ -758,6 +758,34 @@ app.get('/deferred-props/instant-reload', (req, res) => {
   )
 })
 
+app.get('/deferred-props/with-query-params', (req, res) => {
+  const filter = req.query.filter || 'none'
+  const requestedProps = req.headers['x-inertia-partial-data']
+
+  if (!requestedProps) {
+    return inertia.render(req, res, {
+      component: 'DeferredProps/WithQueryParams',
+      deferredProps: {
+        default: ['users'],
+      },
+      props: {
+        filter,
+      },
+    })
+  }
+
+  setTimeout(
+    () =>
+      inertia.render(req, res, {
+        component: 'DeferredProps/WithQueryParams',
+        props: {
+          users: requestedProps.includes('users') ? { text: `users data for ${filter}` } : undefined,
+        },
+      }),
+    500,
+  )
+})
+
 app.get('/svelte/props-and-page-store', (req, res) =>
   inertia.render(req, res, { component: 'Svelte/PropsAndPageStore', props: { foo: req.query.foo || 'default' } }),
 )

tests/deep-merge-props.spec.ts

@@ -29,7 +29,7 @@ test('can deep merge props', async ({ page }) => {
   await expect(page.getByText('foo.per_page is 5')).toBeVisible()
   await expect(page.getByText('foo.meta.label is third')).toBeVisible()
 
-  await clickAndWaitForResponse(page, 'Get Fresh', null, 'button')
+  await clickAndWaitForResponse(page, 'Get Fresh', '/deep-merge-props', 'button')
 
   await expect(page.getByText('bar count is 5')).toBeVisible()
   await expect(page.getByText('baz count is 5')).toBeVisible()

tests/deferred-props.spec.ts

@@ -197,3 +197,26 @@ test('load deferred props with partial reload on mount', async ({ page }) => {
   await expect(page.getByText('foo value')).toBeVisible()
   await expect(page.getByText('bar value')).toBeVisible()
 })
+
+test('deferred props preserve query parameters from original URL', async ({ page }) => {
+  await page.goto('/deferred-props/with-query-params?filter=a')
+
+  // Verify the initial page load has the correct filter
+  await expect(page.getByText('Filter: a')).toBeVisible()
+  await expect(page.getByText('Loading users...')).toBeVisible()
+
+  // Wait for and capture the deferred props request
+  const deferredRequest = await page.waitForResponse((response) => {
+    const url = response.url()
+    const headers = response.request().headers()
+    return headers['x-inertia-partial-data'] === 'users' && url.includes('/deferred-props/with-query-params')
+  })
+
+  // Assert that the deferred props request includes the query parameter
+  const requestUrl = deferredRequest.url()
+  expect(requestUrl).toContain('filter=a')
+
+  // Verify the deferred data uses the correct filter
+  await expect(page.getByText('Loading users...')).not.toBeVisible()
+  await expect(page.getByText('users data for a')).toBeVisible()
+})

tests/form-component.spec.ts

@@ -441,7 +441,7 @@ test.describe('Form Component', () => {
       expect(scrollBefore).toBeGreaterThan(0)
 
       await page.getByRole('button', { name: 'Submit' }).click()
-      await page.waitForURL('/article')
+      await page.waitForURL(/\/article/)
 
       const scrollAfter = await page.evaluate(() => window.scrollY)
       // TODO: why is this not exactly 100?