Component tests

src/components/concept/Members.vue

@@ -14,17 +14,18 @@
       class="p-datatable-sm"
       scrollHeight="flex"
       :loading="loading"
+      data-testid="table"
     >
       <template #header>
         <div class="table-header-bar">
           <div class="checkboxes-container">
             <template v-if="checkAuthorization()">
-              <Button type="button" label="Publish" @click="publish" :loading="isPublishing"></Button>
+              <Button type="button" label="Publish" @click="publish" :loading="isPublishing" data-testid="publishButton"></Button>
             </template>
-            <Button type="button" label="Download..." @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" :loading="downloading" />
+            <Button type="button" label="Download..." @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" :loading="downloading" data-testid="downloadButton"/>
             <template id="overlay_menu">
-              <Menu ref="menu" v-if="checkAuthorization()" :model="downloadMenu1" :popup="true" appendTo="body" />
-              <Menu ref="menu" v-else :model="downloadMenu" :popup="true" appendTo="body" />
+              <Menu ref="menu" v-if="checkAuthorization()" :model="downloadMenu1" :popup="true" appendTo="body" data-testid="menuWithPublish"/>
+              <Menu ref="menu" v-else :model="downloadMenu" :popup="true" appendTo="body" data-testid="menuWithoutPublish"/>
             </template>
           </div>
         </div>
@@ -57,12 +58,12 @@
 </template>
 
 <script setup lang="ts">
-import { Auth } from "aws-amplify";
-import { defineComponent, onMounted, ref, Ref, watch } from "vue";
+import {computed, onMounted, ref, Ref, watch} from 'vue';
 import { ValueSetMember, ExportValueSet } from "im-library/dist/types/interfaces/Interfaces";
 import { Helpers, Services, Vocabulary } from "im-library";
 import axios from "axios";
 import { useToast } from "primevue/usetoast";
+import {useStore} from 'vuex';
 const {
   DataTypeCheckers: { isArrayHasLength, isObjectHasKeys }
 } = Helpers;
