From 90d718de50e630fcc78dab84dd478c911177bbaf Mon Sep 17 00:00:00 2001
From: henrikburmann <haburmann@gmail.com>
Date: Tue, 3 May 2022 11:51:39 +0200
Subject: [PATCH] Some test added to new rent
---
src/components/RentingComponents/NewRent.vue | 31 ++-
.../__snapshots__/item-card.spec.js.snap | 39 ++++
.../__snapshots__/new-item-form.spec.js.snap | 201 ++++++++++++++++++
.../renting-compnents-tests/new-rent.spec.js | 58 +++++
.../new-password-form.spec.js.snap | 63 ++++++
.../reset-password-form.spec.js.snap | 43 ++++
6 files changed, 419 insertions(+), 16 deletions(-)
create mode 100644 tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap
create mode 100644 tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
create mode 100644 tests/unit/component-tests/renting-compnents-tests/new-rent.spec.js
create mode 100644 tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap
create mode 100644 tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap
diff --git a/src/components/RentingComponents/NewRent.vue b/src/components/RentingComponents/NewRent.vue
index 32073aa..216b3a7 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 0000000..0d4999e
--- /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 0000000..a475c4e
--- /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 0000000..cef49e0
--- /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 0000000..2aa391a
--- /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 0000000..49cbc5a
--- /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>
+`;
--
GitLab