From 7893b259106cc2258674fdeeb2b15c31e438e8cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?No=C3=A9=20Viricel?= Date: Sun, 6 Dec 2020 16:03:41 +0100 Subject: [PATCH] Add GridItem test --- coverage/clover.xml | 16 +++--- coverage/coverage-final.json | 4 +- coverage/lcov-report/components/Grid.vue.html | 45 +++++++++++++++-- coverage/lcov-report/components/index.html | 2 +- coverage/lcov-report/index.html | 22 ++++----- coverage/lcov-report/views/Fruit.vue.html | 29 +++-------- coverage/lcov-report/views/Fruits.vue.html | 49 +++++++++++++------ coverage/lcov-report/views/index.html | 36 +++++++------- coverage/lcov.info | 18 +++---- tests/unit/GridItem.spec.js | 27 ++++++++++ tests/unit/global.spec.js | 2 +- 11 files changed, 157 insertions(+), 93 deletions(-) create mode 100644 tests/unit/GridItem.spec.js diff --git a/coverage/clover.xml b/coverage/clover.xml index 7fcae3d..94c6940 100644 --- a/coverage/clover.xml +++ b/coverage/clover.xml @@ -1,7 +1,7 @@ - - - + + + @@ -10,18 +10,16 @@ - + - + - - - + - + diff --git a/coverage/coverage-final.json b/coverage/coverage-final.json index 89ba89a..1ac6bb0 100644 --- a/coverage/coverage-final.json +++ b/coverage/coverage-final.json @@ -1,4 +1,4 @@ {"/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":{}} +,"/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}}},"fnMap":{},"branchMap":{},"s":{"0":0},"f":{},"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":0},"f":{"0":0},"b":{}} } diff --git a/coverage/lcov-report/components/Grid.vue.html b/coverage/lcov-report/components/Grid.vue.html index 6807807..204b223 100644 --- a/coverage/lcov-report/components/Grid.vue.html +++ b/coverage/lcov-report/components/Grid.vue.html @@ -83,7 +83,20 @@ 25 26 27 -28  +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41        @@ -110,6 +123,19 @@       +  +  +  +  +  +  +  +  +  +  +  +  +   
<template>
   <div class="grid">
     <GridItem :key="item.id" v-for="item in data" :item="item" />
