From a0272853573b29666cbfd7785821ebf6f54fc458 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?No=C3=A9=20Viricel?= Date: Fri, 4 Dec 2020 02:26:50 +0100 Subject: [PATCH] Test getFruits action with fruit-api --- coverage/clover.xml | 12 ++++---- coverage/coverage-final.json | 2 +- coverage/lcov-report/Fruits.vue.html | 42 ++++++++-------------------- coverage/lcov-report/index.html | 14 +++++----- coverage/lcov.info | 18 ++++-------- src/main.js | 2 -- src/store/actions.js | 8 ++++++ src/store/getters.js | 5 ++++ src/store/index.js | 6 +++- src/views/Fruits.vue | 20 +++++-------- tests/unit/fruits.spec.js | 18 ++++++++++++ tests/unit/global.spec.js | 25 +---------------- 12 files changed, 75 insertions(+), 97 deletions(-) create mode 100644 src/store/actions.js create mode 100644 src/store/getters.js create mode 100644 tests/unit/fruits.spec.js diff --git a/coverage/clover.xml b/coverage/clover.xml index e3d58b3..219d7a7 100644 --- a/coverage/clover.xml +++ b/coverage/clover.xml @@ -1,13 +1,11 @@ - - - + + + - - + + - - diff --git a/coverage/coverage-final.json b/coverage/coverage-final.json index 152aafa..8805549 100644 --- a/coverage/coverage-final.json +++ b/coverage/coverage-final.json @@ -1,2 +1,2 @@ -{"/Users/viricel/Sites/fruit-project/src/views/Fruits.vue": {"path":"/Users/viricel/Sites/fruit-project/src/views/Fruits.vue","statementMap":{"0":{"start":{"line":12,"column":0},"end":{"line":12,"column":null}},"1":{"start":{"line":17,"column":0},"end":{"line":17,"column":null}},"2":{"start":{"line":21,"column":0},"end":{"line":21,"column":null}},"3":{"start":{"line":22,"column":0},"end":{"line":22,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":11,"column":0},"end":{"line":11,"column":null}},"loc":{"start":{"line":11,"column":0},"end":{"line":15,"column":null}}},"1":{"name":"(anonymous_2)","decl":{"start":{"line":16,"column":0},"end":{"line":16,"column":null}},"loc":{"start":{"line":16,"column":0},"end":{"line":18,"column":null}}},"2":{"name":"(anonymous_3)","decl":{"start":{"line":20,"column":0},"end":{"line":20,"column":null}},"loc":{"start":{"line":20,"column":0},"end":{"line":23,"column":null}}}},"branchMap":{},"s":{"0":1,"1":1,"2":1,"3":1},"f":{"0":1,"1":1,"2":1},"b":{}} +{"/Users/viricel/Sites/fruit-project/src/views/Fruits.vue": {"path":"/Users/viricel/Sites/fruit-project/src/views/Fruits.vue","statementMap":{"0":{"start":{"line":9,"column":0},"end":{"line":9,"column":null}},"1":{"start":{"line":17,"column":0},"end":{"line":17,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":16,"column":0},"end":{"line":16,"column":null}},"loc":{"start":{"line":16,"column":0},"end":{"line":18,"column":null}}}},"branchMap":{},"s":{"0":1,"1":1},"f":{"0":1},"b":{}} } diff --git a/coverage/lcov-report/Fruits.vue.html b/coverage/lcov-report/Fruits.vue.html index b63bfae..3ceea50 100644 --- a/coverage/lcov-report/Fruits.vue.html +++ b/coverage/lcov-report/Fruits.vue.html @@ -24,7 +24,7 @@
100% Statements - 4/4 + 2/2
@@ -38,14 +38,14 @@
100% Functions - 3/3 + 1/1
100% Lines - 4/4 + 2/2
@@ -76,16 +76,7 @@ 18 19 20 -21 -22 -23 -24 -25 -26 -27  -  -  -  +21        @@ -98,39 +89,30 @@       -1x       1x -1x -         
<template>
   <div>
     <h1>Fruits Directory</h1>
-    {{ fruits }}
+    {{ this.fruits }}
   </div>
 </template>
  
 <script>
