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

Testing GridItem + AddFruit components

Browse Source
This commit is contained in:
Noé Viricel
2020-12-08 18:03:48 +01:00
parent 065ff6f3ff
commit b5ceae6c00
24 changed files with 844 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
tests/unit/AddFruit.spec.js Normal file
View File

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

38
tests/unit/GridItem.spec.js
View File

@@ -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
}

23
tests/unit/__snapshots__/AddFruit.spec.js.snap Normal file
View File

@@ -0,0 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Test AddFruit component. takes a snapshot of the component. 1`] = `
<div class="modal">
<h2>New Fruit</h2>
<form id="new-fruit">
<div class="form-field"><label for="fruit-name">Name</label> <input id="fruit-name" type="text" placeholder="Ex: Banana" required="required"></div>
<imageunsplash-stub containerclass="form-field" label="Image" placeholder="Search: strawberry, apple ..." required="true"></imageunsplash-stub>
<div class="form-group">
<div class="form-field"><label for="fruit-taste">Taste</label> <input id="fruit-taste" type="text" placeholder="Ex: sweet" required="required"></div>
<div class="form-field"><label for="fruit-color">Color</label> <input id="fruit-color" type="color" placeholder="Color" required="required"></div>
</div>
<div class="form-group">
<div class="form-field"><label for="fruit-price">Price ($)</label> <input id="fruit-price" type="number" placeholder="Ex: $13" required="required" min="0"></div>
<div class="form-field"><label for="fruit-expires">Expiration Date</label> <input id="fruit-expires" type="date" required="required"></div>
</div>
<div class="form-field"><label for="fruit-description">Description</label> <textarea id="fruit-description" placeholder="Ex: malesuada pellentesque elit eget ..." required="required"></textarea></div>
<div class="actions"><button type="button" class="btn btn--cancel">
Cancel
</button> <button type="submit" class="btn btn--success">Save</button></div>
</form>
</div>
`;

18
tests/unit/__snapshots__/GridItem.spec.js.snap Normal file
View File

@@ -0,0 +1,18 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Test GridItem component. takes a snapshot of the component. 1`] = `
<article class="grid-item">
<!---->
<router-link-stub to="/fruit/3">
<div class="thumbnail"><img src="/image/path.jpg" alt="banana"></div>
<section>
<h3>
banana
<span class="tag" style="background-color: rgb(118, 62, 68);">Handcrafted</span>
</h3>
<hr>
<p class="price">$907</p>
</section>
</router-link-stub>
</article>
`;

2
tests/unit/mutations.spec.js
View File

@@ -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",