@@ -133,8 +159,21 @@ export default {
 <style scoped lang="less">
 .grid {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr;
   column-gap: 1rem;
+  row-gap: 1.5rem;
+ 
+  @media screen and (min-width: @md) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+ 
+  @media screen and (min-width: @lg) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+ 
+  @media screen and (min-width: @xl) {
+    grid-template-columns: repeat(4, 1fr);
+  }
 }
 </style>
  
@@ -144,7 +183,7 @@ export default {
Code coverage generated by istanbul - at Fri Dec 04 2020 03:29:36 GMT+0100 (Central European Standard Time) + at Sun Dec 06 2020 15:56:50 GMT+0100 (Central European Standard Time)
diff --git a/coverage/lcov-report/components/index.html b/coverage/lcov-report/components/index.html index 6c15b23..123519f 100644 --- a/coverage/lcov-report/components/index.html +++ b/coverage/lcov-report/components/index.html @@ -94,7 +94,7 @@
Code coverage generated by istanbul - at Fri Dec 04 2020 03:29:36 GMT+0100 (Central European Standard Time) + at Sun Dec 06 2020 15:56:50 GMT+0100 (Central European Standard Time)
diff --git a/coverage/lcov-report/index.html b/coverage/lcov-report/index.html index 8752a0b..a30a5ce 100644 --- a/coverage/lcov-report/index.html +++ b/coverage/lcov-report/index.html @@ -22,9 +22,9 @@
- 57.14% + 60% Statements - 4/7 + 3/5
@@ -36,16 +36,16 @@
- 33.33% + 0% Functions - 1/3 + 0/1
- 57.14% + 60% Lines - 4/7 + 3/5
@@ -92,13 +92,13 @@
50% - 3/6 + 2/4 100% 0/0 - 33.33% - 1/3 + 0% + 0/1 50% - 3/6 + 2/4 @@ -109,7 +109,7 @@
Code coverage generated by istanbul - at Fri Dec 04 2020 03:29:36 GMT+0100 (Central European Standard Time) + at Sun Dec 06 2020 15:56:50 GMT+0100 (Central European Standard Time)
diff --git a/coverage/lcov-report/views/Fruit.vue.html b/coverage/lcov-report/views/Fruit.vue.html index 71b541f..02c4aad 100644 --- a/coverage/lcov-report/views/Fruit.vue.html +++ b/coverage/lcov-report/views/Fruit.vue.html @@ -24,7 +24,7 @@
0% Statements - 0/3 + 0/1
@@ -36,16 +36,16 @@
- 0% + 100% Functions - 0/2 + 0/0
0% Lines - 0/3 + 0/1
@@ -74,12 +74,7 @@ 16 17 18 -19 -20 -21 -22 -23 -24  +19        @@ -94,17 +89,12 @@       -  -  -  -  -         
<template>
   <div>
-    <h1>Fruit Details</h1>
+    <h2><span @click="() => this.$router.back()">◀</span> Details</h2>
     {{ this.fruit }}
   </div>
 </template>
@@ -115,11 +105,6 @@ export default {
   name: "FruitDetails",
   computed: {
     ...mapState(["fruit"])
-  },
-  beforeRouteEnter(to, from, next) {
-    next(async vm => {
-      await vm.$store.dispatch("getFruit", to.params.id);
-    });
   }
 };
 </script>
@@ -132,7 +117,7 @@ export default {
             

                 Code coverage generated by
                 istanbul
-                at Fri Dec 04 2020 03:29:36 GMT+0100 (Central European Standard Time)
+                at Sun Dec 06 2020 15:56:50 GMT+0100 (Central European Standard Time)
             

         
         
diff --git a/coverage/lcov-report/views/Fruits.vue.html b/coverage/lcov-report/views/Fruits.vue.html
index 93e3f25..8ff06f4 100644
--- a/coverage/lcov-report/views/Fruits.vue.html
+++ b/coverage/lcov-report/views/Fruits.vue.html
@@ -22,9 +22,9 @@
         

             
             

-                100% 
+                66.67% 
                 Statements
-                3/3
+                2/3
             

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

-                100% 
+                0% 
                 Functions
-                1/1
+                0/1
             

         
             
             

-                100% 
+                66.67% 
                 Lines
-                3/3
+                2/3
             

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

     

-    

+    

     

 
1
 2
@@ -78,7 +78,14 @@
 20
 21
 22
-23 
+23
+24
+25
+26
+27
+28
+29
+30 
  
  
  
@@ -96,13 +103,20 @@
  
  
  
-1x
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
  
  
  
  
<template>
-  <div>
-    <h1>Fruits Directory</h1>
+  <div class="fruits">
+    <h2>Directory</h2>
     <Grid :data="this.fruits" />
   </div>
 </template>
@@ -117,11 +131,18 @@ export default {
   computed: {
     ...mapState(["fruits"])
   },
-  async created() {
-    await this.$store.dispatch("getFruits");
+  async created() {
+    await this.$store.dispatch("getFruits");
   }
 };
 </script>
+ 
+<style lang="less">
+.fruits {
+  margin: 0 auto;
+  max-width: 1200px;
+}
+</style>
  

 
                 

@@ -129,7 +150,7 @@ export default {
             

                 Code coverage generated by
                 istanbul
-                at Fri Dec 04 2020 03:29:36 GMT+0100 (Central European Standard Time)
+                at Sun Dec 06 2020 15:56:50 GMT+0100 (Central European Standard Time)
             

         
         
diff --git a/coverage/lcov-report/views/index.html b/coverage/lcov-report/views/index.html
index 32c4410..c9915e9 100644
--- a/coverage/lcov-report/views/index.html
+++ b/coverage/lcov-report/views/index.html
@@ -24,7 +24,7 @@
             

                 50% 
                 Statements
-                3/6
+                2/4
             

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

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

         
             
             

                 50% 
                 Lines
-                3/6
+                2/4
             

         
             
@@ -77,28 +77,28 @@
 	

 	
 	0%
-	0/3
+	0/1
+	100%
+	0/0
 	100%
 	0/0
 	0%
-	0/2
-	0%
-	0/3
+	0/1
 	
 
 
-	Fruits.vue
-	
-	

+	Fruits.vue
+	
+	

 	
-	100%
-	3/3
+	66.67%
+	2/3
 	100%
 	0/0
-	100%
-	1/1
-	100%
-	3/3
+	0%
+	0/1
+	66.67%
+	2/3
 	
 
 
@@ -109,7 +109,7 @@
             

                 Code coverage generated by
                 istanbul
-                at Fri Dec 04 2020 03:29:36 GMT+0100 (Central European Standard Time)
+                at Sun Dec 06 2020 15:56:50 GMT+0100 (Central European Standard Time)
             

         
         
diff --git a/coverage/lcov.info b/coverage/lcov.info
index c75a166..620e193 100644
--- a/coverage/lcov.info
+++ b/coverage/lcov.info
@@ -10,16 +10,10 @@ 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
+FNF:0
 FNH:0
-FNDA:0,(anonymous_1)
-FNDA:0,(anonymous_2)
 DA:9,0
-DA:16,0
-DA:17,0
-LF:3
+LF:1
 LH:0
 BRF:0
 BRH:0
@@ -28,13 +22,13 @@ TN:
 SF:/Users/viricel/Sites/fruit-project/src/views/Fruits.vue
 FN:18,(anonymous_1)
 FNF:1
-FNH:1
-FNDA:1,(anonymous_1)
+FNH:0
+FNDA:0,(anonymous_1)
 DA:9,1
 DA:10,1
-DA:19,1
+DA:19,0
 LF:3
-LH:3
+LH:2
 BRF:0
 BRH:0
 end_of_record
diff --git a/tests/unit/GridItem.spec.js b/tests/unit/GridItem.spec.js
new file mode 100644
index 0000000..b2bc52d
--- /dev/null
+++ b/tests/unit/GridItem.spec.js
@@ -0,0 +1,27 @@
+import { mount, RouterLinkStub } from "@vue/test-utils";
+import GridItem from "@/components/GridItem.vue";
+
+describe("Test GridItem.", () => {
+  it("checks link.", async () => {
+    const wrapper = mount(GridItem, {
+      propsData: {
+        item: {
+          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"
+        }
+      },
+      stubs: {
+        RouterLink: RouterLinkStub
+      }
+    });
+
+    expect(wrapper.findComponent(RouterLinkStub).props().to).toBe("/fruit/3");
+  });
+});
diff --git a/tests/unit/global.spec.js b/tests/unit/global.spec.js
index 8098434..6a49960 100644
--- a/tests/unit/global.spec.js
+++ b/tests/unit/global.spec.js
@@ -2,7 +2,7 @@ import { mount } from "@vue/test-utils";
 import App from "@/App.vue";
 
 describe("App", () => {
-  const wrapper = mount(App, { stubs: ["router-view"] });
+  const wrapper = mount(App, { stubs: ["router-view", "router-link"] });
 
   it("should be a Vue instance", () => {
     expect(wrapper.vm).toBeTruthy();