Implementing Tests

#

Yesterday, we discussed the importance of testing and some of the different types of unit testing libraries/suites that exist. Today, we'll begin to see unit testing in action.

As mentioned in the last article, we'll be using the Jest testing framework. One of the main advantages behind using Jest is its zero configuration set-up. The Getting Started guide in the Jest documentation shows us that we simply need to install the Jest package, create a .test.js or .spec.js file, and add a test script to the package.json file.

However, if we select the Jest suite as a dependancy we want in a Vue CLI scaffolded project - this set-up would already be prepared for us. We'll work within the test files of a project created with the Vue CLI that has the Jest testing suite installed.

Simplified TodoMVC

#

The app we’ll be running our tests for is a simplified version of the TodoMVC open source project. We’ll only test a simple single-file Vue component which will help us understand how units tests can be made in Vue.

Our simplified TodoMVC app will have three distinct features; an input to enter new todo items, a list of entered todo items, and the ability to remove a todo item from the list.

The single App.vue component file that makes up our app will look like the following:

<template>
  <div id="app">
    <section class="todoapp">
      <header class="header">
        <h1 class="title">todos</h1>
        <input
          class="new-todo"
          placeholder="What needs to be done?"
          v-model="newTodo"
          @keyup.enter="addTodo"
        />
      </header>
      <section class="main">
        <ul class="todo-list">
          <li class="todo"
            v-for="(todo, key) in todos"
            :key="key">
            <div class="view">
              <label>{{ todo }}</label>
              <button class="destroy"
                @click="removeTodo(todo)">
              </button>
            </div>
          </li>
        </ul>
      </section>
    </section>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      todos: [],
      newTodo: ""
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo !== "") {
        this.todos.push(this.newTodo);
        this.newTodo = "";
      }
    },
    removeTodo(todo) {
      this.todos.splice(this.todos.indexOf(todo), 1);
    }
  }
};
</script>

<style lang="css" src="./styles.css">
</style>

The <template> of the App component has the following details:

• The <header> element has a title of ‘todos’.
• The <header> has an input field that is bound to a newTodo data property. This input field listens for the keyup.enter event (i.e. the release of the enter key) and when triggered calls an addTodo method.
• Below the <header> exists a list of todo items displayed from a todos array stored in the components data. This list is rendered with the help of the v-for directive.

The <script> section of the component can be seen to have the following details:

• todos and newTodo is initialized with a blank array and empty string respectively. todos is the list of todo items displayed in the list and newTodo is the data property tied to the controlled input.
• In the methods property exists two methods - addTodo() and newTodo(). The addTodo() method first checks if the newTodo property isn’t blank and if not, it pushes the newTodo data value to the todos array before clearing newTodo back to an empty string.
• The removeTodo() method uses the Array splice() method to remove the intended todo item based on its index in the array.

The <style> tag has a src referenced from a styles.css file located within the src/ folder.

With the App component appropriately declared in the root Vue instance (in the src/main.js file), our application will allow us to add and remove todo items from a list of todos.

Live Version

Writing tests

#

The Vue CLI introduces a tests/ directory adjacent to the src/ directory for a scaffolded project that has either the 'Unit Testing' or 'E2E Testing' option selected during manual set-up.

testing-todo-mvc/
  README.md
  babel.config.js
  node_modules/
  package.json
  public/
  src/
  tests/

The tests/ directory will contain either the unit/ or e2e/ folders depending on which testing environment was selected during the Vue CLI set-up stage. In our case, only a tests/unit/ folder will be created which would contain an .eslintrc.js file and an example.spec.js file.

testing-todo-mvc/
  ...
  tests/
    unit/
      .eslintrc.js
      example.spec.js

The .eslintrc.js file is often used to configure ESLint rules within a particular directory or subdirectory. The .eslintrc.js file within our tests/unit folder simply declares the Jest framework as an environment our linter should recognize for any file within the tests/unit directory.

module.exports = {
  env: {
    jest: true
  }
}

Specifying jest: true in the env option will configure the linter to recognize the set of predefined global variables that exists within the Jest framework.