+ ![]()
+
+ + {{ item.name }} + {{ item.taste }} +
+ ++ +
${{ item.price | noDecimal }}
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/coverage/lcov-report/store/index.js.html b/coverage/lcov-report/store/index.js.html
new file mode 100644
index 0000000..000525a
--- /dev/null
+++ b/coverage/lcov-report/store/index.js.html
@@ -0,0 +1,130 @@
+
+
+
+
+
+
+
+
+ All files store
+
+
+
+
+ 50%
+ Statements
+ 1/2
+
+
+
+
+ 100%
+ Branches
+ 0/0
+
+
+
+
+ 0%
+ Functions
+ 0/1
+
+
+
+
+ 50%
+ Lines
+ 1/2
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+
+
+
+
+
+
+ | File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| index.js | +
+
+ |
+ 50% | +1/2 | +100% | +0/0 | +0% | +0/1 | +50% | +1/2 | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/coverage/lcov-report/views/Fruit.vue.html b/coverage/lcov-report/views/Fruit.vue.html
new file mode 100644
index 0000000..b201c40
--- /dev/null
+++ b/coverage/lcov-report/views/Fruit.vue.html
@@ -0,0 +1,499 @@
+
+
+
+
+
+
+
+
+ All files / store index.js
+
+
+
+
+ 50%
+ Statements
+ 1/2
+
+
+
+
+ 100%
+ Branches
+ 0/0
+
+
+
+
+ 0%
+ Functions
+ 0/1
+
+
+
+
+ 50%
+ Lines
+ 1/2
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 | + + +1x + + + + + + + + + + + + + + | import Vue from "vue";
+import Vuex from "vuex";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+ state: {
+ fruits: []
+ },
+ mutations: {
+ setFruits(state, fruits) {
+ state.fruits = fruits;
+ }
+ },
+ actions: {},
+ modules: {}
+});
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/coverage/lcov-report/views/Fruits.vue.html b/coverage/lcov-report/views/Fruits.vue.html
new file mode 100644
index 0000000..e009398
--- /dev/null
+++ b/coverage/lcov-report/views/Fruits.vue.html
@@ -0,0 +1,265 @@
+
+
+
+
+
+
+
+
+ All files / views Fruit.vue
+
+
+
+
+ 0%
+ Statements
+ 0/5
+
+
+
+
+ 0%
+ Branches
+ 0/2
+
+
+
+
+ 0%
+ Functions
+ 0/4
+
+
+
+
+ 0%
+ Lines
+ 0/5
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +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 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | <template>
+ <div>
+ <h2><span @click="() => this.$router.push('/')">ā</span> Details</h2>
+
+ <article>
+ <img :src="fruit.image" :alt="fruit.name" />
+ <section>
+ <DeleteItem v-if="deleteMode" :item="fruit" :redirect="() => $router.push('/')" />
+ <h3>
+ {{ fruit.name }}
+ <span class="tag" :style="{ backgroundColor: fruit.color }">{{ fruit.taste }}</span>
+ </h3>
+
+ <p>{{ fruit.description }}</p>
+
+ <hr />
+
+ <p class="price">${{ fruit.price | noDecimal }}</p>
+ <div class="alert">
+ {{ "This offer " + expirationState }} {{ fruit.expires | moment("from", "now") }}
+ </div>
+ </section>
+ </article>
+ </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+ name: "FruitDetails",
+ components: { DeleteItem: () => import("@/components/Grid/DeleteItem") },
+ data() {
+ return {
+ modalOpen: true
+ };
+ },
+ filters: {
+ noDecimal(value) {
+ return parseInt(value).toFixed();
+ }
+ },
+ computed: {
+ ...mapState(["fruit", "deleteMode"]),
+ expirationState() {
+ return new Date(this.fruit.expires) < new Date() ? "expired" : "expires";
+ }
+ }
+};
+</script>
+
+<style lang="less" scoped>
+h2 span {
+ cursor: pointer;
+}
+article {
+ display: flex;
+ align-items: center;
+ flex-flow: column;
+
+ img,
+ section {
+ border-radius: 10px;
+ }
+
+ img {
+ width: 100%;
+ object-fit: scale-down;
+ margin-bottom: 1.5rem;
+ box-shadow: 0 1px 4px 1px #d2d2f2;
+ }
+
+ section {
+ position: relative;
+ z-index: 0;
+ padding: 1.5rem 2rem;
+ background-color: @color-2;
+
+ h3 {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ margin-bottom: 0.55rem;
+ font-size: 34px;
+ }
+
+ hr {
+ width: 100px;
+ color: #cece;
+ margin: 1.35rem auto;
+ }
+
+ .tag {
+ border-radius: 25px;
+ padding: 0.35rem 0.75rem;
+ margin-left: 0.75rem;
+ color: #ffffff;
+ font-size: 14px;
+ font-weight: bold;
+ text-align: center;
+ text-transform: lowercase;
+ }
+
+ .price {
+ text-align: center;
+ margin: 0;
+ font-size: 28px;
+ font-weight: bold;
+ color: @color-3;
+ }
+ }
+
+ @media screen and (min-width: @sm) {
+ flex-flow: row;
+ align-items: flex-start;
+ justify-content: center;
+
+ img,
+ section {
+ width: 50%;
+ max-width: 485px;
+ }
+
+ img {
+ max-height: 435px;
+ margin-bottom: 0;
+ margin-right: 1.5rem;
+ object-fit: cover;
+ }
+ }
+}
+
+.alert {
+ margin-top: 1.75rem;
+ background: linear-gradient(112.4deg, #1c9797 11.05%, #147171 89.93%);
+ color: @color-2;
+ padding: 1rem 1.5rem;
+ border-radius: 4px;
+}
+</style>
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/coverage/lcov-report/views/index.html b/coverage/lcov-report/views/index.html
new file mode 100644
index 0000000..963e571
--- /dev/null
+++ b/coverage/lcov-report/views/index.html
@@ -0,0 +1,125 @@
+
+
+
+
+
+
+
+
+ All files / views Fruits.vue
+
+
+
+
+ 0%
+ Statements
+ 0/4
+
+
+
+
+ 100%
+ Branches
+ 0/0
+
+
+
+
+ 0%
+ Functions
+ 0/4
+
+
+
+
+ 0%
+ Lines
+ 0/4
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | <template>
+ <div class="fruits">
+ <h2>Directory</h2>
+ <Grid v-if="!error" :data="this.fruits" />
+ <div class="alert" v-else>
+ {{ error }}
+ <pre><span>$</span> yarn run api</pre>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+ name: "Fruits",
+ components: { Grid: () => import("@/components/Grid/Grid") },
+ computed: {
+ ...mapState(["fruits"])
+ },
+ data() {
+ return {
+ error: null
+ };
+ },
+ async created() {
+ await this.$store.dispatch("getFruits").catch(err => (this.error = err));
+ }
+};
+</script>
+
+<style scoped lang="less">
+.fruits {
+ margin: 0 auto;
+ max-width: 1200px;
+}
+
+.alert {
+ box-sizing: border-box;
+ margin: 0 auto;
+ width: 80%;
+ background-color: @text-error;
+ color: @color-2;
+ padding: 1rem 1.5rem;
+ border-radius: 4px;
+
+ @media screen and (min-width: @sm) {
+ width: 50%;
+ max-width: 535px;
+ }
+
+ pre {
+ padding: 1rem;
+ border-radius: 4px;
+ background-color: rgb(45, 48, 55);
+
+ span {
+ color: @color-3;
+ }
+ }
+}
+</style>
+ |
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/coverage/lcov.info b/coverage/lcov.info
new file mode 100644
index 0000000..114320f
--- /dev/null
+++ b/coverage/lcov.info
@@ -0,0 +1,185 @@
+TN:
+SF:/Users/viricel/Sites/fruit-project/src/components/AddFruit.vue
+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
+TN:
+SF:/Users/viricel/Sites/fruit-project/src/components/Header.vue
+FNF:0
+FNH:0
+DA:28,1
+LF:1
+LH:1
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:/Users/viricel/Sites/fruit-project/src/components/Form/ImageUnsplash/ImageSkeleton.vue
+FNF:0
+FNH:0
+DA:13,0
+LF:1
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:/Users/viricel/Sites/fruit-project/src/components/Form/ImageUnsplash/ImageUnsplash.vue
+FN:37,(anonymous_1)
+FN:57,(anonymous_3)
+FN:67,(anonymous_4)
+FN:70,(anonymous_5)
+FN:75,(anonymous_6)
+FNF:5
+FNH:0
+FNDA:0,(anonymous_1)
+FNDA:0,(anonymous_3)
+FNDA:0,(anonymous_4)
+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:1
+BRDA:69,0,0,0
+BRDA:69,0,1,0
+BRF:2
+BRH:0
+end_of_record
+TN:
+SF:/Users/viricel/Sites/fruit-project/src/components/Grid/DeleteItem.vue
+FN:23,(anonymous_1)
+FN:26,(anonymous_2)
+FN:32,(anonymous_3)
+FN:35,(anonymous_4)
+FN:36,(anonymous_5)
+FNF:5
+FNH:0
+FNDA:0,(anonymous_1)
+FNDA:0,(anonymous_2)
+FNDA:0,(anonymous_3)
+FNDA:0,(anonymous_4)
+FNDA:0,(anonymous_5)
+DA:27,0
+DA:33,0
+DA:36,0
+LF:3
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:/Users/viricel/Sites/fruit-project/src/components/Grid/Grid.vue
+FN:23,(anonymous_1)
+FNF:1
+FNH:0
+FNDA:0,(anonymous_1)
+DA:16,0
+DA:17,0
+DA:23,0
+LF:3
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:/Users/viricel/Sites/fruit-project/src/components/Grid/GridItem.vue
+FN:27,(anonymous_1)
+FN:35,(anonymous_3)
+FNF:2
+FNH:1
+FNDA:0,(anonymous_1)
+FNDA:2,(anonymous_3)
+DA:23,1
+DA:27,0
+DA:36,2
+LF:3
+LH:2
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:/Users/viricel/Sites/fruit-project/src/components/Grid/GridItemSkeleton.vue
+FNF:0
+FNH:0
+DA:16,0
+LF:1
+LH:0
+BRF:0
+BRH:0
+end_of_record
+TN:
+SF:/Users/viricel/Sites/fruit-project/src/views/Fruit.vue
+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_3)
+FNDA:0,(anonymous_4)
+FNDA:0,(anonymous_5)
+DA:28,0
+DA:32,0
+DA:34,0
+DA:40,0
+DA:46,0
+LF:5
+LH: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: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_3)
+FNDA:0,(anonymous_4)
+FNDA:0,(anonymous_5)
+DA:13,0
+DA:17,0
+DA:22,0
+DA:27,0
+LF:4
+LH:0
+BRF:0
+BRH:0
+end_of_record
diff --git a/cypress.json b/cypress.json
new file mode 100644
index 0000000..470c720
--- /dev/null
+++ b/cypress.json
@@ -0,0 +1,3 @@
+{
+ "pluginsFile": "tests/e2e/plugins/index.js"
+}
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000..268a513
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,15 @@
+module.exports = {
+ preset: "@vue/cli-plugin-unit-jest",
+ moduleNameMapper: {
+ "^@/(.*)$": "
+
+
+ All files views
+
+
+
+
+ 0%
+ Statements
+ 0/9
+
+
+
+
+ 0%
+ Branches
+ 0/2
+
+
+
+
+ 0%
+ Functions
+ 0/8
+
+
+
+
+ 0%
+ Lines
+ 0/9
+
+
+
+ + Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+
+
+
+
+
+
+ | File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| Fruit.vue | +
+
+ |
+ 0% | +0/5 | +0% | +0/2 | +0% | +0/4 | +0% | +0/5 | +
| Fruits.vue | +
+
+ |
+ 0% | +0/4 | +100% | +0/0 | +0% | +0/4 | +0% | +0/4 | +
+
+
+
+
+
+
+
+
diff --git a/src/assets/less/reset.less b/src/assets/less/reset.less
new file mode 100644
index 0000000..7708b7a
--- /dev/null
+++ b/src/assets/less/reset.less
@@ -0,0 +1,293 @@
+/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
+
+// * 1. Set default font family to sans-serif.
+// * 2. Prevent iOS text size adjust after orientation change, without disabling user zoom.
+html {
+ font-family: sans-serif;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+}
+
+// Remove default margin.
+body {
+ margin: 0;
+}
+
+// HTML5 display definitions ==========================================================================
+// * Correct `block` display not defined for any HTML5 element in IE 8/9.
+// * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
+// * Correct `block` display not defined for `main` in IE 11.
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+ display: block;
+}
+
+// * 1. Correct `inline-block` display not defined in IE 8/9.
+// * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+audio,
+canvas,
+progress,
+video {
+ display: inline-block;
+ vertical-align: baseline;
+}
+
+// * Prevent modern browsers from displaying `audio` without controls.
+// * Remove excess height in iOS 5 devices.
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+// * Address `[hidden]` styling not present in IE 8/9/10.
+// * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+[hidden],
+template {
+ display: none;
+}
+
+// Links ==========================================================================
+// * Remove the gray background color from active links in IE 10.
+a {
+ background: transparent;
+ // * Improve readability when focused and also mouse hovered in all browsers.
+ &:active,
+ &:hover {
+ outline: 0;
+ }
+}
+
+// Text-level semantics ==========================================================================
+
+// * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+// * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+b,
+strong {
+ font-weight: bold;
+}
+
+// * Address styling not present in Safari and Chrome.
+dfn {
+ font-style: italic;
+}
+
+// * Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome.
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+// * Address styling not present in IE 8/9.
+mark {
+ background: #ff0;
+ color: #000;
+}
+
+// * Address inconsistent and variable font size in all browsers.
+small {
+ font-size: 80%;
+}
+
+// * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+sub {
+ bottom: -0.25em;
+}
+
+// Embedded content ==========================================================================
+// * Remove border when inside `a` element in IE 8/9/10.
+img {
+ border: 0;
+}
+
+// * Correct overflow not hidden in IE 9/10/11.
+svg:not(:root) {
+ overflow: hidden;
+}
+
+// Grouping content ==========================================================================
+// * Address margin not present in IE 8/9 and Safari.
+figure {
+ margin: 1em 40px;
+}
+
+// * Address differences between Firefox and other browsers.
+hr {
+ box-sizing: content-box;
+ height: 0;
+}
+
+// * Contain overflow in all browsers.
+pre {
+ overflow: auto;
+}
+
+// * Address odd `em`-unit font size rendering in all browsers.
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+
+// Forms ==========================================================================
+// * Known limitation: by default, Chrome and Safari on OS X allow very limited
+// * styling of `select`, unless a `border` property is set.
+
+// * 1. Correct color not being inherited.
+// * Known issue: affects color of disabled elements.
+// * 2. Correct font properties not being inherited.
+// * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+button,
+input,
+optgroup,
+select,
+textarea {
+ color: inherit;
+ font: inherit;
+ margin: 0;
+}
+
+// * Address `overflow` set to `hidden` in IE 8/9/10/11.
+button {
+ overflow: visible;
+}
+
+// * Address inconsistent `text-transform` inheritance for `button` and `select`.
+// * All other form control elements do not inherit `text-transform` values.
+// * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+// * Correct `select` style inheritance in Firefox.
+button,
+select {
+ text-transform: none;
+}
+
+// * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
+// * 2. Correct inability to style clickable `input` types in iOS.
+// * 3. Improve usability and consistency of cursor style between image-type `input` and others.
+button,
+html input[type="button"] {
+ -webkit-appearance: button;
+ cursor: pointer;
+}
+
+// * Re-set default cursor for disabled elements.
+button[disabled],
+html input[disabled] {
+ cursor: default;
+}
+
+// * Remove inner padding and border in Firefox 4+.
+button input {
+ &::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+ }
+}
+
+// * Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet.
+input {
+ line-height: normal;
+ &[type="reset"],
+ &[type="submit"] {
+ -webkit-appearance: button;
+ cursor: pointer;
+ }
+
+ // * It's recommended that you don't attempt to style these elements.
+ // * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ // * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ // * 2. Remove excess padding in IE 8/9/10.
+ &[type="checkbox"],
+ &[type="radio"] {
+ box-sizing: border-box;
+ padding: 0;
+ }
+
+ // * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ // * `font-size` values of the `input`, it causes the cursor style of the
+ // * decrement button to change from `default` to `text`.
+ &[type="number"] {
+ &::-webkit-inner-spin-button,
+ &::-webkit-outer-spin-button {
+ height: auto;
+ }
+ }
+
+ // * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ // * 2. Address `box-sizing` set to `border-box` in Safari and Chrome (include `-moz` to future-proof).
+ &[type="search"] {
+ -webkit-appearance: textfield;
+ box-sizing: content-box;
+
+ // * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ // * Safari (but not Chrome) clips the cancel button when the search input has
+ // * padding (and `textfield` appearance).
+ &::-webkit-search-cancel-button,
+ &::-webkit-search-decoration {
+ -webkit-appearance: none;
+ }
+ }
+}
+
+// * Define consistent border, margin, and padding.
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+// * 1. Correct `color` not being inherited in IE 8/9/10/11.
+// * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+legend {
+ border: 0;
+ padding: 0;
+}
+
+// * Remove default vertical scrollbar in IE 8/9/10/11.
+textarea {
+ overflow: auto;
+}
+
+// * Don't inherit the `font-weight` (applied by a rule above).
+// * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+optgroup {
+ font-weight: bold;
+}
+
+// Tables ==========================================================================
+// * Remove most spacing between table cells.
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+td,
+th {
+ padding: 0;
+}
diff --git a/src/assets/less/variables.less b/src/assets/less/variables.less
new file mode 100644
index 0000000..9c2ef87
--- /dev/null
+++ b/src/assets/less/variables.less
@@ -0,0 +1,19 @@
+@color-1: #0c9696;
+@color-2: #ffffff;
+@color-3: #ff9700;
+@text-color: #333;
+@text-error: #d63031;
+
+@headerHeight: 58px;
+@footerHeight: 58px;
+
+@sm: 640px;
+// => @media (min-width: 640px) { ... }
+@md: 768px;
+// => @media (min-width: 768px) { ... }
+@lg: 1024px;
+// => @media (min-width: 1024px) { ... }
+@xl: 1280px;
+// => @media (min-width: 1280px) { ... }
+@2xl: 1536px;
+// => @media (min-width: 1536px) { ... }
diff --git a/src/components/AddFruit.vue b/src/components/AddFruit.vue
new file mode 100644
index 0000000..51d73f9
--- /dev/null
+++ b/src/components/AddFruit.vue
@@ -0,0 +1,214 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..87ab02a
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
diff --git a/src/components/Form/ImageUnsplash/ImageSkeleton.vue b/src/components/Form/ImageUnsplash/ImageSkeleton.vue
new file mode 100644
index 0000000..838a598
--- /dev/null
+++ b/src/components/Form/ImageUnsplash/ImageSkeleton.vue
@@ -0,0 +1,23 @@
+
+ New Fruit
+ +
+
+
+ ![]()
+
+
+
+
+
+
+
+
diff --git a/src/components/Grid/DeleteItem.vue b/src/components/Grid/DeleteItem.vue
new file mode 100644
index 0000000..f72b58b
--- /dev/null
+++ b/src/components/Grid/DeleteItem.vue
@@ -0,0 +1,93 @@
+
+ {{ error }}
+ + +
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Grid/Grid.vue b/src/components/Grid/Grid.vue
new file mode 100644
index 0000000..b362d3f
--- /dev/null
+++ b/src/components/Grid/Grid.vue
@@ -0,0 +1,82 @@
+
+
+
+ You will delete '{{ item.name }}'?
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Grid/GridItem.vue b/src/components/Grid/GridItem.vue
new file mode 100644
index 0000000..eeda955
--- /dev/null
+++ b/src/components/Grid/GridItem.vue
@@ -0,0 +1,110 @@
+
+ š” Restart API: 0 fruits !
++ +
+ Fruits
+
+
+
+
+
+
+ ![]()
+
+
+ +
+
+
+
+
+
+
+
diff --git a/src/views/Fruits.vue b/src/views/Fruits.vue
new file mode 100644
index 0000000..69b1a05
--- /dev/null
+++ b/src/views/Fruits.vue
@@ -0,0 +1,62 @@
+
+ ā Details
+ ++ {{ fruit.name }} + {{ fruit.taste }} +
+ +{{ fruit.description }}
+ ++ +
${{ fruit.price | noDecimal }}
+
+ {{ "This offer " + expirationState }} {{ fruit.expires | moment("from", "now") }}
+
+
+
+
+
+
+
+
diff --git a/tests/e2e/.eslintrc.js b/tests/e2e/.eslintrc.js
new file mode 100644
index 0000000..053c39f
--- /dev/null
+++ b/tests/e2e/.eslintrc.js
@@ -0,0 +1,10 @@
+module.exports = {
+ plugins: ["cypress"],
+ env: {
+ mocha: true,
+ "cypress/globals": true
+ },
+ rules: {
+ strict: "off"
+ }
+};
diff --git a/tests/e2e/plugins/index.js b/tests/e2e/plugins/index.js
new file mode 100644
index 0000000..66ec1e5
--- /dev/null
+++ b/tests/e2e/plugins/index.js
@@ -0,0 +1,26 @@
+/* eslint-disable arrow-body-style */
+// https://docs.cypress.io/guides/guides/plugins-guide.html
+
+// if you need a custom webpack configuration you can uncomment the following import
+// and then use the `file:preprocessor` event
+// as explained in the cypress docs
+// https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
+
+// /* eslint-disable import/no-extraneous-dependencies, global-require */
+// const webpack = require('@cypress/webpack-preprocessor')
+
+module.exports = (on, config) => {
+ // on('file:preprocessor', webpack({
+ // webpackOptions: require('@vue/cli-service/webpack.config'),
+ // watchOptions: {}
+ // }))
+
+ return {
+ ...config,
+ fixturesFolder: "tests/e2e/fixtures",
+ integrationFolder: "tests/e2e/specs",
+ screenshotsFolder: "tests/e2e/screenshots",
+ videosFolder: "tests/e2e/videos",
+ supportFile: "tests/e2e/support/index.js"
+ };
+};
diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js
new file mode 100644
index 0000000..a22a738
--- /dev/null
+++ b/tests/e2e/specs/test.js
@@ -0,0 +1,23 @@
+// https://docs.cypress.io/api/introduction/api.html
+
+describe("Homepage", () => {
+ it("Visits the app root url", () => {
+ cy.visit("http://localhost:8080");
+ cy.contains("h2", "Directory");
+ });
+
+ it("Deletes a fruit", () => {
+ cy.get(".action-btn--delete").click();
+ cy.get(".grid-item:first-of-type .delete-btn").click();
+ cy.get(".btn--success").click();
+ cy.url().should("equal", "http://localhost:8080/");
+ });
+
+ it("Navigates to fruit details", () => {
+ const fruitElmt = cy.get(".grid-item:first-of-type a");
+ fruitElmt.get("h3").then(elmt => {
+ fruitElmt.click();
+ cy.contains("h3", elmt.text());
+ });
+ });
+});
diff --git a/tests/e2e/support/commands.js b/tests/e2e/support/commands.js
new file mode 100644
index 0000000..c1f5a77
--- /dev/null
+++ b/tests/e2e/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
diff --git a/tests/e2e/support/index.js b/tests/e2e/support/index.js
new file mode 100644
index 0000000..d076cec
--- /dev/null
+++ b/tests/e2e/support/index.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
diff --git a/tests/unit/AddFruit.spec.js b/tests/unit/AddFruit.spec.js
new file mode 100644
index 0000000..b6d2c94
--- /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
new file mode 100644
index 0000000..1f41939
--- /dev/null
+++ b/tests/unit/GridItem.spec.js
@@ -0,0 +1,49 @@
+import { mount, RouterLinkStub, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import GridItem from "@/components/Grid/GridItem.vue";
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+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 },
+ stubs: {
+ RouterLink: RouterLinkStub
+ }
+ });
+
+ expect(wrapper.findComponent(RouterLinkStub).props().to).toBe("/fruit/3");
+ });
+});
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`] = `
+Directory
+
+ {{ error }}
+
+ $ yarn run api
+
+
+`;
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`] = `
+New Fruit
+ +
+ banana + Handcrafted +
++
$907
+