coverage/clover.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1607034984518" clover="3.2.0">
-  <project timestamp="1607034984518" name="All files">
+<coverage generated="1607037828417" clover="3.2.0">
+  <project timestamp="1607037828418" name="All files">
     <metrics statements="4" coveredstatements="4" conditionals="0" coveredconditionals="0" methods="3" coveredmethods="3" elements="7" coveredelements="7" complexity="0" loc="4" ncloc="4" packages="1" files="1" classes="1"/>
     <file name="Fruits.vue" path="/Users/viricel/Sites/fruit-project/src/views/Fruits.vue">
       <metrics statements="4" coveredstatements="4" conditionals="0" coveredconditionals="0" methods="3" coveredmethods="3"/>

coverage/lcov-report/Fruits.vue.html

@@ -141,7 +141,7 @@ export default {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Thu Dec 03 2020 23:36:24 GMT+0100 (Central European Standard Time)
+                at Fri Dec 04 2020 00:23:48 GMT+0100 (Central European Standard Time)
             </div>
         </div>
         <script src="prettify.js"></script>

coverage/lcov-report/index.html

@@ -94,7 +94,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Thu Dec 03 2020 23:36:24 GMT+0100 (Central European Standard Time)
+                at Fri Dec 04 2020 00:23:48 GMT+0100 (Central European Standard Time)
             </div>
         </div>
         <script src="prettify.js"></script>

src/store/index.js

@@ -1,13 +1,15 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import mutations from "./mutations";
+
+export const state = {
+  fruits: [],
+  fruit: {}
+};
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {
-    fruits: []
-  },
-  mutations: import("./mutations.js"),
-  actions: {},
-  modules: {}
+  state,
+  mutations
 });

src/store/mutations.js

@@ -1,5 +1,14 @@
 export default {
-  setFruits(state, fruits) {
+  setFruits: (state, fruits) => {
     state.fruits = fruits;
+  },
+  setFruit: (state, fruit) => {
+    state.fruit = fruit;
+  },
+  addFruit: (state, fruit) => {
+    state.fruits = [...state.fruits, fruit];
+  },
+  removeFruit: (state, id) => {
+    state.fruits = state.fruits.filter(item => item.id != id);
   }
 };

tests/unit/mutations.spec.js

@@ -1,36 +1,43 @@
-import mutations from "@/store/mutations.js";
+import { state } from "@/store";
+import mutations from "@/store/mutations";
+
+const { setFruits, setFruit, addFruit, removeFruit } = mutations;
+
+let fruit = {
+  id: 3,
+  isFruit: true,
+  name: "banana",
+  image: "/image/path.jpg",
+  price: "907.00",
+  color: "#763e44",
+  description: "Iusto illum vero voluptatem.",
+  taste: "Handcrafted",
+  expires: "2021-04-11T08:54:24.588Z"
+};
 
 describe("Test Vuex mutations.", () => {
-  it("should add fruits to the state", () => {
-    const fruits = [
-      {
-        id: 3,
-        isFruit: true,
-        name: "banana",
-        image: "/image/path.jpg",
-        price: "907.00",
-        color: "#763e44",
-        description: "Iusto illum vero voluptatem.",
-        taste: "Handcrafted",
-        expires: "2021-04-11T08:54:24.588Z"
-      }
-    ];
-    const state = {
-      fruits: []
-    };
-    mutations.setFruits(state, fruits);
-    expect(state.fruits).toEqual([
-      {
-        id: 3,
-        isFruit: true,
-        name: "banana",
-        image: "/image/path.jpg",
-        price: "907.00",
-        color: "#763e44",
-        description: "Iusto illum vero voluptatem.",
-        taste: "Handcrafted",
-        expires: "2021-04-11T08:54:24.588Z"
-      }
-    ]);
+  it("tests setFruits mutation.", () => {
+    setFruits(state, [fruit]);
+    expect(state.fruits[0].id).toBe(3);
+  });
+
+  it("tests setFruit mutation.", () => {
+    setFruit(state, fruit);
+    expect(state.fruit.id).toBe(3);
+  });
+
+  it("tests addFruit mutation.", () => {
+    const newFruit = Object.assign({}, fruit);
+    newFruit.id = 4;
+    addFruit(state, newFruit);
+    expect(state.fruits[0].id).toBe(3);
+    expect(state.fruits[1].id).toBe(4);
+    expect(state.fruits.length).toBe(2);
+  });
+
+  it("tests removeFruit mutation.", () => {
+    removeFruit(state, 4);
+    expect(state.fruits[0].id).toBe(3);
+    expect(state.fruits.length).toBe(1);
   });
 });