Tests for merge/optional props

pascalbaljet · pascalbaljet · commit cb335d50ee92 · 2025-12-03T13:34:03.000+01:00
diff --git a/packages/react/test-app/Pages/OnceProps/MergePageA.tsx b/packages/react/test-app/Pages/OnceProps/MergePageA.tsx
@@ -0,0 +1,12 @@
+import { Link, router } from '@inertiajs/react'
+
+export default ({ items, bar }: { items: string[]; bar: string }) => {
+  return (
+    <>
+      <p id="items">Items count: {items.length}</p>
+      <p id="bar">Bar: {bar}</p>
+      <Link href="/once-props/merge-page/b">Go to Merge Page B</Link>
+      <button onClick={() => router.reload({ only: ['items'] })}>Load more items</button>
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/OnceProps/MergePageB.tsx b/packages/react/test-app/Pages/OnceProps/MergePageB.tsx
@@ -0,0 +1,12 @@
+import { Link, router } from '@inertiajs/react'
+
+export default ({ items, bar }: { items: string[]; bar: string }) => {
+  return (
+    <>
+      <p id="items">Items count: {items.length}</p>
+      <p id="bar">Bar: {bar}</p>
+      <Link href="/once-props/merge-page/a">Go to Merge Page A</Link>
+      <button onClick={() => router.reload({ only: ['items'] })}>Load more items</button>
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/OnceProps/OptionalPageA.tsx b/packages/react/test-app/Pages/OnceProps/OptionalPageA.tsx
@@ -0,0 +1,12 @@
+import { Link, router } from '@inertiajs/react'
+
+export default ({ foo, bar }: { foo?: string; bar: string }) => {
+  return (
+    <>
+      <p id="foo">Foo: {foo ?? 'not loaded'}</p>
+      <p id="bar">Bar: {bar}</p>
+      <Link href="/once-props/optional-page/b">Go to Optional Page B</Link>
+      <button onClick={() => router.reload({ only: ['foo'] })}>Load foo</button>
+    </>
+  )
+}
diff --git a/packages/react/test-app/Pages/OnceProps/OptionalPageB.tsx b/packages/react/test-app/Pages/OnceProps/OptionalPageB.tsx
@@ -0,0 +1,12 @@
+import { Link, router } from '@inertiajs/react'
+
+export default ({ foo, bar }: { foo?: string; bar: string }) => {
+  return (
+    <>
+      <p id="foo">Foo: {foo ?? 'not loaded'}</p>
+      <p id="bar">Bar: {bar}</p>
+      <Link href="/once-props/optional-page/a">Go to Optional Page A</Link>
+      <button onClick={() => router.reload({ only: ['foo'] })}>Load foo</button>
+    </>
+  )
+}
diff --git a/packages/svelte/test-app/Pages/OnceProps/MergePageA.svelte b/packages/svelte/test-app/Pages/OnceProps/MergePageA.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Link, router } from '@inertiajs/svelte'
+
+  export let items: string[]
+  export let bar: string
+</script>
+
+<p id="items">Items count: {items.length}</p>
+<p id="bar">Bar: {bar}</p>
+<Link href="/once-props/merge-page/b">Go to Merge Page B</Link>
+<button on:click={() => router.reload({ only: ['items'] })}>Load more items</button>
diff --git a/packages/svelte/test-app/Pages/OnceProps/MergePageB.svelte b/packages/svelte/test-app/Pages/OnceProps/MergePageB.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Link, router } from '@inertiajs/svelte'
+
+  export let items: string[]
+  export let bar: string
+</script>
+
+<p id="items">Items count: {items.length}</p>
+<p id="bar">Bar: {bar}</p>
+<Link href="/once-props/merge-page/a">Go to Merge Page A</Link>
+<button on:click={() => router.reload({ only: ['items'] })}>Load more items</button>
diff --git a/packages/svelte/test-app/Pages/OnceProps/OptionalPageA.svelte b/packages/svelte/test-app/Pages/OnceProps/OptionalPageA.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Link, router } from '@inertiajs/svelte'
+
+  export let foo: string | undefined
+  export let bar: string
+</script>
+
+<p id="foo">Foo: {foo ?? 'not loaded'}</p>
+<p id="bar">Bar: {bar}</p>
+<Link href="/once-props/optional-page/b">Go to Optional Page B</Link>
+<button on:click={() => router.reload({ only: ['foo'] })}>Load foo</button>
diff --git a/packages/svelte/test-app/Pages/OnceProps/OptionalPageB.svelte b/packages/svelte/test-app/Pages/OnceProps/OptionalPageB.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Link, router } from '@inertiajs/svelte'
+
+  export let foo: string | undefined
+  export let bar: string
+</script>
+
+<p id="foo">Foo: {foo ?? 'not loaded'}</p>
+<p id="bar">Bar: {bar}</p>
+<Link href="/once-props/optional-page/a">Go to Optional Page A</Link>
+<button on:click={() => router.reload({ only: ['foo'] })}>Load foo</button>
diff --git a/packages/vue3/test-app/Pages/OnceProps/MergePageA.vue b/packages/vue3/test-app/Pages/OnceProps/MergePageA.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { Link, router } from '@inertiajs/vue3'
+
+defineProps<{ items: string[]; bar: string }>()
+</script>
+
+<template>
+  <p id="items">Items count: {{ items.length }}</p>
+  <p id="bar">Bar: {{ bar }}</p>
+  <Link href="/once-props/merge-page/b">Go to Merge Page B</Link>
+  <button @click="router.reload({ only: ['items'] })">Load more items</button>
+</template>
diff --git a/packages/vue3/test-app/Pages/OnceProps/MergePageB.vue b/packages/vue3/test-app/Pages/OnceProps/MergePageB.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { Link, router } from '@inertiajs/vue3'
+
+defineProps<{ items: string[]; bar: string }>()
+</script>
+
+<template>
+  <p id="items">Items count: {{ items.length }}</p>
+  <p id="bar">Bar: {{ bar }}</p>
+  <Link href="/once-props/merge-page/a">Go to Merge Page A</Link>
+  <button @click="router.reload({ only: ['items'] })">Load more items</button>
+</template>
diff --git a/packages/vue3/test-app/Pages/OnceProps/OptionalPageA.vue b/packages/vue3/test-app/Pages/OnceProps/OptionalPageA.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { Link, router } from '@inertiajs/vue3'
+
+defineProps<{ foo?: string; bar: string }>()
+</script>
+
+<template>
+  <p id="foo">Foo: {{ foo ?? 'not loaded' }}</p>
+  <p id="bar">Bar: {{ bar }}</p>
+  <Link href="/once-props/optional-page/b">Go to Optional Page B</Link>
+  <button @click="router.reload({ only: ['foo'] })">Load foo</button>
+</template>
diff --git a/packages/vue3/test-app/Pages/OnceProps/OptionalPageB.vue b/packages/vue3/test-app/Pages/OnceProps/OptionalPageB.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { Link, router } from '@inertiajs/vue3'
+
+defineProps<{ foo?: string; bar: string }>()
+</script>
+
+<template>
+  <p id="foo">Foo: {{ foo ?? 'not loaded' }}</p>
+  <p id="bar">Bar: {{ bar }}</p>
+  <Link href="/once-props/optional-page/a">Go to Optional Page A</Link>
+  <button @click="router.reload({ only: ['foo'] })">Load foo</button>
+</template>
diff --git a/tests/app/server.js b/tests/app/server.js
@@ -1551,6 +1551,35 @@ app.get('/once-props/ttl-page-b', (req, res) => {
   })
 })
 
