From e3ed4ee80923bfd15dfe3b4d786b6929a99547dd Mon Sep 17 00:00:00 2001
From: Joe Tannenbaum <joe.tannenbaum@laravel.com>
Date: Thu, 21 Nov 2024 11:14:15 -0500
Subject: [PATCH] test for Link prop updating

---
 .../react/test-app/Pages/Links/PropUpdate.jsx    | 15 +++++++++++++++
 .../test-app/Pages/Links/PropUpdate.svelte       | 16 ++++++++++++++++
 .../vue3/test-app/Pages/Links/PropUpdate.vue     | 13 +++++++++++++
 tests/app/server.js                              |  3 ++-
 tests/links.spec.ts                              |  9 +++++++++
 5 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/test-app/Pages/Links/PropUpdate.jsx
 create mode 100644 packages/svelte/test-app/Pages/Links/PropUpdate.svelte
 create mode 100644 packages/vue3/test-app/Pages/Links/PropUpdate.vue

diff --git a/packages/react/test-app/Pages/Links/PropUpdate.jsx b/packages/react/test-app/Pages/Links/PropUpdate.jsx
new file mode 100644
index 000000000..4f2837598
--- /dev/null
+++ b/packages/react/test-app/Pages/Links/PropUpdate.jsx
@@ -0,0 +1,15 @@
+import { Link } from '@inertiajs/react'
+import { useState } from 'react'
+
+export default () => {
+  const [href, setHref] = useState('/sleep')
+
+  return (
+    <div>
+      <button onClick={() => setHref('/something-else')}>Change URL</button>
+      <Link href={href} class="get">
+        The Link
+      </Link>
+    </div>
+  )
+}
diff --git a/packages/svelte/test-app/Pages/Links/PropUpdate.svelte b/packages/svelte/test-app/Pages/Links/PropUpdate.svelte
new file mode 100644
index 000000000..e22ed5c60
--- /dev/null
+++ b/packages/svelte/test-app/Pages/Links/PropUpdate.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { Link } from '@inertiajs/svelte'
+
+  let href = '/sleep';
+
+  const changeUrl = () => {
+    href = '/something-else';
+  }
+</script>
+
+<div>
+  <button on:click={changeUrl}>Change URL</button>
+  <Link href={href} class="get">
+    The Link
+  </Link>
+</div>
diff --git a/packages/vue3/test-app/Pages/Links/PropUpdate.vue b/packages/vue3/test-app/Pages/Links/PropUpdate.vue
new file mode 100644
index 000000000..4b792d5d7
--- /dev/null
+++ b/packages/vue3/test-app/Pages/Links/PropUpdate.vue
@@ -0,0 +1,13 @@
+<script setup>
+import { Link } from '@inertiajs/vue3'
+import { ref } from 'vue'
+
+const href = ref('/sleep')
+</script>
+
+<template>
+  <div>
+    <button @click.prevent="href = '/something-else'">Change URL</button>
+    <Link :href="href">The Link</Link>
+  </div>
+</template>
diff --git a/tests/app/server.js b/tests/app/server.js
index 213ccca6c..e17e23f3d 100644
--- a/tests/app/server.js
+++ b/tests/app/server.js
@@ -72,6 +72,7 @@ app.get('/links/headers/version', (req, res) =>
   inertia.render(req, res, { component: 'Links/Headers', version: 'example-version-header' }),
 )
 app.get('/links/data-loading', (req, res) => inertia.render(req, res, { component: 'Links/DataLoading' }))
+app.get('/links/prop-update', (req, res) => inertia.render(req, res, { component: 'Links/PropUpdate' }))
 
 app.get('/visits/partial-reloads', (req, res) =>
   inertia.render(req, res, {
@@ -311,7 +312,7 @@ app.get('/deferred-props/page-2', (req, res) => {
 })
 
 app.get('/svelte/props-and-page-store', (req, res) =>
-  inertia.render(req, res, { component: 'Svelte/PropsAndPageStore', props: { foo: req.query.foo || 'default' }}),
+  inertia.render(req, res, { component: 'Svelte/PropsAndPageStore', props: { foo: req.query.foo || 'default' } }),
 )
 
 app.all('/sleep', (req, res) => setTimeout(() => res.send(''), 2000))
diff --git a/tests/links.spec.ts b/tests/links.spec.ts
index a45217788..adc8bda05 100644
--- a/tests/links.spec.ts
+++ b/tests/links.spec.ts
@@ -754,3 +754,12 @@ test.describe('data-loading attribute', () => {
     await expect(link2).not.toHaveAttribute('data-loading')
   })
 })
+
+test('will update href if prop is updated', async ({ page }) => {
+  await page.goto('/links/prop-update')
+  const link = await page.getByRole('link', { name: 'The Link' })
+  const button = await page.getByRole('button', { name: 'Change URL' })
+  await expect(link).toHaveAttribute('href', /\/sleep$/)
+  await button.click()
+  await expect(link).toHaveAttribute('href', /\/something-else$/)
+})