Using Vue Dev Tools and Testing Your SPA Chapter 12This test would then equate to true or false. Unit tests are generally written in
conjunction with components themselves, allowing components to be reused and tested in
isolation. This allows you to check that external factors have no bearing on the output of
your tests.
Most command-line JavaScript testing libraries will integrate with Vue.js; there is a great
list available in the awesome Vue GitHub repository (https://github.com/vuejs/
awesome-vue#test).
Browser automation
The alternative to using command-line unit testing is to automate your browser with a
testing suite. This kind of testing is still triggered via the command line, but rather than
integrating directly with your Vue application, it opens the page in the browser and
interacts with it like a user would. A popular tool for doing this is Nightwatch.js (http:/
/nightwatchjs.org/).
You may use this suite for opening your shop and interacting with the filtering component
or product list ordering and comparing the result. The tests are written in very colloquial
English and are not restricted to being on the same domain name or file network as the site
to be tested. The library is also language agnostic – working for any website regardless of
what it is built with.
The example Nightwatch.js gives on their website is for opening Google and ensuring
the first result of a Google search for rembrandt van rijn is the Wikipedia entry:
module.exports = {
'Demo test Google' : function (client) {
client
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.assert.title('Google')
.assert.visible('input[type=text]')
.setValue('input[type=text]', 'rembrandt van rijn')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.pause(1000)
.assert.containsText('ol#rso li:first-child',
'Rembrandt - Wikipedia')
.end();
}
};