diff --git a/src/components/UserProfileComponents/UserItems.vue b/src/components/UserProfileComponents/UserItems.vue
index ac1736b5e713e14625729087f0493c4b859e55bf..b826f82d9f6685392496a7a0786461662a8fefe8 100644
--- a/src/components/UserProfileComponents/UserItems.vue
+++ b/src/components/UserProfileComponents/UserItems.vue
@@ -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"
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap
index a5812dd15944a413f9281e682a1b364681eb63c9..13f68d1b5a83de817f5f4d48176405dcfb28502f 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap
@@ -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 -->
diff --git a/tests/unit/component-tests/user-component-tests/user-items.spec.js b/tests/unit/component-tests/user-component-tests/user-items.spec.js
index 7640696dee98524a786e6f059aa1520e6934a429..afddd7eac0bbe777ddaf29aa233de09d98c3502a 100644
--- a/tests/unit/component-tests/user-component-tests/user-items.spec.js
+++ b/tests/unit/component-tests/user-component-tests/user-items.spec.js
@@ -1,23 +1,48 @@
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();
+ });
+
+
+
});