It's TDD time. Let's write more tests into RegisterPage.spec.js. The tests we need to create include the following:

• Test the initial values of the data model
• Test the binding between the form input fields and the data model
• Test the existence of the event handler of the form

Including the previous test, which is used to verify the form's rendering, we will have four tests in this specification. It's time to do some refactoring to the test specification itself. As mentioned earlier, we will also use vue-test-utils, the official unit testing utility library for Vue.js. Let's use the following command to install the library before we start the refactoring:

npm install @vue/test-utils --save-dev

Once that is done, let's refactor RegisterPage.spec.js to the following:

1.  import { mount } from '@vue/test-utils'
2.  import RegisterPage from '@/views/RegisterPage'
3. 
4.  describe('RegisterPage.vue', () => {
5.    let wrapper
6.    let fieldUsername
7.    let fieldEmailAddress
8.    let fieldPassword
9.    let buttonSubmit
10.
11.   beforeEach(() => {
12.     wrapper = mount(RegisterPage)
13.     fieldUsername = wrapper.find('#username')
14.     fieldEmailAddress = wrapper.find('#emailAddress')
15.     fieldPassword = wrapper.find('#password')
16.     buttonSubmit = wrapper.find('form button[type="submit"]')
17.   })
18.
19.   it('should render registration form', () => {
20.     expect(wrapper.find('.logo').attributes().src)
21.       .toEqual('/static/images/logo.png')
22.     expect(wrapper.find('.tagline').text())
23.       .toEqual('Open source task management tool')
24.     expect(fieldUsername.element.value).toEqual('')
25.     expect(fieldEmailAddress.element.value).toEqual('')
26.     expect(fieldPassword.element.value).toEqual('')
27.     expect(buttonSubmit.text()).toEqual('Create account')
28.   })
29.})

As you can see, in line 1, we import the mount function from vue-test-utils. This mount function will create a Wrapper object that contains the mounted and rendered RegisterPage.vue component, as you will see in line 12. From line 5 to line 9, we create variables that we need to initialize and use in the tests. From line 11 to line 17, we add beforeEach() to initialize the variables before each test in RegisterPage.spec.js. In this way, we can be sure that these variables will not be affected by the other tests in this specification file. wrapper.find() is the API of vue-test-utils for finding HTML elements that match the selector. The result of this API is also a Wrapper object, which can be used to retrieve what we need from the HTML element that it wraps. Between line 20 to line 27, we replace the old vm.$el.querySelector with the APIs of the Wrapper object. We can use wrapper.element to access the root HTMLElement of this wrapper, and we can use wrapper.text() to return the text content of a wrapper and use wrapper.attributes() to get the attributes of the DOM node.

Now, let's run the test again using the npm run test:unit command to make sure we still have a green result after refactoring. As you should see, everything looks good. Let's start to add the other three new tests.

The first one is to test the initial values of the data model, which look like the following:

it('should contain data model with initial values', () => {
  expect(wrapper.vm.form.username).toEqual('')
  expect(wrapper.vm.form.emailAddress).toEqual('')
  expect(wrapper.vm.form.password).toEqual('')
})

As you can see, we access the Vue instance through wrapper.vm, and from there we can access all of the methods and properties of the wrapped vm. As you can see, we access the username, emailAddress, and password properties through wrapper.vm.form to verify that they are all initialized with an empty string.

The next test is to verify the data model binding with the form's inputs. Here is how the test looks:

it('should have form inputs bound with data model', () => {
  const username = 'sunny'
  const emailAddress = 'sunny@local'
  const password = 'VueJsRocks!'

  wrapper.vm.form.username = username
  wrapper.vm.form.emailAddress = emailAddress
  wrapper.vm.form.password = password
  expect(fieldUsername.element.value).toEqual(username)
  expect(fieldEmailAddress.element.value).toEqual(emailAddress)
  expect(fieldPassword.element.value).toEqual(password)
})

As you can see, at the beginning of the test, we assign new values to those three fields in the data model. With the bindings, those fields should get updated respectively. We can verify that by checking the values of these input fields to see whether they match those we assign to the data model.

The last test that we need to add is to check the existence of the submit handler. The test looks like this:

it('should have form submit event handler `submitForm`', () => {
  const stub = jest.fn()
  wrapper.setMethods({submitForm: stub})
  buttonSubmit.trigger('submit')
  expect(stub).toBeCalled()
})

As you can see, we create stub using Jest and then replace the original submit handler, submitForm, with this stub by using the wrapper's setMethods() API. Then, we use buttonSubmit to trigger the submit event and then verify that stub has been called.

Now, our tests are ready. Let's implement the features that have been tested in RegisterPage.vue to make the tests pass.