As mentioned earlier, the implementation of the submitForm() method depends on registrationService, which is not our focus right now; we will simply create a blank implementation of the service. The following is how frontend/src/services/registration/index.js looks:

export default {
  register (detail) {
    return new Promise((resolve, reject) => {
      resolve()
    })
  }
}

As you can see, it is just a placeholder, which is already good enough for us to implement the submitForm() method and get those tests to pass.

The following is the change we make to RegisterPage.vue:

<template>
  ...
  <form @submit.prevent="submit">
    <div v-show="errorMessage" class="alert alert-danger failed">{{ 
    errorMessage }}</div>
    ...
  </form>
  ...
</template>

<script>
import registrationService from '@/services/registration'

export default {
  name: 'RegisterPage',
  data: function () {
    return {
      ...
      errorMessage: ''
    }
  },
  methods: {
    submitForm () {
      // TODO: Validate the data
      registrationService.register(this.form).then(() => {
        this.$router.push({name: 'LoginPage'})
      }).catch((error) => {
        this.errorMessage = 'Failed to register user. Reason: ' +
          (error.message ? error.message : 'Unknown') + '.'
      })
    }
  }
}
</script>

As you can see, inside the <form> tag, we add a <div> tag to display the error message, which will be highlighted with Bootstrap's .alert-danger class. The visibility of the error message is controlled by vm.errorMessage, which we defined in the data model.

Inside the submitForm() method, for now, we pass the registration details, vm.form, to registrationService. When the registration succeeds, we will redirect the user. When it fails, we will show the error message. That's all we need to write to make the tests pass. After running the npm run test:unit command, you should see all of the tests have passed.

Let's move on to the next part of implementing our registration process in the frontend, which is implementing the registrationService.register() method.