From a62d07e97ed7e6635383a32b012f11fb3c7ec330 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?No=C3=A9=20Viricel?= Date: Fri, 4 Dec 2020 03:25:59 +0100 Subject: [PATCH] Setup routing for FruitDetails + fetch data on route transition + Fix fruit tests --- coverage/clover.xml | 33 +++- coverage/coverage-final.json | 4 +- coverage/lcov-report/components/Grid.vue.html | 160 ++++++++++++++++++ coverage/lcov-report/components/index.html | 110 ++++++++++++ coverage/lcov-report/index.html | 37 ++-- coverage/lcov-report/views/Fruit.vue.html | 148 ++++++++++++++++ coverage/lcov-report/views/Fruits.vue.html | 54 +++--- coverage/lcov-report/views/index.html | 37 ++-- coverage/lcov.info | 35 +++- src/router/index.js | 14 +- src/store/actions.js | 4 + src/views/Fruit.vue | 18 ++ tests/unit/fruits.spec.js | 6 +- 13 files changed, 581 insertions(+), 79 deletions(-) create mode 100644 coverage/lcov-report/components/Grid.vue.html create mode 100644 coverage/lcov-report/components/index.html create mode 100644 coverage/lcov-report/views/Fruit.vue.html diff --git a/coverage/clover.xml b/coverage/clover.xml index 219d7a7..d110fcd 100644 --- a/coverage/clover.xml +++ b/coverage/clover.xml @@ -1,11 +1,28 @@ - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/coverage/coverage-final.json b/coverage/coverage-final.json index 8805549..89ba89a 100644 --- a/coverage/coverage-final.json +++ b/coverage/coverage-final.json @@ -1,2 +1,4 @@ -{"/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":{}} +{"/Users/viricel/Sites/fruit-project/src/components/Grid.vue": {"path":"/Users/viricel/Sites/fruit-project/src/components/Grid.vue","statementMap":{"0":{"start":{"line":8,"column":0},"end":{"line":8,"column":null}}},"fnMap":{},"branchMap":{},"s":{"0":1},"f":{},"b":{}} +,"/Users/viricel/Sites/fruit-project/src/views/Fruit.vue": {"path":"/Users/viricel/Sites/fruit-project/src/views/Fruit.vue","statementMap":{"0":{"start":{"line":9,"column":0},"end":{"line":9,"column":null}},"1":{"start":{"line":16,"column":0},"end":{"line":18,"column":null}},"2":{"start":{"line":17,"column":0},"end":{"line":17,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":15,"column":0},"end":{"line":15,"column":null}},"loc":{"start":{"line":15,"column":0},"end":{"line":19,"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}}}},"branchMap":{},"s":{"0":0,"1":0,"2":0},"f":{"0":0,"1":0},"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":10,"column":0},"end":{"line":10,"column":null}},"2":{"start":{"line":19,"column":0},"end":{"line":19,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":18,"column":0},"end":{"line":18,"column":null}},"loc":{"start":{"line":18,"column":0},"end":{"line":20,"column":null}}}},"branchMap":{},"s":{"0":1,"1":1,"2":1},"f":{"0":1},"b":{}} } diff --git a/coverage/lcov-report/components/Grid.vue.html b/coverage/lcov-report/components/Grid.vue.html new file mode 100644 index 0000000..70fc4b8 --- /dev/null +++ b/coverage/lcov-report/components/Grid.vue.html @@ -0,0 +1,160 @@ + + + + + + Code coverage report for components/Grid.vue + + + + + + + + +
+
+

All files / components Grid.vue

+
+ +
+ 100% + Statements + 1/1 +
+ + +
+ 100% + Branches + 0/0 +
+ + +
+ 100% + Functions + 0/0 +
+ + +
+ 100% + Lines + 1/1 +
+ + +
+

+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +

+
+
+ 

+
1
+2
+3
+4
+5
+6
+7
+8
+9
+10
+11
+12
+13
+14
+15
+16
+17
+18
+19
+20
+21
+22
+23
+24
+25
+26
+27
+28 
+ 
+ 
+ 
+ 
+ 
+ 
+1x
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
<template>
+  <div class="grid">
+    <GridItem :key="item.id" v-for="item in data" :item="item" />
+  </div>
+</template>
+ 
+<script>
+import GridItem from "./GridItem";
+ 
+export default {
+  name: "Grid",
+  components: {
+    GridItem
+  },
+  props: {
+    data: Array
+  }
+};
+</script>
+ 
+<style scoped lang="less">
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  column-gap: 1rem;
+}
+</style>
+ 
+ +
+
+
+ Code coverage generated by + istanbul + at Fri Dec 04 2020 03:28:45 GMT+0100 (Central European Standard Time) +
+ + + + + + + + \ No newline at end of file diff --git a/coverage/lcov-report/components/index.html b/coverage/lcov-report/components/index.html new file mode 100644 index 0000000..5bbcabf --- /dev/null +++ b/coverage/lcov-report/components/index.html @@ -0,0 +1,110 @@ + + + + + + Code coverage report for components + + + + + + + + +
+
+

All files components

+
+ +
+ 100% + Statements + 1/1 +
+ + +
+ 100% + Branches + 0/0 +
+ + +
+ 100% + Functions + 0/0 +
+ + +
+ 100% + Lines + 1/1 +
+ + +
+

+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FileStatementsBranchesFunctionsLines
Grid.vue +
+ 		100%1/1100%0/0100%0/0100%1/1
+
+
+
+
+ Code coverage generated by + istanbul + at Fri Dec 04 2020 03:28:45 GMT+0100 (Central European Standard Time) +
+ + + + + + + + \ No newline at end of file diff --git a/coverage/lcov-report/index.html b/coverage/lcov-report/index.html index 3d35512..0fd6f6f 100644 --- a/coverage/lcov-report/index.html +++ b/coverage/lcov-report/index.html @@ -22,9 +22,9 @@
- 100% + 57.14% Statements - 2/2 + 4/7
@@ -36,16 +36,16 @@
- 100% + 33.33% Functions - 1/1 + 1/3
- 100% + 57.14% Lines - 2/2 + 4/7
@@ -54,7 +54,7 @@ Press n or j to go to the next uncovered block, b, p or k for the previous block.

-
+
@@ -72,18 +72,33 @@ - + - + + + + + + + + + + - + + + + + @@ -94,7 +109,7 @@
Code coverage generated by istanbul - at Fri Dec 04 2020 02:26:33 GMT+0100 (Central European Standard Time) + at Fri Dec 04 2020 03:28:45 GMT+0100 (Central European Standard Time)
diff --git a/coverage/lcov-report/views/Fruit.vue.html b/coverage/lcov-report/views/Fruit.vue.html new file mode 100644 index 0000000..f6be265 --- /dev/null +++ b/coverage/lcov-report/views/Fruit.vue.html @@ -0,0 +1,148 @@ + + + + + + Code coverage report for views/Fruit.vue + + + + + + + + +
+
+

All files / views Fruit.vue

+
+ +
+ 0% + Statements + 0/3 +
+ + +
+ 100% + Branches + 0/0 +
+ + +
+ 0% + Functions + 0/2 +
+ + +
+ 0% + Lines + 0/3 +
+ + +
+

+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +

+
+
+ 

 
 
 
Fruits.vuecomponents
 	
 	

 			
 	100%2/21/1100%0/0
 	100%
 	0/0
 	100%
 	1/1
views
+	

+			50%3/6
 	100%2/20/033.33%1/350%3/6
 	

 
 
         
         

+
1
+2
+3
+4
+5
+6
+7
+8
+9
+10
+11
+12
+13
+14
+15
+16
+17
+18
+19
+20
+21
+22
+23
+24 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
<template>
+  <div>
+    <h1>Fruit Details</h1>
+    {{ this.fruit }}
+  </div>
+</template>
+ 
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "FruitDetails",
+  computed: {
+    ...mapState(["fruit"])
+  },
+  beforeRouteEnter(to, from, next) {
+    next(async vm => {
+      await vm.$store.dispatch("getFruit", to.params.id);
+    });
+  }
+};
+</script>
+ 
+<style></style>
+ 

