✅ Add tests for new label functionality

src/components/__tests__/IssueQueue.spec.ts

@@ -1,5 +1,3 @@
-import { ref } from 'vue';
-
 import { describe, it, expect, vi } from 'vitest';
 import { Settings } from 'luxon';
 
@@ -8,53 +6,19 @@ import IssueQueue from '@/components/IssueQueue/IssueQueue.vue';
 
 import { mountWithConfig } from '@/__tests__/helpers';
 import LabelCheckbox from '@/widgets/LabelCheckbox/LabelCheckbox.vue';
+import type { ZodFlawType } from '@/types';
 
-vi.mock('@vueuse/core', () => ({
-  useLocalStorage: vi.fn((key: string, defaults) => {
-    return {
-      SearchStore: { value: defaults },
-      UserStore: {
-        value: {
-          // Set your fake user data here
-          refresh: 'mocked_refresh_token',
-          env: 'mocked_env',
-          whoami: {
-            email: '[email protected]',
-            username: 'testuser',
-          },
-          jiraUsername: 'skynet',
-        },
-      },
-    }[key];
-  }),
-  useStorage: vi.fn((key: string, defaults) => {
-    return {
-      'OSIM::USER-SETTINGS': {
-        value: defaults || {
-          bugzillaApiKey: '',
-          jiraApiKey: '',
-          showNotifications: false,
-        },
-      },
-    }[key];
+vi.mock('@/stores/UserStore', () => ({
+  useUserStore: () => ({
+    jiraUsername: 'skynet',
   }),
-  useElementVisibility: vi.fn(() => ref(false)),
-}));
-
-vi.mock('jwt-decode', () => ({
-  default: vi.fn(() => ({
-    sub: '1234567890',
-    name: 'Test User',
-    exp: Math.floor(Date.now() / 1000) + 60 * 60 * 24 * 365,
-  })),
 }));
 
 describe('issueQueue', () => {
-  const mockData = [
+  const mockData: Partial<ZodFlawType>[] = [
     {
       uuid: '709e9ea1-ed0f-49b8-a7ad-9164d4034849',
       cve_id: 'CVE-2903-0092',
-      state: 'NEW',
       impact: 'MODERATE',
       title: 'title',
       unembargo_dt: '2024-02-01T00:00:00Z',
@@ -70,21 +34,23 @@ describe('issueQueue', () => {
     },
   ];
 
+  const mountIssueQueue = (props?: Partial<InstanceType<typeof IssueQueue>['$props']>) => mountWithConfig(IssueQueue, {
+    props: {
+      issues: mockData,
+      isLoading: false,
+      isFinalPageFetched: false,
+      total: 10,
+      ...props,
+    },
+  });
+
   afterAll(() => {
     vi.clearAllMocks();
     Settings.defaultZone = 'local';
   });
 
   it('should fetch data from API', async () => {
-    const wrapper = mountWithConfig(IssueQueue, {
-      props: {
-        issues: mockData,
-        isLoading: false,
-        isFinalPageFetched: false,
-        total: 10,
-      },
-
-    });
+    const wrapper = mountIssueQueue();
 
     const fetchEvents = wrapper.emitted();
     const issues = wrapper.findAllComponents(IssueQueueItem);
@@ -101,14 +67,7 @@ describe('issueQueue', () => {
   });
 
   it('fetch data from API with specified parameters on MyFlaws', async () => {
-    const wrapper = mountWithConfig(IssueQueue, {
-      props: {
-        issues: mockData,
-        isLoading: false,
-        isFinalPageFetched: false,
-        total: 10,
-      },
-    });
+    const wrapper = mountIssueQueue();
 
     const myIssuesCheckbox = wrapper.findAllComponents(LabelCheckbox)[0];
     const myIssuesCheckboxEl = myIssuesCheckbox.find('input[type="checkbox"]');
@@ -128,14 +87,7 @@ describe('issueQueue', () => {
   });
 
   it('fetch data from API with specified parameters on OpenFlaws', async () => {
-    const wrapper = mountWithConfig(IssueQueue, {
-      props: {
-        issues: [],
-        isLoading: false,
-        isFinalPageFetched: false,
-        total: 10,
-      },
-    });
+    const wrapper = mountIssueQueue({ issues: [] });
 
     const openIssuesCheckox = wrapper.findAllComponents(LabelCheckbox)[1];
     const openIssuesCheckboxEl = openIssuesCheckox.find('input[type="checkbox"]');
@@ -154,14 +106,7 @@ describe('issueQueue', () => {
   });
 
   it('fetch data from API with specified parameters on sort', async () => {
-    const wrapper = mountWithConfig(IssueQueue, {
-      props: {
-        issues: [],
-        isLoading: false,
-        isFinalPageFetched: false,
-        total: 10,
-      },
-    });
+    const wrapper = mountIssueQueue();
 
     await wrapper.findAll('th').at(0)!.trigger('click');
     const fetchEvents = wrapper.emitted();
@@ -175,14 +120,7 @@ describe('issueQueue', () => {
   });
 
   it('changes sort order on click', async () => {
-    const wrapper = mountWithConfig(IssueQueue, {
-      props: {
-        issues: [],
-        isLoading: false,
-        isFinalPageFetched: false,
-        total: 10,
-      },
-    });
+    const wrapper = mountIssueQueue();
 
     await wrapper.findAll('th').at(0)!.trigger('click');
     await wrapper.findAll('th').at(0)!.trigger('click');
@@ -197,14 +135,7 @@ describe('issueQueue', () => {
   });
 
   it('removes sort order on third click', async () => {
-    const wrapper = mountWithConfig(IssueQueue, {
-      props: {
-        issues: [],
-        isLoading: false,
-        isFinalPageFetched: false,
-        total: 10,
-      },
-    });
+    const wrapper = mountIssueQueue();
 
     await wrapper.findAll('th').at(0)!.trigger('click');
     await wrapper.findAll('th').at(0)!.trigger('click');
@@ -220,28 +151,18 @@ describe('issueQueue', () => {
   });
 
   it('shouldn\'t render total count when no issues', async () => {
-    const wrapper = mountWithConfig(IssueQueue, {
-      props: {
-        issues: [],
-        isLoading: true,
-        isFinalPageFetched: false,
-        total: 100,
-      },
-    });
+    const wrapper = mountIssueQueue({ issues: [] });
+
     const filterEl = wrapper.find('div.osim-incident-filter');
     expect(filterEl.exists()).toBeTruthy();
     const countEL = filterEl.find('span.float-end');
     expect(countEL.exists()).toBeFalsy();
   });
 
   it('should render total count', async () => {
-    const wrapper = mountWithConfig(IssueQueue, {
-      props: {
-        issues: Array.from({ length: 50 }).fill(mockData[0]),
-        isLoading: false,
-        isFinalPageFetched: false,
-        total: 100,
-      },
+    const wrapper = mountIssueQueue({
+      issues: Array.from({ length: 50 }).fill(mockData[0]) as ZodFlawType[],
+      total: 100,
     });
     const filterEl = wrapper.find('div.osim-incident-filter');
     expect(filterEl.exists()).toBeTruthy();
@@ -251,13 +172,10 @@ describe('issueQueue', () => {
   });
 
   it('should render loader when loading flaws', async () => {
-    const wrapper = mountWithConfig(IssueQueue, {
-      props: {
-        issues: Array.from({ length: 25 }).fill(mockData[0]),
-        isLoading: true,
-        isFinalPageFetched: false,
-        total: 100,
-      },
+    const wrapper = mountIssueQueue({
+      issues: Array.from({ length: 50 }).fill(mockData[0]) as ZodFlawType[],
+      isLoading: true,
+      total: 100,
     });
     const filterEl = wrapper.find('div.osim-incident-filter');
     expect(filterEl.exists()).toBeTruthy();
@@ -267,17 +185,60 @@ describe('issueQueue', () => {
 
   it('should render create_dt in UTC format', async () => {
     Settings.defaultZone = 'Europe/Madrid';
-    const wrapper = mountWithConfig(IssueQueue, {
-      props: {
-        issues: [{ ...mockData[0], created_dt: '2021-07-29T22:50:50Z' }],
-        isLoading: false,
-        isFinalPageFetched: false,
-        total: 10,
-      },
+    const wrapper = mountIssueQueue({
+      issues: [{ ...mockData[0], created_dt: '2021-07-29T22:50:50Z' } as ZodFlawType],
     });
 
     const dateEl = wrapper.findAll('td')[2];
     expect(dateEl.exists()).toBeTruthy();
     expect(dateEl.text()).toBe('2021-07-29');
   });
+
+  it('should render flaw labels', () => {
+    const wrapper = mountIssueQueue({
+      issues: [{
+        ...mockData[0],
+        labels: [
+          { label: 'test', state: 'NEW', collaborator: '' },
+          { label: 'test-2', state: 'NEW', collaborator: '' },
+          { label: 'test-3', state: 'REQ', collaborator: '' },
+        ],
+      } as ZodFlawType],
+    });
+
+    const labels = wrapper.findComponent(IssueQueueItem).findAll('span.badge');
+
+    expect(labels.length).toBe(3);
+    expect(labels[0].text()).toBe('test-3');
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should truncate flaw labels', () => {
+    const wrapper = mountIssueQueue({
+      issues: [{
+        ...mockData[0],
+        labels: Array.from({ length: 10 }).map((_, i) => ({ label: `test-${i}`, state: 'NEW', collaborator: '' })),
+      } as ZodFlawType],
+    });
+
+    const labels = wrapper.findComponent(IssueQueueItem).findAll('span.badge');
+
+    expect(labels.length).toBe(4);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should toggle flaw labels', async () => {
+    const wrapper = mountIssueQueue({
+      issues: [{
+        ...mockData[0],
+        labels: Array.from({ length: 10 }).map((_, i) => ({ label: `test-${i}`, state: 'NEW', collaborator: '' })),
+      } as ZodFlawType],
+    });
+
+    const toggleBtn = wrapper.findComponent(IssueQueueItem).find('i');
+    await toggleBtn.trigger('click');
+
+    const labels = wrapper.findComponent(IssueQueueItem).findAll('span.badge');
+    expect(labels.length).toBe(10);
+  });
 });

src/components/__tests__/__snapshots__/IssueQueue.spec.ts.snap

@@ -0,0 +1,96 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`issueQueue > should render flaw labels 1`] = `
+"<div data-v-48717bcb="" class="osim-content container-fluid osim-issue-queue">
+  <div data-v-48717bcb="" class="osim-incident-filter">
+    <div data-v-b2ceeac4="" data-v-48717bcb="" class="osim-input ps-3 d-inline-block d-inline-block"><label data-v-b2ceeac4="" class="form-check h-100 d-inline-block ps-4 p-1"><input data-v-b2ceeac4="" class="d-inline-block form-check-input" type="checkbox"><span data-v-b2ceeac4="" class="form-check-label">My Issues</span></label></div>
+    <div data-v-b2ceeac4="" data-v-48717bcb="" class="osim-input ps-3 d-inline-block d-inline-block"><label data-v-b2ceeac4="" class="form-check h-100 d-inline-block ps-4 p-1"><input data-v-b2ceeac4="" class="d-inline-block form-check-input" type="checkbox"><span data-v-b2ceeac4="" class="form-check-label">Open Issues</span></label></div>
+    <!--v-if--><span data-v-48717bcb="" class="float-end"> Loaded 1 of 10</span>
+  </div>
+  <div data-v-48717bcb="" class="osim-incident-list">
+    <table data-v-48717bcb="" class="table align-middle">
+      <thead data-v-48717bcb="" class="sticky-top">
+        <!-- <thead class=""> -->
+        <tr data-v-48717bcb="">
+          <th data-v-48717bcb="">ID <i data-v-48717bcb="" class="opacity-0 bi-caret-down-fill bi"></i></th>
+          <th data-v-48717bcb="">Impact <i data-v-48717bcb="" class="opacity-0 bi-caret-down-fill bi"></i></th>
+          <th data-v-48717bcb="">Created <i data-v-48717bcb="" class="bi-caret-down-fill bi"></i></th>
+          <th data-v-48717bcb="">Title <i data-v-48717bcb="" class="opacity-0 bi-caret-down-fill bi"></i></th>
+          <th data-v-48717bcb="">State <i data-v-48717bcb="" class="opacity-0 bi-caret-down-fill bi"></i></th>
+          <th data-v-48717bcb="">Owner <i data-v-48717bcb="" class="opacity-0 bi-caret-down-fill bi"></i></th>
+        </tr>
+      </thead>
+      <tbody data-v-48717bcb="" class="table-group-divider">
+        <tr data-v-15d9c71d="" class="osim-issue-queue-item osim-shaded">
+          <td data-v-15d9c71d="" class="osim-issue-title pb-0"><a data-v-15d9c71d="" href="/flaws/CVE-2903-0092" class="">CVE-2903-0092</a></td>
+          <td data-v-15d9c71d="" class="pb-0">MODERATE</td>
+          <td data-v-15d9c71d="" class="pb-0">2021-07-29</td>
+          <td data-v-15d9c71d="" class="pb-0">title</td>
+          <td data-v-15d9c71d="" class="pb-0">NEW</td>
+          <td data-v-15d9c71d="" class="pb-0">[email protected]</td>
+          <!--<td>{{ issue.assigned }}</td>-->
+        </tr>
+        <tr data-v-15d9c71d="" class="osim-badge-lane osim-shaded">
+          <td data-v-15d9c71d="" colspan="100%">
+            <div data-v-15d9c71d="" class="gap-1 d-flex">
+              <!--v-if--><span data-v-15d9c71d="" class="badge rounded-pill text-capitalize text-bg-warning fw-bold" title="Requested">test-3</span><span data-v-15d9c71d="" class="badge rounded-pill text-capitalize text-bg-info" title="">test</span><span data-v-15d9c71d="" class="badge rounded-pill text-capitalize text-bg-info" title="">test-2</span>
+              <!--v-if-->
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table><button data-v-48717bcb="" class="btn btn-primary" type="button">
+      <!--v-if--><span data-v-48717bcb=""> Load More Flaws </span>
+    </button>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`issueQueue > should truncate flaw labels 1`] = `
+"<div data-v-48717bcb="" class="osim-content container-fluid osim-issue-queue">
+  <div data-v-48717bcb="" class="osim-incident-filter">
+    <div data-v-b2ceeac4="" data-v-48717bcb="" class="osim-input ps-3 d-inline-block d-inline-block"><label data-v-b2ceeac4="" class="form-check h-100 d-inline-block ps-4 p-1"><input data-v-b2ceeac4="" class="d-inline-block form-check-input" type="checkbox"><span data-v-b2ceeac4="" class="form-check-label">My Issues</span></label></div>
+    <div data-v-b2ceeac4="" data-v-48717bcb="" class="osim-input ps-3 d-inline-block d-inline-block"><label data-v-b2ceeac4="" class="form-check h-100 d-inline-block ps-4 p-1"><input data-v-b2ceeac4="" class="d-inline-block form-check-input" type="checkbox"><span data-v-b2ceeac4="" class="form-check-label">Open Issues</span></label></div>
+    <!--v-if--><span data-v-48717bcb="" class="float-end"> Loaded 1 of 10</span>
+  </div>
+  <div data-v-48717bcb="" class="osim-incident-list">
+    <table data-v-48717bcb="" class="table align-middle">
+      <thead data-v-48717bcb="" class="sticky-top">
+        <!-- <thead class=""> -->
+        <tr data-v-48717bcb="">
+          <th data-v-48717bcb="">ID <i data-v-48717bcb="" class="opacity-0 bi-caret-down-fill bi"></i></th>
+          <th data-v-48717bcb="">Impact <i data-v-48717bcb="" class="opacity-0 bi-caret-down-fill bi"></i></th>
+          <th data-v-48717bcb="">Created <i data-v-48717bcb="" class="bi-caret-down-fill bi"></i></th>
+          <th data-v-48717bcb="">Title <i data-v-48717bcb="" class="opacity-0 bi-caret-down-fill bi"></i></th>
+          <th data-v-48717bcb="">State <i data-v-48717bcb="" class="opacity-0 bi-caret-down-fill bi"></i></th>
+          <th data-v-48717bcb="">Owner <i data-v-48717bcb="" class="opacity-0 bi-caret-down-fill bi"></i></th>
+        </tr>
+      </thead>
+      <tbody data-v-48717bcb="" class="table-group-divider">
+        <tr data-v-15d9c71d="" class="osim-issue-queue-item osim-shaded">
+          <td data-v-15d9c71d="" class="osim-issue-title pb-0"><a data-v-15d9c71d="" href="/flaws/CVE-2903-0092" class="">CVE-2903-0092</a></td>
+          <td data-v-15d9c71d="" class="pb-0">MODERATE</td>
+          <td data-v-15d9c71d="" class="pb-0">2021-07-29</td>
+          <td data-v-15d9c71d="" class="pb-0">title</td>
+          <td data-v-15d9c71d="" class="pb-0">NEW</td>
+          <td data-v-15d9c71d="" class="pb-0">[email protected]</td>
+          <!--<td>{{ issue.assigned }}</td>-->
+        </tr>
+        <tr data-v-15d9c71d="" class="osim-badge-lane osim-shaded">
+          <td data-v-15d9c71d="" colspan="100%">
+            <div data-v-15d9c71d="" class="gap-1 d-flex">
+              <!--v-if--><span data-v-15d9c71d="" class="badge rounded-pill text-capitalize text-bg-info" title="">test-0</span><span data-v-15d9c71d="" class="badge rounded-pill text-capitalize text-bg-info" title="">test-1</span><span data-v-15d9c71d="" class="badge rounded-pill text-capitalize text-bg-info" title="">test-2</span><span data-v-15d9c71d="" class="badge rounded-pill text-capitalize text-bg-info" title="">test-3</span><i data-v-15d9c71d="" class="bi pe-1 cursor-pointer osim-show-all-labels bi-caret-right-fill" title="Show all labels"></i>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table><button data-v-48717bcb="" class="btn btn-primary" type="button">
+      <!--v-if--><span data-v-48717bcb=""> Load More Flaws </span>
+    </button>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>"
+`;