Test for Form + Vue Options API

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

@@ -0,0 +1,55 @@
+<script lang="ts">
+export default {
+  data() {
+    return {
+      form: this.$inertia.form({
+        email: '[email protected]',
+        password: '',
+        remember: false,
+      }),
+    }
+  },
+  methods: {
+    submit() {
+      this.form.post('/dump/post')
+    },
+    resetAll() {
+      this.form.reset()
+    },
+    clearEmail() {
+      this.form.email = ''
+    },
+    setEmail() {
+      this.form.email = '[email protected]'
+    },
+  },
+}
+</script>
+
+<template>
+  <div>
+    <label>
+      Email
+      <input type="text" id="email" name="email" v-model="form.email" />
+    </label>
+    <span class="email-value">{{ form.email }}</span>
+    <label>
+      Password
+      <input type="password" id="password" name="password" v-model="form.password" />
+    </label>
+    <span class="password-value">{{ form.password }}</span>
+    <label>
+      Remember Me
+      <input type="checkbox" id="remember" name="remember" v-model="form.remember" />
+    </label>
+    <span class="remember-value">{{ form.remember }}</span>
+
+    <button @click="submit" class="submit">Submit form</button>
+    <button @click="resetAll" class="reset">Reset all data</button>
+    <button @click="clearEmail" class="clear-email">Clear email</button>
+    <button @click="setEmail" class="set-email">Set email programmatically</button>
+
+    <span class="dirty-status">Form is {{ form.isDirty ? '' : 'not ' }}dirty</span>
+    <span class="processing-status">Form is {{ form.processing ? '' : 'not ' }}processing</span>
+  </div>
+</template>

tests/form-helper.spec.ts

@@ -1024,3 +1024,80 @@ test.describe('React', () => {
     await expect(page.locator('#effect-count')).toHaveText('Effect count: 2')
   })
 })
+
+test.describe('Vue Options API', () => {
+  test.skip(process.env.PACKAGE !== 'vue3', 'Only for Vue')
+
+  test.beforeEach(async ({ page }) => {
+    pageLoads.watch(page)
+    await page.goto('/form-helper/options-api')
+  })
+
+  test('can set default form values', async ({ page }) => {
+    await expect(page.locator('#email')).toHaveValue('[email protected]')
+    await expect(page.locator('#password')).toHaveValue('')
+    await expect(page.locator('#remember')).not.toBeChecked()
+    await expect(page.locator('.email-value')).toHaveText('[email protected]')
+  })
+
+  test('v-model two-way binding works', async ({ page }) => {
+    await expect(page.locator('#email')).toHaveValue('[email protected]')
+    await expect(page.locator('.email-value')).toHaveText('[email protected]')
+
+    await page.fill('#email', '[email protected]')
+
+    await expect(page.locator('#email')).toHaveValue('[email protected]')
+    await expect(page.locator('.email-value')).toHaveText('[email protected]')
+    await expect(page.locator('.dirty-status')).toHaveText('Form is dirty')
+
+    await page.check('#remember')
+    await expect(page.locator('#remember')).toBeChecked()
+    await expect(page.locator('.remember-value')).toHaveText('true')
+  })
+
+  test('can programmatically update form fields', async ({ page }) => {
+    await expect(page.locator('#email')).toHaveValue('[email protected]')
+
+    await page.getByRole('button', { name: 'Set email programmatically' }).click()
+
+    await expect(page.locator('#email')).toHaveValue('[email protected]')
+    await expect(page.locator('.email-value')).toHaveText('[email protected]')
+    await expect(page.locator('.dirty-status')).toHaveText('Form is dirty')
+  })
+
+  test('can clear form fields', async ({ page }) => {
+    await expect(page.locator('#email')).toHaveValue('[email protected]')
+
+    await page.getByRole('button', { name: 'Clear email' }).click()
+
+    await expect(page.locator('#email')).toHaveValue('')
+    await expect(page.locator('.email-value')).toHaveText('')
+    await expect(page.locator('.dirty-status')).toHaveText('Form is dirty')
+  })
+
+  test('can reset form to initial values', async ({ page }) => {
+    await page.fill('#email', '[email protected]')
+    await expect(page.locator('.dirty-status')).toHaveText('Form is dirty')
+
+    await page.getByRole('button', { name: 'Reset all data' }).click()
+
+    await expect(page.locator('#email')).toHaveValue('[email protected]')
+    await expect(page.locator('.email-value')).toHaveText('[email protected]')
+    await expect(page.locator('.dirty-status')).toHaveText('Form is not dirty')
+  })
+
+  test('can submit form', async ({ page }) => {
+    await page.fill('#email', '[email protected]')
+    await page.fill('#password', 'secret123')
+    await page.check('#remember')
+
+    await page.getByRole('button', { name: 'Submit form' }).click()
+
+    const dump = await shouldBeDumpPage(page, 'post')
+
+    await expect(dump.method).toEqual('post')
+    await expect(dump.form.email).toEqual('[email protected]')
+    await expect(dump.form.password).toEqual('secret123')
+    await expect(dump.form.remember).toEqual(true)
+  })
+})