wazolab/fruit-project
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

Test getFruits action with fruit-api

Browse Source
This commit is contained in:
Noé Viricel
2020-12-04 02:26:50 +01:00
parent 4b1ac294bd
commit a027285357
12 changed files with 75 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
coverage/clover.xml
View File

@@ -1,13 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<coverage generated="1607037828417" clover="3.2.0">
<project timestamp="1607037828418" name="All files">
<metrics statements="4" coveredstatements="4" conditionals="0" coveredconditionals="0" methods="3" coveredmethods="3" elements="7" coveredelements="7" complexity="0" loc="4" ncloc="4" packages="1" files="1" classes="1"/>
<coverage generated="1607045193175" clover="3.2.0">
<project timestamp="1607045193175" name="All files">
<metrics statements="2" coveredstatements="2" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="1" elements="3" coveredelements="3" complexity="0" loc="2" ncloc="2" packages="1" files="1" classes="1"/>
<file name="Fruits.vue" path="/Users/viricel/Sites/fruit-project/src/views/Fruits.vue">
<metrics statements="4" coveredstatements="4" conditionals="0" coveredconditionals="0" methods="3" coveredmethods="3"/>
<line num="12" count="1" type="stmt"/>
<metrics statements="2" coveredstatements="2" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="1"/>
<line num="9" count="1" type="stmt"/>
<line num="17" count="1" type="stmt"/>
<line num="21" count="1" type="stmt"/>
<line num="22" count="1" type="stmt"/>
</file>
</project>
</coverage>

2
coverage/coverage-final.json
View File

