Ensure objectsAreEqual() checks all keys in both objects (#2705)

* wip

* reacrt/svelte

Author: pascalbaljet

packages/core/src/objectUtils.ts

@@ -1,4 +1,4 @@
-export const objectsAreEqual = <T>(
+export const objectsAreEqual = <T extends Record<string, any>>(
   obj1: T,
   obj2: T,
   excludeKeys: {
@@ -9,6 +9,7 @@ export const objectsAreEqual = <T>(
     return true
   }
 
+  // Check keys in obj1
   for (const key in obj1) {
     if (excludeKeys.includes(key)) {
       continue
@@ -23,6 +24,17 @@ export const objectsAreEqual = <T>(
     }
   }
 
+  // Check keys that exist in obj2 but not in obj1
+  for (const key in obj2) {
+    if (excludeKeys.includes(key)) {
+      continue
+    }
+
+    if (!(key in obj1)) {
+      return false
+    }
+  }
+
   return true
 }
 

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

@@ -25,6 +25,9 @@ export default () => {
 
       <Link href="/deferred-props/page-1">Page 1</Link>
       <Link href="/deferred-props/page-2">Page 2</Link>
+      <Link href="/deferred-props/page-3" prefetch>
+        Page 3
+      </Link>
     </>
   )
 }

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

@@ -0,0 +1,27 @@
+import { Deferred, usePage } from '@inertiajs/react'
+
+const Alpha = () => {
+  const { alpha } = usePage<{ alpha?: string }>().props
+
+  return alpha
+}
+
+const Beta = () => {
+  const { beta } = usePage<{ beta?: string }>().props
+
+  return beta
+}
+
+export default () => {
+  return (
+    <>
+      <Deferred data="alpha" fallback={<div>Loading alpha...</div>}>
+        <Alpha />
+      </Deferred>
+
+      <Deferred data="beta" fallback={<div>Loading beta...</div>}>
+        <Beta />
+      </Deferred>
+    </>
+  )
+}

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

@@ -21,3 +21,4 @@
 
 <a href="/deferred-props/page-1" use:inertia>Page 1</a>
 <a href="/deferred-props/page-2" use:inertia>Page 2</a>
+<a href="/deferred-props/page-3" use:inertia={{ prefetch: true }}>Page 3</a>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Deferred } from '@inertiajs/svelte'
+
+  export let alpha: string | undefined
+  export let beta: string | undefined
+</script>
+
+<Deferred data="alpha">
+  <div slot="fallback">Loading alpha...</div>
+  {alpha}
+</Deferred>
+
+<Deferred data="beta">
+  <div slot="fallback">Loading beta...</div>
+  {beta}
+</Deferred>

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

@@ -24,4 +24,5 @@ defineProps<{
 
   <Link href="/deferred-props/page-1">Page 1</Link>
   <Link href="/deferred-props/page-2">Page 2</Link>
+  <Link href="/deferred-props/page-3" prefetch>Page 3</Link>
 </template>

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

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

tests/app/server.js

@@ -782,6 +782,30 @@ app.get('/deferred-props/page-2', (req, res) => {
   }
 })
 
+app.get('/deferred-props/page-3', (req, res) => {
+  if (!req.headers['x-inertia-partial-data']) {
+    return inertia.render(req, res, {
+      component: 'DeferredProps/Page3',
+      deferredProps: {
+        default: ['alpha', 'beta'],
+      },
+      props: {},
+    })
+  }
+
+  setTimeout(
+    () =>
+      inertia.render(req, res, {
+        component: 'DeferredProps/Page3',
+        props: {
+          alpha: req.headers['x-inertia-partial-data']?.includes('alpha') ? 'alpha value' : undefined,
+          beta: req.headers['x-inertia-partial-data']?.includes('beta') ? 'beta value' : undefined,
+        },
+      }),
+    500,
+  )
+})
+
 app.get('/deferred-props/many-groups', (req, res) => {
   const props = ['foo', 'bar', 'baz', 'qux', 'quux']
   const requestedProps = req.headers['x-inertia-partial-data']

tests/core/objectUtils.test.ts

@@ -0,0 +1,181 @@
+import test, { expect } from '@playwright/test'
+import { objectsAreEqual } from '../../packages/core/src/objectUtils'
+
+test.describe('objectUtils.ts', () => {
+  test.describe('objectsAreEqual', () => {
+    test.describe('basic equality', () => {
+      test('returns true for identical objects', () => {
+        const obj1 = { a: 1, b: 2, c: 3 }
+        const obj2 = { a: 1, b: 2, c: 3 }
+
+        expect(objectsAreEqual(obj1, obj2, [])).toBe(true)
+      })
+
+      test('returns true for same reference', () => {
+        const obj = { a: 1, b: 2 }
+
+        expect(objectsAreEqual(obj, obj, [])).toBe(true)
+      })
+
+      test('returns true for empty objects', () => {
+        expect(objectsAreEqual({}, {}, [])).toBe(true)
+      })
+
+      test('returns false for objects with different values', () => {
+        const obj1 = { a: 1, b: 2 }
+        const obj2 = { a: 1, b: 3 }
+
+        expect(objectsAreEqual(obj1, obj2, [])).toBe(false)
+      })
+    })
+
+    test.describe('asymmetric objects', () => {
+      test('returns false when second object has additional keys', () => {
+        const obj1 = { a: 1, b: 2 }
+        const obj2 = { a: 1, b: 2, c: 3 }
+
+        expect(objectsAreEqual(obj1, obj2, [])).toBe(false)
+      })
+
+      test('returns false when first object has additional keys', () => {
+        const obj1 = { a: 1, b: 2, c: 3 }
+        const obj2 = { a: 1, b: 2 }
+
+        expect(objectsAreEqual(obj1, obj2, [])).toBe(false)
+      })
+
+      test('handles objects with overlapping and unique keys', () => {
+        const obj1 = {
+          name: 'test',
+          type: 'example',
+          config: { option: 'value' },
+        }
+
+        const obj2 = {
+          name: 'test',
+          type: 'example',
+          config: { option: 'value' },
+          extra: ['additional'],
+        }
+
+        expect(objectsAreEqual(obj1, obj2, [])).toBe(false)
+      })
+    })
+
+    test.describe('key exclusion', () => {
+      test('ignores excluded keys', () => {
+        const obj1 = { a: 1, b: 2, ignore: 'foo' }
+        const obj2 = { a: 1, b: 2, ignore: 'bar' }
+
+        expect(objectsAreEqual(obj1, obj2, ['ignore'])).toBe(true)
+      })
+
+      test('does not ignore non-excluded keys', () => {
+        const obj1 = { a: 1, b: 2, keep: 'foo' }
+        const obj2 = { a: 1, b: 2, keep: 'bar' }
+
+        // @ts-expect-error - Ignore key doesn't exist in obj1
+        expect(objectsAreEqual(obj1, obj2, ['ignore'])).toBe(false)
+      })
+
+      test('handles asymmetric objects with excluded keys', () => {
+        const obj1 = { a: 1, b: 2 }
+        const obj2 = { a: 1, b: 2, ignore: 'value' }
+
+        // Should be true because the extra key is excluded
+        // @ts-expect-error - Ignore key doesn't exist in obj1
+        expect(objectsAreEqual(obj1, obj2, ['ignore'])).toBe(true)
+      })
+
+      test('handles asymmetric objects with non-excluded keys', () => {
+        const obj1 = { a: 1, b: 2 }
+        const obj2 = { a: 1, b: 2, keep: 'value' }
+
+        // Should be false because the extra key is not excluded
+        // @ts-expect-error - Keep key doesn't exist in obj1
+        expect(objectsAreEqual(obj1, obj2, ['ignore'])).toBe(false)
+      })
+    })
+
+    test.describe('value types', () => {
+      test('handles undefined values', () => {
+        const obj1 = { a: 1, b: undefined }
+        const obj2 = { a: 1, b: undefined }
+
+        expect(objectsAreEqual(obj1, obj2, [])).toBe(true)
+      })
+
+      test('handles null values', () => {
+        const obj1 = { a: 1, b: null }
+        const obj2 = { a: 1, b: null }
+
+        expect(objectsAreEqual(obj1, obj2, [])).toBe(true)
+      })
+
+      test('distinguishes between undefined and null', () => {
+        const obj1 = { a: 1, b: undefined }
+        const obj2 = { a: 1, b: null }
+
+        // @ts-expect-error - Different types for key 'b'
+        expect(objectsAreEqual(obj1, obj2, [])).toBe(false)
+      })
+
+      test('handles boolean values', () => {
+        const obj1 = { a: true, b: false }
+        const obj2 = { a: true, b: false }
+
+        expect(objectsAreEqual(obj1, obj2, [])).toBe(true)
+      })
+
+      test('handles string values', () => {
+        const obj1 = { a: 'hello', b: 'world' }
+        const obj2 = { a: 'hello', b: 'world' }
+
+        expect(objectsAreEqual(obj1, obj2, [])).toBe(true)
+      })
+
+      test('handles array values', () => {
+        const obj1 = { a: [1, 2, 3], b: ['x', 'y'] }
+        const obj2 = { a: [1, 2, 3], b: ['x', 'y'] }
+
+        expect(objectsAreEqual(obj1, obj2, [])).toBe(true)
+      })
+
+      test('detects different array values', () => {
+        const obj1 = { a: [1, 2, 3] }
+        const obj2 = { a: [1, 2, 4] }
+
+        expect(objectsAreEqual(obj1, obj2, [])).toBe(false)
+      })
+
+      test('handles nested objects', () => {
+        const obj1 = { a: 1, nested: { x: 1, y: 2 } }
+        const obj2 = { a: 1, nested: { x: 1, y: 2 } }
+
+        expect(objectsAreEqual(obj1, obj2, [])).toBe(true)
+      })
+
+      test('detects different nested objects', () => {
+        const obj1 = { a: 1, nested: { x: 1, y: 2 } }
+        const obj2 = { a: 1, nested: { x: 1, y: 3 } }
+
+        expect(objectsAreEqual(obj1, obj2, [])).toBe(false)
+      })
+
+      test('handles functions', () => {
+        const fn = () => 'test'
+        const obj1 = { a: 1, fn }
+        const obj2 = { a: 1, fn }
+
+        expect(objectsAreEqual(obj1, obj2, [])).toBe(true)
+      })
+
+      test('detects different functions', () => {
+        const obj1 = { a: 1, fn: () => 'test1' }
+        const obj2 = { a: 1, fn: () => 'test2' }
+
+        expect(objectsAreEqual(obj1, obj2, [])).toBe(false)
+      })
+    })
+  })
+})

tests/deferred-props.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test'
-import { clickAndWaitForResponse } from './support'
+import { clickAndWaitForResponse, consoleMessages } from './support'
 
 test('can load deferred props', async ({ page }) => {
   await page.goto('/deferred-props/page-1')
@@ -244,3 +244,31 @@ test('can partial reload deferred props independently', async ({ page }) => {
   expect(finalFooTimestamp).toBe(newFooTimestamp) // foo unchanged
   expect(finalBarTimestamp).not.toBe(newBarTimestamp) // bar changed
 })
+
+test('prefetch works with deferred props without errors', async ({ page }) => {
+  consoleMessages.listen(page)
+  const prefetch = page.waitForResponse('/deferred-props/page-3')
+
+  await page.goto('/deferred-props/page-1')
+  await expect(page.getByRole('link', { name: 'Page 3' })).toBeVisible()
+
+  consoleMessages.errors = []
+
+  await page.getByRole('link', { name: 'Page 3' }).hover()
+  await prefetch
+
+  const deferred = page.waitForResponse(
+    (response) =>
+      response.url().includes('/deferred-props/page-3') && 'x-inertia-partial-data' in response.request().headers(),
+  )
+
+  await page.getByRole('link', { name: 'Page 3' }).click()
+  await page.waitForURL('/deferred-props/page-3')
+
+  await deferred
+
+  await expect(page.getByText('alpha value')).toBeVisible()
+  await expect(page.getByText('beta value')).toBeVisible()
+
+  expect(consoleMessages.errors).toHaveLength(0)
+})