diff --git a/src/components/RentingComponents/NewRent.vue b/src/components/RentingComponents/NewRent.vue index 32073aa24a66328935b56876748e554e8dc00925..216b3a7345e59ae1316087be53d5bdeaa8c535e6 100644 --- a/src/components/RentingComponents/NewRent.vue +++ b/src/components/RentingComponents/NewRent.vue @@ -32,12 +32,12 @@ <button id="cancelButton" @click="cancelRent" class="text-primary-medium"> Tilbake </button> - <div id="confirmButton"> - <colored-button @click="sendRent" :text="'Send'"></colored-button> + <div> + <colored-button id="confirmButton" @click="sendRent" :text="'Send'"></colored-button> </div> </div> <div> - <notification-modal + <notification-modal id="confirmationNotification" @click="routeToHome" :visible="confirmed" :title="'Vellykket'" @@ -75,7 +75,6 @@ export default { newRentBox: { renterId: Number, title: String, - description: String, fromTime: Date, toTime: Date, listingID: Number, @@ -100,40 +99,40 @@ export default { let monthString = ""; //Gives the month the proper name switch (dateMonth) { - case 1: + case 0: monthString = "Januar"; break; - case 2: + case 1: monthString = "Februar"; break; - case 3: + case 2: monthString = "Mars"; break; - case 4: + case 3: monthString = "April"; break; - case 5: + case 4: monthString = "Mai"; break; - case 6: + case 5: monthString = "Juni"; break; - case 7: + case 6: monthString = "Juli"; break; - case 8: + case 7: monthString = "August"; break; - case 9: + case 8: monthString = "September"; break; - case 10: + case 9: monthString = "Oktober"; break; - case 11: + case 10: monthString = "November"; break; - case 12: + case 11: monthString = "Desember"; break; default: diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap new file mode 100644 index 0000000000000000000000000000000000000000..0d4999e9ea79a37b5fd6bbae85350af3f93a2a91 --- /dev/null +++ b/tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap @@ -0,0 +1,39 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ItemCard component renders correctly 1`] = ` +<div + class="mt-5" +> + <div + class="w-4/5 rounded bg-gray-200 h-full overflow-hidden display:inline-block correct-size" + > + <img + alt="Item image" + class="w-full" + src="String" + /> + <div + class="p-1 m-1" + > + <p + class="text-gray-700 text-xs font-bold" + id="adress" + > + String + </p> + <p + class="font-bold text-sm" + id="title" + > + String + </p> + <p + class="text-gray-700 text-xs" + id="price" + > + 0 kr + </p> + </div> + </div> +</div> +`; diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap new file mode 100644 index 0000000000000000000000000000000000000000..a475c4e78dfe175dbf46da2eb2492f7c59588869 --- /dev/null +++ b/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap @@ -0,0 +1,201 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NewItemForm component renders correctly 1`] = ` +<div + class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4" +> + <!-- Component heading --> + <h3 + class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8" + > + Opprett ny utleie + </h3> + <!-- Title --> + <div + class="mb-6" + > + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" + id="titleLabel" + > + Tittel + </label> + <input + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + id="title" + required="" + type="text" + /> + <!-- error message for title--> + + + </div> + <!-- Select category --> + <div + class="mb-6" + > + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" + id="selectCategoryLabel" + > + Kategori + </label> + <select + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + id="categories" + > + <option + class="text-gray-400" + disabled="" + value="" + > + Velg en kategori + </option> + + <option + class="text-gray-900 text-sm" + > + Hage + </option> + <option + class="text-gray-900 text-sm" + > + Kjøkken + </option> + <option + class="text-gray-900 text-sm" + > + Musikk + </option> + <option + class="text-gray-900 text-sm" + > + Annet + </option> + + </select> + <!-- error message for select box --> + + + </div> + <!-- Grupper --> + <div + class="mb-6" + > + <label + class="block text-sm font-medium text-gray-900 dark:text-gray-400" + > + Grupper + </label> + <div + class="overflow-auto w-full h-32 mt-2 text-base list-none bg-white rounded divide-y divide-gray-100 dark:bg-gray-700" + > + <ul + aria-labelledby="dropdownDefault" + class="py-1" + > + <li> + + + </li> + </ul> + </div> + <label + class="text-error text-sm block" + /> + </div> + <!-- price --> + <div + class="mb-6 mt-4" + > + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" + id="priceLabel" + > + Pris + </label> + <input + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + id="price" + required="" + type="number" + /> + <!-- error message for price --> + + + </div> + <!-- Description --> + <div + class="mb-6" + > + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" + id="descriptionLabel" + > + Beskrivelse + </label> + <textarea + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + id="description" + required="" + rows="4" + /> + <!-- error message for description --> + + + </div> + <!-- Address --> + <div + class="mb-6" + > + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" + id="addressLabel" + > + Adresse + </label> + <input + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + id="adress" + required="" + type="text" + /> + <!-- error message for address--> + + + </div> + <!-- Images --> + <div> + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" + id="imageLabel" + > + Bilder + </label> + <input + accept="image/png, image/jpeg" + multiple="" + style="display: none;" + type="file" + /> + <button + class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light" + > + Velg bilde + </button> + + + </div> + <!-- Save item button --> + <div + class="float-right" + > + <button + class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light" + id="saveButton" + > + Lagre + </button> + </div> +</div> +`; diff --git a/tests/unit/component-tests/renting-compnents-tests/new-rent.spec.js b/tests/unit/component-tests/renting-compnents-tests/new-rent.spec.js new file mode 100644 index 0000000000000000000000000000000000000000..cef49e0e104fe53593256f1aef2edde99e974bb3 --- /dev/null +++ b/tests/unit/component-tests/renting-compnents-tests/new-rent.spec.js @@ -0,0 +1,58 @@ +import { mount } from "@vue/test-utils"; +import NewRent from "@/components/RentingComponents/NewRent.vue" + +describe("Confirm and send a rent request", () => { + let wrapper; + const route = { + params: { + id: 1 + } + } + const router = { + push: jest.fn(), + } + beforeEach(() => { + + wrapper = mount(NewRent, { + props: { + newRentBox: { + title: "Telt", + listingID: 1, + fromTime: "2022-09-19", + toTime: "2022-09-23", + price: 200, + renterId: 1, + isAccepted: false + } + }, + global: { + mocks: { + $route: route, + $router: router + } + } + }); + }); + + it("renders correctly", () => { + expect(wrapper.element).toMatchSnapshot(); + }); + + it("Is instansiated", () => { + expect(wrapper.exists()).toBeTruthy(); + }); + + it("Check if fields show correct informations", () => { + expect(wrapper.find("#rentTitle").text()).toEqual("Telt"); + expect(wrapper.find("#fromTime").text()).toMatch("19. September 2022"); + expect(wrapper.find("#toTime").text()).toMatch("23. September 2022"); + expect(wrapper.find("#price").text()).toEqual("Totaltpris: 200 kr"); + }); + + it("Check if routed", async() => { + await wrapper.find("#confirmButton").trigger('click') + await wrapper.find("#confirmationNotification").trigger('click'); + expect(router.push).toBeCalledTimes(1); + } + ); +}); \ No newline at end of file diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap new file mode 100644 index 0000000000000000000000000000000000000000..2aa391a34e4b72f291cf5fe3bcb6173ea20e7e06 --- /dev/null +++ b/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap @@ -0,0 +1,63 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NewPasswordForm component renders correctly 1`] = ` +<div + class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4" +> + <h3 + class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8" + > + Endre passord + </h3> + <div + class="" + id="firstPasswordField" + > + <label + class="block text-sm text-gray-800 dark:text-gray-200" + for="password" + > + Nytt passord + </label> + <input + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300" + type="password" + /> + <!-- error message --> + + + </div> + <div + class="mt-4" + id="secondPasswordField" + > + <div + class="flex items-center justify-between" + > + <label + class="block text-sm text-gray-800 dark:text-gray-200" + for="rePassword" + > + Gjenta nytt passord + </label> + </div> + <input + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300" + type="password" + /> + <!-- error message --> + + + </div> + <div + class="mt-6" + id="buttonsField" + > + <button + class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light float-right" + > + Sett ny passord + </button> + </div> +</div> +`; diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap new file mode 100644 index 0000000000000000000000000000000000000000..49cbc5a2e696228709e56dc12f1925b640d0e377 --- /dev/null +++ b/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap @@ -0,0 +1,43 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ResetPasswordForm component renders correctly 1`] = ` +<div + class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4" +> + <h3 + class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8" + > + Glemt passordet ditt? + </h3> + <div + class="m-6" + id="emailField" + > + <div + class="mb-6" + > + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" + for="email" + > + E-post + </label> + <input + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300" + id="email" + placeholder="eksempel@eksempel.no" + required="" + type="email" + /> + <!-- error message --> + + + </div> + <button + class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light float-right" + > + Tilbakestill passord + </button> + </div> +</div> +`;