@@ -1,2 +1,2 @@
{"/Users/viricel/Sites/fruit-project/src/views/Fruits.vue": {"path":"/Users/viricel/Sites/fruit-project/src/views/Fruits.vue","statementMap":{"0":{"start":{"line":12,"column":0},"end":{"line":12,"column":null}},"1":{"start":{"line":17,"column":0},"end":{"line":17,"column":null}},"2":{"start":{"line":21,"column":0},"end":{"line":21,"column":null}},"3":{"start":{"line":22,"column":0},"end":{"line":22,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":11,"column":0},"end":{"line":11,"column":null}},"loc":{"start":{"line":11,"column":0},"end":{"line":15,"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}}},"2":{"name":"(anonymous_3)","decl":{"start":{"line":20,"column":0},"end":{"line":20,"column":null}},"loc":{"start":{"line":20,"column":0},"end":{"line":23,"column":null}}}},"branchMap":{},"s":{"0":1,"1":1,"2":1,"3":1},"f":{"0":1,"1":1,"2":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":17,"column":0},"end":{"line":17,"column":null}}},"fnMap":{"0":{"name":"(anonymous_1)","decl":{"start":{"line":16,"column":0},"end":{"line":16,"column":null}},"loc":{"start":{"line":16,"column":0},"end":{"line":18,"column":null}}}},"branchMap":{},"s":{"0":1,"1":1},"f":{"0":1},"b":{}}
}

42
coverage/lcov-report/Fruits.vue.html
View File

@@ -24,7 +24,7 @@
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Statements</span>
<span class='fraction'>4/4</span>
<span class='fraction'>2/2</span>
</div>
@@ -38,14 +38,14 @@
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Functions</span>
<span class='fraction'>3/3</span>
<span class='fraction'>1/1</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Lines</span>
<span class='fraction'>4/4</span>
<span class='fraction'>2/2</span>
</div>
@@ -76,16 +76,7 @@
<a name='L18'></a><a href='#L18'>18</a>
<a name='L19'></a><a href='#L19'>19</a>
<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>
<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></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>
<a name='L21'></a><a href='#L21'>21</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>
@@ -98,39 +89,30 @@
<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-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-yes">1x</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;Fruits Directory&lt;/h1&gt;
{{ fruits }}
{{ this.fruits }}
&lt;/div&gt;
&lt;/template&gt;
&nbsp;
&lt;script&gt;
import { mapState } from "vuex";
&nbsp;
export default {
name: "Fruits",
data() {
return {
fruits: []
};
computed: {
...mapState(["fruits"])
},
async mounted() {
await this.getFruits();
},
methods: {
async getFruits() {
const response = await this.$http.get("http://localhost:3000/fruit");
this.fruits = response.data.data;
}
async created() {
await this.$store.dispatch("getFruits");
}
};
&lt;/script&gt;
@@ -141,7 +123,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 00:23:48 GMT+0100 (Central European Standard Time)
at Fri Dec 04 2020 02:26:33 GMT+0100 (Central European Standard Time)
</div>
</div>
<script src="prettify.js"></script>

14
coverage/lcov-report/index.html
View File

@@ -24,7 +24,7 @@
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Statements</span>
<span class='fraction'>4/4</span>
<span class='fraction'>2/2</span>
</div>
@@ -38,14 +38,14 @@
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Functions</span>
<span class='fraction'>3/3</span>
<span class='fraction'>1/1</span>
</div>
<div class='fl pad1y space-right2'>
<span class="strong">100% </span>
<span class="quiet">Lines</span>
<span class='fraction'>4/4</span>
<span class='fraction'>2/2</span>
</div>
@@ -77,13 +77,13 @@
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="4" class="abs high">4/4</td>
<td data-value="2" class="abs high">2/2</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="3" class="abs high">3/3</td>
<td data-value="1" class="abs high">1/1</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="4" class="abs high">4/4</td>
<td data-value="2" class="abs high">2/2</td>
</tr>
</tbody>
@@ -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 00:23:48 GMT+0100 (Central European Standard Time)
at Fri Dec 04 2020 02:26:33 GMT+0100 (Central European Standard Time)
</div>
</div>
<script src="prettify.js"></script>

18
coverage/lcov.info
View File

@@ -1,19 +1,13 @@
TN:
SF:/Users/viricel/Sites/fruit-project/src/views/Fruits.vue
FN:11,(anonymous_1)
FN:16,(anonymous_2)
FN:20,(anonymous_3)
FNF:3
FNH:3
FN:16,(anonymous_1)
FNF:1
FNH:1
FNDA:1,(anonymous_1)
FNDA:1,(anonymous_2)
FNDA:1,(anonymous_3)
DA:12,1
DA:9,1
DA:17,1
DA:21,1
DA:22,1
LF:4
LH:4
LF:2
LH:2
BRF:0
BRH:0
end_of_record

2
src/main.js
View File

@@ -2,10 +2,8 @@ import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import axios from "axios";
Vue.config.productionTip = false;
Vue.prototype.$http = axios;
new Vue({
router,

8
src/store/actions.js Normal file
View File

@@ -0,0 +1,8 @@
import axios from "axios";
export default {
getFruits: async ({ commit }) => {
const response = await axios.get("http://localhost:3000/fruit");
commit("setFruits", response.data.data);
}
};

5
src/store/getters.js Normal file
View File

@@ -0,0 +1,5 @@
export default {
parsedFruits: () => {
return [{ id: 1 }];
}
};

6
src/store/index.js
View File

@@ -1,6 +1,8 @@
import Vue from "vue";
import Vuex from "vuex";
import mutations from "./mutations";
import actions from "./actions";
import getters from "./getters";
export const state = {
fruits: [],
@@ -11,5 +13,7 @@ Vue.use(Vuex);
export default new Vuex.Store({
state,
mutations
mutations,
actions,
getters
});

20
src/views/Fruits.vue
View File

@@ -1,26 +1,20 @@
<template>
<div>
<h1>Fruits Directory</h1>
{{ fruits }}
{{ this.fruits }}
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
name: "Fruits",
data() {
return {
fruits: []
};
computed: {
...mapState(["fruits"])
},
async mounted() {
await this.getFruits();
},
methods: {
async getFruits() {
const response = await this.$http.get("http://localhost:3000/fruit");
this.fruits = response.data.data;
}
async created() {
await this.$store.dispatch("getFruits");
}
};
</script>

18
tests/unit/fruits.spec.js Normal file
View File

@@ -0,0 +1,18 @@
import { mount } from "@vue/test-utils";
// import axios from "axios";
import store from "@/store/index.js";
import Fruits from "@/views/Fruits.vue";
// jest.mock("axios", () => ({
// get: jest.fn(() => Promise.resolve({ data: {} }))
// }));
describe("Test Fruits page.", () => {
it("dispatches getFruits on mounted", async () => {
// axios.get.mockImplementationOnce(() => Promise.resolve({ data: { data: "value" } }));
const wrapper = mount(Fruits, { store });
await store.dispatch("getFruits");
expect(store.state.fruits.fruitCount).toBe(6);
});
});

25
tests/unit/global.spec.js
View File

@@ -1,8 +1,5 @@
import mockAxios from "axios";
import { mount } from "@vue/test-utils";
import App from "../../src/App.vue";
import Fruits from "../../src/views/Fruits.vue";
import App from "@/App.vue";
describe("App", () => {
const wrapper = mount(App, { stubs: ["router-view"] });
@@ -15,23 +12,3 @@ describe("App", () => {
expect(wrapper.find("#app")).toBeTruthy();
});
});
// TODO: Move the following code to fruits.spec.js
jest.mock("axios", () => ({
get: jest.fn(() => Promise.resolve({ data: { data: "value" } }))
}));
it("should get fruits from fruit-api on mounted", async () => {
const wrapper = mount(Fruits, {
mocks: {
$http: mockAxios
}
});
expect(wrapper.vm.fruits).toEqual([]);
// We need to wait the nextTick to check API response (async).
await wrapper.vm.$nextTick(() => {
expect(wrapper.vm.fruits).toEqual("value");
});
});