+app.get('/once-props/optional-page/:page', (req, res) => {
+  const { isPartialRequest, hasPropAlready } = getOncePropsData(req)
+  const page = req.params.page
+
+  inertia.render(req, res, {
+    component: `OnceProps/OptionalPage${page.toUpperCase()}`,
+    props: {
+      foo: isPartialRequest ? `foo-${page}-` + Date.now() : undefined,
+      bar: `bar-${page}`,
+    },
+    onceProps: isPartialRequest || hasPropAlready ? { foo: { prop: 'foo', expiresAt: null } } : {},
+  })
+})
+
+app.get('/once-props/merge-page/:page', (req, res) => {
+  const { shouldResolveProp } = getOncePropsData(req, 'items')
+  const page = req.params.page
+
+  inertia.render(req, res, {
+    component: `OnceProps/MergePage${page.toUpperCase()}`,
+    props: {
+      items: shouldResolveProp ? new Array(3).fill(page) : undefined,
+      bar: `bar-${page}`,
+    },
+    mergeProps: ['items'],
+    onceProps: { items: { prop: 'items', expiresAt: null } },
+  })
+})
+
 app.all('*page', (req, res) => inertia.render(req, res))
 
 // Send errors to the console (instead of crashing the server)
diff --git a/tests/once-props.spec.ts b/tests/once-props.spec.ts
@@ -132,3 +132,50 @@ test('once prop with TTL is remembered within TTL window and reloaded after expi
   expect(newFooText).not.toBe(initialFooText)
   expect(newFooText.startsWith('Foo: foo-b')).toBe(true)
 })
+
+test('optional once prop is not loaded initially, fetched via reload, then cached on navigation', async ({ page }) => {
+  await page.goto('/once-props/optional-page/a')
+
+  await expect(page.getByText('Foo: not loaded')).toBeVisible()
+  await expect(page.getByText('Bar: bar-a')).toBeVisible()
+
+  await clickAndWaitForResponse(page, 'Load foo', '/once-props/optional-page/a', 'button')
+
+  await expect(page.getByText('Foo: foo-a')).toBeVisible()
+
+  const fooText = await page.locator('#foo').innerText()
+  expect(fooText.startsWith('Foo: foo-a')).toBe(true)
+
+  await clickAndWaitForResponse(page, 'Go to Optional Page B', '/once-props/optional-page/b')
+
+  await expect(page).toHaveURL('/once-props/optional-page/b')
+  await expect(page.getByText('Bar: bar-b')).toBeVisible()
+  await expect(page.getByText(fooText)).toBeVisible()
+
+  await clickAndWaitForResponse(page, 'Go to Optional Page A', '/once-props/optional-page/a')
+
+  await expect(page).toHaveURL('/once-props/optional-page/a')
+  await expect(page.getByText(fooText)).toBeVisible()
+})
+
+test('merge once prop merges on reload and preserves merged data on navigation', async ({ page }) => {
+  await page.goto('/once-props/merge-page/a')
+
+  await expect(page.getByText('Items count: 3')).toBeVisible()
+  await expect(page.getByText('Bar: bar-a')).toBeVisible()
+
+  await clickAndWaitForResponse(page, 'Load more items', '/once-props/merge-page/a', 'button')
+
+  await expect(page.getByText('Items count: 6')).toBeVisible()
+
+  await clickAndWaitForResponse(page, 'Go to Merge Page B', '/once-props/merge-page/b')
+
+  await expect(page).toHaveURL('/once-props/merge-page/b')
+  await expect(page.getByText('Bar: bar-b')).toBeVisible()
+  await expect(page.getByText('Items count: 6')).toBeVisible()
+
+  await clickAndWaitForResponse(page, 'Go to Merge Page A', '/once-props/merge-page/a')
+
+  await expect(page).toHaveURL('/once-props/merge-page/a')
+  await expect(page.getByText('Items count: 6')).toBeVisible()
+})
