coverage/clover.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1607048976462" clover="3.2.0">
+<coverage generated="1607266610853" clover="3.2.0">
-  <project timestamp="1607048976462" name="All files">
+  <project timestamp="1607266610853" name="All files">
-    <metrics statements="7" coveredstatements="4" conditionals="0" coveredconditionals="0" methods="3" coveredmethods="1" elements="10" coveredelements="5" complexity="0" loc="7" ncloc="7" packages="2" files="3" classes="3"/>
+    <metrics statements="5" coveredstatements="3" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="0" elements="6" coveredelements="3" complexity="0" loc="5" ncloc="5" packages="2" files="3" classes="3"/>
     <package name="components">
       <metrics statements="1" coveredstatements="1" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
       <file name="Grid.vue" path="/Users/viricel/Sites/fruit-project/src/components/Grid.vue">
@@ -10,18 +10,16 @@
       </file>
     </package>
     <package name="views">
-      <metrics statements="6" coveredstatements="3" conditionals="0" coveredconditionals="0" methods="3" coveredmethods="1"/>
+      <metrics statements="4" coveredstatements="2" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="0"/>
       <file name="Fruit.vue" path="/Users/viricel/Sites/fruit-project/src/views/Fruit.vue">
-        <metrics statements="3" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="2" coveredmethods="0"/>
+        <metrics statements="1" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
         <line num="9" count="0" type="stmt"/>
-        <line num="16" count="0" type="stmt"/>
-        <line num="17" count="0" type="stmt"/>
       </file>
       <file name="Fruits.vue" path="/Users/viricel/Sites/fruit-project/src/views/Fruits.vue">
-        <metrics statements="3" coveredstatements="3" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="1"/>
+        <metrics statements="3" coveredstatements="2" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="0"/>
         <line num="9" count="1" type="stmt"/>
         <line num="10" count="1" type="stmt"/>
-        <line num="19" count="1" type="stmt"/>
+        <line num="19" count="0" type="stmt"/>
       </file>
     </package>
   </project>

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/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":1},"f":{"0":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":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":{}}
 }

coverage/lcov-report/components/Grid.vue.html

@@ -83,7 +83,20 @@
 <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>
-<a name='L28'></a><a href='#L28'>28</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L28'></a><a href='#L28'>28</a>
+<a name='L29'></a><a href='#L29'>29</a>
+<a name='L30'></a><a href='#L30'>30</a>
+<a name='L31'></a><a href='#L31'>31</a>
+<a name='L32'></a><a href='#L32'>32</a>
+<a name='L33'></a><a href='#L33'>33</a>
+<a name='L34'></a><a href='#L34'>34</a>
+<a name='L35'></a><a href='#L35'>35</a>
+<a name='L36'></a><a href='#L36'>36</a>
+<a name='L37'></a><a href='#L37'>37</a>
+<a name='L38'></a><a href='#L38'>38</a>
+<a name='L39'></a><a href='#L39'>39</a>
+<a name='L40'></a><a href='#L40'>40</a>
+<a name='L41'></a><a href='#L41'>41</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>
@@ -110,6 +123,19 @@
 <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>
+<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>
+<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 class="grid"&gt;
     &lt;GridItem :key="item.id" v-for="item in data" :item="item" /&gt;
@@ -133,8 +159,21 @@ export default {
 &lt;style scoped lang="less"&gt;
 .grid {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr;
   column-gap: 1rem;
+  row-gap: 1.5rem;
+&nbsp;
+  @media screen and (min-width: @md) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+&nbsp;
+  @media screen and (min-width: @lg) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+&nbsp;
+  @media screen and (min-width: @xl) {
+    grid-template-columns: repeat(4, 1fr);
+  }
 }
 &lt;/style&gt;
 &nbsp;</pre></td></tr></table></pre>
@@ -144,7 +183,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 03:29:36 GMT+0100 (Central European Standard Time)
+                at Sun Dec 06 2020 15:56:50 GMT+0100 (Central European Standard Time)
             </div>
         </div>
         <script src="../prettify.js"></script>

coverage/lcov-report/components/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 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)
             </div>
         </div>
         <script src="../prettify.js"></script>

coverage/lcov-report/index.html

