Some test added to new rent

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:

tests/unit/component-tests/community-component-tests/__snapshots__/item-card.spec.js.snap

+// 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>
+`;

tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap

+// 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>
+`;

tests/unit/component-tests/renting-compnents-tests/new-rent.spec.js

+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

tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap

+// 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>
+`;

tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap

+// 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>
+`;