+
+                

+            

+            

+                Code coverage generated by
+                istanbul
+                at Fri Dec 04 2020 03:28:45 GMT+0100 (Central European Standard Time)
+            

+        
+        
+        
+        
+        
+    
+
+    
\ No newline at end of file
diff --git a/coverage/lcov-report/views/Fruits.vue.html b/coverage/lcov-report/views/Fruits.vue.html
index 0f0a441..680899a 100644
--- a/coverage/lcov-report/views/Fruits.vue.html
+++ b/coverage/lcov-report/views/Fruits.vue.html
@@ -24,7 +24,7 @@
             

                 100% 
                 Statements
-                4/4
+                3/3
             

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

                 100% 
                 Functions
-                3/3
+                1/1
             

         
             
             

                 100% 
                 Lines
-                4/4
+                3/3
             

         
             
@@ -78,11 +78,7 @@
 20
 21
 22
-23
-24
-25
-26
-27 
+23 
  
  
  
@@ -90,6 +86,13 @@
  
  
  
+1x
+1x
+ 
+ 
+ 
+ 
+ 
  
  
  
@@ -97,40 +100,25 @@
  
  
  
- 
-1x
- 
- 
- 
-1x
-1x
- 
- 
- 
- 
  
<template>
   <div>
     <h1>Fruits Directory</h1>
-    {{ fruits }}
+    <Grid :data="this.fruits" />
   </div>
 </template>
  
 <script>
