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/javascript/mutations.spec.js | 7 +--
/dev/null | 13 ------
src/store/mutations.js | 4 --
src/store/actions.js | 6 --
src/components/TodoItem.vue | 22 ++++-------
tests/unit/javascript/actions.spec.js | 13 +-----
tests/unit/vue-components/TodoItem.spec.js | 8 ---
7 files changed, 14 insertions(+), 59 deletions(-)
diff --git a/src/components/TodoItem.vue b/src/components/TodoItem.vue
index da94c26..6287bee 100644
--- a/src/components/TodoItem.vue
+++ b/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
}
}
diff --git a/src/store/actions.js b/src/store/actions.js
index 3bf79e2..3a9abec 100644
--- a/src/store/actions.js
+++ b/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])
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 6b93da1..2ad29a6 100644
--- a/src/store/mutations.js
+++ b/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;
}
};
diff --git a/tests/unit/javascript/actions.spec.js b/tests/unit/javascript/actions.spec.js
index 507c57e..b810653 100644
--- a/tests/unit/javascript/actions.spec.js
+++ b/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!
+
});
diff --git a/tests/unit/javascript/mutations.spec.js b/tests/unit/javascript/mutations.spec.js
index eb77831..1a7fb82 100644
--- a/tests/unit/javascript/mutations.spec.js
+++ b/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);
+
});
});
diff --git a/tests/unit/vue-components/TodoItem.spec.js b/tests/unit/vue-components/TodoItem.spec.js
index def499a..ffdc0ab 100644
--- a/tests/unit/vue-components/TodoItem.spec.js
+++ b/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();
});
});
diff --git a/tests/unit/vue-components/__snapshots__/TodoItem.spec.js.snap b/tests/unit/vue-components/__snapshots__/TodoItem.spec.js.snap
deleted file mode 100644
index c9e2c23..0000000
--- a/tests/unit/vue-components/__snapshots__/TodoItem.spec.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TodoItem.vue has the expected html structure 1`] = `
-<div>
- <div
- class="itemCardAndFlag"
- >
- <!---->
-
- <!---->
- </div>
-</div>
-`;
--
Gitblit v1.9.3