Template for TDD

donal

2018-04-16 78a403c450425ea86fad7df5737a4a53ed4c6714

Template for TDD

 src/components/TodoItem.vue

@@ -1,19 +1,15 @@
<template>
  <div>
    <div class="itemCardAndFlag">
    <md-list-item
      @click="markCompleted()"
      >
      <checkbox v-model="todoItem.completed" class="checkbox-completed"/> 

      <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"
        @click="markImportant()"
      <md-list-item
        @click="markCompleted()"
        >
        <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>
        <checkbox v-model="todoItem.completed" class="checkbox-completed"/> 

        <span class="md-list-item-text" :class="{'strike-through': todoItem.completed}">{{ todoItem.title }}</span>
      </md-list-item>
      <!-- TODO - SVG for use in Lab3 -->
      <!-- <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> -->
    </div>
  </div>
</template>
@@ -35,8 +31,6 @@
      console.info("INFO - Mark todo as completed ", this.todoItem.completed);
    },
    markImportant() {
      this.$store.dispatch("updateTodo", {id :this.todoItem._id, important: true} );
      console.info("INFO - Mark todo as important ", this.todoItem.important);
      // TODO - FILL THIS OUT IN THE LAB EXERCISE
    }
  }

 src/store/actions.js

@@ -98,14 +98,10 @@
  updateTodo({ commit, state }, { id, important }) {
    let i = state.todos.findIndex(todo => todo._id === id);
    if (important) {
      commit("MARK_TODO_IMPORTANT", i);
      // TODO - add commit imporant here!
    } else {
      commit("MARK_TODO_COMPLETED", i);
    }
    console.info(
      "TESTSY MC TESTFACES",
      config.todoEndpoint + "/" + state.todos[i]._id
    );
    // Fire and forget style backend update ;)
    return axios
      .put(config.todoEndpoint + "/" + state.todos[i]._id, state.todos[i])

 src/store/mutations.js

@@ -30,9 +30,5 @@
  MARK_TODO_COMPLETED(state, index) {
    console.log("INFO - MARK_TODO_COMPLETED");
    state.todos[index].completed = !state.todos[index].completed;
  },
  MARK_TODO_IMPORTANT(state, index) {
    console.log("INFO - MARK_TODO_IMPORTANT");
    state.todos[index].important = !state.todos[index].important;
  }
};

 tests/unit/javascript/actions.spec.js

@@ -123,15 +123,6 @@
      done();
    });
  });
  it("should call MARK_TODO_IMPORTANT", done => {
    const commit = sinon.spy();
    state.todos = todos;
    actions
      .updateTodo({ commit, state }, { id: 1, important: true })
      .then(() => {
        // TODO - test goes here!
        expect(commit.firstCall.args[0]).toBe("MARK_TODO_IMPORTANT");
        done();
      });
  });
  // TODO - test goes here!

});

 tests/unit/javascript/mutations.spec.js

@@ -91,15 +91,12 @@
  it("it should MARK_TODO_IMPORTANT as false", () => {
    state.todos = importantTodos;
    // TODO - test goes here!
    mutations.MARK_TODO_IMPORTANT(state, 0);
    expect(state.todos[0].important).toBe(false);

  });

  it("it should MARK_TODO_IMPORTANT as true", () => {
    state.todos = importantTodos;
    // TODO - test goes here!
    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

@@ -19,7 +19,7 @@
    const wrapper = shallow(TodoItem, {
      propsData: { todoItem }
    });
    expect(wrapper.element).toMatchSnapshot();
    // expect(wrapper.element).toMatchSnapshot();
  });

  it("Renders title as 'Love Front End testing :)'", () => {
@@ -55,14 +55,12 @@
      propsData: { todoItem: importantTodo }
    });
    // TODO - test goes here!
    expect(wrapper.find(".important-flag").exists()).toBe(true);
  });
  it("should set the colour to red when true", () => {
    const wrapper = mount(TodoItem, {
      propsData: { todoItem: importantTodo }
    });
    // TODO - test goes here!
    expect(wrapper.find(".red-flag").exists()).toBe(true);
  });
  it("should set the colour to not red when false", () => {
    importantTodo.important = false;
@@ -70,7 +68,6 @@
      propsData: { todoItem: importantTodo }
    });
    // TODO - test goes here!
    expect(wrapper.find(".red-flag").exists()).toBe(false);
  });

  it("call makImportant when clicked", () => {
@@ -79,8 +76,5 @@
      propsData: { todoItem: importantTodo }
    });
    // TODO - test goes here!
    const input = wrapper.find(".important-flag");
    input.trigger("click");
    expect(methods.markImportant).toHaveBeenCalled();
  });
});

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

File was deleted