added tests for important button and flags

acammies

2018-04-13 2fa8ab7e834c36a080f5cce5b6eede1ba8bc8112

added tests for important button and flags

 src/components/TodoItem.vue

@@ -9,11 +9,11 @@
      <span class="md-list-item-text" :class="{'strike-through': todoItem.completed}">{{ todoItem.title }}</span>
    </md-list-item>
      <!-- TODO - Uncomment this as part of exercise3 -->
      <md-button class="important-flag"
      <!-- <md-button class="important-flag"
        @click="markImportant()"
        >
        <svg :class="{'red-flag': todoItem.important}"  height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" ><path d="M0 0h24v24H0z" fill="none"/><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/></svg>
      </md-button>
      </md-button> -->
    </div>
  </div>
</template>
@@ -31,7 +31,7 @@
  },
  methods: {
    markCompleted() {
      this.$store.dispatch("markTodoCompleted", this.todoItem._id);
      this.$store.dispatch("updateTodo", this.todoItem._id);
      console.info("INFO - Mark todo as completed ", this.todoItem.completed);
    },
    markImportant() {

 src/store/actions.js

@@ -91,7 +91,7 @@
    }
    //  2 return array of promises and resolve all
  },
  markTodoCompleted({ commit, state }, id) {
  updateTodo({ commit, state }, id) {
    let i = state.todos.findIndex(todo => todo._id === id);
    // todo - add back end
    axios

 tests/unit/javascript/mutations.spec.js

@@ -13,7 +13,12 @@
},{
    completed: false,
    title: "easy testing is fun"
}]
}];
const importantTodos = [{
    completed: true,
    title: "testing sucks",
    important: true
  }]

describe("Mutation tests", () => {
  beforeEach(() => {
@@ -77,4 +82,17 @@
    mutations.MARK_TODO_COMPLETED(state, 0);
    expect(state.todos[0].completed).toBe(true);
  });

  it("it should MARK_TODO_IMPORTANT as false", () => {
    state.todos = importantTodos;
    mutations.MARK_TODO_IMPORTANT(state, 0);
    expect(state.todos[0].important).toBe(false);
  });
  
  it("it should MARK_TODO_IMPORTANT as true", () => {
    state.todos = importantTodos;
    state.todos[0].important = false;
    mutations.MARK_TODO_IMPORTANT(state, 0);
    expect(state.todos[0].important).toBe(true);
  });
});

 tests/unit/vue-components/TodoItem.spec.js

@@ -1,8 +1,13 @@
import { shallow, mount } from "@vue/test-utils";
import { shallow, mount, createLocalVue } from "@vue/test-utils";
import Vuex from "vuex";
import TodoItem from "@/components/TodoItem.vue";
// import { expect } from 'chai'

import * as all from "../setup.js";

const localVue = createLocalVue();

localVue.use(Vuex);

const todoItem = {
  title: "Love Front End testing :)",
@@ -10,36 +15,35 @@
};

describe("TodoItem.vue", () => {
  
  it("has the expected html structure", () => {
    const wrapper = shallow(TodoItem, { 
      propsData: { todoItem } 
    const wrapper = shallow(TodoItem, {
      propsData: { todoItem }
    });
    expect(wrapper.element).toMatchSnapshot();
  });
  

  it("Renders title as 'Love Front End testing :)'", () => {
    const wrapper = shallow(TodoItem, { 
      propsData: { todoItem } 
    const wrapper = shallow(TodoItem, {
      propsData: { todoItem }
    });
    expect(wrapper.vm.todoItem.title).toMatch("Love Front End testing :)");
  });
  

  it("Renders completed as true", () => {
    const wrapper = shallow(TodoItem, { 
      propsData: { todoItem } 
    const wrapper = shallow(TodoItem, {
      propsData: { todoItem }
    });
    expect(wrapper.vm.todoItem.completed).toEqual(true);
  });

  // it("won't render additional props", () => {
  //   const biscuits = "digestives"
  //   const wrapper = shallow(TodoItem, { 
  //     propsData: { biscuits } 
  //   const wrapper = shallow(TodoItem, {
  //     propsData: { biscuits }
  //   });
  //   expect(wrapper.vm.todoItem).toBe("undefined");
  // });
  

  // it("renders props.placeholderMsg when passed", () => {
  //   const msg = "Add a Todo";
  //   const wrapper = shallow(NewTodo, {
@@ -52,9 +56,11 @@
  //   const wrapper = shallow(NewTodo, {});
  //   expect(wrapper.vm.newTodo).toMatch("");
  // });

});

let importantTodo;
let methods;

describe("Important Flag button ", () => {
  beforeEach(() => {
    importantTodo = {
@@ -62,6 +68,7 @@
      completed: true,
      important: true
    };
    methods = { markImportant: jest.fn() };
  });

  it("should render a button with important flag", () => {
@@ -77,16 +84,20 @@
    expect(wrapper.find(".red-flag").exists()).toBe(true);
  });
  it("should set the colour to not red when false", () => {
    importantTodo.important = false
    importantTodo.important = false;
    const wrapper = mount(TodoItem, {
      propsData: { todoItem: importantTodo }
    });
    expect(wrapper.find(".red-flag").exists()).toBe(false);
  });
  it("call the store when clicked", () => {
    // const wrapper = shallow(TodoItem, { methods , localVue})
    // const input = wrapper.find(".md-input");
    // input.trigger('keyup.enter')
    // expect(methods.newTodoAdded).toHaveBeenCalled()

  it("call makImportant when clicked", () => {
    const wrapper = mount(TodoItem, {
      methods,
      propsData: { todoItem: importantTodo }
    });
    const input = wrapper.find(".important-flag");
    input.trigger("click");
    expect(methods.markImportant).toHaveBeenCalled();
  });
});

 tests/unit/vue-components/__snapshots__/Todo.spec.js.snap

@@ -1,11 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Todo.vue should render like the snapshot 1`] = `
<div>
  <!---->
</div>
`;

exports[`Todo.vue should render the html layout like the snapshot (see /__snapshots__/Todo.spec.js.snap) 1`] = `
<div>
  <!---->