From 78a403c450425ea86fad7df5737a4a53ed4c6714 Mon Sep 17 00:00:00 2001
From: donal <donalspring@gmail.com>
Date: Mon, 16 Apr 2018 12:57:45 +0200
Subject: [PATCH] Template for TDD
---
tests/unit/vue-components/TodoItem.spec.js | 108 +++++++++++++++++++++++++++++------------------------
1 files changed, 59 insertions(+), 49 deletions(-)
diff --git a/tests/unit/vue-components/TodoItem.spec.js b/tests/unit/vue-components/TodoItem.spec.js
index 7a3e66b..ffdc0ab 100644
--- a/tests/unit/vue-components/TodoItem.spec.js
+++ b/tests/unit/vue-components/TodoItem.spec.js
@@ -1,70 +1,80 @@
-import { shallow } 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 :)",
+ completed: true
+};
+
describe("TodoItem.vue", () => {
-
it("has the expected html structure", () => {
- const todoItem = {};
- const wrapper = shallow(TodoItem, {
- propsData: { todoItem }
+ const wrapper = shallow(TodoItem, {
+ propsData: { todoItem }
});
- expect(wrapper.element).toMatchSnapshot();
+ // expect(wrapper.element).toMatchSnapshot();
});
-
- it("Renders title as 'TestTitle'", () => {
- const todoItem = {
- title: "TestTitle"
- };
- const wrapper = shallow(TodoItem, {
- propsData: { todoItem }
+
+ 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 }
+ 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 }
- // });
- // expect(wrapper.vm.todoItem).toBe("undefined");
- // });
-
- it("Renders important as false", () => {
- const todoItem = {
- important : false
+let importantTodo;
+let methods;
+
+describe("Important Flag button ", () => {
+ beforeEach(() => {
+ importantTodo = {
+ title: "Love Front End testing :)",
+ completed: true,
+ important: true
};
- const wrapper = shallow(TodoItem, {
- propsData: { todoItem }
- });
- expect(wrapper.vm.todoItem.important).toEqual(false);
+ methods = { markImportant: jest.fn() };
});
-
- // it("renders props.placeholderMsg when passed", () => {
- // const msg = "Add a Todo";
- // const wrapper = shallow(NewTodo, {
- // propsData: { placeholderMsg: msg }
- // });
- // expect(wrapper.vm._props.placeholderMsg).toMatch(msg);
- // });
- // it("renders newTodo as empty string", () => {
- // const wrapper = shallow(NewTodo, {});
- // expect(wrapper.vm.newTodo).toMatch("");
- // });
+ it("should render a button with important flag", () => {
+ const wrapper = mount(TodoItem, {
+ propsData: { todoItem: importantTodo }
+ });
+ // TODO - test goes here!
+ });
+ it("should set the colour to red when true", () => {
+ const wrapper = mount(TodoItem, {
+ propsData: { todoItem: importantTodo }
+ });
+ // TODO - test goes here!
+ });
+ it("should set the colour to not red when false", () => {
+ importantTodo.important = false;
+ const wrapper = mount(TodoItem, {
+ propsData: { todoItem: importantTodo }
+ });
+ // TODO - test goes here!
+ });
-
-
+ it("call makImportant when clicked", () => {
+ const wrapper = mount(TodoItem, {
+ methods,
+ propsData: { todoItem: importantTodo }
+ });
+ // TODO - test goes here!
+ });
});
--
Gitblit v1.9.3