vue: move dynamic components test to dedicated file (which uses javascript)

Author: flexponsive

packages/vue3/test-app/Pages/FormHelper/Data.vue

@@ -38,10 +38,6 @@ const reassignSingle = () => {
   form.defaults('name', 'single value')
 }
 
-const addCustomOtherProp = () => {
-  form.custom.other_prop = 'dynamic_value' // Add nested dynamic property
-}
-
 const formDataOutput = reactive({
   json: '',
 })
@@ -71,12 +67,7 @@ watch(
       <input type="checkbox" id="remember" name="remember" v-model="form.remember" />
     </label>
     <span class="remember_error" v-if="form.errors.remember">{{ form.errors.remember }}</span>
-    <label>
-      Accept Terms and Conditions
-      <input type="checkbox" id="accept_tos" name="accept_tos" v-model="form.accept_tos" />
-    </label>
-    <span class="accept_tos_error" v-if="form.errors.accept_tos">{{ form.errors.accept_tos }}</span>
-
+    <!-- Accept Terms and Conditions and dynamic property logic removed -->
     <button @click="submit" class="submit">Submit form</button>
 
     <button @click="resetAll" class="reset">Reset all data</button>
@@ -86,8 +77,6 @@ watch(
     <button @click="reassignObject" class="reassign-object">Reassign default values</button>
     <button @click="reassignSingle" class="reassign-single">Reassign single default</button>
 
-    <button @click="addCustomOtherProp" class="add-custom-other-prop">Add custom.other_prop</button>
-
     <span class="errors-status">Form has {{ form.hasErrors ? '' : 'no ' }}errors</span>
 
     <div id="form-data-output" data-test-id="form-data-output" style="display: none">{{ formDataOutput.json }}</div>

packages/vue3/test-app/Pages/FormHelper/DataDynamic.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { useForm, usePage } from '@inertiajs/vue3'
+import { reactive, watch } from 'vue'
+
+const form = useForm({
+  name: 'foo',
+  handle: 'example',
+  remember: false,
+  custom: {},
+})
+
+const page = usePage()
+
+const submit = () => {
+  form.post(page.url)
+}
+
+const addCustomOtherProp = () => {
+  form.custom.other_prop = 'dynamic_value' // Add nested dynamic property
+}
+
+const formDataOutput = reactive({
+  json: '',
+})
+watch(
+  () => form.data(),
+  (newData) => {
+    formDataOutput.json = JSON.stringify(newData)
+  },
+  { deep: true, immediate: true },
+)
+</script>
+
+<template>
+  <div>
+    <label>
+      Full Name
+      <input type="text" id="name" name="name" v-model="form.name" />
+    </label>
+    <span class="name_error" v-if="form.errors.name">{{ form.errors.name }}</span>
+
+    <label>
+      Accept Terms and Conditions
+      <input type="checkbox" id="accept_tos" name="accept_tos" v-model="form.accept_tos" />
+    </label>
+    <span class="accept_tos_error" v-if="form.errors.accept_tos">{{ form.errors.accept_tos }}</span>
+
+    <button @click="submit" class="submit">Submit form</button>
+
+    <button @click="addCustomOtherProp" class="add-custom-other-prop">Add custom.other_prop</button>
+
+    <div id="form-data-output" data-test-id="form-data-output" style="display: none">{{ formDataOutput.json }}</div>
+  </div>
+</template>

tests/app/server.js

@@ -157,6 +157,13 @@ app.post('/form-helper/data', (req, res) =>
   }),
 )
 
+app.post('/form-helper/data-dynamic', (req, res) =>
+  inertia.render(req, res, {
+    component: 'FormHelper/DataDynamic',
+    props: {},
+  }),
+)
+
 app.get('/form-helper/nested', (req, res) =>
   inertia.render(req, res, {
     component: 'FormHelper/Nested',
@@ -549,11 +556,17 @@ app.post('/form-component/progress', async (req, res) =>
   setTimeout(() => inertia.render(req, res, { component: 'FormComponent/Progress' }), 500),
 )
 app.get('/form-component/state', (req, res) => inertia.render(req, res, { component: 'FormComponent/State' }))
-app.get('/form-component/dotted-keys', (req, res) => inertia.render(req, res, { component: 'FormComponent/DottedKeys' }))
+app.get('/form-component/dotted-keys', (req, res) =>
+  inertia.render(req, res, { component: 'FormComponent/DottedKeys' }),
+)
 app.get('/form-component/ref', (req, res) => inertia.render(req, res, { component: 'FormComponent/Ref' }))
-app.get('/form-component/uppercase-method', (req, res) => inertia.render(req, res, { component: 'FormComponent/UppercaseMethod' }))
+app.get('/form-component/uppercase-method', (req, res) =>
+  inertia.render(req, res, { component: 'FormComponent/UppercaseMethod' }),
+)
 
-app.get('/form-component/url/with/segements', (req, res) => inertia.render(req, res, { component: 'FormComponent/EmptyAction' }))
+app.get('/form-component/url/with/segements', (req, res) =>
+  inertia.render(req, res, { component: 'FormComponent/EmptyAction' }),
+)
 app.post('/form-component/url/with/segements', async (req, res) =>
   inertia.render(req, res, {
     component: 'FormComponent/EmptyAction',

tests/form-component.spec.ts

@@ -112,7 +112,7 @@ test.describe('Form Component', () => {
   test.describe('Dynamic Properties', () => {
     test.beforeEach(async ({ page }) => {
       pageLoads.watch(page)
-      await page.goto('/form-helper/data') // Navigate to the FormHelper/Data page
+      await page.goto('/form-helper/data-dynamic')
     })
 
     test('initial data() output contains only initial properties', async ({ page }) => {