Merge branch 'userItemstests' into 'main'

User itemstests

See merge request !167

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

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. -->

tests/unit/component-tests/user-component-tests/user-items.spec.js

 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();
+  });
 });