Test getFruits action with fruit-api

coverage/clover.xml

@@ -1,13 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1607037828417" clover="3.2.0">
+<coverage generated="1607045193175" clover="3.2.0">
-  <project timestamp="1607037828418" name="All files">
+  <project timestamp="1607045193175" 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"/>
+    <metrics statements="2" coveredstatements="2" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="1" elements="3" coveredelements="3" complexity="0" loc="2" ncloc="2" 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"/>
+      <metrics statements="2" coveredstatements="2" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="1"/>
-      <line num="12" count="1" type="stmt"/>
+      <line num="9" count="1" type="stmt"/>
       <line num="17" count="1" type="stmt"/>
-      <line num="21" count="1" type="stmt"/>
-      <line num="22" count="1" type="stmt"/>
     </file>
   </project>
 </coverage>

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":{}}
 }

coverage/lcov-report/Fruits.vue.html

@@ -24,7 +24,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>4/4</span>
+                <span class='fraction'>2/2</span>
             </div>
         
             
@@ -38,14 +38,14 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>3/3</span>
+                <span class='fraction'>1/1</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>4/4</span>
+                <span class='fraction'>2/2</span>
             </div>
         
             
@@ -76,16 +76,7 @@
 <a name='L18'></a><a href='#L18'>18</a>
 <a name='L19'></a><a href='#L19'>19</a>
 <a name='L20'></a><a href='#L20'>20</a>
-<a name='L21'></a><a href='#L21'>21</a>
+<a name='L21'></a><a href='#L21'>21</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
-<a name='L22'></a><a href='#L22'>22</a>
-<a name='L23'></a><a href='#L23'>23</a>
-<a name='L24'></a><a href='#L24'>24</a>
-<a name='L25'></a><a href='#L25'>25</a>
-<a name='L26'></a><a href='#L26'>26</a>
-<a name='L27'></a><a href='#L27'>27</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -98,39 +89,30 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">&lt;template&gt;
   &lt;div&gt;
     &lt;h1&gt;Fruits Directory&lt;/h1&gt;
-    {{ fruits }}
+    {{ this.fruits }}
   &lt;/div&gt;
 &lt;/template&gt;
 &nbsp;
 &lt;script&gt;
+import { mapState } from "vuex";
+&nbsp;
 export default {
   name: "Fruits",
-  data() {
+  computed: {
-    return {
+    ...mapState(["fruits"])
-      fruits: []
-    };
   },
-  async mounted() {
+  async created() {
-    await this.getFruits();
+    await this.$store.dispatch("getFruits");
-  },
-  methods: {
-    async getFruits() {
-      const response = await this.$http.get("http://localhost:3000/fruit");
-      this.fruits = response.data.data;
-    }
   }
 };
 &lt;/script&gt;
@@ -141,7 +123,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 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)
             </div>
         </div>
         <script src="prettify.js"></script>

coverage/lcov-report/index.html

@@ -24,7 +24,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>4/4</span>
+                <span class='fraction'>2/2</span>
             </div>
         
             
@@ -38,14 +38,14 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>3/3</span>
+                <span class='fraction'>1/1</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>4/4</span>
+                <span class='fraction'>2/2</span>
             </div>
         
             
@@ -77,13 +77,13 @@
 	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
 	</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="4" class="abs high">4/4</td>
+	<td data-value="2" class="abs high">2/2</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="0" class="abs high">0/0</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="3" class="abs high">3/3</td>
+	<td data-value="1" class="abs high">1/1</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="4" class="abs high">4/4</td>
+	<td data-value="2" class="abs high">2/2</td>
 	</tr>
 
 </tbody>
@@ -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 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)
             </div>
         </div>
         <script src="prettify.js"></script>

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_1)
-FN:16,(anonymous_2)
+FNF:1
-FN:20,(anonymous_3)
+FNH:1
-FNF:3
-FNH:3
 FNDA:1,(anonymous_1)
-FNDA:1,(anonymous_2)
+DA:9,1
-FNDA:1,(anonymous_3)
-DA:12,1
 DA:17,1
-DA:21,1
+LF:2
-DA:22,1
+LH:2
-LF:4
-LH:4
 BRF:0
 BRH:0
 end_of_record

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,

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);
+  }
+};

src/store/getters.js

@@ -0,0 +1,5 @@
+export default {
+  parsedFruits: () => {
+    return [{ id: 1 }];
+  }
+};

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
 });

src/views/Fruits.vue

@@ -1,26 +1,20 @@
 <template>
   <div>
     <h1>Fruits Directory</h1>
-    {{ fruits }}
+    {{ this.fruits }}
   </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
+
 export default {
   name: "Fruits",
-  data() {
+  computed: {
-    return {
+    ...mapState(["fruits"])
-      fruits: []
-    };
   },
-  async mounted() {
+  async created() {
-    await this.getFruits();
+    await this.$store.dispatch("getFruits");
-  },
-  methods: {
-    async getFruits() {
-      const response = await this.$http.get("http://localhost:3000/fruit");
-      this.fruits = response.data.data;
-    }
   }
 };
 </script>

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);
+  });
+});

tests/unit/global.spec.js

@@ -1,8 +1,5 @@
-import mockAxios from "axios";
 import { mount } from "@vue/test-utils";
-
+import App from "@/App.vue";
-import App from "../../src/App.vue";
-import Fruits from "../../src/views/Fruits.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");
-  });
-});