Fix vee-validate tests

Author: afontcu

package.json

@@ -67,7 +67,7 @@
     "msw": "^0.21.2",
     "portal-vue": "^2.1.7",
     "typescript": "^3.8.3",
-    "vee-validate": "^2.2.15",
+    "vee-validate": "^4.0.0-beta.8",
     "vue": "^3.0.0",
     "vue-apollo": "^3.0.4",
     "vue-i18n": "^9.0.0-beta.4",

src/__tests__/components/Validate.vue

@@ -1,36 +1,35 @@
 <template>
-  <form>
-    <label id="username-label" for="username">Username</label>
+  <Form>
+    <Field :rules="validateEmail" name="email" as="input" type="email" />
 
-    <input
-      v-model="username"
-      v-validate="'required|email'"
-      placeholder="Username..."
-      name="username"
-      aria-labelledby="username-label"
-    />
+    <error-message name="email" data-testid="error-message" />
 
-    <span v-if="errors.has('username')" data-testid="username-errors">{{
-      errors.first('username')
-    }}</span>
-
-    <label id="password-label" for="password">Password</label>
-    <input
-      v-model="password"
-      placeholder="Password..."
-      type="password"
-      name="password"
-      aria-labelledby="password-label"
-    />
-    <button type="submit">Submit</button>
-  </form>
+    <button>Sign up</button>
+  </Form>
 </template>
 
 <script>
+import {Form, Field, ErrorMessage} from 'vee-validate'
+
 export default {
-  data: () => ({
-    username: '',
-    password: ''
-  })
+  name: 'VeeValidate',
+  components: {
+    Form,
+    Field,
+    ErrorMessage,
+  },
+  methods: {
+    validateEmail(value) {
+      if (!value) {
+        return 'This field is required'
+      }
+
+      if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
+        return 'This field must be a valid email'
+      }
+
+      return true
+    },
+  },
 }
 </script>

src/__tests__/validate-plugin.js

@@ -1,31 +1,22 @@
-test.todo('Your test suite must contain at least one test.')
-
-// // Notice this example is using vee-validate v2.X
-// import VeeValidate from 'vee-validate'
-// import '@testing-library/jest-dom'
-
-// import {render, fireEvent} from '@testing-library/vue'
-// import Validate from './components/Validate'
-
-// test('can validate using plugin', async () => {
-//   // The third argument of `render` is a callback function that receives the
-//   // Vue instance as a parameter. This way, we can register plugins such as
-//   // VeeValidate.
-//   const {getByPlaceholderText, queryByTestId, getByTestId} = render(
-//     Validate,
-//     {},
-//     vue => vue.use(VeeValidate, {events: 'blur'}),
-//   )
-
-//   // Assert error messages are not in the DOM when rendering the component.
-//   expect(queryByTestId('username-errors')).toBeNull()
-
-//   const usernameInput = getByPlaceholderText('Username...')
-//   await fireEvent.touch(usernameInput)
-
-//   // After "touching" the input (focusing and blurring), validation error
-//   // should appear.
-//   expect(getByTestId('username-errors')).toHaveTextContent(
-//     /the username field is required/i,
-//   )
-// })
+import '@testing-library/jest-dom'
+
+import {render, fireEvent} from '@testing-library/vue'
+import VeeValidate from './components/Validate'
+
+test('can validate using plugin', async () => {
+  const {findByText, getByRole, getByTestId} = render(VeeValidate)
+
+  // Assert error messages are not in the DOM when rendering the component.
+  expect(getByTestId('error-message')).toBeEmptyDOMElement()
+
+  const emailInput = getByRole('textbox')
+
+  await fireEvent.touch(emailInput)
+
+  await findByText('This field is required')
+
+  await fireEvent.update(emailInput, 'an invalid email')
+  await fireEvent.blur(emailInput)
+
+  await findByText('This field must be a valid email')
+})