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

Author: flexponsive

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

@@ -1,12 +1,10 @@
-<script setup lang="ts">
+<script setup>
 import { useForm, usePage } from '@inertiajs/vue3'
-import { reactive, watch } from 'vue'
 
 const form = useForm({
   name: 'foo',
   handle: 'example',
-  remember: false as boolean,
-  custom: {},
+  remember: false,
 })
 
 const page = usePage()
@@ -37,21 +35,6 @@ const reassignObject = () => {
 const reassignSingle = () => {
   form.defaults('name', 'single value')
 }
-
-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>
@@ -71,11 +54,6 @@ 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>
 
     <button @click="submit" class="submit">Submit form</button>
 
@@ -86,10 +64,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>
   </div>
 </template>

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 }) => {