feat:(SC-3320) Added tests for layout components and bucket components

frontend/src/components/bucket/BucketList.vue

@@ -62,6 +62,7 @@ onMounted(async () => {
         v-if="usePermissionStore().isUserElevatedRights()"
         label="Primary"
         class="p-button-outlined mt-4"
+        data-test="connect-bucket"
         @click="showBucketConfig()"
       >
         <font-awesome-icon icon="fa-solid fa-plus" />

frontend/tests/unit/components/bucket/BucketConfigForm.spec.ts

@@ -0,0 +1,79 @@
+import { createTestingPinia } from '@pinia/testing';
+import { mount, shallowMount, RouterLinkStub } from '@vue/test-utils';
+
+import BucketConfigForm from '@/components/bucket/BucketConfigForm.vue';
+import * as primevue from '@/lib/primevue';
+import { StorageKey } from '@/utils/constants';
+import PrimeVue from 'primevue/config';
+import ToastService from 'primevue/toastservice';
+
+const mockToast = vi.fn();
+const useToastSpy = vi.spyOn(primevue, 'useToast');
+
+beforeEach(() => {
+  sessionStorage.setItem(StorageKey.CONFIG, JSON.stringify(
+    {
+      oidc: {
+        authority: 'abc',
+        clientId: '123'
+      }
+    }
+  ));
+
+  vi.clearAllMocks();
+  useToastSpy.mockImplementation(() => ({ error: mockToast, info: mockToast, success: mockToast, warn: mockToast }));
+});
+
+afterEach(() => {
+  sessionStorage.clear();
+});
+
+describe('BucketConfigForm.vue', () => {
+  it('renders', () => {
+    const wrapper = shallowMount(BucketConfigForm, {
+      global: {
+        plugins: [PrimeVue, createTestingPinia(), ToastService],
+        stubs: {
+          RouterLink: RouterLinkStub
+        },
+      },
+      props: {}
+    });
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('emits cancel config', async () => {
+    const wrapper = mount(BucketConfigForm, {
+      global: {
+        plugins: [PrimeVue, createTestingPinia(), ToastService],
+        stubs: {
+          RouterLink: RouterLinkStub
+        },
+      },
+      props: {}
+    });
+
+    const cancelButton = wrapper.get('[aria-label="Cancel"]');
+    await cancelButton.trigger('click');
+
+    expect(wrapper.emitted()).toHaveProperty('cancel-bucket-config');
+  });
+
+  it('emits triggers onSubmit error', async () => {
+    const wrapper = mount(BucketConfigForm, {
+      global: {
+        plugins: [PrimeVue, createTestingPinia(), ToastService],
+        stubs: {
+          RouterLink: RouterLinkStub
+        },
+      },
+      props: {}
+    });
+
+    const submitBtn = wrapper.get('[aria-label="Apply"]');
+    await submitBtn.trigger('click');
+
+    expect(useToastSpy).toHaveBeenCalled();
+    expect(wrapper).toBeTruthy();
+  });
+});

frontend/tests/unit/components/bucket/BucketList.spec.ts

@@ -0,0 +1,80 @@
+import { createTestingPinia } from '@pinia/testing';
+import { mount, shallowMount } from '@vue/test-utils';
+
+import BucketList from '@/components/bucket/BucketList.vue';
+import * as primevue from '@/lib/primevue';
+import { usePermissionStore } from '@/store';
+import { StorageKey } from '@/utils/constants';
+import PrimeVue from 'primevue/config';
+import ToastService from 'primevue/toastservice';
+
+const mockToast = vi.fn();
+const useToastSpy = vi.spyOn(primevue, 'useToast');
+
+beforeEach(() => {
+  sessionStorage.setItem(StorageKey.CONFIG, JSON.stringify(
+    {
+      oidc: {
+        authority: 'abc',
+        clientId: '123'
+      }
+    }
+  ));
+
+  vi.clearAllMocks();
+  useToastSpy.mockImplementation(() => ({ error: mockToast, info: mockToast, success: mockToast, warn: mockToast }));
+});
+
+afterEach(() => {
+  sessionStorage.clear();
+});
+
+describe('BucketList.vue', async () => {
+  it('renders', () => {
+    const testingPinia = createTestingPinia({
+      initialState: {
+        auth: {
+          user: {}
+        }
+      }
+    });
+
+    const wrapper = shallowMount(BucketList, {
+      global: {
+        plugins: [
+          testingPinia,
+          PrimeVue,
+          ToastService,
+        ],
+        stubs: ['font-awesome-icon']
+      },
+    });
+
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('shows connect bucket button', async () => {
+    // Mock isUserElevatedRights to return true
+    const pinia = createTestingPinia();
+    const permStore = usePermissionStore(pinia);
+    vi.mocked(permStore.isUserElevatedRights).mockReturnValue(true);
+
+    const wrapper = mount(BucketList, {
+      global: {
+        plugins: [
+          PrimeVue,
+          ToastService,
+          pinia,
+        ],
+        stubs: [
+          'font-awesome-icon',
+          'BucketTable'
+        ]
+      },
+    });
+
+    const button = wrapper.find('[data-test="connect-bucket"]');
+
+    expect(button.isVisible()).toBeTruthy();
+  });
+});

frontend/tests/unit/components/bucket/BucketPermission.spec.ts

@@ -0,0 +1,59 @@
+import { createTestingPinia } from '@pinia/testing';
+import { mount } from '@vue/test-utils';
+
+import BucketPermission from '@/components/bucket/BucketPermission.vue';
+import * as primevue from '@/lib/primevue';
+import { StorageKey } from '@/utils/constants';
+import PrimeVue from 'primevue/config';
+import ConfirmationService from 'primevue/confirmationservice';
+import ToastService from 'primevue/toastservice';
+
+const mockToast = vi.fn();
+const useToastSpy = vi.spyOn(primevue, 'useToast');
+
+beforeEach(() => {
+  sessionStorage.setItem(StorageKey.CONFIG, JSON.stringify(
+    {
+      oidc: {
+        authority: 'abc',
+        clientId: '123'
+      }
+    }
+  ));
+
+  vi.clearAllMocks();
+  useToastSpy.mockImplementation(() => ({ error: mockToast, info: mockToast, success: mockToast, warn: mockToast }));
+});
+
+afterEach(() => {
+  sessionStorage.clear();
+});
+
+describe('BucketPermission.vue', async () => {
+  it('renders', () => {
+    const testingPinia = createTestingPinia({
+      initialState: {
+        auth: {
+          user: {}
+        }
+      }
+    });
+
+    const wrapper = mount(BucketPermission, {
+      props: {
+        bucketId: 'testBucketId'
+      },
+      global: {
+        plugins: [
+          ConfirmationService,
+          PrimeVue,
+          testingPinia,
+          ToastService,
+        ],
+        stubs: ['font-awesome-icon', 'DataTable']
+      },
+    });
+
+    expect(wrapper).toBeTruthy();
+  });
+});

frontend/tests/unit/components/bucket/BucketPermissionAddUser.spec.ts

@@ -0,0 +1,54 @@
+import { createTestingPinia } from '@pinia/testing';
+import { shallowMount } from '@vue/test-utils';
+
+import BucketPermissionAddUser from '@/components/bucket/BucketPermissionAddUser.vue';
+import * as primevue from '@/lib/primevue';
+import { StorageKey } from '@/utils/constants';
+import PrimeVue from 'primevue/config';
+import ToastService from 'primevue/toastservice';
+
+const mockToast = vi.fn();
+const useToastSpy = vi.spyOn(primevue, 'useToast');
+
+beforeEach(() => {
+  sessionStorage.setItem(StorageKey.CONFIG, JSON.stringify(
+    {
+      oidc: {
+        authority: 'abc',
+        clientId: '123'
+      }
+    }
+  ));
+
+  vi.clearAllMocks();
+  useToastSpy.mockImplementation(() => ({ error: mockToast, info: mockToast, success: mockToast, warn: mockToast }));
+});
+
+afterEach(() => {
+  sessionStorage.clear();
+});
+
+describe('BucketPermissionAddUser.vue', async () => {
+  it('renders', () => {
+    const testingPinia = createTestingPinia({
+      initialState: {
+        auth: {
+          user: {}
+        }
+      }
+    });
+
+    const wrapper = shallowMount(BucketPermissionAddUser, {
+      global: {
+        plugins: [
+          testingPinia,
+          PrimeVue,
+          ToastService,
+        ],
+        stubs: ['font-awesome-icon']
+      },
+    });
+
+    expect(wrapper).toBeTruthy();
+  });
+});