| commit | author | age | ||
| 2fa8ab | 1 | import { shallow, mount, createLocalVue } from "@vue/test-utils"; |
| A | 2 | import Vuex from "vuex"; |
| 111f2f | 3 | import TodoItem from "@/components/TodoItem.vue"; |
| A | 4 | // import { expect } from 'chai' |
| 5 | ||
| 9d6970 | 6 | import * as all from "../setup.js"; |
| 2fa8ab | 7 | |
| A | 8 | const localVue = createLocalVue(); |
| 9 | ||
| 10 | localVue.use(Vuex); | |
| 111f2f | 11 | |
| 8a2c1e | 12 | const todoItem = { |
| D | 13 | title: "Love Front End testing :)", |
| 14 | completed: true | |
| 15 | }; | |
| 16 | ||
| 111f2f | 17 | describe("TodoItem.vue", () => { |
| A | 18 | it("has the expected html structure", () => { |
| 2fa8ab | 19 | const wrapper = shallow(TodoItem, { |
| A | 20 | propsData: { todoItem } |
| 111f2f | 21 | }); |
| A | 22 | expect(wrapper.element).toMatchSnapshot(); |
| 23 | }); | |
| 2fa8ab | 24 | |
| 8a2c1e | 25 | it("Renders title as 'Love Front End testing :)'", () => { |
| 2fa8ab | 26 | const wrapper = shallow(TodoItem, { |
| A | 27 | propsData: { todoItem } |
| 7a7144 | 28 | }); |
| 8a2c1e | 29 | expect(wrapper.vm.todoItem.title).toMatch("Love Front End testing :)"); |
| 7a7144 | 30 | }); |
| 2fa8ab | 31 | |
| 7a7144 | 32 | it("Renders completed as true", () => { |
| 2fa8ab | 33 | const wrapper = shallow(TodoItem, { |
| A | 34 | propsData: { todoItem } |
| 7a7144 | 35 | }); |
| A | 36 | expect(wrapper.vm.todoItem.completed).toEqual(true); |
| 37 | }); | |
| 8a2c1e | 38 | }); |
| 2fa8ab | 39 | |
| 8a2c1e | 40 | let importantTodo; |
| 2fa8ab | 41 | let methods; |
| A | 42 | |
| 8a2c1e | 43 | describe("Important Flag button ", () => { |
| D | 44 | beforeEach(() => { |
| 45 | importantTodo = { | |
| 46 | title: "Love Front End testing :)", | |
| 47 | completed: true, | |
| 48 | important: true | |
| 49 | }; | |
| 2fa8ab | 50 | methods = { markImportant: jest.fn() }; |
| 8a2c1e | 51 | }); |
| 111f2f | 52 | |
| 8a2c1e | 53 | it("should render a button with important flag", () => { |
| D | 54 | const wrapper = mount(TodoItem, { |
| 55 | propsData: { todoItem: importantTodo } | |
| 56 | }); | |
| 991fcf | 57 | // TODO - test goes here! |
| 8a2c1e | 58 | expect(wrapper.find(".important-flag").exists()).toBe(true); |
| D | 59 | }); |
| 60 | it("should set the colour to red when true", () => { | |
| 61 | const wrapper = mount(TodoItem, { | |
| 62 | propsData: { todoItem: importantTodo } | |
| 63 | }); | |
| 991fcf | 64 | // TODO - test goes here! |
| 8a2c1e | 65 | expect(wrapper.find(".red-flag").exists()).toBe(true); |
| D | 66 | }); |
| 67 | it("should set the colour to not red when false", () => { | |
| 2fa8ab | 68 | importantTodo.important = false; |
| 8a2c1e | 69 | const wrapper = mount(TodoItem, { |
| D | 70 | propsData: { todoItem: importantTodo } |
| 71 | }); | |
| 991fcf | 72 | // TODO - test goes here! |
| 8a2c1e | 73 | expect(wrapper.find(".red-flag").exists()).toBe(false); |
| D | 74 | }); |
| 2fa8ab | 75 | |
| A | 76 | it("call makImportant when clicked", () => { |
| 77 | const wrapper = mount(TodoItem, { | |
| 78 | methods, | |
| 79 | propsData: { todoItem: importantTodo } | |
| 80 | }); | |
| 991fcf | 81 | // TODO - test goes here! |
| 2fa8ab | 82 | const input = wrapper.find(".important-flag"); |
| A | 83 | input.trigger("click"); |
| 84 | expect(methods.markImportant).toHaveBeenCalled(); | |
| 8a2c1e | 85 | }); |
| 111f2f | 86 | }); |
