Merge branch 'frontend-tests' into 'main'

Frontend tests

See merge request !66

src/App.vue

@@ -7,7 +7,9 @@
 
 <script>
 import { defineComponent } from "vue";
-import NavBar from "./components/NavigationComponents/NavBar.vue";
+
+// Components
+import NavBar from "./components/BaseComponents/NavBar.vue";
 
 export default defineComponent({
   name: "App",

src/components/ChatComponents/ChatMessage.vue

@@ -47,7 +47,7 @@ export default {
     calculateTime() {
       //let time = this.message.from;
       // Calculate time when message was sent
-      let date = new Date(Date.now());
+      let date = new Date(this.message.timestamp);
       let hours = date.getHours();
       let minutes = "0" + date.getMinutes();
       let formattedTime = hours + ":" + minutes.substr(-2);

src/router/index.js

@@ -84,7 +84,7 @@ const routes = [
   {
     path: "/notifications",
     name: "notifications",
-    component: () => import("../views/NavigationViews/NotificationView.vue"),
+    component: () => import("../components/BaseComponents/NotificationsForm.vue"),
     beforeEnter: guardRoute,
   },
   {

src/views/NavigationViews/NavBarView.vue

-<template>
-  <div>
-    <Navbar />
-  </div>
-</template>
-
-<script>
-import Navbar from "@/components/NavigationComponents/NavBar";
-export default {
-  name: "NavBarView",
-  components: {
-    Navbar,
-  },
-};
-</script>
-
-<style scoped></style>

src/views/NavigationViews/NotificationView.vue

-<template>
-  <div>
-    <NotificationsForm />
-  </div>
-</template>
-
-<script>
-import NotificationsForm from "@/components/NavigationComponents/NotificationsForm";
-
-export default {
-  name: "NotificationView.vue",
-  components: {
-    NotificationsForm,
-  },
-};
-</script>
-
-<style scoped></style>

tests/unit/component-tests/base-component-tests/__snapshots__/color-button.spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColoredButtonComponent renders correctly 1`] = `
+<button
+  class="block 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 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+>
+  hei
+</button>
+`;

tests/unit/component-tests/base-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"
+>
+  <div
+    class="flex-1 min-w-0"
+  >
+    <h2
+      class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl 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>
+  </div>
+  <div>
+    <span
+      class="hidden sm:block"
+    >
+      <!-- Legg dette til i button: v-if="adminStatus" -->
+      <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" -->
+    </span>
+  </div>
+</div>
+`;

tests/unit/component-tests/base-component-tests/__snapshots__/custom-footer-modal.spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconButtonComponent renders correctly 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <!-- Main modal -->
+  <div
+    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
+  >
+    <div
+      class="relative w-full h-full max-w-2xl p-4 md:h-auto"
+    >
+      <!-- Modal content -->
+      <div
+        class="relative bg-white rounded-lg shadow dark:bg-gray-700"
+      >
+        <!-- Modal header -->
+        <div
+          class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"
+        >
+          <h3
+            class="text-xl font-semibold text-gray-900 dark:text-white"
+          >
+            String
+          </h3>
+          <button
+            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+          >
+            <svg
+              class="w-5 h-5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+        <!-- Modal body -->
+        <div
+          class="p-6 space-y-6"
+        >
+          <p
+            class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
+          >
+            String
+          </p>
+        </div>
+        <!-- Modal footer -->
+        <div
+          class="rounded-b border-t border-gray-200 dark:border-gray-600"
+        >
+          <!-- Slot: Add any html you want here -->
+          
+          <div
+            class="fake-msg"
+          >
+            String
+          </div>
+          
+        </div>
+      </div>
+    </div>
+  </div>
+  
+</div>
+`;

tests/unit/component-tests/base-component-tests/__snapshots__/icon-button.spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconButtonComponent renders correctly 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <!-- Icon button -->
+  <button
+    class="block w-fit text-white text-base bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+  >
+    <div
+      class="flex flex-row px-5 py-2.5 h-10"
+    >
+      <!-- Icon slot: Default content "Ban"-icon -->
+      <div
+        class="h-6 w-6"
+      >
+        
+        <svg
+          aria-hidden="true"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+        
+      </div>
+      <p>
+        hei
+      </p>
+    </div>
+  </button>
+  
+</div>
+`;

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/__snapshots__/notification-modal.spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NotificationModal component renders correctly 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <!-- Main modal -->
+  <div
+    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
+  >
+    <div
+      class="relative w-full h-full max-w-2xl p-4 md:h-auto"
+    >
+      <!-- Modal content -->
+      <div
+        class="relative bg-white rounded-lg shadow dark:bg-gray-700"
+      >
+        <!-- Modal header -->
+        <div
+          class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"
+        >
+          <h3
+            class="text-xl font-semibold text-gray-900 dark:text-white"
+          >
+            String
+          </h3>
+          <button
+            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+          >
+            <svg
+              class="w-5 h-5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+        <!-- Modal body -->
+        <div
+          class="p-6 space-y-6"
+        >
+          <p
+            class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
+          >
+            String
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+</div>
+`;

tests/unit/component-tests/base-component-tests/color-button.spec.js

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

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

+import { mount } from "@vue/test-utils";
+import CommunityHeader from "@/components/BaseComponents/CommunityHeader.vue"
+
+describe("CommunityHeader component", () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(CommunityHeader, {
+        //passing prop to component
+        props: {
+            adminStatus: true,
+            community: {
+                communityId: 1,
+                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/base-component-tests/custom-footer-modal.spec.js

+import { mount } from "@vue/test-utils";
+import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal.vue"
+
+describe("IconButtonComponent", () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(CustomFooterModal, {
+        //passing prop to component
+        props: {
+            visible: true,
+            title: "String",
+            message: "String",
+        },
+        slots: {
+            default: '<div class="fake-msg">String</div>'
+        }
+    });
+  });
+
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it("is instantiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+});
\ No newline at end of file