FE unit tests - components

frontend/tests/unit/components/common/BackButton.spec.ts

@@ -0,0 +1,49 @@
+import { createTestingPinia } from '@pinia/testing';
+import PrimeVue from 'primevue/config';
+import ConfirmationService from 'primevue/confirmationservice';
+import { mount } from '@vue/test-utils';
+
+import BackButton from '@/components/common/BackButton.vue';
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    push: vi.fn()
+  })
+}));
+
+const testRouteName = 'foo';
+const testText = 'bar';
+
+const wrapperSettings = (testRouteNameProp: string, testTextProp: string, testConfirmLeaveProp: boolean) => ({
+  props: {
+    routeName: testRouteNameProp,
+    text: testTextProp,
+    confirmLeave: testConfirmLeaveProp
+  },
+  global: {
+    plugins: [
+      () =>
+        createTestingPinia({
+          initialState: {
+            auth: {
+              user: {}
+            }
+          }
+        }),
+      PrimeVue,
+      ConfirmationService
+    ],
+    stubs: ['font-awesome-icon', 'router-link']
+  }
+});
+
+describe('BackButton.vue', () => {
+  it('renders', () => {
+    const wrapper = mount(BackButton, wrapperSettings(testRouteName, testText, false));
+    expect(wrapper).toBeTruthy();
+  });
+  it('renders', () => {
+    const wrapper = mount(BackButton, wrapperSettings(testRouteName, testText, true));
+    expect(wrapper).toBeTruthy();
+  });
+});

frontend/tests/unit/components/common/Breadcrumb.spec.ts

@@ -0,0 +1,42 @@
+import { createTestingPinia } from '@pinia/testing';
+import PrimeVue from 'primevue/config';
+import { mount } from '@vue/test-utils';
+
+import Breadcrumb from '@/components/common/Breadcrumb.vue';
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    push: vi.fn()
+  })
+}));
+
+const testMenuItem = { label: 'foo', icon: 'bar', class: 'baz' };
+const testModel = [testMenuItem, testMenuItem];
+
+const wrapperSettings = (testHomeProp = testMenuItem, testModelProp = testModel) => ({
+  props: {
+    home: testHomeProp,
+    model: testModelProp
+  },
+  global: {
+    plugins: [
+      () =>
+        createTestingPinia({
+          initialState: {
+            auth: {
+              user: {}
+            }
+          }
+        }),
+      PrimeVue
+    ],
+    stubs: ['router-link']
+  }
+});
+
+describe('Breadcrumb.vue', () => {
+  it('renders', () => {
+    const wrapper = mount(Breadcrumb, wrapperSettings());
+    expect(wrapper).toBeTruthy();
+  });
+});

frontend/tests/unit/components/common/HeaderMenu.spec.ts

@@ -0,0 +1,57 @@
+import { createTestingPinia } from '@pinia/testing';
+import PrimeVue from 'primevue/config';
+import { mount } from '@vue/test-utils';
+
+import HeaderMenu from '@/components/common/HeaderMenu.vue';
+import { StorageKey } from '@/utils/enums/application';
+
+// Mock dependencies
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: vi.fn()
+  })
+}));
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    push: vi.fn()
+  })
+}));
+
+beforeEach(() => {
+  sessionStorage.setItem(
+    StorageKey.CONFIG,
+    JSON.stringify({
+      oidc: {
+        authority: 'abc',
+        clientId: '123'
+      }
+    })
+  );
+
+  vi.clearAllMocks();
+});
+
+const wrapperSettings = () => ({
+  global: {
+    plugins: [
+      () =>
+        createTestingPinia({
+          initialState: {
+            auth: {
+              user: {}
+            }
+          }
+        }),
+      PrimeVue
+    ],
+    stubs: ['font-awesome-icon', 'vue-i18n', 'router-link']
+  }
+});
+
+describe('HeaderMenu.vue', () => {
+  it('renders', () => {
+    const wrapper = mount(HeaderMenu, wrapperSettings());
+    expect(wrapper).toBeTruthy();
+  });
+});

frontend/tests/unit/components/common/LocaleChanger.spec.ts

@@ -0,0 +1,40 @@
+import { createTestingPinia } from '@pinia/testing';
+import PrimeVue from 'primevue/config';
+import { mount } from '@vue/test-utils';
+
+import LocaleChanger from '@/components/common/LocaleChanger.vue';
+
+// Mock dependencies
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    locale: vi.fn()
+  })
+}));
+
+vi.mock('@/i18n', () => ({
+  SUPPORT_LOCALES: ['en-CA']
+}));
+
+const wrapperSettings = () => ({
+  global: {
+    plugins: [
+      () =>
+        createTestingPinia({
+          initialState: {
+            auth: {
+              user: {}
+            }
+          }
+        }),
+      PrimeVue
+    ],
+    stubs: ['vue-i18n', '@/i18n']
+  }
+});
+
+describe('LocaleChanger.vue', () => {
+  it('renders', () => {
+    const wrapper = mount(LocaleChanger, wrapperSettings());
+    expect(wrapper).toBeTruthy();
+  });
+});

