Skip to content
Snippets Groups Projects
Commit 27155789 authored by henrikburmann's avatar henrikburmann
Browse files

UserItems tests

parent 8bb5c465
No related branches found
No related tags found
1 merge request!167User itemstests
Hide whitespace changes
Inline Side-by-side
src/components/UserProfileComponents/UserItems.vue
+ 5
− 4
View file @ 27155789
......@@ -61,15 +61,16 @@
@click="
this.$router.push('/item/' + item.listingID + '/edit')
"
class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
class="editButton block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Rediger gjenstand
</button>
</li>
<li>
<button
@click="goToDeleteItem(item.listingID)"
class="block py-2 px-4 text-sm text-error-medium hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
class="deleteButton block py-2 px-4 text-sm text-error-medium hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Slett gjenstand
</button>
......@@ -96,7 +97,7 @@
id="confirmDeleteButton"
@click="deleteItem"
:text="'Slett'"
class="m-2 bg-error-medium"
class="confirmDelete m-2 bg-error-medium"
>
</ColoredButton>
</div>
......@@ -155,7 +156,7 @@
>
<div class="flex justify-center p-2">
<ColoredButton
id="#cancelDeleteButton"
id="cancelDeleteButton"
:text="'Avbryt'"
@click="cancelDelete"
class="bg-gray-500 m-2"
......
tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap
+ 93
− 0
View file @ 27155789
......@@ -52,6 +52,99 @@ exports[`UserItems component renders correctly 1`] = `
class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full"
>
<div
class="cardContainer"
id="item"
>
<div
class="w-full"
>
<!-- Item card, displays title, address, price per day and a picture -->
<div
class="mt-5 px-5 ItemCard w-full h-full"
id="ItemCardPage"
>
<div
class="w-full h-full rounded bg-gray-100 ring-1 ring-gray-200 overflow-hidden display:inline-block correct-size cursor-pointer"
>
<div
class="relative h-0 pb-[66.7%]"
>
<img
alt="Item image"
class="w-full h-full object-contain absolute"
src=""
/>
</div>
<div
class="p-1 m-1 bottom-0"
>
<p
class="font-bold text-sm"
id="title"
>
Matboks
</p>
<p
class="text-gray-700 text-xs"
id="price"
>
50 kr
</p>
<p
class="text-gray-700 text-xs font-bold"
id="adress"
>
Veien
</p>
</div>
</div>
</div>
</div>
<button
class="w-10 h-10 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg float-right text-sm p-1.5 DotButton"
data-dropdown-toggle="dropdown"
id="dropdownDefault"
type="button"
>
<svg
class="w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
/>
</svg>
</button>
<div
class="options z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 pt-4 pl-12"
style="display: none;"
>
<ul
aria-labelledby="dropdownDefault"
class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl"
>
<li>
<button
class="editButton block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Rediger gjenstand
</button>
</li>
<li>
<button
class="deleteButton block py-2 px-4 text-sm text-error-medium hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Slett gjenstand
</button>
</li>
</ul>
</div>
</div>
<!-- Main modal -->
......
tests/unit/component-tests/user-component-tests/user-items.spec.js
+ 73
− 11
View file @ 27155789
import { mount } from "@vue/test-utils";
import UserItems from "@/components/UserProfileComponents/UserItems.vue";
import axios from "axios";
let mockRouter;
jest.mock("@/utils/apiutil", () => {
return {
getItemPictures: () => {
return new Promise((resolve) => {
resolve([]);
});
},
GetUserListings: () => {
return new Promise((resolve) => {
resolve([ {
listingID: 1,
img: "",
address: "Veien",
title: "Matboks",
pricePerDay: 50,
toggle: false,
},]);
})
}
};
});
jest.mock("axios")
let wrapper;
describe("UserItems component", () => {
let wrapper;
mockRouter = {
push: jest.fn()
}
beforeEach(() => {
wrapper = mount(UserItems, {
global:{
mocks:{
$router: mockRouter
}
},
data() {
return {
items: [
{
listingID: 1,
img: "",
address: "Veien",
title: "Matboks",
pricePerDay: 50,
toggle: false,
},
],
showItems: true,
};
},
});
......@@ -34,4 +59,41 @@ describe("UserItems component", () => {
it("Check headline", () => {
expect(wrapper.find("#headline").text()).toMatch("Mine gjenstander");
});
it("Check if pressing 'Rediger gjenstand' pushes to right path", async () => {
const dotButton = wrapper.findAll(".DotButton")[0];
dotButton.trigger("click");
const editButton = wrapper.findAll(".editButton")[0];
expect(editButton.text()).toBe("Rediger gjenstand");
editButton.trigger("click");
await wrapper.vm.$nextTick();
expect(mockRouter.push).toBeCalled();
expect(mockRouter.push).toBeCalledWith("/item/1/edit");
});
it("Check if delete is called", async () => {
const dotButton = wrapper.findAll(".DotButton")[0];
dotButton.trigger("click");
await wrapper.vm.$nextTick();
const deleteButton = wrapper.findAll(".deleteButton")[0];
expect(deleteButton.text()).toBe("Slett gjenstand");
deleteButton.trigger("click");
await wrapper.vm.$nextTick();
const confirmButton = wrapper.findAll(".confirmDelete")[0];
expect(confirmButton.text()).toBe("Slett");
//Feiler herfra
// confirmButton.trigger("click");
// await wrapper.vm.$nextTick();
// expect(axios.delete).toBeCalledTimes(1);
// expect(mockRouter.go).toBeCalled();
});
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment