Add form use cases

Author: afontcu

tests/__tests__/components/Signup.vue

@@ -8,6 +8,7 @@
         data-testid="username-input"
         placeholder="Username..."
         name="username" >
+
       <label id="password-label">Password</label>
       <input
         v-model="password"
@@ -16,6 +17,29 @@
         name="password"
         aria-labelledby="password-label"
       >
+
+      <label id="about-me">About Me</label>
+      <textarea
+        v-model="about"
+        name="about-me"
+        aria-labelledby="about-me"
+      />
+
+      <label for="preference-select">I prefer...</label>
+      <select
+        id="preference-select"
+        v-model="selected"
+        name="preference-select"
+      >
+        <option
+          disabled
+          value=""
+        />
+        <option>Dogs</option>
+        <option>Cats</option>
+        <option>None of the above</option>
+      </select>
+
       <label id="remember-me-label">Remember Me</label>
       <input
         id="remember-me"
@@ -24,31 +48,42 @@
         name="remember-me"
         aria-labelledby="remember-me-label"
       >
-      <button type="submit">Submit</button>
+
+      <button
+        :disabled="submitDisabled"
+        type="submit"
+      >
+        Submit
+      </button>
     </form>
   </div>
 </template>
 
 <script>
 export default {
-  props: {
-    onSubmit: {
-      type: Function,
-      required: true
-    }
-  },
   data () {
     return {
       username: '',
       password: '',
+      about: '',
+      selected: '',
       rememberMe: false
     }
   },
+  computed: {
+    submitDisabled () {
+      return !this.username || !this.password || !this.about || !this.selected
+    }
+  },
   methods: {
     submit () {
-      this.onSubmit({
+      if (this.submitDisabled) return
+
+      this.$emit('submit', {
         username: this.username,
         password: this.password,
+        about: this.about,
+        selected: this.selected,
         rememberMe: this.rememberMe
       })
     }

tests/__tests__/signup.js

@@ -1,33 +1,47 @@
 import { render, fireEvent } from '@testing-library/vue'
-import Login from './components/Login'
+import 'jest-dom/extend-expect'
+import Signup from './components/Signup'
 
-test('login form submits', async () => {
-  const fakeUser = { username: 'jackiechan', password: 'hiya! 🥋', rememberMe: true }
-  const handleSubmit = jest.fn()
-  const { getByLabelText, getByText } = render(
-    Login, { props: { onSubmit: handleSubmit } }
-  )
+test('signup form submits', async () => {
+  const fakeUser = {
+    username: 'jackiechan',
+    password: 'hiya! 🥋',
+    about: 'Lorem ipsum dolor sit amet',
+    selected: 'None of the above',
+    rememberMe: true
+  }
 
-  const submitButtonNode = getByText('Submit')
+  const { getByLabelText, getByText, emitted } = render(Signup)
+
+  const submitButton = getByText('Submit')
+
+  // Initially the form should be disabled
+  expect(submitButton).toBeDisabled()
 
   const userNameInput = getByLabelText('Username')
   await fireEvent.update(userNameInput, fakeUser.username)
 
   const passwordInput = getByLabelText('Password')
   await fireEvent.update(passwordInput, fakeUser.password)
 
+  const aboutMeTextarea = getByLabelText('About Me')
+  await fireEvent.update(aboutMeTextarea, fakeUser.about)
+
   const rememberMeInput = getByLabelText('Remember Me')
-  await fireEvent.update(rememberMeInput, true)
+  await fireEvent.update(rememberMeInput, fakeUser.rememberMe)
+
+  const preferenceSelect = getByLabelText('I prefer...')
+  await fireEvent.update(preferenceSelect, fakeUser.selected)
 
   // NOTE: in jsdom, it's not possible to trigger a form submission
   // by clicking on the submit button. This is really unfortunate.
   // So the next best thing is to fireEvent a submit on the form itself
   // then ensure that there's a submit button.
-  await fireEvent.click(submitButtonNode)
+  expect(submitButton).toBeEnabled()
+  expect(submitButton).toHaveAttribute('type', 'submit')
+  await fireEvent.click(submitButton)
 
-  // Assert
-  expect(handleSubmit).toHaveBeenCalledTimes(1)
-  expect(handleSubmit).toHaveBeenCalledWith(fakeUser)
-  // make sure the form is submittable
-  expect(submitButtonNode.type).toBe('submit')
+  // Assert event has been emitted.
+  expect(emitted().submit).toHaveLength(1)
+  expect(emitted().submit[0]).toEqual([ fakeUser ])
 })