Tests if all texts are rendering

src/components/BaseComponents/CommunityHeader.vue

@@ -30,7 +30,7 @@
     <div>
       <span class="hidden sm:block"> <!-- Legg dette til i button: v-if="adminStatus" -->
 
-        <svg @click="test" xmlns="http://www.w3.org/2000/svg" class="w-9 h-9 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <svg @click="toggle" xmlns="http://www.w3.org/2000/svg" class="w-9 h-9 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
         </svg>
 
@@ -68,16 +68,13 @@ export default {
     edit() {
       this.$emit("edit");
     },
-    test: function (){
-      console.log("funker å trykke");
-      console.log("ID: " + this.community.communityId);
+    toggle: function (){
       if(this.hamburgerOpen){
         this.hamburgerOpen = false;
       }
       else{
         this.hamburgerOpen = true;
       }
-      console.log("Åpen: " + this.hamburgerOpen);
     }
   },
 };

src/components/CommunityComponents/CommunityHamburger.vue

@@ -4,28 +4,28 @@
       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" >
-      <li>
+      <li id="newItem">
         <router-link
             to="/addNewItem"
             class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-        >Opprett utleie</router-link
+        >Opprett Utleie</router-link
         >
       </li>
-      <li>
+      <li id="getMembers">
         <router-link
             :to="'/group/' + communityID + '/memberlist'"
             class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
         >Se Medlemmer
         </router-link>
       </li>
-      <li>
+      <li id="adminGroup">
         <router-link
             :to="'/group/' + communityID + '/memberlist'"
             class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
         >Administrer Gruppe</router-link
         >
       </li>
-      <li>
+      <li id="leaveGroup">
         <div
             class="cursor-pointer block py-2 px-4 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
         >
@@ -42,9 +42,6 @@ export default {
   props: {
     communityID: Number,
   },
-  beforeMount() {
-    console.log("id: " + this.communityID);
-  }
 }
 </script>
 

tests/unit/community-hamburger.spec.js

+import { shallowMount } from "@vue/test-utils";
+import CommunityHamburger from "@/components/CommunityComponents/CommunityHamburger.vue";
+
+describe("CommunityHamburger elements rendering", () => {
+    it("renders all li fields", () => {
+        const wrapper = shallowMount(CommunityHamburger);
+
+        expect(wrapper.find("#newItem").text()).toMatch("Opprett Utleie");
+        expect(wrapper.find("#getMembers").text()).toMatch("Se Medlemmer");
+        expect(wrapper.find("#adminGroup").text()).toMatch("Administrer Gruppe");
+        expect(wrapper.find("#leaveGroup").text()).toMatch("Forlat Gruppe");
+    });
+});