+import { mapState } from "vuex";
+import Grid from "@/components/Grid";
+ 
 export default {
   name: "Fruits",
-  data() {
-    return {
-      fruits: []
-    };
+  components: { Grid },
+  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 +129,7 @@ export default {
             

                 Code coverage generated by
                 istanbul
-                at Thu Dec 03 2020 23:19:50 GMT+0100 (Central European Standard Time)
+                at Fri Dec 04 2020 03:28:45 GMT+0100 (Central European Standard Time)
             

         
         
diff --git a/coverage/lcov-report/views/index.html b/coverage/lcov-report/views/index.html
index d10d834..c955638 100644
--- a/coverage/lcov-report/views/index.html
+++ b/coverage/lcov-report/views/index.html
@@ -22,9 +22,9 @@
         

             
             

-                100% 
+                50% 
                 Statements
-                4/4
+                3/6
             

         
             
@@ -36,16 +36,16 @@
         
             
             

-                100% 
+                33.33% 
                 Functions
-                3/3
+                1/3
             

         
             
             

-                100% 
+                50% 
                 Lines
-                4/4
+                3/6
             

         
             
@@ -54,7 +54,7 @@
             Press n or j to go to the next uncovered block, b, p or k for the previous block.
         

     

-    

+    

     

 
@@ -72,18 +72,33 @@
 
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+
+
-	
+	
-	
+	
-	
+	
@@ -94,7 +109,7 @@
             

                 Code coverage generated by
                 istanbul
-                at Thu Dec 03 2020 23:19:50 GMT+0100 (Central European Standard Time)
+                at Fri Dec 04 2020 03:28:45 GMT+0100 (Central European Standard Time)
             

diff --git a/coverage/lcov.info b/coverage/lcov.info
index d9c00df..c75a166 100644
--- a/coverage/lcov.info
+++ b/coverage/lcov.info
@@ -1,13 +1,40 @@
 TN:
+SF:/Users/viricel/Sites/fruit-project/src/components/Grid.vue
+FNF:0
+FNH:0
+DA:8,1
+LF:1
+LH:1
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:/Users/viricel/Sites/fruit-project/src/views/Fruit.vue
+FN:15,(anonymous_1)
+FN:16,(anonymous_2)
+FNF:2
+FNH:0
+FNDA:0,(anonymous_1)
+FNDA:0,(anonymous_2)
+DA:9,0
+DA:16,0
+DA:17,0
+LF:3
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
 SF:/Users/viricel/Sites/fruit-project/src/views/Fruits.vue
-FN:16,(anonymous_1)
+FN:18,(anonymous_1)
 FNF:1
 FNH:1
 FNDA:1,(anonymous_1)
 DA:9,1
-DA:17,1
-LF:2
-LH:2
+DA:10,1
+DA:19,1
+LF:3
+LH:3
 BRF:0
 BRH:0
 end_of_record
diff --git a/src/router/index.js b/src/router/index.js
index 3fcfd68..aa4d41f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,22 +1,20 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import Fruits from "../views/Fruits.vue";
+import Fruits from "@/views/Fruits.vue";
+import Fruit from "@/views/Fruit.vue";
 
 Vue.use(VueRouter);
 
 const routes = [
   {
     path: "/",
-    name: "Fruits",
+    name: "FruitsDirectory",
     component: Fruits
   },
   {
-    path: "/fruit",
-    name: "Fruit",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ "../views/Fruit.vue")
+    path: "/fruit/:id",
+    name: "FruitDetails",
+    component: Fruit
   }
 ];
 
diff --git a/src/store/actions.js b/src/store/actions.js
index efec4a6..736b6c5 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -4,5 +4,9 @@ export default {
   getFruits: async ({ commit }) => {
     const response = await axios.get("http://localhost:3000/fruit");
     commit("setFruits", response.data.data);
+  },
+  getFruit: async ({ commit }, id) => {
+    const response = await axios.get(`http://localhost:3000/fruit/${id}`);
+    commit("setFruit", response.data);
   }
 };
diff --git a/src/views/Fruit.vue b/src/views/Fruit.vue
index e7573ed..172826b 100644
--- a/src/views/Fruit.vue
+++ b/src/views/Fruit.vue
@@ -1,5 +1,23 @@
 
+
+
+
+
diff --git a/tests/unit/fruits.spec.js b/tests/unit/fruits.spec.js
index 0dad3ee..466c208 100644
--- a/tests/unit/fruits.spec.js
+++ b/tests/unit/fruits.spec.js
@@ -1,4 +1,4 @@
-import { mount } from "@vue/test-utils";
+import { mount, RouterLinkStub } from "@vue/test-utils";
 // import axios from "axios";
 import store from "@/store/index.js";
 import Fruits from "@/views/Fruits.vue";
@@ -10,9 +10,9 @@ import Fruits from "@/views/Fruits.vue";
 describe("Test Fruits page.", () => {
   it("dispatches getFruits on mounted", async () => {
     // axios.get.mockImplementationOnce(() => Promise.resolve({ data: { data: "value" } }));
-    const wrapper = mount(Fruits, { store });
+    const wrapper = mount(Fruits, { store, stubs: { RouterLink: RouterLinkStub } });
 
     await store.dispatch("getFruits");
-    expect(store.state.fruits.fruitCount).toBe(6);
+    expect(store.state.fruits.length).toBe(7);
   });
 });


 
 
 
Fruit.vue
+	

+			0%0/3100%0/00%0/20%0/3

 	Fruits.vue
 	
 	

 			
 	100%4/43/3
 	100%
 	0/0
 	100%3/31/1
 	100%4/43/3