Merge branch 'view-tests' into 'main'

View tests

See merge request !80

src/components/BaseComponents/CommunityHeader.vue → src/components/CommunityComponents/CommunityHeader.vue

 <template>
   <div class="flex items-center justify-between mx-4">
-    <div class="flex-1 min-w-0">
+    <router-link
+      :to="'/community/' + community.communityId"
+      class="flex-1 min-w-0"
+    >
       <h2
         class="text-xl md:text-2xl text-gray-600 font-medium w-full sm:truncate"
       >
@@ -26,7 +29,7 @@
           {{ community.location }}
         </div>
       </div>
-    </div>
+    </router-link>
     <div>
       <!-- If the user is not a member in the community, this button will show -->
       <div v-if="!member">

src/components/CommunityComponents/CommunityHome.vue

@@ -41,8 +41,8 @@
 </template>
 
 <script>
+import CommunityHeader from "@/components/CommunityComponents/CommunityHeader.vue";
 import ItemCard from "@/components/ItemComponents/ItemCard";
-import CommunityHeader from "@/components/BaseComponents/CommunityHeader";
 import { GetCommunity, GetListingsInCommunity } from "@/utils/apiutil";
 export default {
   name: "SearchItemListComponent",

src/components/CommunityComponents/MemberList.vue

@@ -12,9 +12,9 @@
 </template>
 
 <script>
-import UserListItemCard from "../UserProfileComponents/UserListItemCard.vue";
+import UserListItemCard from "@/components/UserProfileComponents/UserListItemCard.vue";
 import { GetMembersOfCommunity, GetCommunity } from "@/utils/apiutil";
-import CommunityHeader from "@/components/BaseComponents/CommunityHeader";
+import CommunityHeader from "@/components/CommunityComponents/CommunityHeader.vue";
 
 export default {
   data() {

src/components/ItemComponents/NewItemForm.vue

@@ -79,7 +79,7 @@
             <div class="form-check" v-for="group in groups" :key="group">
               <input
 
-                  class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-primary-medium checked:bg-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+                  class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
                   type="checkbox"
                   :value="group.communityId"
                   @change="onChangeGroup($event)"

src/components/UserProfileComponents/LargeProfileCard.vue → src/components/UserProfileComponents/UserProfile.vue

@@ -27,7 +27,10 @@
         v-show="dropdown"
         class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
       >
-        <ul class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl" aria-labelledby="dropdownDefault">
+        <ul
+          class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl"
+          aria-labelledby="dropdownDefault"
+        >
           <li>
             <router-link
               to=""

src/views/UserProfileViews/ProfileView.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import LargeProfileCard from "@/components/UserProfileComponents/LargeProfileCard.vue";
+import LargeProfileCard from "@/components/UserProfileComponents/UserProfile.vue";
 
 export default {
   components: {

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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CommunityHeader component renders correctly 1`] = `
+<div
+  class="flex items-center justify-between mx-4"
+>
+  <router-link
+    class="flex-1 min-w-0"
+    to="/community/1"
+  >
+    <h2
+      class="text-xl md:text-2xl text-gray-600 font-medium w-full sm:truncate"
+    >
+      String
+    </h2>
+    <div
+      class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6"
+    >
+      <div
+        class="mt-2 flex items-center text-sm text-gray-500"
+      >
+        <svg
+          aria-hidden="true"
+          class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
+            fill-rule="evenodd"
+          />
+        </svg>
+         String
+      </div>
+    </div>
+  </router-link>
+  <div>
+    <!-- If the user is not a member in the community, this button will show -->
+    <!--v-if-->
+    <!-- If the user is member of the community, this hamburger menu will show -->
+    <div>
+      <svg
+        class="w-9 h-9 cursor-pointer"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4 6h16M4 12h16M4 18h16"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        />
+      </svg>
+      <!--v-if-->
+      <!-- class="absolute" -->
+    </div>
+  </div>
+</div>
+`;

tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CreateNewGroup elements rendering 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 -->
+  <div
+    class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10"
+  >
+     Opprett ny gruppe 
+  </div>
+  <!-- Radio boxes -->
+  <div
+    class="mt-6"
+  >
+    <label
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+      id="radioBoxLabel"
+    >
+      Synlighet
+    </label>
+    <div
+      class="form-check"
+    >
+      <input
+        class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+        id="flexRadioOpen"
+        name="flexRadioDefault"
+        type="radio"
+        value="Åpen"
+      />
+      <label
+        class="form-check-label inline-block text-gray-800"
+        for="flexRadioOpen"
+        id="radioBoxOpenLabel"
+      >
+         Åpen 
+      </label>
+    </div>
+    <div
+      class="form-check"
+    >
+      <input
+        class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
+        id="flexRadioPrivate"
+        name="flexRadioDefault"
+        type="radio"
+        value="Privat"
+      />
+      <label
+        class="form-check-label inline-block text-gray-800"
+        for="flexRadioPrivate"
+        id="radioBoxPrivateLabel"
+      >
+         Privat 
+      </label>
+    </div>
+  </div>
+  <!-- Title -->
+  <div
+    class="mt-6"
+  >
+    <label
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+      id="titleLabel"
+    >
+      Gruppenavn
+    </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>
+  <!-- Place -->
+  <div
+    class="mt-6"
+  >
+    <label
+      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+      id="positionLabel"
+    >
+      By/Sted
+    </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"
+      required=""
+      type="text"
+    />
+    <!-- error message for place-->
+    
+    
+  </div>
+  <!-- Description -->
+  <div
+    class="mt-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>
+  <!-- Images -->
+  <div
+    class="mt-6"
+  >
+    <label
+      class="block mb-2 text-xl font-medium text-gray-900 dark:text-gray-400"
+      id="imageLabel"
+    >
+       Bilde 
+    </label>
+    <input
+      accept="image/png, image/jpeg"
+      multiple=""
+      style="display: none;"
+      type="file"
+    />
+    <!-- Button for adding an image -->
+    <div
+      class="inline-flex rounded-md shadow-sm"
+    >
+      <div
+        class="text-error uppercase text-center"
+      >
+        midlertidig fjernet
+      </div>
+      <!-- &lt;button
+          @click="$refs.file.click()"
+          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 disabled:opacity-50"
+          :disabled="imageAdded"
+        &gt;
+          Velg bilde
+        &lt;/button&gt; -->
+      <!-- Button for removing an image -->
+    </div>
+    <!-- Div box for showing all chosen images -->
+    
+    
+  </div>
+  <!-- Save item button -->
+  <div
+    class="flex justify-center mt-10 float-right"
+  >
+    <button-stub
+      id="saveButton"
+      text="Lagre"
+    />
+  </div>
+</div>
+`;

tests/unit/component-tests/base-component-tests/community-header.spec.js → tests/unit/component-tests/community-component-tests/community-header.spec.js

 import { mount } from "@vue/test-utils";
-import CommunityHeader from "@/components/BaseComponents/CommunityHeader.vue";
+import CommunityHeader from "@/components/CommunityComponents/CommunityHeader.vue";
+import { route, router, $route, $router } from "../../mock-router"
 
 describe("CommunityHeader component", () => {
   let wrapper;
@@ -18,9 +19,21 @@ describe("CommunityHeader component", () => {
           picture: "String",
         },
       },
+      global: {
+        mocks: {
+          route,
+          router,
+          $route,
+          $router,
+        }
+      }
     });
   });
 
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
   it("is instantiated", () => {
     expect(wrapper.exists()).toBeTruthy();
   });

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="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full"
+>
+  <div
+    class="px-6 py-4 mt-4"
+  >
+    <div
+      class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+    >
+       Logg på 
+    </div>
+    <div>
+      <div
+        class="w-full mt-6"
+      >
+        <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"
+          placeholder="Skriv inn din e-postadresse *"
+          required=""
+          type="email"
+        />
+        <!-- error message -->
+        
+        
+      </div>
+      <div
+        class="w-full mt-6"
+      >
+        <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"
+          placeholder="Vennligst oppgi passordet ditt *"
+          required=""
+          type="password"
+        />
+        <!-- error message -->
+        
+        
+      </div>
+      <div
+        class="flex items-center justify-between mt-8"
+      >
+        <router-link
+          class="text-primary-medium"
+          to="/resetPassword"
+        >
+          Glemt passord?
+        </router-link>
+        <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"
+        >
+          Logg på
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700"
+  >
+    <router-link
+      class="mx-2 text-sm font-bold text-primary-medium dark:text-primary-light hover:underline"
+      to="/register"
+    >
+      Opprette ny konto
+    </router-link>
+  </div>
+  <div
+    class="flex items-center justify-center text-center bg-gray-50"
+  >
+    <label
+      class="mx-2 text-sm font-bold text-red-500 dark:text-primary-light hover:underline"
+    />
+  </div>
+</div>
+`;

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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RegisterFormComponent renders correctly 1`] = `
+<div
+  class="w-full max-w-md mx-auto mb-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl p-4"
+>
+  <div
+    class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
+    id="registerLabel"
+  >
+     Opprett ny konto 
+  </div>
+  <form>
+    <div
+      class="grid grid-cols-1 gap-6 mt-4"
+    >
+      <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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+          id="email"
+          placeholder="E-post adresse"
+          type="email"
+        />
+        <!-- error message -->
+        
+        
+      </div>
+      <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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+          id="password"
+          placeholder="Passord"
+          type="password"
+        />
+        <!-- error message -->
+        
+        
+      </div>
+      <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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+          id="confirmPassword"
+          placeholder="Bekreft passord"
+          type="password"
+        />
+        <!-- error message -->
+        
+        
+      </div>
+      <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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+          data-test="firstNameTest"
+          id="firstName"
+          placeholder="Fornavn"
+          type="text"
+        />
+        <!-- error message -->
+        
+        
+      </div>
+      <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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+          id="lastName"
+          placeholder="Etternavn"
+          type="text"
+        />
+        <!-- error message -->
+        
+        
+      </div>
+      <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-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+          id="address"
+          placeholder="Adresse"
+          type="text"
+        />
+        <!-- error message -->
+        
+        
+      </div>
+    </div>
+    <div
+      class="flex justify-end mt-6"
+    >
+      <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"
+      >
+        Opprett
+      </button>
+    </div>
+  </form>
+</div>
+`;

tests/unit/mock-router.js

+import { jest } from "@jest/globals";
+
+// route id param for pages that require routing
+// id = 1, user = test testesen
+export const route = {
+  params: {
+    id: 1,
+  },
+};
+
+export const router = {
+  push: jest.fn(),
+};
+
+export const $route = {
+  params: {
+    id: 1,
+  },
+};
+
+export const $router = {
+  push: jest.fn(),
+};

tests/unit/mock-store.js

+import { jest } from "@jest/globals";
+
+// user = test testesen
+const user = {
+  state: {
+    token:
+      "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJmaXJzdE5hbWUiOiJUZXN0IiwibGFzdE5hbWUiOiJUZXN0ZXNlbiIsImFjY291bnRJZCI6IjEiLCJleHAiOjE2NTE2NTQxNDUsImVtYWlsIjoidGVzdEB0ZXN0LmNvbSJ9.LnOYs_9WLusp463bQo9aXPcNGI4ooz7uI3iiMrnSPTY",
+  },
+
+  mutations: {
+    logout(state) {
+      state.token = null;
+    },
+    saveToken(state, token) {
+      state.token = token;
+    },
+  },
+};
+
+export const store = {
+  state: {
+    user,
+  },
+  modules: {
+    user,
+  },
+  commit: jest.fn(),
+};
+
+export const $store = {
+  state: {
+    user,
+  },
+  modules: {
+    user,
+  },
+  commit: jest.fn(),
+};