frontend/tests/unit/components/common/SearchUserNameById.spec.ts

@@ -0,0 +1,40 @@
+import { createTestingPinia } from '@pinia/testing';
+import PrimeVue from 'primevue/config';
+import { mount } from '@vue/test-utils';
+import type { AxiosResponse } from 'axios';
+
+import { userService } from '@/services';
+import SearchUserNameById from '@/components/common/SearchUserNameById.vue';
+
+const testUserId = 'foo';
+const useUserService = vi.spyOn(userService, 'searchUsers');
+
+const wrapperSettings = (testUserIdProp = testUserId) => ({
+  props: {
+    userId: testUserIdProp
+  },
+  global: {
+    plugins: [
+      () =>
+        createTestingPinia({
+          initialState: {
+            auth: {
+              user: {}
+            }
+          }
+        }),
+      PrimeVue
+    ]
+  }
+});
+
+vi.clearAllMocks();
+
+useUserService.mockResolvedValue({ data: [{ fullName: 'dummyName' }] } as AxiosResponse);
+
+describe('SearchUserNameById.vue', () => {
+  it('renders', () => {
+    const wrapper = mount(SearchUserNameById, wrapperSettings());
+    expect(wrapper).toBeTruthy();
+  });
+});

frontend/tests/unit/components/file/DeleteDocument.spec.ts

@@ -0,0 +1,83 @@
+import { createTestingPinia } from '@pinia/testing';
+import { mount } from '@vue/test-utils';
+
+import DeleteDocument from '@/components/file/DeleteDocument.vue';
+import { StorageKey } from '@/utils/enums/application';
+import PrimeVue from 'primevue/config';
+import ConfirmationService from 'primevue/confirmationservice';
+import ToastService from 'primevue/toastservice';
+import Tooltip from 'primevue/tooltip';
+
+import type { Document } from '@/types';
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn()
+  })
+}));
+
+const currentDate = new Date().toISOString();
+
+const testDocument: Document = {
+  createdBy: 'testCreatedBy',
+  createdAt: currentDate,
+  updatedBy: 'testUpdatedAt',
+  updatedAt: currentDate,
+  documentId: 'documentUUID', // Primary Key
+  activityId: 'activityUUID',
+  filename: 'test file name',
+  mimeType: 'test mime type',
+  filesize: 123,
+  createdByFullName: 'test user'
+};
+
+const wrapperSettings = (testDocumentProp = testDocument) => ({
+  props: {
+    document: testDocumentProp
+  },
+  global: {
+    plugins: [
+      () =>
+        createTestingPinia({
+          initialState: {
+            auth: {
+              user: {}
+            }
+          }
+        }),
+      PrimeVue,
+      ConfirmationService,
+      ToastService
+    ],
+    stubs: ['font-awesome-icon'],
+    directives: {
+      Tooltip: Tooltip
+    }
+  }
+});
+
+beforeEach(() => {
+  sessionStorage.setItem(
+    StorageKey.CONFIG,
+    JSON.stringify({
+      oidc: {
+        authority: 'abc',
+        clientId: '123'
+      }
+    })
+  );
+
+  vi.clearAllMocks();
+});
+
+afterEach(() => {
+  sessionStorage.clear();
+});
+
+describe('DeleteDocument', () => {
+  it('renders component', () => {
+    const wrapper = mount(DeleteDocument, wrapperSettings());
+    expect(wrapper).toBeTruthy();
+  });
+});

frontend/tests/unit/components/form/AutoComplete.spec.ts

@@ -0,0 +1,32 @@
+import { shallowMount } from '@vue/test-utils';
+
+import AutoComplete from '@/components/form/AutoComplete.vue';
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+afterEach(() => {
+  sessionStorage.clear();
+});
+
+const testName = 'foo';
+const testSuggestions = ['bar', 'baz'];
+
+const wrapperSettings = (testNameProp = testName, testSuggestionsProp = testSuggestions) => ({
+  props: {
+    name: testNameProp,
+    suggestions: testSuggestionsProp
+  },
+  global: {
+    stubs: ['font-awesome-icon']
+  }
+});
+
+describe('AutoComplete.vue', () => {
+  it('renders', () => {
+    const wrapper = shallowMount(AutoComplete, wrapperSettings());
+
+    expect(wrapper).toBeTruthy();
+  });
+});

frontend/tests/unit/components/form/CancelButton.spec.ts

@@ -0,0 +1,24 @@
+import { shallowMount } from '@vue/test-utils';
+
+import CancelButton from '@/components/form/CancelButton.vue';
+import PrimeVue from 'primevue/config';
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+afterEach(() => {
+  sessionStorage.clear();
+});
+
+describe('CancelButton.vue', () => {
+  it('renders', () => {
+    const wrapper = shallowMount(CancelButton, {
+      global: {
+        plugins: [PrimeVue]
+      }
+    });
+
+    expect(wrapper).toBeTruthy();
+  });
+});