+import { mapState } from "vuex";
+ 
 export default {
   name: "Fruits",
-  data() {
-    return {
-      fruits: []
-    };
+  computed: {
+    ...mapState(["fruits"])
   },
-  async mounted() {
-    await this.getFruits();
-  },
-  methods: {
-    async getFruits() {
-      const response = await this.$http.get("http://localhost:3000/fruit");
-      this.fruits = response.data.data;
-    }
+  async created() {
+    await this.$store.dispatch("getFruits");
   }
 };
 </script>
@@ -141,7 +123,7 @@ export default {
             

                 Code coverage generated by
                 istanbul
-                at Fri Dec 04 2020 00:23:48 GMT+0100 (Central European Standard Time)
+                at Fri Dec 04 2020 02:26:33 GMT+0100 (Central European Standard Time)
             

         
         
diff --git a/coverage/lcov-report/index.html b/coverage/lcov-report/index.html
index 99a9ab7..3d35512 100644
--- a/coverage/lcov-report/index.html
+++ b/coverage/lcov-report/index.html
@@ -24,7 +24,7 @@
             

                 100% 
                 Statements
-                4/4
+                2/2
             

         
             
@@ -38,14 +38,14 @@
             

                 100% 
                 Functions
-                3/3
+                1/1
             

         
             
             

                 100% 
                 Lines
-                4/4
+                2/2
             

         
             
@@ -77,13 +77,13 @@
 	

 	
 	100%
-	4/4
+	2/2
 	100%
 	0/0
 	100%
-	3/3
+	1/1
 	100%
-	4/4
+	2/2
 	
 
 
@@ -94,7 +94,7 @@
             

                 Code coverage generated by
                 istanbul
-                at Fri Dec 04 2020 00:23:48 GMT+0100 (Central European Standard Time)
+                at Fri Dec 04 2020 02:26:33 GMT+0100 (Central European Standard Time)
             

         
         
diff --git a/coverage/lcov.info b/coverage/lcov.info
index 6d6af27..d9c00df 100644
--- a/coverage/lcov.info
+++ b/coverage/lcov.info
@@ -1,19 +1,13 @@
 TN:
 SF:/Users/viricel/Sites/fruit-project/src/views/Fruits.vue
-FN:11,(anonymous_1)
-FN:16,(anonymous_2)
-FN:20,(anonymous_3)
-FNF:3
-FNH:3
+FN:16,(anonymous_1)
+FNF:1
+FNH:1
 FNDA:1,(anonymous_1)
-FNDA:1,(anonymous_2)
-FNDA:1,(anonymous_3)
-DA:12,1
+DA:9,1
 DA:17,1
-DA:21,1
-DA:22,1
-LF:4
-LH:4
+LF:2
+LH:2
 BRF:0
 BRH:0
 end_of_record
diff --git a/src/main.js b/src/main.js
index 56e74f9..3a47006 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,10 +2,8 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
-import axios from "axios";
 
 Vue.config.productionTip = false;
-Vue.prototype.$http = axios;
 
 new Vue({
   router,
diff --git a/src/store/actions.js b/src/store/actions.js
new file mode 100644
index 0000000..efec4a6
--- /dev/null
+++ b/src/store/actions.js
@@ -0,0 +1,8 @@
+import axios from "axios";
+
+export default {
+  getFruits: async ({ commit }) => {
+    const response = await axios.get("http://localhost:3000/fruit");
+    commit("setFruits", response.data.data);
+  }
+};
diff --git a/src/store/getters.js b/src/store/getters.js
new file mode 100644
index 0000000..89677ad
--- /dev/null
+++ b/src/store/getters.js
@@ -0,0 +1,5 @@
+export default {
+  parsedFruits: () => {
+    return [{ id: 1 }];
+  }
+};
diff --git a/src/store/index.js b/src/store/index.js
index 18d5fdb..454749d 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,6 +1,8 @@
 import Vue from "vue";
 import Vuex from "vuex";
 import mutations from "./mutations";
+import actions from "./actions";
+import getters from "./getters";
 
 export const state = {
   fruits: [],
@@ -11,5 +13,7 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
   state,
-  mutations
+  mutations,
+  actions,
+  getters
 });
diff --git a/src/views/Fruits.vue b/src/views/Fruits.vue
index e8baba4..abb97c9 100644
--- a/src/views/Fruits.vue
+++ b/src/views/Fruits.vue
@@ -1,26 +1,20 @@
 
 
 
diff --git a/tests/unit/fruits.spec.js b/tests/unit/fruits.spec.js
new file mode 100644
index 0000000..0dad3ee
--- /dev/null
+++ b/tests/unit/fruits.spec.js
@@ -0,0 +1,18 @@
+import { mount } from "@vue/test-utils";
+// import axios from "axios";
+import store from "@/store/index.js";
+import Fruits from "@/views/Fruits.vue";
+
+// jest.mock("axios", () => ({
+//   get: jest.fn(() => Promise.resolve({ data: {} }))
+// }));
+
+describe("Test Fruits page.", () => {
+  it("dispatches getFruits on mounted", async () => {
+    // axios.get.mockImplementationOnce(() => Promise.resolve({ data: { data: "value" } }));
+    const wrapper = mount(Fruits, { store });
+
+    await store.dispatch("getFruits");
+    expect(store.state.fruits.fruitCount).toBe(6);
+  });
+});
diff --git a/tests/unit/global.spec.js b/tests/unit/global.spec.js
index 1fca5ba..8098434 100644
--- a/tests/unit/global.spec.js
+++ b/tests/unit/global.spec.js
@@ -1,8 +1,5 @@
-import mockAxios from "axios";
 import { mount } from "@vue/test-utils";
-
-import App from "../../src/App.vue";
-import Fruits from "../../src/views/Fruits.vue";
+import App from "@/App.vue";
 
 describe("App", () => {
   const wrapper = mount(App, { stubs: ["router-view"] });
@@ -15,23 +12,3 @@ describe("App", () => {
     expect(wrapper.find("#app")).toBeTruthy();
   });
 });
-
-// TODO: Move the following code to fruits.spec.js
-jest.mock("axios", () => ({
-  get: jest.fn(() => Promise.resolve({ data: { data: "value" } }))
-}));
-
-it("should get fruits from fruit-api on mounted", async () => {
-  const wrapper = mount(Fruits, {
-    mocks: {
-      $http: mockAxios
-    }
-  });
-
-  expect(wrapper.vm.fruits).toEqual([]);
-
-  // We need to wait the nextTick to check API response (async).
-  await wrapper.vm.$nextTick(() => {
-    expect(wrapper.vm.fruits).toEqual("value");
-  });
-});