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