test: add login unit test

.editorconfig

@@ -1,4 +1,4 @@
-[*.{js,css,sass,scss,json,coffee,vue,html}]
+[*.{js,ts,css,sass,scss,json,coffee,vue,html}]
 indent_style = space
 indent_size = 2
 

resources/assets/js/components/auth/LoginForm.spec.ts

@@ -0,0 +1,37 @@
+import { mockHelper, render } from '@/__tests__/__helpers__'
+import { cleanup, fireEvent } from '@testing-library/vue'
+import { beforeEach, expect, it } from 'vitest'
+import { userStore } from '@/stores'
+import LoginFrom from './LoginForm.vue'
+import Btn from '@/components/ui/Btn.vue'
+
+beforeEach(() => {
+  mockHelper.restoreAllMocks()
+  cleanup()
+})
+
+it('renders', () => expect(render(LoginFrom, {
+  global: {
+    stubs: {
+      Btn
+    }
+  }
+}).html()).toMatchSnapshot())
+
+it('triggers login when submitted', async () => {
+  const mock = mockHelper.mock(userStore, 'login')
+
+  const { getByTestId, getByPlaceholderText } = render(LoginFrom, {
+    global: {
+      stubs: {
+        Btn
+      }
+    }
+  })
+
+  await fireEvent.update(getByPlaceholderText('Email Address'), '[email protected]')
+  await fireEvent.update(getByPlaceholderText('Password'), 'secret')
+  await fireEvent.submit(getByTestId('login-form'))
+
+  expect(mock).toHaveBeenCalledWith('[email protected]', 'secret')
+})

resources/assets/js/components/auth/LoginForm.vue

@@ -5,7 +5,7 @@
     </div>
     <input v-model="email" autofocus placeholder="Email Address" required type="email">
     <input v-model="password" placeholder="Password" required type="password">
-    <btn type="submit">Log In</btn>
+    <Btn type="submit">Log In</Btn>
   </form>
 </template>
 
@@ -53,19 +53,19 @@ const login = async () => {
  */
 @keyframes shake {
   8%, 41% {
-    -webkit-transform: translateX(-10px);
+    transform: translateX(-10px);
   }
   25%, 58% {
-    -webkit-transform: translateX(10px);
+    transform: translateX(10px);
   }
   75% {
-    -webkit-transform: translateX(-5px);
+    transform: translateX(-5px);
   }
   92% {
-    -webkit-transform: translateX(5px);
+    transform: translateX(5px);
   }
   0%, 100% {
-    -webkit-transform: translateX(0);
+    transform: translateX(0);
   }
 }
 

resources/assets/js/components/auth/__snapshots__/LoginForm.spec.ts.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1
+
+exports[`renders 1`] = `
+"<form class=\\"\\" data-testid=\\"login-form\\" data-v-7d840a46=\\"\\">
+  <div class=\\"logo\\" data-v-7d840a46=\\"\\"><img alt=\\"Koel&#x27;s logo\\" src=\\"/resources/assets/img/logo.svg\\" width=\\"156\\" data-v-7d840a46=\\"\\" /></div><input autofocus=\\"\\" placeholder=\\"Email Address\\" required=\\"\\" type=\\"email\\" data-v-7d840a46=\\"\\" /><input placeholder=\\"Password\\" required=\\"\\" type=\\"password\\" data-v-7d840a46=\\"\\" /><button type=\\"submit\\" data-v-27deb898=\\"\\" data-v-7d840a46=\\"\\">Log In</button>
+</form>"
+`;