Testing Vue components

Todo.spec.js

import { shallow } from 'vue-test-utils'
import sinon from 'sinon'
import Todo from '@/components/Todo'

describe('Todo.vue', () => {
  /**
   * Test will check if the name of the component is todo.
   */
  it('Is called todo', () => {
    // Initialize the test.
    const wrapper = shallow(Todo);

    // Assert result
    expect(wrapper.name()).to.equal('todo');
  });

  /**
   * Test which will check if the remove-event
   * will be fired when the button has been clicked.
   */
  it('Emits the remove event', () => {
    // Initialize the test.
    const listener = sinon.spy();
    const wrapper = shallow(Todo);
    wrapper.setMethods({
      $emit: listener,
    });

    // Click the button.
    wrapper.find('button').trigger('click');

    // Assert result
    expect(listener.calledWith('remove'));
  });

  /**
   * Test which will check if the toggle-event
   * will be fired when the component has been clicked.
   */
  it('Emits the toggle event', () => {
    // Initialize the test.
    const listener = sinon.spy();
    const wrapper = shallow(Todo);
    wrapper.setMethods({
      $emit: listener,
    });

    // Click the component.
    wrapper.trigger('click');

    // Assert result
    expect(listener.calledWith('toggle'));
  });

  /**
   * Test which will check if the remove-method
   * will be called when the button has been clicked.
   */
  it('Calls the remove method', () => {
    // Initialize the test.
    const listener = sinon.spy();
    const wrapper = shallow(Todo);
    wrapper.setMethods({
      remove: listener,
    });

    // Click the button.
    wrapper.find('button').trigger('click');

    // Assert result
    expect(listener.called);
  });

  /**
   * Test which will check if the toggle-method
   * will be called when the component has been clicked.
   */
  it('Calls the toggle method', () => {
    // Initialize the test.
    const listener = sinon.spy();
    const wrapper = shallow(Todo);
    wrapper.setMethods({
      toggle: listener,
    });

    // Click the button.
    wrapper.trigger('click');

    // Assert result
    expect(listener.called);
  });

  /**
   * Test which will check if the disabled-class
   * will be applied when setting the isFinished-prop
   * to true.
   */
  it('Applies the disabled class', () => {
    // Initialize the test.
    const wrapper = shallow(Todo, {
      propsData: {
        isFinished: true,
      },
    });

    // Assert result
    expect(wrapper.hasClass('disabled'));
  });

  /**
   * Test which will check, when the prop content
   * is applied, the content will be shown in the
   * component.
   */
  it('Applies the content from a property', () => {
    // Initialize the test.
    const content = 'Hello World!';
    const wrapper = shallow(Todo, {
      propsData: {
        content
      },
    });

    // Assert result
    expect(wrapper.text()).contains(content);
  });

  /**
   * Test which will check, when the slot
   * is applied, the content will be shown in the
   * component.
   */
  it('Applies the content from a slot', () => {
    // Initialize the test.
    const content = 'Hello World!';
    const wrapper = shallow(Todo, {
      slots: {
        default: `<div>${content}</div>`
      }
    });

    // Assert result
    expect(wrapper.text()).contains(content);
  });
});

Todo.vue

<template>
  <div
    class="list-group-item list-group-item-action"
    :class="{ 'disabled': isFinished }"
    @click.stop="toggle"
  >
    <div class="d-flex align-items-center justify-content-between">
      <div>
        <slot>{{ content }}</slot>
      </div>
      <button
        class="btn btn-danger"
        @click.stop="remove"
      >Remove</button>
    </div>
  </div>
</template>
<script>
  export default {
    /**
     * The name of the component.
     */
    name: 'todo',

    /**
     * The props this component can use.
     */
    props: {
      /**
       * The content to be displayed.
       */
      content: {
        required: false,
        type: String,
      },

      /**
       * If the todo item is finished.
       */
      isFinished: {
        required: false,
        type: Boolean,
      },
    },

    /**
     * The methods this component can use.
     */
    methods: {
      /**
       * Will emit the remove event.
       */
      remove() {
        this.$emit('remove');
      },

      /**
       * Will emit the toggle event.
       */
      toggle() {
        this.$emit('toggle');
      },
    }
  };
</script>