@@ -22,9 +22,9 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">57.14% </span>
+                <span class="strong">60% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>4/7</span>
+                <span class='fraction'>3/5</span>
             </div>
         
             
@@ -36,16 +36,16 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">33.33% </span>
+                <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>1/3</span>
+                <span class='fraction'>0/1</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">57.14% </span>
+                <span class="strong">60% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>4/7</span>
+                <span class='fraction'>3/5</span>
             </div>
         
             
@@ -92,13 +92,13 @@
 	<div class="chart"><div class="cover-fill" style="width: 50%"></div><div class="cover-empty" style="width: 50%"></div></div>
 	</td>
 	<td data-value="50" class="pct medium">50%</td>
-	<td data-value="6" class="abs medium">3/6</td>
+	<td data-value="4" class="abs medium">2/4</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="0" class="abs high">0/0</td>
-	<td data-value="33.33" class="pct low">33.33%</td>
+	<td data-value="0" class="pct low">0%</td>
-	<td data-value="3" class="abs low">1/3</td>
+	<td data-value="1" class="abs low">0/1</td>
 	<td data-value="50" class="pct medium">50%</td>
-	<td data-value="6" class="abs medium">3/6</td>
+	<td data-value="4" class="abs medium">2/4</td>
 	</tr>
 
 </tbody>
@@ -109,7 +109,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 03:29:36 GMT+0100 (Central European Standard Time)
+                at Sun Dec 06 2020 15:56:50 GMT+0100 (Central European Standard Time)
             </div>
         </div>
         <script src="prettify.js"></script>

coverage/lcov-report/views/Fruit.vue.html

@@ -24,7 +24,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/3</span>
+                <span class='fraction'>0/1</span>
             </div>
         
             
@@ -36,16 +36,16 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/2</span>
+                <span class='fraction'>0/0</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/3</span>
+                <span class='fraction'>0/1</span>
             </div>
         
             
@@ -74,12 +74,7 @@
 <a name='L16'></a><a href='#L16'>16</a>
 <a name='L17'></a><a href='#L17'>17</a>
 <a name='L18'></a><a href='#L18'>18</a>
-<a name='L19'></a><a href='#L19'>19</a>
+<a name='L19'></a><a href='#L19'>19</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
-<a name='L20'></a><a href='#L20'>20</a>
-<a name='L21'></a><a href='#L21'>21</a>
-<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></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>
@@ -94,17 +89,12 @@
 <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-no">&nbsp;</span>
-<span class="cline-any cline-no">&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>
 <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;Fruit Details&lt;/h1&gt;
+    &lt;h2&gt;&lt;span @click="() =&gt; this.$router.back()"&gt;◀&lt;/span&gt; Details&lt;/h2&gt;
     {{ this.fruit }}
   &lt;/div&gt;
 &lt;/template&gt;
@@ -115,11 +105,6 @@ export default {
   name: "FruitDetails",
   computed: {
     ...mapState(["fruit"])
-  },
-<span class="fstat-no" title="function not covered" >  beforeRouteEnter(to, from, next) {</span>
-<span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >    next(async vm =&gt; {</span></span>
-<span class="cstat-no" title="statement not covered" >      await vm.$store.dispatch("getFruit", to.params.id);</span>
-    });
   }
 };
 &lt;/script&gt;
@@ -132,7 +117,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 03:29:36 GMT+0100 (Central European Standard Time)
+                at Sun Dec 06 2020 15:56:50 GMT+0100 (Central European Standard Time)
             </div>
         </div>
         <script src="../prettify.js"></script>

coverage/lcov-report/views/Fruits.vue.html

@@ -22,9 +22,9 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">66.67% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>3/3</span>
+                <span class='fraction'>2/3</span>
             </div>
         
             
@@ -36,16 +36,16 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>1/1</span>
+                <span class='fraction'>0/1</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">66.67% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>3/3</span>
+                <span class='fraction'>2/3</span>
             </div>
         
             
@@ -54,7 +54,7 @@
             Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
         </p>
     </div>
-    <div class='status-line high'></div>
+    <div class='status-line medium'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
 <a name='L2'></a><a href='#L2'>2</a>
