Rendering test where possible

tests/unit/component-tests/base-component-tests/__snapshots__/nav-bar.spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavBar component renders correctly 1`] = `
+<nav
+  class="flex items-center justify-between bg-white h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
+>
+  <div
+    class="logo"
+  >
+    <img
+      alt="BoCo logo"
+      class="m-1 ml-4 cursor-pointer h-12"
+      src=""
+    />
+  </div>
+  <ul
+    class="flex"
+  >
+    <li>
+      <img
+        alt="Legg til"
+        class="m-6 cursor-pointer h-7"
+        src=""
+      />
+    </li>
+    <li>
+      <img
+        alt="Meldinger"
+        class="m-6 cursor-pointer h-7"
+        src=""
+      />
+    </li>
+    <li>
+      <img
+        alt="Profil"
+        class="m-6 cursor-pointer h-7"
+        src=""
+      />
+    </li>
+  </ul>
+</nav>
+`;

tests/unit/component-tests/base-component-tests/nav-bar.spec.js

+import { mount } from "@vue/test-utils";
+import NavBar from "@/components/BaseComponents/NavBar.vue"
+
+describe("NavBar component", () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(NavBar);
+  });
+
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it("is instantiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+});
\ No newline at end of file

tests/unit/component-tests/community-component-tests/__snapshots__/community-list.spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CommunityList component renders correctly 1`] = `
+<ul>
+  
+  <li>
+    <div
+      class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-4"
+    >
+      <div
+        class="h-10 w-10 flex flex-col justify-center items-center mr-4"
+      >
+        <img
+          alt="groupIMG"
+          src=""
+        />
+      </div>
+      <div
+        class="flex-1 pl-1"
+      >
+        <div
+          class="font-medium dark:text-white"
+        >
+          string
+        </div>
+      </div>
+      <div
+        class="flex flex-row justify-center"
+      >
+        <!--v-if-->
+        <button
+          class="px-4 py-2 w-24 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
+        >
+           Gå til 
+        </button>
+      </div>
+    </div>
+  </li>
+  <li>
+    <div
+      class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-4"
+    >
+      <div
+        class="h-10 w-10 flex flex-col justify-center items-center mr-4"
+      >
+        <img
+          alt="groupIMG"
+          src=""
+        />
+      </div>
+      <div
+        class="flex-1 pl-1"
+      >
+        <div
+          class="font-medium dark:text-white"
+        >
+          string
+        </div>
+      </div>
+      <div
+        class="flex flex-row justify-center"
+      >
+        <!--v-if-->
+        <button
+          class="px-4 py-2 w-24 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
+        >
+           Gå til 
+        </button>
+      </div>
+    </div>
+  </li>
+  
+</ul>
+`;

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-52 rounded bg-gray-200"
+  >
+    <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__/member-list.spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MemberList component renders correctly 1`] = `
+<ul>
+  
+  <li>
+    <div
+      class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-4"
+    >
+      <div
+        class="h-10 w-10 flex flex-col justify-center items-center mr-4"
+      >
+        <router-link
+          to="/profile/2"
+        >
+          <img
+            alt="profil"
+            src=""
+          />
+        </router-link>
+      </div>
+      <div
+        class="flex-1 pl-1"
+      >
+        <div
+          class="font-medium dark:text-white"
+        >
+          erik hansen
+        </div>
+      </div>
+      <div
+        class="hidden md:block flex-auto"
+      >
+        <ul
+          class="flex justify-center"
+        >
+          <li>
+            <p
+              class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400"
+            >
+              Gjennomsnitts rating:  
+            </p>
+          </li>
+          
+          <li>
+            <svg
+              class="w-5 h-5 text-gray-300 dark:text-gray-500"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+              />
+            </svg>
+          </li>
+          <li>
+            <svg
+              class="w-5 h-5 text-gray-300 dark:text-gray-500"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+              />
+            </svg>
+          </li>
+          <li>
+            <svg
+              class="w-5 h-5 text-gray-300 dark:text-gray-500"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+              />
+            </svg>
+          </li>
+          <li>
+            <svg
+              class="w-5 h-5 text-gray-300 dark:text-gray-500"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+              />
+            </svg>
+          </li>
+          <li>
+            <svg
+              class="w-5 h-5 text-gray-300 dark:text-gray-500"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+              />
+            </svg>
+          </li>
+          
+          <li>
+            <p
+              class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400"
+            >
+              "[object Promise]" out of 5 
+            </p>
+          </li>
+        </ul>
+      </div>
+      <div
+        class="flex flex-row justify-center"
+      >
+        <button
+          class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
+        >
+           Åpne chat 
+        </button>
+        <!--v-if-->
+      </div>
+    </div>
+  </li>
+  <li>
+    <div
+      class="bg-white shadow dark:bg-gray-800 select-none cursor-pointer hover:bg-gray-50 flex items-center p-4"
+    >
+      <div
+        class="h-10 w-10 flex flex-col justify-center items-center mr-4"
+      >
+        <router-link
+          to="/profile/1"
+        >
+          <img
+            alt="profil"
+            src=""
+          />
+        </router-link>
+      </div>
+      <div
+        class="flex-1 pl-1"
+      >
+        <div
+          class="font-medium dark:text-white"
+        >
+          Test Testesen
+        </div>
+      </div>
+      <div
+        class="hidden md:block flex-auto"
+      >
+        <ul
+          class="flex justify-center"
+        >
+          <li>
+            <p
+              class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400"
+            >
+              Gjennomsnitts rating:  
+            </p>
+          </li>
+          
+          <li>
+            <svg
+              class="w-5 h-5 text-gray-300 dark:text-gray-500"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+              />
+            </svg>
+          </li>
+          <li>
+            <svg
+              class="w-5 h-5 text-gray-300 dark:text-gray-500"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+              />
+            </svg>
+          </li>
+          <li>
+            <svg
+              class="w-5 h-5 text-gray-300 dark:text-gray-500"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+              />
+            </svg>
+          </li>
+          <li>
+            <svg
+              class="w-5 h-5 text-gray-300 dark:text-gray-500"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+              />
+            </svg>
+          </li>
+          <li>
+            <svg
+              class="w-5 h-5 text-gray-300 dark:text-gray-500"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+              />
+            </svg>
+          </li>
+          
+          <li>
+            <p
+              class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400"
+            >
+              "[object Promise]" out of 5 
+            </p>
+          </li>
+        </ul>
+      </div>
+      <div
+        class="flex flex-row justify-center"
+      >
+        <button
+          class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80"
+        >
+           Åpne chat 
+        </button>
+        <!--v-if-->
+      </div>
+    </div>
+  </li>
+  
+</ul>
+`;

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="m-6"
+>
+  <!-- Component heading -->
+  <div
+    class="flex justify-center"
+  >
+    <p
+      class="text-4xl mb-6 mt-6"
+    >
+      Utleie
+    </p>
+  </div>
+  <!-- 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="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      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="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      id="categories"
+    >
+      <option
+        class="text-gray-400"
+        disabled=""
+        value=""
+      >
+         Select a category 
+      </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>
+  <!-- Select Group -->
+  <div
+    class="mb-6"
+  >
+    <label
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+    >
+      Gruppe
+    </label>
+    <select
+      class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+    >
+      <option
+        class="text-gray-400"
+        disabled=""
+        value=""
+      >
+         Select a Group 
+      </option>
+      
+      <option
+        class="text-gray-900 text-sm"
+      >
+        4040
+      </option>
+      <option
+        class="text-gray-900 text-sm"
+      >
+        4041
+      </option>
+      
+    </select>
+    <!-- error message for select box -->
+    
+    
+  </div>
+  <!-- price -->
+  <div
+    class="mb-6"
+  >
+    <label
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+      id="priceLabel"
+    >
+      Pris
+    </label>
+    <input
+      class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      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 p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      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"
+    >
+      Adresse
+    </label>
+    <input
+      class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      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="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800"
+    >
+       Velg bilde 
+    </button>
+    
+    
+  </div>
+  <!-- Save item button -->
+  <div
+    class="flex justify-center"
+  >
+    <button
+      class="content-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+      id="saveButton"
+    >
+       Lagre 
+    </button>
+  </div>
+</div>
+`;

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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SearchItemListComponent elements rendering renders correctly 1`] = `
+<section
+  class="relative w-full max-w-md px-5 py-4 mx-auto rounded-md"
+>
+  <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-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
+      id="searchInput"
+      placeholder="Search"
+      type="text"
+    />
+  </div>
+  <div
+    class="absolute inset-x-0 px-6 py-3 mt-4 border-2 border-slate-500"
+  >
+    <div
+      class="grid grid-cols-2"
+    >
+      
+      <item-card-stub
+        item="[object Object]"
+      />
+      <item-card-stub
+        item="[object Object]"
+      />
+      <item-card-stub
+        item="[object Object]"
+      />
+      
+    </div>
+  </div>
+</section>
+`;

tests/unit/component-tests/community-component-tests/community-list.spec.js

+import { mount } from "@vue/test-utils";
+import CommunityList from "@/components/CommunityComponents/CommunityList.vue"
+
+describe("CommunityList component", () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(CommunityList, {
+        props:{
+            groupList: [
+                {
+                    communityId: 0,
+                    name: "string",
+                    description: "string",
+                    visibility: 0,
+                    location: "string",
+                    picture: "string"
+                },
+                {
+                    communityId: 0,
+                    name: "string",
+                    description: "string",
+                    visibility: 0,
+                    location: "string",
+                    picture: "string"
+                },
+            ]
+        }
+    });
+  });
+
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it("is instantiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+});
\ No newline at end of file

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

+import { mount } from "@vue/test-utils";
+import ItemCard from "@/components/CommunityComponents/ItemCard.vue"
+
+describe("ItemCard component", () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(ItemCard, {
+        props:{
+            item: {
+                img: "String",
+                address: "String",
+                title: "String",
+                pricePerDay: 0,
+            }
+        }
+    });
+  });
+
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it("is instantiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+});
\ No newline at end of file

tests/unit/component-tests/community-component-tests/member-list.spec.js

+import { mount } from "@vue/test-utils";
+import MemberList from "@/components/CommunityComponents/MemberList.vue"
+
+describe("MemberList component", () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(MemberList);
+  });
+
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it("is instantiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+});
\ No newline at end of file

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

+import { mount } from "@vue/test-utils";
+import NewItemForm from "@/components/CommunityComponents/NewItemForm.vue"
+
+describe("NewItemForm component", () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(NewItemForm);
+  });
+
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it("is instantiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+});
\ No newline at end of file

tests/unit/component-tests/community-component-tests/search-item-list.spec.js

 import { shallowMount } from "@vue/test-utils";
 import SearchItemListComponent from "@/components/CommunityComponents/SearchItemList.vue";
 
-describe("CreateNewGroup elements rendering", () => {
-  it("Tests setting values of input field", async () => {
-    const wrapper = shallowMount(SearchItemListComponent);
+describe("SearchItemListComponent elements rendering", () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(SearchItemListComponent);
+  });
+
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it("is instantiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
 
+  it("Tests setting values of input field", async () => {
     const searchInput = wrapper.find("#searchInput");
     await searchInput.setValue("Dyson");
     expect(searchInput.element.value).toBe("Dyson");

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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LoginForm component renders correctly 1`] = `
+<div
+  class="max-w-md p-6 mx-auto rounded-md shadow-lg mt-16"
+>
+  <div
+    class="flex justify-center text-2xl"
+  >
+    Logg inn
+  </div>
+  <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="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        id="email"
+        placeholder="eksempel@eksempel.no"
+        required=""
+        type="email"
+      />
+      <!-- error message -->
+      
+      
+    </div>
+  </div>
+  <div
+    class="m-6"
+    id="passwordField"
+  >
+    <label
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+      for="password"
+    >
+      Passord
+    </label>
+    <input
+      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+      id="password"
+      required=""
+      type="password"
+    />
+    <!-- error message -->
+    
+    
+  </div>
+  <div
+    class="m-6"
+    id="buttonsField"
+  >
+    <div
+      class="align-items: flex-end; mb-6"
+    >
+      <div
+        class="ml-3 text-sm"
+      >
+        <router-link
+          class="text-blue-600 flex justify-end"
+          to="/resetPassword"
+        >
+          Glemt passord
+        </router-link>
+      </div>
+    </div>
+    <button
+      class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5"
+    >
+       Logg inn 
+    </button>
+    <div
+      class="align-items: flex-end; mb-6 mt-12"
+    >
+      <div
+        class="text-sm"
+      >
+        <router-link
+          class="text-blue-600 flex justify-center"
+          to="register"
+        >
+          Ny bruker
+        </router-link>
+      </div>
+    </div>
+    <div
+      class="flex justify-center"
+    >
+      <label />
+    </div>
+  </div>
+</div>
+`;

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="w-full max-w-sm p-6 m-auto bg-white rounded-md shadow-md dark:bg-gray-800 mt-8"
+>
+  <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 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
+      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 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
+      type="password"
+    />
+    <!-- error message -->
+    
+    
+  </div>
+  <div
+    class="mt-6"
+    id="buttonsField"
+  >
+    <button
+      class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
+    >
+       Endre passord 
+    </button>
+  </div>
+</div>
+`;

tests/unit/component-tests/user-component-tests/__snapshots__/rating.spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Rating component renders correctly 1`] = `
+<ul
+  class="flex justify-center"
+>
+  <li>
+    <p
+      class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400"
+    >
+      :  
+    </p>
+  </li>
+  
+  <li>
+    <svg
+      class="w-5 h-5 text-gray-300 dark:text-gray-500"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+      />
+    </svg>
+  </li>
+  <li>
+    <svg
+      class="w-5 h-5 text-gray-300 dark:text-gray-500"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+      />
+    </svg>
+  </li>
+  <li>
+    <svg
+      class="w-5 h-5 text-gray-300 dark:text-gray-500"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+      />
+    </svg>
+  </li>
+  <li>
+    <svg
+      class="w-5 h-5 text-gray-300 dark:text-gray-500"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+      />
+    </svg>
+  </li>
+  <li>
+    <svg
+      class="w-5 h-5 text-gray-300 dark:text-gray-500"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+      />
+    </svg>
+  </li>
+  
+  <li>
+    <p
+      class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400"
+    >
+       out of 5 
+    </p>
+  </li>
+</ul>
+`;

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="resetPassword"
+>
+  <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="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        id="email"
+        placeholder="eksempel@eksempel.no"
+        required=""
+        type="email"
+      />
+      <!-- error message -->
+      
+      
+    </div>
+  </div>
+  <button
+    class="flex justify-center align-items: flex-end; text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+  >
+     Send e-post 
+  </button>
+</div>
+`;

tests/unit/component-tests/user-component-tests/login-form.spec.js

+import { mount } from "@vue/test-utils";
+import LoginForm from "@/components/FormComponents/LoginForm.vue"
+
+describe("LoginForm component", () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(LoginForm);
+  });
+
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it("is instantiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+});
\ No newline at end of file

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

+import { mount } from "@vue/test-utils";
+import NewPasswordForm from "@/components/FormComponents/NewPasswordForm.vue"
+
+describe("NewPasswordForm component", () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(NewPasswordForm);
+  });
+
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it("is instantiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+});
\ No newline at end of file

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

+import { mount } from "@vue/test-utils";
+import Rating from "@/components/UserProfileComponents/Rating.vue"
+
+describe("Rating component", () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(Rating);
+  });
+
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it("is instantiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+});
\ No newline at end of file

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

+import { mount } from "@vue/test-utils";
+import ResetPasswordForm from "@/components/FormComponents/ResetPasswordForm.vue"
+
+describe("ResetPasswordForm component", () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(ResetPasswordForm);
+  });
+
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it("is instantiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+});
\ No newline at end of file