diff --git a/src/components/UserProfileComponents/UserItems.vue b/src/components/UserProfileComponents/UserItems.vue
index be1cc0457ac6caa220b9c8afedc467ae143d8585..53cacdd2751b93ab3323097fa641a1f5dedcaf92 100644
--- a/src/components/UserProfileComponents/UserItems.vue
+++ b/src/components/UserProfileComponents/UserItems.vue
@@ -65,7 +65,7 @@
@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>
@@ -73,7 +73,7 @@
<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>
@@ -102,7 +102,7 @@
id="confirmDeleteButton1"
@click="deleteItem"
:text="'Slett'"
- class="m-2 bg-error-medium"
+ class="confirmDelete m-2 bg-error-medium"
>
</ColoredButton>
</div>
@@ -170,7 +170,7 @@
>
<div class="flex justify-center p-2">
<ColoredButton
- id="#cancelDeleteButton"
+ id="cancelDeleteButton"
:text="'Avbryt'"
@click="cancelDelete"
class="bg-gray-500 m-2"
@@ -202,14 +202,14 @@
</template>
<script>
import TripleDotButton from "@/components/BaseComponents/TripleDotButton.vue";
-import { GetUserListings, getItemPictures } from "@/utils/apiutil";
import ColoredButton from "@/components/BaseComponents/ColoredButton.vue";
-
-import UserService from "@/services/user.service";
import ItemCard from "@/components/ItemComponents/ItemCard.vue";
import PaginationTemplate from "@/components/BaseComponents/PaginationTemplate";
import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal.vue";
+import UserService from "@/services/user.service";
+import listingService from "@/services/listing.service";
+
export default {
name: "UserItems",
components: {
@@ -272,10 +272,12 @@ export default {
}
},
getUserListingsFromAPI: async function () {
- this.items = await GetUserListings();
+ this.items = await UserService.getUserListings();
for (var i = 0; i < this.items.length; i++) {
this.items[i].toggle = false;
- let images = await getItemPictures(this.items[i].listingID);
+ let images = await listingService.getItemPictures(
+ this.items[i].listingID
+ );
if (images.length > 0) {
this.items[i].img = images[0].picture;
}
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 6144f610a8902c6c981d2d5ace4425fdd3cec20d..344d5b6abc9dc0050a300001c685640d62b2a39f 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
@@ -54,6 +54,105 @@ 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>
+ <!-- Dropdown menu with options for editing an item and deleting an item -->
+ <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
+ aria-hidden="true"
+ class="w-6 h-6"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ viewBox="0 0 24 24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </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>
<!-- A waring asking the user if it is sure it wants to delete the item
with options to go ahead with the deleting or to cancel the delete. -->
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..b077c14482cad1d98a076ab88a5bf6afcf6a5cea 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,59 @@
import { mount } from "@vue/test-utils";
import UserItems from "@/components/UserProfileComponents/UserItems.vue";
+import UserService from "@/services/user.service";
+import ListingService from "@/services/listing.service";
+
+jest.mock("@/services/user.service", () => jest.fn());
+jest.mock("@/services/listing.service", () => jest.fn());
+
+UserService.getUserListings = jest.fn(() => {
+ return new Promise((resolve) => {
+ resolve([
+ {
+ listingID: 1,
+ img: "",
+ address: "Veien",
+ title: "Matboks",
+ pricePerDay: 50,
+ toggle: false,
+ },
+ ]);
+ });
+});
+
+UserService.setListingToDeleted = jest.fn(() => {
+ return new Promise((resolve) => {
+ resolve();
+ });
+});
+
+ListingService.getItemPictures = jest.fn(() => {
+ return new Promise((resolve) => {
+ resolve([]);
+ });
+});
+
+jest.mock("axios");
+
+let mockRouter;
+let wrapper;
describe("UserItems component", () => {
- let wrapper;
+ mockRouter = {
+ push: jest.fn(),
+ go: 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 +70,36 @@ 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(ListingService.getItemPictures).toBeCalled();
+ expect(mockRouter.go).toBeCalled();
+ });
});