WIP - Doing solution

donal

2018-04-12 8a2c1e24fc34f55d811e39cd123e49ab214eb7d2

WIP - Doing solution

 src/components/TodoItem.vue

@@ -8,10 +8,10 @@

      <span class="md-list-item-text" :class="{'strike-through': todoItem.completed}">{{ todoItem.title }}</span>
    </md-list-item>
      <md-button class="flag"
      <!-- TODO - Uncomment this as part of exercise3 -->
      <md-button class="important-flag"
        @click="markImportant()"
        >
        <!-- find a nice way to utilise svg fill property without doing it all inline -->
        <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>
    </div>
@@ -37,7 +37,6 @@
    markImportant() {
      console.info("INFO - Mark todo as important ", this.todoItem.important);
      // TODO - FILL THIS OUT IN THE LAB EXERCISE
      // this.todoItem.important = !this.todoItem.important;
    }
  }
};
@@ -66,7 +65,7 @@
  font-style: italic;
}

.flag {
.important-flag {
  height: 50px;
  margin: 0px;
}

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

@@ -5,7 +5,7 @@
import * as all from "../setup.js";

describe("Todo.vue", () => {
  it("should render like the snapshot", () => {
  it("should render the html layout like the snapshot (see /__snapshots__/Todo.spec.js.snap)", () => {
    const wrapper = shallow(Todo);
    expect(wrapper.element).toMatchSnapshot();
  });
@@ -17,4 +17,6 @@
    const wrapper = shallow(Todo);
    expect(wrapper.find(XofYItems)).toBeTruthy();
  });
  // NEW TEST GOES HERE
  
});

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

@@ -1,33 +1,31 @@
import { shallow } from "@vue/test-utils";
import { shallow, mount } from "@vue/test-utils";
import TodoItem from "@/components/TodoItem.vue";
// import { expect } from 'chai'

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

const todoItem = {
  title: "Love Front End testing :)",
  completed: true
};

describe("TodoItem.vue", () => {
  
  it("has the expected html structure", () => {
    const todoItem = {};
    const wrapper = shallow(TodoItem, { 
      propsData: { todoItem } 
    });
    expect(wrapper.element).toMatchSnapshot();
  });
  
  it("Renders title as 'TestTitle'", () => {
    const todoItem = {
      title: "TestTitle"
    };
  it("Renders title as 'Love Front End testing :)'", () => {
    const wrapper = shallow(TodoItem, { 
      propsData: { todoItem } 
    });
    expect(wrapper.vm.todoItem.title).toMatch("TestTitle");
    expect(wrapper.vm.todoItem.title).toMatch("Love Front End testing :)");
  });
  
  it("Renders completed as true", () => {
    const todoItem = {
      completed : true
    };
    const wrapper = shallow(TodoItem, { 
      propsData: { todoItem } 
    });
@@ -42,16 +40,6 @@
  //   expect(wrapper.vm.todoItem).toBe("undefined");
  // });
  
  it("Renders important as false", () => {
    const todoItem = {
      important : false
    };
    const wrapper = shallow(TodoItem, { 
      propsData: { todoItem } 
    });
    expect(wrapper.vm.todoItem.important).toEqual(false);
  });
  
  // it("renders props.placeholderMsg when passed", () => {
  //   const msg = "Add a Todo";
  //   const wrapper = shallow(NewTodo, {
@@ -65,6 +53,40 @@
  //   expect(wrapper.vm.newTodo).toMatch("");
  // });

  
});
let importantTodo;
describe("Important Flag button ", () => {
  beforeEach(() => {
    importantTodo = {
      title: "Love Front End testing :)",
      completed: true,
      important: true
    };
  });

  it("should render a button with important flag", () => {
    const wrapper = mount(TodoItem, {
      propsData: { todoItem: importantTodo }
    });
    expect(wrapper.find(".important-flag").exists()).toBe(true);
  });
  it("should set the colour to red when true", () => {
    const wrapper = mount(TodoItem, {
      propsData: { todoItem: importantTodo }
    });
    expect(wrapper.find(".red-flag").exists()).toBe(true);
  });
  it("should set the colour to not red when 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()
  });
});

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

@@ -5,3 +5,9 @@
  <!---->
</div>
`;

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