feat(test): add UserEditForm tests

resources/assets/js/components/user/UserEditForm.spec.ts

@@ -0,0 +1,43 @@
+import { ref } from 'vue'
+import { expect, it } from 'vitest'
+import factory from '@/__tests__/factory'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import { UserKey } from '@/symbols'
+import { fireEvent, waitFor } from '@testing-library/vue'
+import { userStore } from '@/stores'
+import { alerts } from '@/utils'
+import UserEditForm from './UserEditForm.vue'
+
+new class extends UnitTestCase {
+  protected test () {
+    it('edits a user', async () => {
+      const updateMock = this.mock(userStore, 'update')
+      const alertMock = this.mock(alerts, 'success')
+
+      const user = ref(factory<User>('user', { name: 'John Doe' }))
+
+      const { getByLabelText, getByRole } = this.render(UserEditForm, {
+        global: {
+          provide: {
+            [UserKey]: [user]
+          }
+        }
+      })
+
+      await fireEvent.update(getByLabelText('Name'), 'Jane Doe')
+      await fireEvent.update(getByLabelText('Password'), 'new-password-duck')
+      await fireEvent.click(getByRole('button', { name: 'Update' }))
+
+      await waitFor(() => {
+        expect(updateMock).toHaveBeenCalledWith(user.value, {
+          name: 'Jane Doe',
+          email: user.value.email,
+          is_admin: user.value.is_admin,
+          password: 'new-password-duck'
+        })
+
+        expect(alertMock).toHaveBeenCalledWith('User profile updated.')
+      })
+    })
+  }
+}

resources/assets/js/components/user/UserEditForm.vue

@@ -8,22 +8,28 @@
 
       <main>
         <div class="form-row">
-          <label>Name</label>
+          <label>
-          <input v-model="updateData.name" v-koel-focus name="name" required title="Name" type="text">
+            Name
+            <input v-model="updateData.name" v-koel-focus name="name" required title="Name" type="text">
+          </label>
         </div>
         <div class="form-row">
-          <label>Email</label>
+          <label>
-          <input v-model="updateData.email" name="email" required title="Email" type="email">
+            Email
+            <input v-model="updateData.email" name="email" required title="Email" type="email">
+          </label>
         </div>
         <div class="form-row">
-          <label>Password</label>
+          <label>
-          <input
+            Password
-            v-model="updateData.password"
+            <input
-            autocomplete="new-password"
+              v-model="updateData.password"
-            name="password"
+              autocomplete="new-password"
-            placeholder="Leave blank for no changes"
+              name="password"
-            type="password"
+              placeholder="Leave blank for no changes"
-          >
+              type="password"
+            >
+          </label>
           <p class="help">Min. 10 characters. Should be a mix of characters, numbers, and symbols.</p>
         </div>
         <div class="form-row">