As a matter of fact, the invalid data that we use isn't the primary issue in the test. The actual problem is that the verifications/assertions we add in the test are not evaluated by Jest in time. And hence the tests that we think have passed based on the result from Jest might actually have failed without us noticing. These tests become malfunctioning mini QA robots and will affect the health of our application. As you might have noticed, this kind of issue only happens when there is an asynchronous execution involved.

Another issue in our test is that we jumped to verify the redirection to the login page, which is one of the two possible final results of the submitForm() method, by skipping the verification of whether or not the registrationService.register() method has been invoked. To write a stronger test, instead of rushing to check the final result, we should verify the behavior of the dependencies of the submitForm() method accordingly, so that we can be sure the implementation of the submitMethod() method is correct. The implementation of our  submitForm() method is relatively straightforward. Imagine there was a very complex implementation and there is a chance that the redirection might still happen without the register() method being invoked. In our old test method, the mini QA robot would still naively think that the registration had succeeded, leaving a major bug in the application when shipped to production.

Now, we've found the issues in our test. Let's fix them by making the following changes to RegisterPage.spec.js:

...
describe('RegisterPage.vue', () => {
  ...
  let registerSpy

  beforeEach(() => {
    ...
    // Create spy for registration service
    registerSpy = jest.spyOn(registrationService, 'register')
  })

  afterEach(() => {
    registerSpy.mockReset()
    registerSpy.mockRestore()
  })
  ...
})

As you can see, we move registerSpy  to the test suite level so that all of the tests in this specification can use it. We use beforeEach() and afterEach() to instantiate it and reset it for each test method. In this way, we can add expectations to the following two tests:

it('should register when it is a new user', async () => {
  expect.assertions(2)
  ... 
  wrapper.vm.submitForm()
  expect(registerSpy).toBeCalled()
  await wrapper.vm.$nextTick()
  expect(stub).toHaveBeenCalledWith({name: 'LoginPage'})
})

it('should fail it is not a new user', async () => {
  expect.assertions(3)
  expect(wrapper.find('.failed').isVisible()).toBe(false)
  ...
  wrapper.vm.submitForm()
  expect(registerSpy).toBeCalled()
  await wrapper.vm.$nextTick()
  expect(wrapper.find('.failed').isVisible()).toBe(true)
})

With this refactoring and improvement, our test is much stronger, since it verifies the behavior of the register() method. 

And beside the test, it should fail when the email address is invalid, let's also add the following two tests to make sure invalid data won't pass the validation:

• It should fail when the username is invalid
• It should fail when the password is invalid

Now, let's run the unit test with npm run test:unit to see how things work. You should see a result like the following:

Test Suites: 3 passed, 3 total
Tests:       12 passed, 12 total

There is one last data validation related change we need to make to the register page, which is to show the validation error of each field in the UI. We won't go into the details of that. If you're interested, check the committed code on GitHub for details.

By now, we've finished the frontend of the register page. Let's run the mvn clean install command. As you shall see, all tests have passed, and the following is the commit record: