diff --git a/src/components/CommunityComponents/CommunityRequestForm.vue b/src/components/CommunityComponents/CommunityRequestForm.vue index 0ea59b7ccf360f9745e9e87c7b407eeb61df68ed..8508efd202f46350266f1c198b5f7419aca8aac3 100644 --- a/src/components/CommunityComponents/CommunityRequestForm.vue +++ b/src/components/CommunityComponents/CommunityRequestForm.vue @@ -43,10 +43,10 @@ </div> <notification-modal - @click="routeToHome" - :visible="sendRequestClicked" - :title="'Vellykket'" - :message="'Forespørsel sendt!'" + @click="routeToHome" + :visible="sendRequestClicked" + :title="'Vellykket'" + :message="'Forespørsel sendt!'" > </notification-modal> </div> diff --git a/src/components/UserProfileComponents/UserItems.vue b/src/components/UserProfileComponents/UserItems.vue index 25038bd7e4c1af6223f5993f85cd72ef4328b299..ea6da154182dbf2a9e4e2ddaed0ecc887313df8f 100644 --- a/src/components/UserProfileComponents/UserItems.vue +++ b/src/components/UserProfileComponents/UserItems.vue @@ -39,7 +39,7 @@ v-for="item in visibleItems" :key="item" > - <ItemCard class="ItemCard w-fit h-fit" :item="item" /> + <ItemCard id="ItemCardPage" class="ItemCard w-fit h-fit" :item="item" /> <TripleDotButton class="DotButton" @click="openDotMenu(item)"> </TripleDotButton> @@ -103,7 +103,7 @@ v-if="showSearchedItems" > <div class="cardContainer" v-for="item in searchedItems" :key="item"> - <ItemCard class="ItemCard" :item="item" /> + <ItemCard id="ItemCardSearch" class="ItemCard" :item="item" /> <TripleDotButton class="DotButton" @click="openDotMenu(item)"> </TripleDotButton> 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 new file mode 100644 index 0000000000000000000000000000000000000000..2e9d4334faaa742b8621c2cdae0b8ac602683598 --- /dev/null +++ b/tests/unit/component-tests/user-component-tests/__snapshots__/user-items.spec.js.snap @@ -0,0 +1,73 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`UserItems component renders correctly 1`] = ` +<div + data-v-app="" +> + + <div + class="text-xl md:text-2xl text-primary-light font-medium" + id="headline" + > + Mine gjenstander + </div> + <!-- Search field --> + <div + class="relative" + id="searchComponent" + > + <span + class="absolute inset-y-0 left-0 flex items-center pl-3" + > + <svg + class="w-5 h-5 text-gray-400" + fill="none" + viewBox="0 0 24 24" + > + <path + d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" + stroke="currentColor" + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2" + /> + </svg> + </span> + <input + class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring" + id="searchInput" + placeholder="Search" + type="text" + /> + </div> + <div + class="absolute inset-x-0 px-5 py-3" + > + <!-- ItemCards --> + <div + class="flex items-center justify-center w-screen" + > + <!-- Shows items based on pagination --> + <div + class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full" + > + + + + <!-- Main modal --> + <!--v-if--> + + </div> + <!-- Shows items based on search field input --> + <!--v-if--> + </div> + <!-- pagination --> + <div + class="flex justify-center" + > + <!--v-if--> + </div> + </div> + +</div> +`; 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 new file mode 100644 index 0000000000000000000000000000000000000000..c3def7171f08d712b9dca3eb60f846755a5a3760 --- /dev/null +++ b/tests/unit/component-tests/user-component-tests/user-items.spec.js @@ -0,0 +1,37 @@ +import { mount } from "@vue/test-utils"; +import UserItems from "@/components/UserProfileComponents/UserItems.vue"; + +describe("UserItems component", () => { + let wrapper; + + beforeEach(() => { + wrapper = mount(UserItems, { + props: { + ItemCard: { + item: { + listingID: 1, + img: "", + address: "Veien", + title: "Matboks", + pricePerDay: 50, + toggle: false, + } + } + } + }); + }); + + it("renders correctly", () => { + expect(wrapper.element).toMatchSnapshot(); + }); + + it("is instantiated", () => { + expect(wrapper.exists()).toBeTruthy(); + }); + + it("Check information", () => { + const byID = wrapper.find("#ItemCardPage"); + expect(byID.item.title.) + }) + +});