@@ -78,7 +78,14 @@
 <a name='L20'></a><a href='#L20'>20</a>
 <a name='L21'></a><a href='#L21'>21</a>
 <a name='L22'></a><a href='#L22'>22</a>
-<a name='L23'></a><a href='#L23'>23</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<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>
+<a name='L28'></a><a href='#L28'>28</a>
+<a name='L29'></a><a href='#L29'>29</a>
+<a name='L30'></a><a href='#L30'>30</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>
@@ -96,13 +103,20 @@
 <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-no">&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>
+<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;div class="fruits"&gt;
-    &lt;h1&gt;Fruits Directory&lt;/h1&gt;
+    &lt;h2&gt;Directory&lt;/h2&gt;
     &lt;Grid :data="this.fruits" /&gt;
   &lt;/div&gt;
 &lt;/template&gt;
@@ -117,11 +131,18 @@ export default {
   computed: {
     ...mapState(["fruits"])
   },
-  async created() {
+<span class="fstat-no" title="function not covered" >  async created() {</span>
-    await this.$store.dispatch("getFruits");
+<span class="cstat-no" title="statement not covered" >    await this.$store.dispatch("getFruits");</span>
   }
 };
 &lt;/script&gt;
+&nbsp;
+&lt;style lang="less"&gt;
+.fruits {
+  margin: 0 auto;
+  max-width: 1200px;
+}
+&lt;/style&gt;
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -129,7 +150,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 03:29:36 GMT+0100 (Central European Standard Time)
+                at Sun Dec 06 2020 15:56:50 GMT+0100 (Central European Standard Time)
             </div>
         </div>
         <script src="../prettify.js"></script>

coverage/lcov-report/views/index.html

@@ -24,7 +24,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">50% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>3/6</span>
+                <span class='fraction'>2/4</span>
             </div>
         
             
@@ -36,16 +36,16 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">33.33% </span>
+                <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>1/3</span>
+                <span class='fraction'>0/1</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">50% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>3/6</span>
+                <span class='fraction'>2/4</span>
             </div>
         
             
@@ -77,28 +77,28 @@
 	<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
 	</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="3" class="abs low">0/3</td>
+	<td data-value="1" class="abs low">0/1</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="0" class="abs high">0/0</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="2" class="abs low">0/2</td>
+	<td data-value="1" class="abs low">0/1</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="3" class="abs low">0/3</td>
 	</tr>
 
 <tr>
-	<td class="file high" data-value="Fruits.vue"><a href="Fruits.vue.html">Fruits.vue</a></td>
+	<td class="file medium" data-value="Fruits.vue"><a href="Fruits.vue.html">Fruits.vue</a></td>
-	<td data-value="100" class="pic high">
+	<td data-value="66.67" class="pic medium">
-	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
+	<div class="chart"><div class="cover-fill" style="width: 66%"></div><div class="cover-empty" style="width: 34%"></div></div>
 	</td>
-	<td data-value="100" class="pct high">100%</td>
+	<td data-value="66.67" class="pct medium">66.67%</td>
-	<td data-value="3" class="abs high">3/3</td>
+	<td data-value="3" class="abs medium">2/3</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="0" class="pct low">0%</td>
-	<td data-value="1" class="abs high">1/1</td>
+	<td data-value="1" class="abs low">0/1</td>
-	<td data-value="100" class="pct high">100%</td>
+	<td data-value="66.67" class="pct medium">66.67%</td>
-	<td data-value="3" class="abs high">3/3</td>
+	<td data-value="3" class="abs medium">2/3</td>
 	</tr>
 
 </tbody>
@@ -109,7 +109,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 03:29:36 GMT+0100 (Central European Standard Time)
+                at Sun Dec 06 2020 15:56:50 GMT+0100 (Central European Standard Time)
             </div>
         </div>
         <script src="../prettify.js"></script>

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)
+FNF:0
-FN:16,(anonymous_2)
-FNF:2
 FNH:0
-FNDA:0,(anonymous_1)
-FNDA:0,(anonymous_2)
 DA:9,0
-DA:16,0
+LF:1
-DA:17,0
-LF:3
 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
+FNH:0
-FNDA:1,(anonymous_1)
+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

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

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