Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Using Vue Dev Tools and Testing Your SPA Chapter 12

The left-hand panel again lists the name of the event and the time it occurred. The right

panel contains information about the event, including its component origin and payload.
This data allows you to ensure the event data is as you expected it to be and, if not, helps

you locate where the event is being triggered.

The Vue dev tools are invaluable, especially as your JavaScript application gets bigger and
more complex. Open the shop SPA we developed and inspect the various components and

Vuex data to get an idea of how this tool can help you create applications that only commit
mutations they need to and emit the events they have to.

Testing your SPA

The majority of Vue testing suites revolve around having command-line knowledge and
creating a Vue application using the CLI (command-line interface). Along with creating

applications in frontend-compatible JavaScript, Vue also has a CLI that allows you to create

applications using component-based files. These are files with a .vue extension and contain

the template HTML along with the JavaScript required for the component. They also allow

you to create scoped CSS – styles that only apply to that component. If you chose to create

your app using the CLI, all of the theory and a lot of the practical knowledge you have

learned in this book can easily be ported across.

Command-line unit testing

Along with component files, the Vue CLI allows you to integrate with command-line unit

tests easier, such as Jest, Mocha, Chai, and TestCafe (https:/​/​testcafe.​devexpress.​com/​).

For example, TestCafe allows you to specify several different tests, including checking

whether content exists, to clicking buttons to test functionality. An example of a TestCafe
test checking to see if our filtering component in our first app contains the work Field

would be:

test('The filtering contains the word "filter"', async testController => {

const filterSelector = await new Selector('body > #app > form >

label:nth-child(1)');

await testController.expect(paragraphSelector.innerText).eql('Filter');

});