diff --git a/coverage/clover.xml b/coverage/clover.xml index 3a0cbe3..d8bd1b2 100644 --- a/coverage/clover.xml +++ b/coverage/clover.xml @@ -1,43 +1,47 @@ - - - + + + - + - - - - - + + + + + + + + + - + - + - - + + - - - - - - - - - - - + + + + + + + + + + + - + @@ -45,16 +49,16 @@ - + - + - + - - + + @@ -62,21 +66,21 @@ - + - + - - - - + + + + - + - - - + + + diff --git a/coverage/coverage-final.json b/coverage/coverage-final.json index 49dcd5e..6623a49 100644 --- a/coverage/coverage-final.json +++ b/coverage/coverage-final.json @@ -1,11 +1,11 @@ -{"/Users/viricel/Sites/fruit-project/src/components/AddFruit.vue": {"path":"/Users/viricel/Sites/fruit-project/src/components/AddFruit.vue","statementMap":{"0":{"start":{"line":44,"column":0},"end":{"line":44,"column":null}},"1":{"start":{"line":50,"column":0},"end":{"line":50,"column":null}},"2":{"start":{"line":55,"column":0},"end":{"line":55,"column":null}},"3":{"start":{"line":59,"column":0},"end":{"line":59,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":49,"column":0},"end":{"line":49,"column":null}},"loc":{"start":{"line":49,"column":0},"end":{"line":53,"column":null}}},"1":{"name":"(anonymous_2)","decl":{"start":{"line":54,"column":0},"end":{"line":54,"column":null}},"loc":{"start":{"line":54,"column":0},"end":{"line":56,"column":null}}},"2":{"name":"(anonymous_3)","decl":{"start":{"line":58,"column":0},"end":{"line":58,"column":null}},"loc":{"start":{"line":58,"column":0},"end":{"line":60,"column":null}}}},"branchMap":{},"s":{"0":1,"1":0,"2":0,"3":0},"f":{"0":0,"1":0,"2":0},"b":{}} -,"/Users/viricel/Sites/fruit-project/src/components/Header.vue": {"path":"/Users/viricel/Sites/fruit-project/src/components/Header.vue","statementMap":{"0":{"start":{"line":23,"column":0},"end":{"line":23,"column":null}}},"fnMap":{},"branchMap":{},"s":{"0":1},"f":{},"b":{}} -,"/Users/viricel/Sites/fruit-project/src/components/Form/ImageUnsplash/ImageSkeleton.vue": {"path":"/Users/viricel/Sites/fruit-project/src/components/Form/ImageUnsplash/ImageSkeleton.vue","statementMap":{"0":{"start":{"line":13,"column":0},"end":{"line":13,"column":null}}},"fnMap":{},"branchMap":{},"s":{"0":1},"f":{},"b":{}} -,"/Users/viricel/Sites/fruit-project/src/components/Form/ImageUnsplash/ImageUnsplash.vue": {"path":"/Users/viricel/Sites/fruit-project/src/components/Form/ImageUnsplash/ImageUnsplash.vue","statementMap":{"0":{"start":{"line":26,"column":0},"end":{"line":26,"column":null}},"1":{"start":{"line":27,"column":0},"end":{"line":27,"column":null}},"2":{"start":{"line":45,"column":0},"end":{"line":45,"column":null}},"3":{"start":{"line":55,"column":0},"end":{"line":55,"column":null}},"4":{"start":{"line":56,"column":0},"end":{"line":64,"column":null}},"5":{"start":{"line":57,"column":0},"end":{"line":62,"column":null}},"6":{"start":{"line":60,"column":0},"end":{"line":60,"column":null}},"7":{"start":{"line":61,"column":0},"end":{"line":61,"column":null}},"8":{"start":{"line":62,"column":0},"end":{"line":62,"column":null}},"9":{"start":{"line":64,"column":0},"end":{"line":64,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":44,"column":0},"end":{"line":44,"column":null}},"loc":{"start":{"line":44,"column":0},"end":{"line":49,"column":null}}},"1":{"name":"(anonymous_2)","decl":{"start":{"line":54,"column":0},"end":{"line":54,"column":null}},"loc":{"start":{"line":54,"column":0},"end":{"line":65,"column":null}}},"2":{"name":"(anonymous_3)","decl":{"start":{"line":57,"column":0},"end":{"line":57,"column":null}},"loc":{"start":{"line":57,"column":0},"end":{"line":62,"column":null}}},"3":{"name":"(anonymous_4)","decl":{"start":{"line":62,"column":0},"end":{"line":62,"column":null}},"loc":{"start":{"line":62,"column":0},"end":{"line":62,"column":null}}}},"branchMap":{"0":{"loc":{"start":{"line":56,"column":0},"end":{"line":64,"column":null}},"type":"if","locations":[{"start":{"line":56,"column":0},"end":{"line":64,"column":null}},{"start":{"line":56,"column":0},"end":{"line":64,"column":null}}]}},"s":{"0":1,"1":1,"2":0,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0},"f":{"0":0,"1":0,"2":0,"3":0},"b":{"0":[0,0]}} +{"/Users/viricel/Sites/fruit-project/src/components/AddFruit.vue": {"path":"/Users/viricel/Sites/fruit-project/src/components/AddFruit.vue","statementMap":{"0":{"start":{"line":90,"column":0},"end":{"line":90,"column":null}},"1":{"start":{"line":96,"column":0},"end":{"line":96,"column":null}},"2":{"start":{"line":104,"column":0},"end":{"line":104,"column":null}},"3":{"start":{"line":105,"column":0},"end":{"line":105,"column":null}},"4":{"start":{"line":108,"column":0},"end":{"line":108,"column":null}},"5":{"start":{"line":112,"column":0},"end":{"line":112,"column":null}},"6":{"start":{"line":113,"column":0},"end":{"line":113,"column":null}},"7":{"start":{"line":116,"column":0},"end":{"line":116,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":95,"column":0},"end":{"line":95,"column":null}},"loc":{"start":{"line":95,"column":0},"end":{"line":102,"column":null}}},"1":{"name":"(anonymous_2)","decl":{"start":{"line":103,"column":0},"end":{"line":103,"column":null}},"loc":{"start":{"line":103,"column":0},"end":{"line":106,"column":null}}},"2":{"name":"(anonymous_3)","decl":{"start":{"line":107,"column":0},"end":{"line":107,"column":null}},"loc":{"start":{"line":107,"column":0},"end":{"line":109,"column":null}}},"3":{"name":"(anonymous_4)","decl":{"start":{"line":111,"column":0},"end":{"line":111,"column":null}},"loc":{"start":{"line":111,"column":0},"end":{"line":117,"column":null}}},"4":{"name":"(anonymous_5)","decl":{"start":{"line":113,"column":0},"end":{"line":113,"column":null}},"loc":{"start":{"line":113,"column":0},"end":{"line":113,"column":null}}}},"branchMap":{},"s":{"0":1,"1":5,"2":5,"3":5,"4":1,"5":1,"6":2,"7":1},"f":{"0":5,"1":5,"2":1,"3":1,"4":1},"b":{}} +,"/Users/viricel/Sites/fruit-project/src/components/Header.vue": {"path":"/Users/viricel/Sites/fruit-project/src/components/Header.vue","statementMap":{"0":{"start":{"line":28,"column":0},"end":{"line":28,"column":null}}},"fnMap":{},"branchMap":{},"s":{"0":1},"f":{},"b":{}} +,"/Users/viricel/Sites/fruit-project/src/components/Form/ImageUnsplash/ImageSkeleton.vue": {"path":"/Users/viricel/Sites/fruit-project/src/components/Form/ImageUnsplash/ImageSkeleton.vue","statementMap":{"0":{"start":{"line":13,"column":0},"end":{"line":13,"column":null}}},"fnMap":{},"branchMap":{},"s":{"0":0},"f":{},"b":{}} +,"/Users/viricel/Sites/fruit-project/src/components/Form/ImageUnsplash/ImageUnsplash.vue": {"path":"/Users/viricel/Sites/fruit-project/src/components/Form/ImageUnsplash/ImageUnsplash.vue","statementMap":{"0":{"start":{"line":32,"column":0},"end":{"line":32,"column":null}},"1":{"start":{"line":37,"column":0},"end":{"line":37,"column":null}},"2":{"start":{"line":58,"column":0},"end":{"line":58,"column":null}},"3":{"start":{"line":68,"column":0},"end":{"line":68,"column":null}},"4":{"start":{"line":69,"column":0},"end":{"line":77,"column":null}},"5":{"start":{"line":70,"column":0},"end":{"line":75,"column":null}},"6":{"start":{"line":73,"column":0},"end":{"line":73,"column":null}},"7":{"start":{"line":74,"column":0},"end":{"line":74,"column":null}},"8":{"start":{"line":75,"column":0},"end":{"line":75,"column":null}},"9":{"start":{"line":77,"column":0},"end":{"line":77,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":37,"column":0},"end":{"line":37,"column":null}},"loc":{"start":{"line":37,"column":0},"end":{"line":37,"column":null}}},"1":{"name":"(anonymous_3)","decl":{"start":{"line":57,"column":0},"end":{"line":57,"column":null}},"loc":{"start":{"line":57,"column":0},"end":{"line":62,"column":null}}},"2":{"name":"(anonymous_4)","decl":{"start":{"line":67,"column":0},"end":{"line":67,"column":null}},"loc":{"start":{"line":67,"column":0},"end":{"line":78,"column":null}}},"3":{"name":"(anonymous_5)","decl":{"start":{"line":70,"column":0},"end":{"line":70,"column":null}},"loc":{"start":{"line":70,"column":0},"end":{"line":75,"column":null}}},"4":{"name":"(anonymous_6)","decl":{"start":{"line":75,"column":0},"end":{"line":75,"column":null}},"loc":{"start":{"line":75,"column":0},"end":{"line":75,"column":null}}}},"branchMap":{"0":{"loc":{"start":{"line":69,"column":0},"end":{"line":77,"column":null}},"type":"if","locations":[{"start":{"line":69,"column":0},"end":{"line":77,"column":null}},{"start":{"line":69,"column":0},"end":{"line":77,"column":null}}]}},"s":{"0":1,"1":0,"2":0,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0},"f":{"0":0,"1":0,"2":0,"3":0,"4":0},"b":{"0":[0,0]}} ,"/Users/viricel/Sites/fruit-project/src/components/Grid/DeleteItem.vue": {"path":"/Users/viricel/Sites/fruit-project/src/components/Grid/DeleteItem.vue","statementMap":{"0":{"start":{"line":27,"column":0},"end":{"line":27,"column":null}},"1":{"start":{"line":33,"column":0},"end":{"line":33,"column":null}},"2":{"start":{"line":36,"column":0},"end":{"line":36,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":23,"column":0},"end":{"line":23,"column":null}},"loc":{"start":{"line":23,"column":0},"end":{"line":23,"column":null}}},"1":{"name":"(anonymous_2)","decl":{"start":{"line":26,"column":0},"end":{"line":26,"column":null}},"loc":{"start":{"line":26,"column":0},"end":{"line":30,"column":null}}},"2":{"name":"(anonymous_3)","decl":{"start":{"line":32,"column":0},"end":{"line":32,"column":null}},"loc":{"start":{"line":32,"column":0},"end":{"line":34,"column":null}}},"3":{"name":"(anonymous_4)","decl":{"start":{"line":35,"column":0},"end":{"line":35,"column":null}},"loc":{"start":{"line":35,"column":0},"end":{"line":37,"column":null}}},"4":{"name":"(anonymous_5)","decl":{"start":{"line":36,"column":0},"end":{"line":36,"column":null}},"loc":{"start":{"line":36,"column":0},"end":{"line":36,"column":null}}}},"branchMap":{},"s":{"0":0,"1":0,"2":0},"f":{"0":0,"1":0,"2":0,"3":0,"4":0},"b":{}} -,"/Users/viricel/Sites/fruit-project/src/components/Grid/Grid.vue": {"path":"/Users/viricel/Sites/fruit-project/src/components/Grid/Grid.vue","statementMap":{"0":{"start":{"line":16,"column":0},"end":{"line":16,"column":null}},"1":{"start":{"line":17,"column":0},"end":{"line":17,"column":null}},"2":{"start":{"line":18,"column":0},"end":{"line":18,"column":null}}},"fnMap":{},"branchMap":{},"s":{"0":0,"1":0,"2":0},"f":{},"b":{}} -,"/Users/viricel/Sites/fruit-project/src/components/Grid/GridItem.vue": {"path":"/Users/viricel/Sites/fruit-project/src/components/Grid/GridItem.vue","statementMap":{"0":{"start":{"line":23,"column":0},"end":{"line":23,"column":null}},"1":{"start":{"line":24,"column":0},"end":{"line":24,"column":null}},"2":{"start":{"line":37,"column":0},"end":{"line":37,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":36,"column":0},"end":{"line":36,"column":null}},"loc":{"start":{"line":36,"column":0},"end":{"line":38,"column":null}}}},"branchMap":{},"s":{"0":1,"1":1,"2":1},"f":{"0":1},"b":{}} +,"/Users/viricel/Sites/fruit-project/src/components/Grid/Grid.vue": {"path":"/Users/viricel/Sites/fruit-project/src/components/Grid/Grid.vue","statementMap":{"0":{"start":{"line":16,"column":0},"end":{"line":16,"column":null}},"1":{"start":{"line":17,"column":0},"end":{"line":17,"column":null}},"2":{"start":{"line":23,"column":0},"end":{"line":23,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":23,"column":0},"end":{"line":23,"column":null}},"loc":{"start":{"line":23,"column":0},"end":{"line":23,"column":null}}}},"branchMap":{},"s":{"0":0,"1":0,"2":0},"f":{"0":0},"b":{}} +,"/Users/viricel/Sites/fruit-project/src/components/Grid/GridItem.vue": {"path":"/Users/viricel/Sites/fruit-project/src/components/Grid/GridItem.vue","statementMap":{"0":{"start":{"line":23,"column":0},"end":{"line":23,"column":null}},"1":{"start":{"line":27,"column":0},"end":{"line":27,"column":null}},"2":{"start":{"line":36,"column":0},"end":{"line":36,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":27,"column":0},"end":{"line":27,"column":null}},"loc":{"start":{"line":27,"column":0},"end":{"line":27,"column":null}}},"1":{"name":"(anonymous_3)","decl":{"start":{"line":35,"column":0},"end":{"line":35,"column":null}},"loc":{"start":{"line":35,"column":0},"end":{"line":37,"column":null}}}},"branchMap":{},"s":{"0":1,"1":0,"2":2},"f":{"0":0,"1":2},"b":{}} ,"/Users/viricel/Sites/fruit-project/src/components/Grid/GridItemSkeleton.vue": {"path":"/Users/viricel/Sites/fruit-project/src/components/Grid/GridItemSkeleton.vue","statementMap":{"0":{"start":{"line":16,"column":0},"end":{"line":16,"column":null}}},"fnMap":{},"branchMap":{},"s":{"0":0},"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":28,"column":0},"end":{"line":28,"column":null}},"1":{"start":{"line":29,"column":0},"end":{"line":29,"column":null}},"2":{"start":{"line":35,"column":0},"end":{"line":35,"column":null}},"3":{"start":{"line":41,"column":0},"end":{"line":41,"column":null}},"4":{"start":{"line":47,"column":0},"end":{"line":47,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":34,"column":0},"end":{"line":34,"column":null}},"loc":{"start":{"line":34,"column":0},"end":{"line":38,"column":null}}},"1":{"name":"(anonymous_2)","decl":{"start":{"line":40,"column":0},"end":{"line":40,"column":null}},"loc":{"start":{"line":40,"column":0},"end":{"line":42,"column":null}}},"2":{"name":"(anonymous_3)","decl":{"start":{"line":46,"column":0},"end":{"line":46,"column":null}},"loc":{"start":{"line":46,"column":0},"end":{"line":48,"column":null}}}},"branchMap":{"0":{"loc":{"start":{"line":47,"column":0},"end":{"line":47,"column":null}},"type":"cond-expr","locations":[{"start":{"line":47,"column":0},"end":{"line":47,"column":null}},{"start":{"line":47,"column":0},"end":{"line":47,"column":null}}]}},"s":{"0":0,"1":0,"2":0,"3":0,"4":0},"f":{"0":0,"1":0,"2":0},"b":{"0":[0,0]}} -,"/Users/viricel/Sites/fruit-project/src/views/Fruits.vue": {"path":"/Users/viricel/Sites/fruit-project/src/views/Fruits.vue","statementMap":{"0":{"start":{"line":13,"column":0},"end":{"line":13,"column":null}},"1":{"start":{"line":14,"column":0},"end":{"line":14,"column":null}},"2":{"start":{"line":23,"column":0},"end":{"line":23,"column":null}},"3":{"start":{"line":28,"column":0},"end":{"line":28,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":22,"column":0},"end":{"line":22,"column":null}},"loc":{"start":{"line":22,"column":0},"end":{"line":26,"column":null}}},"1":{"name":"(anonymous_2)","decl":{"start":{"line":27,"column":0},"end":{"line":27,"column":null}},"loc":{"start":{"line":27,"column":0},"end":{"line":29,"column":null}}},"2":{"name":"(anonymous_3)","decl":{"start":{"line":28,"column":0},"end":{"line":28,"column":null}},"loc":{"start":{"line":28,"column":0},"end":{"line":28,"column":null}}}},"branchMap":{},"s":{"0":0,"1":0,"2":0,"3":0},"f":{"0":0,"1":0,"2":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":28,"column":0},"end":{"line":28,"column":null}},"1":{"start":{"line":32,"column":0},"end":{"line":32,"column":null}},"2":{"start":{"line":34,"column":0},"end":{"line":34,"column":null}},"3":{"start":{"line":40,"column":0},"end":{"line":40,"column":null}},"4":{"start":{"line":46,"column":0},"end":{"line":46,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":32,"column":0},"end":{"line":32,"column":null}},"loc":{"start":{"line":32,"column":0},"end":{"line":32,"column":null}}},"1":{"name":"(anonymous_3)","decl":{"start":{"line":33,"column":0},"end":{"line":33,"column":null}},"loc":{"start":{"line":33,"column":0},"end":{"line":37,"column":null}}},"2":{"name":"(anonymous_4)","decl":{"start":{"line":39,"column":0},"end":{"line":39,"column":null}},"loc":{"start":{"line":39,"column":0},"end":{"line":41,"column":null}}},"3":{"name":"(anonymous_5)","decl":{"start":{"line":45,"column":0},"end":{"line":45,"column":null}},"loc":{"start":{"line":45,"column":0},"end":{"line":47,"column":null}}}},"branchMap":{"0":{"loc":{"start":{"line":46,"column":0},"end":{"line":46,"column":null}},"type":"cond-expr","locations":[{"start":{"line":46,"column":0},"end":{"line":46,"column":null}},{"start":{"line":46,"column":0},"end":{"line":46,"column":null}}]}},"s":{"0":0,"1":0,"2":0,"3":0,"4":0},"f":{"0":0,"1":0,"2":0,"3":0},"b":{"0":[0,0]}} +,"/Users/viricel/Sites/fruit-project/src/views/Fruits.vue": {"path":"/Users/viricel/Sites/fruit-project/src/views/Fruits.vue","statementMap":{"0":{"start":{"line":13,"column":0},"end":{"line":13,"column":null}},"1":{"start":{"line":17,"column":0},"end":{"line":17,"column":null}},"2":{"start":{"line":22,"column":0},"end":{"line":22,"column":null}},"3":{"start":{"line":27,"column":0},"end":{"line":27,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":17,"column":0},"end":{"line":17,"column":null}},"loc":{"start":{"line":17,"column":0},"end":{"line":17,"column":null}}},"1":{"name":"(anonymous_3)","decl":{"start":{"line":21,"column":0},"end":{"line":21,"column":null}},"loc":{"start":{"line":21,"column":0},"end":{"line":25,"column":null}}},"2":{"name":"(anonymous_4)","decl":{"start":{"line":26,"column":0},"end":{"line":26,"column":null}},"loc":{"start":{"line":26,"column":0},"end":{"line":28,"column":null}}},"3":{"name":"(anonymous_5)","decl":{"start":{"line":27,"column":0},"end":{"line":27,"column":null}},"loc":{"start":{"line":27,"column":0},"end":{"line":27,"column":null}}}},"branchMap":{},"s":{"0":0,"1":0,"2":0,"3":0},"f":{"0":0,"1":0,"2":0,"3":0},"b":{}} } diff --git a/coverage/lcov-report/components/AddFruit.vue.html b/coverage/lcov-report/components/AddFruit.vue.html index 8001717..f0b2917 100644 --- a/coverage/lcov-report/components/AddFruit.vue.html +++ b/coverage/lcov-report/components/AddFruit.vue.html @@ -22,9 +22,9 @@
- 25% + 100% Statements - 1/4 + 8/8
@@ -36,16 +36,16 @@
- 0% + 100% Functions - 0/3 + 5/5
- 25% + 100% Lines - 1/4 + 8/8
@@ -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
@@ -168,7 +168,155 @@
 110
 111
 112
-113 
+113
+114
+115
+116
+117
+118
+119
+120
+121
+122
+123
+124
+125
+126
+127
+128
+129
+130
+131
+132
+133
+134
+135
+136
+137
+138
+139
+140
+141
+142
+143
+144
+145
+146
+147
+148
+149
+150
+151
+152
+153
+154
+155
+156
+157
+158
+159
+160
+161
+162
+163
+164
+165
+166
+167
+168
+169
+170
+171
+172
+173
+174
+175
+176
+177
+178
+179
+180
+181
+182
+183
+184
+185
+186
+187
+188
+189
+190
+191
+192
+193
+194
+195
+196
+197
+198
+199
+200
+201
+202
+203
+204
+205
+206
+207
+208
+209
+210
+211
+212
+213
+214
+215 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
  
  
  
@@ -217,16 +365,72 @@
  
  
  
- 
+5x
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+5x
+5x
+ 
+ 
+1x
+ 
+ 
+ 
+1x
+2x
+ 
+ 
+1x
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
  
  
  
  
- 
  
  
  
- 
  
  
  
@@ -283,41 +487,87 @@
  
<template>
   <div class="modal">
     <h2>New Fruit</h2>
-    <form id="new-fruit">
+    <form id="new-fruit" @submit.prevent="checkForm">
       <!-- name -->
-      <p>
-        <input ref="autofocus" type="text" v-model="fruit.name" placeholder="Name" />
-      </p>
+      <div class="form-field">
+        <label for="fruit-name">Name</label>
+        <input
+          id="fruit-name"
+          ref="autofocus"
+          type="text"
+          v-model="fruit.name"
+          placeholder="Ex: Banana"
+          required
+        />
+      </div>
  
       <!-- image finder (with Unsplash API) -->
       <ImageUnsplash
-        @getValue="getImage"
+        @getValue="url => (fruit.image = url)"
         label="Image"
+        containerClass="form-field"
         placeholder="Search: strawberry, apple ..."
+        :required="true"
       />
  
-      <div class="input-group">
+      <div class="form-group">
         <!-- taste -->
-        <input type="text" v-model="fruit.taste" placeholder="Taste" />
+        <div class="form-field">
+          <label for="fruit-taste">Taste</label>
+          <input
+            id="fruit-taste"
+            type="text"
+            v-model="fruit.taste"
+            placeholder="Ex: sweet"
+            required
+          />
+        </div>
  
         <!-- color -->
-        <input type="color" v-model="fruit.color" placeholder="Color" />
+        <div class="form-field">
+          <label for="fruit-color">Color</label>
+          <input id="fruit-color" type="color" v-model="fruit.color" placeholder="Color" required />
+        </div>
       </div>
  
-      <!-- price -->
-      <p>
-        <input type="number" v-model="fruit.price" placeholder="Price" />
-      </p>
+      <div class="form-group">
+        <!-- price -->
+        <div class="form-field">
+          <label for="fruit-price">Price ($)</label>
+          <input
+            id="fruit-price"
+            type="number"
+            v-model="fruit.price"
+            placeholder="Ex: $13"
+            required
+            min="0"
+          />
+        </div>
  
-      <!-- expires -->
-      <p>
-        <input type="date" v-model="fruit.expires" placeholder="Expiry date" />
-      </p>
+        <!-- expires -->
+        <div class="form-field">
+          <label for="fruit-expires">Expiration Date</label>
+          <input id="fruit-expires" type="date" v-model="fruit.expires" required />
+        </div>
+      </div>
  
       <!-- description -->
-      <p>
-        <textarea v-model="fruit.description" placeholder="Message ..." />
-      </p>
+      <div class="form-field">
+        <label for="fruit-description">Description</label>
+        <textarea
+          id="fruit-description"
+          v-model="fruit.description"
+          placeholder="Ex: malesuada pellentesque elit eget ..."
+          required
+        />
+      </div>
+ 
+      <div class="actions">
+        <button class="btn btn--cancel" type="button" @click="() => $store.commit('toggleModal')">
+          Cancel
+        </button>
+        <button class="btn btn--success" type="submit">Save</button>
+      </div>
     </form>
   </div>
 </template>
@@ -328,17 +578,28 @@ import ImageUnsplash from "./Form/ImageUnsplash/ImageUnsplash";
 export default {
   name: "AddFruit",
   components: { ImageUnsplash },
-  data() {
-    return {
-      fruit: {}
+  data() {
+    return {
+      fruit: {
+        color: "#000000",
+        isFruit: true
+      }
     };
   },
-  mounted() {
-    this.$refs["autofocus"].focus();
+  mounted() {
+    this.$refs["autofocus"].focus();
+    document.body.classList.add("is-overlayed");
+  },
+  destroyed() {
+    document.body.classList.remove("is-overlayed");
   },
   methods: {
-    getImage(url) {
-      this.fruit.image = url;
+    async checkForm(e) {
+      this.fruit.expires = new Date(this.fruit.expires);
+      await this.$store
+        .dispatch("addFruit", this.fruit)
+        .then(() => this.$store.commit("toggleModal"));
+      e.preventDefault();
     }
   }
 };
@@ -346,15 +607,15 @@ export default {
  
 <style lang="less">
 .modal {
-  position: absolute;
+  position: fixed;
   top: @headerHeight;
   left: 0;
   right: 0;
   bottom: 0;
-  height: 100%;
   background-color: @color-2;
   padding: 1rem;
   z-index: 14;
+  overflow-y: scroll;
  
   form {
     border: 2px solid @color-1;
@@ -364,30 +625,75 @@ export default {
     background-color: rgba(0, 0, 0, 0.06);
     box-shadow: 0 1px 4px 1px #d2d2f2;
     padding: 1rem;
+    margin-bottom: 1rem;
  
-    .input-group {
-      display: flex;
-      align-items: center;
+    @media screen and (min-width: @sm) {
+      width: 425px;
+      margin: 0 auto 2rem auto;
+    }
+ 
+    [type="color"] {
+      height: 48px;
+    }
+ 
+    .form-field {
+      padding: 0.75rem 1rem;
+      border-radius: 4px;
+      box-sizing: border-box;
+      background-color: @color-2;
       margin: 1rem 0;
  
-      [type="color"] {
-        width: 35%;
-        height: 48px;
+      label {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 0.5rem;
       }
  
-      :first-child {
-        margin-right: 1rem;
+      textarea,
+      input {
+        width: 100%;
+        box-sizing: border-box;
+        border: none;
+        border-radius: 4px;
+        background-color: lighten(@text-color, 70%);
+        padding: 0.75rem 1rem;
+        color: darken(@color-1, 20%);
       }
     }
  
-    input,
-    .image-unsplash {
-      box-sizing: border-box;
-      width: 100%;
-      border-radius: 4px;
-      border: 1px solid #cecece;
+    .form-group {
+      display: flex;
+      align-items: center;
+      margin: 1rem 0;
       background-color: @color-2;
-      padding: 0.75rem 1rem;
+ 
+      .form-field {
+        background-color: none;
+        margin: 0;
+        width: 50%;
+      }
+    }
+ 
+    .actions {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+ 
+      .btn {
+        border: none;
+        border-radius: 4px;
+        color: @color-2;
+        padding: 0.5rem 1.35rem;
+        margin: 0 0.5rem;
+ 
+        &--success {
+          background-color: #2ecc71;
+        }
+ 
+        &--cancel {
+          background-color: darken(#cecece, 15%);
+        }
+      }
     }
   }
 }
@@ -399,7 +705,7 @@ export default {
             

                 Code coverage generated by
                 istanbul
-                at Mon Dec 07 2020 15:37:08 GMT+0100 (Central European Standard Time)
+                at Tue Dec 08 2020 18:03:10 GMT+0100 (Central European Standard Time)
             

         
         
diff --git a/coverage/lcov-report/components/Form/ImageUnsplash/ImageSkeleton.vue.html b/coverage/lcov-report/components/Form/ImageUnsplash/ImageSkeleton.vue.html
index f5eee60..9cfc10e 100644
--- a/coverage/lcov-report/components/Form/ImageUnsplash/ImageSkeleton.vue.html
+++ b/coverage/lcov-report/components/Form/ImageUnsplash/ImageSkeleton.vue.html
@@ -22,9 +22,9 @@
         

             
             

-                100% 
+                0% 
                 Statements
-                1/1
+                0/1
             

         
             
@@ -43,9 +43,9 @@
         
             
             

-                100% 
+                0% 
                 Lines
-                1/1
+                0/1
             

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

     

-    

+    

     

-	
-	
+	
-	
-	
+	
+	
-	
-	
+	
+	
-	
-	
-	
+	
+	
-	
-	
-	
+	
+	
+	
@@ -109,7 +109,7 @@
             

                 Code coverage generated by
                 istanbul
-                at Mon Dec 07 2020 15:37:08 GMT+0100 (Central European Standard Time)
+                at Tue Dec 08 2020 18:03:10 GMT+0100 (Central European Standard Time)
             

diff --git a/coverage/lcov-report/components/Grid/DeleteItem.vue.html b/coverage/lcov-report/components/Grid/DeleteItem.vue.html
index e66dfce..9be1967 100644
--- a/coverage/lcov-report/components/Grid/DeleteItem.vue.html
+++ b/coverage/lcov-report/components/Grid/DeleteItem.vue.html
@@ -250,8 +250,8 @@
     <div v-if="openPrompt" :class="{ open: openPrompt }" class="prompt">
       <h3>You will delete '{{ item.name }}'?</h3>
       <div class="actions">
-        <button class="btn btn-cancel" @click="openPrompt = false">No</button>
-        <button class="btn btn-success" @click="removeFruit(item.id)">Yes</button>
+        <button class="btn btn--cancel" @click="openPrompt = false">No</button>
+        <button class="btn btn--success" @click="removeFruit(item.id)">Yes</button>
       </div>
     </div>
   </div>
@@ -311,14 +311,14 @@ export default {
     color: @color-2;
     padding: 0.5rem 1.35rem;
     margin: 0 0.5rem;
-  }
  
-  .btn-success {
-    background-color: #2ecc71;
-  }
+    &--success {
+      background-color: #2ecc71;
+    }
  
-  .btn-cancel {
-    background-color: darken(#cecece, 15%);
+    &--cancel {
+      background-color: darken(#cecece, 15%);
+    }
   }
 }
  
@@ -342,7 +342,7 @@ export default {
             

                 Code coverage generated by
                 istanbul
-                at Mon Dec 07 2020 15:37:08 GMT+0100 (Central European Standard Time)
+                at Tue Dec 08 2020 18:03:10 GMT+0100 (Central European Standard Time)
             

diff --git a/coverage/lcov-report/components/Grid/Grid.vue.html b/coverage/lcov-report/components/Grid/Grid.vue.html
index f50ed69..f6bf5b3 100644
--- a/coverage/lcov-report/components/Grid/Grid.vue.html
+++ b/coverage/lcov-report/components/Grid/Grid.vue.html
@@ -36,9 +36,9 @@
         
             
             

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

         
             
@@ -138,8 +138,7 @@
 808182
-83
-84

 
1
 2
@@ -91,7 +91,7 @@
  
  
  
-1x
+ 
  
  
  
@@ -114,7 +114,7 @@
 </template>
  
 <script>
-import VueContentLoading from "vue-content-loading";
+import VueContentLoading from "vue-content-loading";
  
 export default {
   name: "ImageSkeleton",
@@ -132,7 +132,7 @@ export default {
             

                 Code coverage generated by
                 istanbul
-                at Mon Dec 07 2020 15:37:08 GMT+0100 (Central European Standard Time)
+                at Tue Dec 08 2020 18:03:10 GMT+0100 (Central European Standard Time)
             

         
         
diff --git a/coverage/lcov-report/components/Form/ImageUnsplash/ImageUnsplash.vue.html b/coverage/lcov-report/components/Form/ImageUnsplash/ImageUnsplash.vue.html
index d7bd160..308ed0d 100644
--- a/coverage/lcov-report/components/Form/ImageUnsplash/ImageUnsplash.vue.html
+++ b/coverage/lcov-report/components/Form/ImageUnsplash/ImageUnsplash.vue.html
@@ -22,9 +22,9 @@
         

             
             

-                20% 
+                10% 
                 Statements
-                2/10
+                1/10
             

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

                 0% 
                 Functions
-                0/4
+                0/5
             

         
             
             

-                20% 
+                10% 
                 Lines
-                2/10
+                1/10
             

         
             
@@ -181,7 +181,20 @@
 123
 124
 125
-126
 
+126
+127
+128
+129
+130
+131
+132
+133 
+ 
+ 
+ 
+ 
+ 
+ 
  
  
  
@@ -207,7 +220,14 @@
  
  
 1x
-1x
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
  
  
  
@@ -300,14 +320,8 @@
  
  
  
- 
- 
- 
- 
- 
- 
  
<template>
-  <div class="image-unsplash">
+  <div :class="containerClass" class="image-unsplash">
     <label for="search-unsplash">{{ label }}</label>
     <!-- Loading placeholder -->
     <ImageSkeleton v-if="loading" />
@@ -325,21 +339,30 @@
  
     <!-- Search input -->
     <div class="search-box">
-      <input id="search-unsplash" type="search" :placeholder="placeholder" @change="handleSearch" />
+      <input
+        id="search-unsplash"
+        type="search"
+        :placeholder="placeholder"
+        @change="handleSearch"
+        :required="required"
+      />
     </div>
   </div>
 </template>
  
 <script>
 import { mapState } from "vuex";
-import ImageSkeleton from "./ImageSkeleton";
  
 export default {
   name: "ImageUnsplash",
   components: {
-    ImageSkeleton
+    ImageSkeleton: () => import("./ImageSkeleton")
   },
   props: {
+    containerClass: {
+      type: String,
+      default: null
+    },
     label: {
       type: String,
       default: "Image (from Unsplash)"
@@ -347,6 +370,10 @@ export default {
     placeholder: {
       type: String,
       default: "Type anything !"
+    },
+    required: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -377,12 +404,6 @@ export default {
  
 <style scoped lang="less">
 .image-unsplash {
-  label {
-    display: block;
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-  }
- 
   .preview,
   .skeleton {
     margin-bottom: 1rem;
@@ -412,7 +433,7 @@ export default {
       position: absolute;
       z-index: 1;
       top: 50%;
-      right: 0.3rem;
+      right: 0.5rem;
       width: 24px;
       height: 24px;
       transform: translateY(-50%);
@@ -438,7 +459,7 @@ export default {
             

                 Code coverage generated by
                 istanbul
-                at Mon Dec 07 2020 15:37:08 GMT+0100 (Central European Standard Time)
+                at Tue Dec 08 2020 18:03:10 GMT+0100 (Central European Standard Time)
             

         
         
diff --git a/coverage/lcov-report/components/Form/ImageUnsplash/index.html b/coverage/lcov-report/components/Form/ImageUnsplash/index.html
index da39098..4934036 100644
--- a/coverage/lcov-report/components/Form/ImageUnsplash/index.html
+++ b/coverage/lcov-report/components/Form/ImageUnsplash/index.html
@@ -22,9 +22,9 @@
         

             
             

-                27.27% 
+                9.09% 
                 Statements
-                3/11
+                1/11
             

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

                 0% 
                 Functions
-                0/4
+                0/5
             

         
             
             

-                27.27% 
+                9.09% 
                 Lines
-                3/11
+                1/11
             

         
             
@@ -72,33 +72,33 @@
 

 
 
ImageSkeleton.vue
-	

+			ImageSkeleton.vue
+	

 			100%1/10%0/1
 	100%
 	0/0
 	100%
 	0/0100%1/10%0/1
 	

 
 

 	ImageUnsplash.vue
-	

+			
+	

 			20%2/1010%1/10
 	0%
 	0/2
 	0%0/420%2/100/510%1/10
 	

 
 
         
         
         
         
 
 
 
+83 
  
  
  
@@ -156,6 +155,11 @@
  
  
  
+ 
+ 
+ 
+ 
+ 
  
  
  
@@ -216,12 +220,6 @@
  
  
  
- 
- 
- 
- 
- 
- 
  
<template>
   <div :class="{ error: !loading && !data.length }" class="grid">
     <!-- Loading placeholder -->
@@ -239,13 +237,12 @@
 <script>
 import { mapState } from "vuex";
 import GridItemSkeleton from "./GridItemSkeleton";
-import GridItem from "./GridItem";
  
 export default {
   name: "Grid",
   components: {
     GridItemSkeleton,
-    GridItem
+    GridItem: () => import("./GridItem")
   },
   props: {
     data: Array
@@ -312,7 +309,7 @@ export default {
             

                 Code coverage generated by
                 istanbul
-                at Mon Dec 07 2020 15:37:08 GMT+0100 (Central European Standard Time)
+                at Tue Dec 08 2020 18:03:10 GMT+0100 (Central European Standard Time)
             

         
         
diff --git a/coverage/lcov-report/components/Grid/GridItem.vue.html b/coverage/lcov-report/components/Grid/GridItem.vue.html
index d56ed99..5a15a7c 100644
--- a/coverage/lcov-report/components/Grid/GridItem.vue.html
+++ b/coverage/lcov-report/components/Grid/GridItem.vue.html
@@ -22,9 +22,9 @@
         

             
             

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

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

-                100% 
+                50% 
                 Functions
-                1/1
+                1/2
             

         
             
             

-                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.
         

     

-    

+    

     

-	
-	
+	
+	
-	
-	
+	
-	
-	
+	
+	
-	
-	
-	
-	
+	
+	
+	
+	
@@ -139,7 +139,7 @@
             

                 Code coverage generated by
                 istanbul
-                at Mon Dec 07 2020 15:37:08 GMT+0100 (Central European Standard Time)
+                at Tue Dec 08 2020 18:03:10 GMT+0100 (Central European Standard Time)
             

diff --git a/coverage/lcov-report/components/Header.vue.html b/coverage/lcov-report/components/Header.vue.html
index b156279..429458d 100644
--- a/coverage/lcov-report/components/Header.vue.html
+++ b/coverage/lcov-report/components/Header.vue.html
@@ -157,7 +157,16 @@
 99100101
-102

 
1
 2
@@ -166,8 +166,7 @@
 108
 109
 110
-111
-112 
+111 
  
  
  
@@ -190,7 +189,10 @@
  
  
 1x
-1x
+ 
+ 
+ 
+ 
  
  
  
@@ -199,11 +201,7 @@
  
  
  
- 
- 
- 
- 
-1x
+2x
  
  
  
@@ -301,11 +299,10 @@
  
 <script>
 import { mapState } from "vuex";
-import DeleteItem from "./DeleteItem";
  
 export default {
   name: "GridItem",
-  components: { DeleteItem },
+  components: { DeleteItem: () => import("./DeleteItem") },
   props: {
     item: Object
   },
@@ -396,7 +393,7 @@ export default {
             

                 Code coverage generated by
                 istanbul
-                at Mon Dec 07 2020 15:37:08 GMT+0100 (Central European Standard Time)
+                at Tue Dec 08 2020 18:03:10 GMT+0100 (Central European Standard Time)
             

         
         
diff --git a/coverage/lcov-report/components/Grid/GridItemSkeleton.vue.html b/coverage/lcov-report/components/Grid/GridItemSkeleton.vue.html
index 707288f..8efda22 100644
--- a/coverage/lcov-report/components/Grid/GridItemSkeleton.vue.html
+++ b/coverage/lcov-report/components/Grid/GridItemSkeleton.vue.html
@@ -141,7 +141,7 @@ export default {
             

                 Code coverage generated by
                 istanbul
-                at Mon Dec 07 2020 15:37:08 GMT+0100 (Central European Standard Time)
+                at Tue Dec 08 2020 18:03:10 GMT+0100 (Central European Standard Time)
             

         
         
diff --git a/coverage/lcov-report/components/Grid/index.html b/coverage/lcov-report/components/Grid/index.html
index 4469d56..9a19fb8 100644
--- a/coverage/lcov-report/components/Grid/index.html
+++ b/coverage/lcov-report/components/Grid/index.html
@@ -22,9 +22,9 @@
         

             
             

-                30% 
+                20% 
                 Statements
-                3/10
+                2/10
             

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

-                16.67% 
+                12.5% 
                 Functions
-                1/6
+                1/8
             

         
             
             

-                30% 
+                20% 
                 Lines
-                3/10
+                2/10
             

         
             
@@ -95,25 +95,25 @@
 	
0/3
 	100%
 	0/0100%0/00%0/1
 	0%
 	0/3
 	

 
 
GridItem.vue
-	

+			GridItem.vue
+	

 			100%3/366.67%2/3
 	100%
 	0/0100%1/1100%3/350%1/266.67%2/3
 	

 
 

         
         
 
  
+102
+103
+104
+105
+106 
+ 
+ 
+ 
+ 
+ 
  
  
  
@@ -257,7 +266,6 @@
  
  
  
- 
  
<template>
   <header id="header" class="main-nav">
     <router-link to="/">
@@ -267,13 +275,18 @@
  
     <div class="actions">
       <button
+        :disabled="modalIsOpen"
         class="action-btn action-btn--delete"
         @click="() => $store.commit('toggleDeleteMode')"
       >
         {{ deleteMode ? "&#x1F6AB;" : "&#x1f5d1;" }}
       </button>
-      <button class="action-btn action-btn--add" @click="() => $store.commit('toggleModal')">
-        +
+      <button
+        :disabled="deleteMode"
+        class="action-btn action-btn--add"
+        @click="() => $store.commit('toggleModal')"
+      >
+        {{ modalIsOpen ? "&#x1F6AB;" : "&#x2795;" }}
       </button>
     </div>
   </header>
@@ -285,7 +298,7 @@ import { mapState } from "vuex";
 export default {
   name: "Header",
   computed: {
-    ...mapState(["deleteMode"])
+    ...mapState(["deleteMode", "modalIsOpen"])
   }
 };
 </script>
@@ -335,24 +348,23 @@ header {
         border: none;
         border-radius: 50%;
         color: @color-2;
-        font-size: 28px;
+        font-size: 24px;
         font-weight: lighter;
         text-align: center;
         margin-left: 1rem;
+        padding-top: 2px;
+        background: lighten(#cecece, 10%);
+ 
+        &:disabled {
+          opacity: 0.4;
+        }
  
         &--delete {
           border: 1px solid @text-error;
-          background: lighten(#cecece, 10%);
-          font-size: 24px;
-          padding-top: 2px;
         }
  
         &--add {
-          background: linear-gradient(112.4deg, #1c9797 11.05%, #147171 89.93%);
- 
-          &:hover {
-            background: linear-gradient(0deg, #1c9797 11.05%, #147171 89.93%);
-          }
+          border: 1px solid @color-1;
         }
       }
     }
@@ -366,7 +378,7 @@ header {
             

                 Code coverage generated by
                 istanbul
-                at Mon Dec 07 2020 15:37:08 GMT+0100 (Central European Standard Time)
+                at Tue Dec 08 2020 18:03:10 GMT+0100 (Central European Standard Time)
             

         
         
diff --git a/coverage/lcov-report/components/index.html b/coverage/lcov-report/components/index.html
index 583a74b..049cf53 100644
--- a/coverage/lcov-report/components/index.html
+++ b/coverage/lcov-report/components/index.html
@@ -22,9 +22,9 @@
         

             
             

-                40% 
+                100% 
                 Statements
-                2/5
+                9/9
             

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

-                0% 
+                100% 
                 Functions
-                0/3
+                5/5
             

         
             
             

-                40% 
+                100% 
                 Lines
-                2/5
+                9/9
             

         
             
@@ -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,18 @@
 
-	
-	
+	
-	
-	
+	
+	
-	
-	
-	
-	
+	
+	
+	
+	
@@ -109,7 +109,7 @@
             

                 Code coverage generated by
                 istanbul
-                at Mon Dec 07 2020 15:37:08 GMT+0100 (Central European Standard Time)
+                at Tue Dec 08 2020 18:03:10 GMT+0100 (Central European Standard Time)
             

diff --git a/coverage/lcov-report/index.html b/coverage/lcov-report/index.html
index cd67b66..65c74b7 100644
--- a/coverage/lcov-report/index.html
+++ b/coverage/lcov-report/index.html
@@ -22,9 +22,9 @@
         

             
             

-                22.86% 
+                30.77% 
                 Statements
-                8/35
+                12/39
             

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

-                5.26% 
+                23.08% 
                 Functions
-                1/19
+                6/26
             

         
             
             

-                22.86% 
+                30.77% 
                 Lines
-                8/35
+                12/39
             

         
             
@@ -72,48 +72,48 @@
 

-	
-	
+	
-	
-	
+	
+	
-	
-	
-	
-	
+	
+	
+	
+	
-	
-	
-	
+	
+	
-	
-	
-	
+	
+	
+	
-	
-	
-	
+	
+	
-	
-	
-	
-	
+	
+	
+	
+	
@@ -126,7 +126,7 @@
 	
-	
+	
@@ -139,7 +139,7 @@
             

                 Code coverage generated by
                 istanbul
-                at Mon Dec 07 2020 15:37:08 GMT+0100 (Central European Standard Time)
+                at Tue Dec 08 2020 18:03:10 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 5452ce7..b201c40 100644
--- a/coverage/lcov-report/views/Fruit.vue.html
+++ b/coverage/lcov-report/views/Fruit.vue.html
@@ -38,7 +38,7 @@
             

                 0% 
                 Functions
-                0/3
+                0/4
             

         
             
@@ -196,8 +196,7 @@
 138139140
-141
-142
-	
+	
@@ -96,7 +96,7 @@
 	
-	
+	
@@ -109,7 +109,7 @@
             

                 Code coverage generated by
                 istanbul
-                at Mon Dec 07 2020 15:37:08 GMT+0100 (Central European Standard Time)
+                at Tue Dec 08 2020 18:03:10 GMT+0100 (Central European Standard Time)
             

diff --git a/coverage/lcov.info b/coverage/lcov.info
index 4d61ef2..114320f 100644
--- a/coverage/lcov.info
+++ b/coverage/lcov.info
@@ -1,19 +1,27 @@
 TN:
 SF:/Users/viricel/Sites/fruit-project/src/components/AddFruit.vue
-FN:49,(anonymous_1)
-FN:54,(anonymous_2)
-FN:58,(anonymous_3)
-FNF:3
-FNH:0
-FNDA:0,(anonymous_1)
-FNDA:0,(anonymous_2)
-FNDA:0,(anonymous_3)
-DA:44,1
-DA:50,0
-DA:55,0
-DA:59,0
-LF:4
-LH:1
+FN:95,(anonymous_1)
+FN:103,(anonymous_2)
+FN:107,(anonymous_3)
+FN:111,(anonymous_4)
+FN:113,(anonymous_5)
+FNF:5
+FNH:5
+FNDA:5,(anonymous_1)
+FNDA:5,(anonymous_2)
+FNDA:1,(anonymous_3)
+FNDA:1,(anonymous_4)
+FNDA:1,(anonymous_5)
+DA:90,1
+DA:96,5
+DA:104,5
+DA:105,5
+DA:108,1
+DA:112,1
+DA:113,2
+DA:116,1
+LF:8
+LH:8
 BRF:0
 BRH:0
 end_of_record
@@ -21,7 +29,7 @@ TN:
 SF:/Users/viricel/Sites/fruit-project/src/components/Header.vue
 FNF:0
 FNH:0
-DA:23,1
+DA:28,1
 LF:1
 LH:1
 BRF:0
@@ -31,38 +39,40 @@ TN:
 SF:/Users/viricel/Sites/fruit-project/src/components/Form/ImageUnsplash/ImageSkeleton.vue
 FNF:0
 FNH:0
-DA:13,1
+DA:13,0
 LF:1
-LH:1
+LH:0
 BRF:0
 BRH:0
 end_of_record
 TN:
 SF:/Users/viricel/Sites/fruit-project/src/components/Form/ImageUnsplash/ImageUnsplash.vue
-FN:44,(anonymous_1)
-FN:54,(anonymous_2)
+FN:37,(anonymous_1)
 FN:57,(anonymous_3)
-FN:62,(anonymous_4)
-FNF:4
+FN:67,(anonymous_4)
+FN:70,(anonymous_5)
+FN:75,(anonymous_6)
+FNF:5
 FNH:0
 FNDA:0,(anonymous_1)
-FNDA:0,(anonymous_2)
 FNDA:0,(anonymous_3)
 FNDA:0,(anonymous_4)
-DA:26,1
-DA:27,1
-DA:45,0
-DA:55,0
-DA:56,0
-DA:57,0
-DA:60,0
-DA:61,0
-DA:62,0
-DA:64,0
+FNDA:0,(anonymous_5)
+FNDA:0,(anonymous_6)
+DA:32,1
+DA:37,0
+DA:58,0
+DA:68,0
+DA:69,0
+DA:70,0
+DA:73,0
+DA:74,0
+DA:75,0
+DA:77,0
 LF:10
-LH:2
-BRDA:56,0,0,0
-BRDA:56,0,1,0
+LH:1
+BRDA:69,0,0,0
+BRDA:69,0,1,0
 BRF:2
 BRH:0
 end_of_record
@@ -90,11 +100,13 @@ BRH:0
 end_of_record
 TN:
 SF:/Users/viricel/Sites/fruit-project/src/components/Grid/Grid.vue
-FNF:0
+FN:23,(anonymous_1)
+FNF:1
 FNH:0
+FNDA:0,(anonymous_1)
 DA:16,0
 DA:17,0
-DA:18,0
+DA:23,0
 LF:3
 LH:0
 BRF:0
@@ -102,15 +114,17 @@ BRH:0
 end_of_record
 TN:
 SF:/Users/viricel/Sites/fruit-project/src/components/Grid/GridItem.vue
-FN:36,(anonymous_1)
-FNF:1
+FN:27,(anonymous_1)
+FN:35,(anonymous_3)
+FNF:2
 FNH:1
-FNDA:1,(anonymous_1)
+FNDA:0,(anonymous_1)
+FNDA:2,(anonymous_3)
 DA:23,1
-DA:24,1
-DA:37,1
+DA:27,0
+DA:36,2
 LF:3
-LH:3
+LH:2
 BRF:0
 BRH:0
 end_of_record
@@ -126,40 +140,44 @@ BRH:0
 end_of_record
 TN:
 SF:/Users/viricel/Sites/fruit-project/src/views/Fruit.vue
-FN:34,(anonymous_1)
-FN:40,(anonymous_2)
-FN:46,(anonymous_3)
-FNF:3
+FN:32,(anonymous_1)
+FN:33,(anonymous_3)
+FN:39,(anonymous_4)
+FN:45,(anonymous_5)
+FNF:4
 FNH:0
 FNDA:0,(anonymous_1)
-FNDA:0,(anonymous_2)
 FNDA:0,(anonymous_3)
+FNDA:0,(anonymous_4)
+FNDA:0,(anonymous_5)
 DA:28,0
-DA:29,0
-DA:35,0
-DA:41,0
-DA:47,0
+DA:32,0
+DA:34,0
+DA:40,0
+DA:46,0
 LF:5
 LH:0
-BRDA:47,0,0,0
-BRDA:47,0,1,0
+BRDA:46,0,0,0
+BRDA:46,0,1,0
 BRF:2
 BRH:0
 end_of_record
 TN:
 SF:/Users/viricel/Sites/fruit-project/src/views/Fruits.vue
-FN:22,(anonymous_1)
-FN:27,(anonymous_2)
-FN:28,(anonymous_3)
-FNF:3
+FN:17,(anonymous_1)
+FN:21,(anonymous_3)
+FN:26,(anonymous_4)
+FN:27,(anonymous_5)
+FNF:4
 FNH:0
 FNDA:0,(anonymous_1)
-FNDA:0,(anonymous_2)
 FNDA:0,(anonymous_3)
+FNDA:0,(anonymous_4)
+FNDA:0,(anonymous_5)
 DA:13,0
-DA:14,0
-DA:23,0
-DA:28,0
+DA:17,0
+DA:22,0
+DA:27,0
 LF:4
 LH:0
 BRF:0
diff --git a/src/store/actions.js b/src/store/actions.js
index 6eb6afe..1a6fe53 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -17,6 +17,7 @@ export default {
   },
   addFruit: async ({ commit }, fruit) => {
     commit("setLoading", true);
+    console.log("here");
     await axios
       .post("http://localhost:3000/fruit", fruit)
       .then(res => commit("addFruit", res.data))
diff --git a/tests/unit/AddFruit.spec.js b/tests/unit/AddFruit.spec.js
new file mode 100644
index 0000000..8f9571d
--- /dev/null
+++ b/tests/unit/AddFruit.spec.js
@@ -0,0 +1,63 @@
+import { shallowMount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import AddFruit from "@/components/AddFruit";
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe("Test AddFruit component.", () => {
+  let actions, mutations, store;
+
+  beforeEach(() => {
+    actions = {
+      addFruit: jest.fn(),
+    };
+    mutations = {
+      toggleModal: jest.fn(),
+    };
+    store = new Vuex.Store({ actions, mutations });
+  });
+
+  it("takes a snapshot of the component.", () => {
+    const wrapper = shallowMount(AddFruit, { store, localVue });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("checks initial data.", () => {
+    const wrapper = shallowMount(AddFruit, { store, localVue });
+    expect(wrapper.vm.$data.fruit).toEqual({
+      color: "#000000",
+      isFruit: true,
+    });
+  });
+
+  it("closes AddFruit modal on Cancel click.", () => {
+    const wrapper = shallowMount(AddFruit, {
+      store,
+      localVue,
+    });
+    const cancelBtn = wrapper.find(".btn--cancel");
+    cancelBtn.trigger("click");
+    expect(mutations.toggleModal).toHaveBeenCalled();
+  });
+
+  it("dispatches addFruit action on form submission.", () => {
+    const wrapper = shallowMount(AddFruit, {
+      store,
+      localVue,
+    });
+    const form = wrapper.find("form");
+    form.trigger("submit");
+    expect(actions.addFruit).toHaveBeenCalled();
+  });
+
+  it("checks that 'is-overlayed' class is added/removed to  on mounted/destroy.", () => {
+    const wrapper = shallowMount(AddFruit, {
+      store,
+      localVue,
+    });
+    expect(document.body.classList).toContain("is-overlayed");
+    wrapper.destroy();
+    expect(document.body.classList).not.toContain("is-overlayed");
+  });
+});
diff --git a/tests/unit/GridItem.spec.js b/tests/unit/GridItem.spec.js
index e4b83a5..1f41939 100644
--- a/tests/unit/GridItem.spec.js
+++ b/tests/unit/GridItem.spec.js
@@ -5,30 +5,40 @@ import GridItem from "@/components/Grid/GridItem.vue";
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
-describe("Test GridItem.", () => {
+describe("Test GridItem component.", () => {
   let store;
 
+  const 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"
+  };
+
   beforeEach(() => {
     store = new Vuex.Store();
   });
 
+  it("takes a snapshot of the component.", () => {
+    const wrapper = mount(GridItem, {
+      store,
+      localVue,
+      propsData: { item },
+      stubs: ["router-link"]
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
   it("checks link.", async () => {
     const wrapper = mount(GridItem, {
       store,
       localVue,
-      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"
-        }
-      },
+      propsData: { item },
       stubs: {
         RouterLink: RouterLinkStub
       }
diff --git a/tests/unit/__snapshots__/AddFruit.spec.js.snap b/tests/unit/__snapshots__/AddFruit.spec.js.snap
new file mode 100644
index 0000000..94258a2
--- /dev/null
+++ b/tests/unit/__snapshots__/AddFruit.spec.js.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test AddFruit component. takes a snapshot of the component. 1`] = `
+

+  
New Fruit

+  

+    
 

+    
+    

+      
 

+      
 

+    

+    

+      
 

+      
 

+    

+    
 

+    
 

+  
+

+`;
diff --git a/tests/unit/__snapshots__/GridItem.spec.js.snap b/tests/unit/__snapshots__/GridItem.spec.js.snap
new file mode 100644
index 0000000..4d98923
--- /dev/null
+++ b/tests/unit/__snapshots__/GridItem.spec.js.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test GridItem component. takes a snapshot of the component. 1`] = `
+

+  
+  
+    
banana

+    

+      

+        banana
+        Handcrafted
+      

+      

+      
$907

+    

+  
+

+`;
diff --git a/tests/unit/mutations.spec.js b/tests/unit/mutations.spec.js
index bfea558..da9786c 100644
--- a/tests/unit/mutations.spec.js
+++ b/tests/unit/mutations.spec.js
@@ -3,7 +3,7 @@ import mutations from "@/store/mutations";
 
 const { setFruits, setFruit, addFruit, removeFruit } = mutations;
 
-let fruit = {
+const fruit = {
   id: 3,
   isFruit: true,
   name: "banana",


 
 
 
AddFruit.vue
-	

+			AddFruit.vue
+	

 			25%1/4100%8/8
 	100%
 	0/00%0/325%1/4100%5/5100%8/8
 	

 
 

         
         

 
 
components
-	

+			components
+	

 			40%2/5100%9/9
 	100%
 	0/00%0/340%2/5100%5/5100%9/9
 	

 
 

 	components/Form/ImageUnsplash
-	

+			
+	

 			27.27%3/119.09%1/11
 	0%
 	0/2
 	0%0/427.27%3/110/59.09%1/11
 	

 
 

 	components/Grid
-	

+			
+	

 			30%3/1020%2/10
 	100%
 	0/016.67%1/630%3/1012.5%1/820%2/10
 	

 
 
0%
 	0/2
 	0%0/60/8
 	0%
 	0/9
 	

         
         
 
 
 
+141 
  
  
  
@@ -225,12 +224,11 @@
  
  
  
+ 
+ 
+ 
  
  
- 
- 
- 
- 
  
  
  
@@ -366,11 +364,10 @@
  
 <script>
 import { mapState } from "vuex";
-import DeleteItem from "@/components/Grid/DeleteItem";
  
 export default {
   name: "FruitDetails",
-  components: { DeleteItem },
+  components: { DeleteItem: () => import("@/components/Grid/DeleteItem") },
   data() {
     return {
       modalOpen: true
@@ -486,7 +483,7 @@ article {
             

                 Code coverage generated by
                 istanbul
-                at Mon Dec 07 2020 15:37:08 GMT+0100 (Central European Standard Time)
+                at Tue Dec 08 2020 18:03:10 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 8c8fb8f..e009398 100644
--- a/coverage/lcov-report/views/Fruits.vue.html
+++ b/coverage/lcov-report/views/Fruits.vue.html
@@ -38,7 +38,7 @@
             

                 0% 
                 Functions
-                0/3
+                0/4
             

         
             
@@ -118,8 +118,7 @@
 60
 61
 62
-63
-64		 
+63 
  
  
  
@@ -132,15 +131,14 @@
  
  
  
+ 
+ 
+ 
  
  
  
  
  
- 
- 
- 
- 
  
  
  
@@ -195,11 +193,10 @@
  
 <script>
 import { mapState } from "vuex";
-import Grid from "@/components/Grid/Grid";
  
 export default {
   name: "Fruits",
-  components: { Grid },
+  components: { Grid: () => import("@/components/Grid/Grid") },
   computed: {
     ...mapState(["fruits"])
   },
@@ -252,7 +249,7 @@ export default {
             

                 Code coverage generated by
                 istanbul
-                at Mon Dec 07 2020 15:37:08 GMT+0100 (Central European Standard Time)
+                at Tue Dec 08 2020 18:03:10 GMT+0100 (Central European Standard Time)
             

         
         
diff --git a/coverage/lcov-report/views/index.html b/coverage/lcov-report/views/index.html
index 904e437..963e571 100644
--- a/coverage/lcov-report/views/index.html
+++ b/coverage/lcov-report/views/index.html
@@ -38,7 +38,7 @@
             

                 0% 
                 Functions
-                0/6
+                0/8
             

         
             
@@ -81,7 +81,7 @@
 			0%
 	0/2
 	0%0/30/4
 	0%
 	0/5
 	
100%
 	0/0
 	0%0/30/4
 	0%
 	0/4