The code we will write first is the unit test code. Practicing TDD can be hard if you haven't done it before. If you fight against it, it can be even harder, annoying, and a waste of time. However, with a simple mindset change and several rounds of practicing, you might see it as an extremely valuable technique, especially for Agile projects. We won't go into the details of the benefits of practicing TDD here because we're practicing it in this book and, hopefully, by the end of the journey, you can see the benefits yourselves. For now, just think of all of those unit test methods as mini QA robots that will help us check the health of the application every time we run the mvn clean install command. 

We will create the register page in the frontend/src/views/RegisterPage.vue file and the unit test code in the frontend/test/unit/RegisterPage.spec.js file. In this unit test, at this stage, we only need to verify the presence of registration form elements, including the logo, the tagline, three fields, and the submit button. The following is what RegisterPage.spec.js looks like:

import Vue from 'vue'
import RegisterPage from '@/views/RegisterPage'

describe('RegisterPage.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(RegisterPage)
    const vm = new Constructor().$mount()
    expect(vm.$el.querySelector('.logo').getAttribute('src'))
      .toEqual('/static/images/logo.png')
    expect(vm.$el.querySelector('.tagline').textContent)
      .toEqual('Open source task management tool')
    expect(vm.$el.querySelector('#username').value).toEqual('')
    expect(vm.$el.querySelector('#emailAddress').value).toEqual('')
    expect(vm.$el.querySelector('#password').value).toEqual('')
    expect(vm.$el.querySelector('form 
    button[type="submit"]').textContent)
      .toEqual('Create account')
  })
})

As you can see, similar to how to write the test in LoginPage.spec.js, we create a Vue subclass with RegisterPage.vue and mount it, and then verify the presence of the elements using the querySelector() API. This works fine for a simple test, like the one we have one. Later in this chapter, we will use the APIs offered by vue-test-utils to create more sophisticated tests.