@@ -76,8 +77,10 @@ const props = defineProps({
 const entityService = new EntityService(axios);
 const setService = new SetService(axios);
 const toast = useToast();
+const store = useStore();
+const currentUser = computed(() => store.state.currentUser);
+const isLoggedIn = computed(() => store.state.isLoggedIn);
 
-let userRoles: Ref<string[]> = ref([]);
 let loading = ref(false);
 let downloading = ref(false);
 let members: Ref<ExportValueSet> = ref({} as ExportValueSet);
@@ -115,7 +118,6 @@ watch(
 
 onMounted(async () => {
   await getMembers();
-  await getUserRoles();
   await getTotalCount();
   if (totalCount.value >= 10) {
     loadButton.value = true;
@@ -217,18 +219,10 @@ function publish() {
     });
 }
 
-async function getUserRoles() {
-  await Auth.currentSession()
-    .then(data => {
-      userRoles.value = data.getIdToken().payload["cognito:groups"];
-    })
-    .catch(() => {
-      userRoles.value = [];
-    });
-}
-
 function checkAuthorization() {
-  if (userRoles.value) return userRoles.value.includes("IM1_PUBLISH");
+  if (isLoggedIn.value && currentUser.value) {
+    return currentUser.value.roles.includes("IM1_PUBLISH");
+  }
   else return false;
 }
 

src/components/concept/Properties.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="properties-table-container">
-    <DataTable :value="dataModelPropsData" :scrollable="true" ref="propertiesTable" :loading="loading">
+    <DataTable :value="dataModelPropsData" :scrollable="true" ref="propertiesTable" :loading="loading" data-testid="table">
       <template #empty> No records found </template>
       <template #loading> Loading data. Please wait... </template>
       <template #header>
@@ -11,7 +11,7 @@
       </template>
       <Column field="propertyDisplay" header="Name" :sortable="true">
         <template #body="slotProps">
-          <div class="link" @click="navigate(slotProps.data.propertyId)">
+          <div class="link" @click="navigate(slotProps.data.propertyId)" data-testid="name">
             {{ slotProps.data.propertyDisplay }}
           </div>
         </template>

src/components/concept/UsedIn.vue

@@ -18,6 +18,7 @@
       :lazy="true"
       @page="handlePage($event)"
       :loading="loading"
+      data-testid="table"
     >
       <template #empty> No records found. </template>
       <template #loading> Loading data. Please wait. </template>

src/services/AuthService.ts

@@ -21,7 +21,8 @@ export default {
         cognitoUser.attributes["custom:surname"],
         cognitoUser.attributes.email,
         "",
-        cognitoUser.attributes["custom:avatar"]
+        cognitoUser.attributes["custom:avatar"],
+        cognitoUser?.signInUserSession?.accessToken?.payload["cognito:groups"] || []
       );
       authenticatedUser.setId(cognitoUser.attributes.sub);
       return new CustomAlert(200, "User authenticated successfully", undefined, authenticatedUser);

src/views/Concept.vue

@@ -71,7 +71,7 @@
       <SplitterPanel :size="80" :minSize="20" class="right-splitter-panel">
         <div id="concept-content-dialogs-container">
           <div id="concept-panel-container">
-            <TabView v-model:activeIndex="active" :lazy="true" class="tab-view">
+            <TabView v-model:activeIndex="active" :lazy="true" class="tab-view" data-testid="tabPanel">
               <TabPanel header="Details">
                 <div v-if="loading" class="loading-container">
                   <ProgressSpinner />
@@ -137,14 +137,13 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent, computed, ref, Ref, watch, onMounted, reactive } from "vue";
+import { computed, ref, Ref, watch, onMounted, reactive } from "vue";
 import EntityChart from "../components/concept/EntityChart.vue";
 import Graph from "../components/concept/graph/Graph.vue";
 import QueryText from "../components/concept/query/QueryText.vue";
 import Definition from "../components/concept/Definition.vue";
 import UsedIn from "../components/concept/UsedIn.vue";
 import Members from "../components/concept/Members.vue";
-import PanelHeader from "../components/concept/PanelHeader.vue";
 import Mappings from "../components/concept/Mappings.vue";
 import EclDefinition from "@/components/concept/EclDefinition.vue";
 import { useStore } from "vuex";
@@ -365,6 +364,7 @@ async function init(): Promise<void> {
   await getDefinition(conceptIri.value);
   await getTerms(conceptIri.value);
   types.value = isObjectHasKeys(concept.value, [RDF.TYPE]) ? concept.value[RDF.TYPE] : ([] as TTIriRef[]);
+
   if (isQuery(types.value)) await getQueryDefinition(conceptIri.value);
   header.value = concept.value[RDFS.LABEL];
   await setCopyMenuItems();
@@ -414,10 +414,13 @@ function setActivePanel(newType: string, oldType: string): void {
 
 function setTabMap() {
   const tabList = document.getElementsByClassName("p-tabview-nav-content")?.[0]?.children?.[0]?.children as HTMLCollectionOf<HTMLElement>;
-  if (tabList && tabList.length)
+  if (tabList && tabList.length) {
     for (let i = 0; i < tabList.length; i++) {
-      if (tabList[i].innerText) tabMap.set(tabList[i].innerText, i);
+      if (tabList[i].textContent) {
+        tabMap.set(tabList[i].textContent as string, i);
+      }
     }
+  }
 }
 
 function openDownloadDialog(): void {

tests/unit/App.spec.ts

@@ -0,0 +1,58 @@
+import { render, fireEvent, within } from "@testing-library/vue";
+import App from "@/App.vue";
+import Toast from "primevue/toast";
+import ProgressSpinner from "primevue/progressspinner";
+import ConfirmDialog from "primevue/confirmdialog";
+import Button from "primevue/button";
+import Menu from "primevue/menu";
+import TopBar from "im-library";
+import {beforeEach, describe, it, vi, expect} from 'vitest';
+import PrimeVue from "primevue/config";
+
+vi.mock("vuex", () => ({
+  useStore: () => ({
+    dispatch: mockDispatch
+  })
+}));
+
+const mockDispatch = vi.fn();
+
+const mockPush = vi.fn();
+const mockGo = vi.fn();
+const mockRoute = { name: "Concept" };
+
+vi.mock("vue-router", () => ({
+  useRouter: () => ({
+    push: mockPush,
+    go: mockGo
+  }),
+  useRoute: () => mockRoute
+}));
+
+const mockAdd = vi.fn();
+
+vi.mock("primevue/usetoast", () => ({
+  useToast: () => ({
+    add: mockAdd
+  })
+}));
+
+describe("App.vue", () => {
+  let component;
+
+  beforeEach(async () => {
+    vi.resetAllMocks();
+    component = render(App, {
+      global: {
+        components: { Toast, ProgressSpinner, ConfirmDialog, TopBar, Button, Menu },
+        stubs: { "router-link": true, "router-view": true, ReleaseNotes: true, Search: true },
+        plugins: [PrimeVue]
+      }
+    });
+  });
+
+  it("should check auth and update store history count on mount", async () => {
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+    expect(mockDispatch).toHaveBeenCalledWith("authenticateCurrentUser");
+  });
+});