Add test coverage

ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_overview_table.vue

@@ -9,12 +9,14 @@ import {
   GlProgressBar,
 } from '@gitlab/ui';
 import {
+  TABLE_TEST_IDS_HEADERS,
   I18N_GROUP_COL_LABEL,
   I18N_TABLE_REMOVE_BUTTON_DISABLED,
   I18N_TABLE_REMOVE_BUTTON,
   I18N_OVERVIEW_TABLE_HEADER_GROUP,
   I18N_OVERVIEW_TABLE_HEADER_SUBGROUP,
   TABLE_TEST_IDS_ACTIONS,
+  TABLE_TEST_IDS_NAMESPACE,
   DEVOPS_ADOPTION_TABLE_CONFIGURATION,
   DELETE_MODAL_ID,
 } from '../constants';
@@ -24,6 +26,7 @@ const thClass = ['gl-bg-white!', 'gl-text-gray-400'];
 const fieldOptions = {
   thClass,
+  thAttr: { 'data-testid': TABLE_TEST_IDS_HEADERS },
 };
 export default {
@@ -51,14 +54,10 @@ export default {
   },
   testids: {
     ACTIONS: TABLE_TEST_IDS_ACTIONS,
+    NAMESPACE: TABLE_TEST_IDS_NAMESPACE,
   },
   deleteModalId: DELETE_MODAL_ID,
   cols: DEVOPS_ADOPTION_TABLE_CONFIGURATION,
-  inject: {
-    groupGid: {
-      default: null,
-    },
-  },
   props: {
     data: {
       type: Object,
@@ -103,7 +102,9 @@ export default {
         ...DEVOPS_ADOPTION_TABLE_CONFIGURATION.map((item) => ({
           [item.key]: {
             total: item.cols.length,
-            adopted: item.cols.filter((col) => Boolean(group.latestSnapshot[col.key])).length,
+            adopted: item.cols.filter(
+              (col) => group.latestSnapshot && Boolean(group.latestSnapshot[col.key]),
+            ).length,
           },
         })).reduce((values, formatted) => ({ ...values, ...formatted }), {}),
       }));
@@ -163,6 +164,7 @@ export default {
         <div
           v-if="item.latestSnapshot"
           :key="col.key"
+          :data-testid="col.testId"
           class="gl-display-flex gl-align-items-center gl-justify-content-end gl-justify-content-md-start"
         >
           <span class="gl-w-7 gl-mr-3">{{ formatPercentage(item, col) }}</span>

ee/app/assets/javascripts/analytics/devops_report/devops_adoption/constants.js

@@ -87,6 +87,7 @@ export const DEVOPS_ADOPTION_TABLE_CONFIGURATION = [
     tab: 'dev',
     icon: 'code',
     variant: 'warning',
+    testId: 'devCol',
     cols: [
       {
         key: 'mergeRequestApproved',
@@ -120,6 +121,7 @@ export const DEVOPS_ADOPTION_TABLE_CONFIGURATION = [
     key: 'sec',
     icon: 'shield',
     variant: 'info',
+    testId: 'secCol',
     cols: [
       {
         key: 'dastEnabledCount',
@@ -149,6 +151,7 @@ export const DEVOPS_ADOPTION_TABLE_CONFIGURATION = [
     key: 'ops',
     icon: 'rocket',
     variant: 'success',
+    testId: 'opsCol',
     cols: [
       {
         key: 'deploySucceeded',

ee/app/assets/stylesheets/page_bundles/dev_ops_report.scss

@@ -61,7 +61,8 @@
     }
   }
-  .actions-cell::before, .header-cell::before {
+  .actions-cell::before,
+  .header-cell::before {
     @include gl-display-none;
   }

ee/spec/frontend/analytics/devops_report/devops_adoption/components/devops_adoption_overview_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
 import DevopsAdoptionOverview from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_overview.vue';
 import DevopsAdoptionOverviewCard from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_overview_card.vue';
+import DevopsAdoptionOverviewTable from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_overview_table.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { devopsAdoptionNamespaceData, overallAdoptionData } from '../mock_data';
@@ -45,6 +46,10 @@ describe('DevopsAdoptionOverview', () => {
           overallAdoptionData,
         );
       });
+
+      it('displays the overview table', () => {
+        expect(wrapper.findComponent(DevopsAdoptionOverviewTable).exists()).toBe(true);
+      });
     });
   });

ee/spec/frontend/analytics/devops_report/devops_adoption/components/devops_adoption_overview_table_spec.js

+import { GlButton, GlIcon, GlBadge, GlProgressBar } from '@gitlab/ui';
+import DevopsAdoptionDeleteModal from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_delete_modal.vue';
+import DevopsAdoptionOverviewTable from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_overview_table.vue';
+import {
+  TABLE_TEST_IDS_NAMESPACE,
+  TABLE_TEST_IDS_ACTIONS,
+  TABLE_TEST_IDS_HEADERS,
+  DEVOPS_ADOPTION_TABLE_CONFIGURATION,
+} from 'ee/analytics/devops_report/devops_adoption/constants';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { devopsAdoptionNamespaceData, devopsAdoptionOverviewTableHeaders } from '../mock_data';
+
+describe('DevopsAdoptionOverviewTable', () => {
+  let wrapper;
+
+  const createComponent = (options = {}) => {
+    const { provide = {} } = options;
+
+    wrapper = mountExtended(DevopsAdoptionOverviewTable, {
+      propsData: {
+        data: devopsAdoptionNamespaceData,
+      },
+      provide,
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findCol = (testId) => wrapper.findByTestId(testId);
+
+  const findColRowChild = (col, row, child) => wrapper.findAllByTestId(col).at(row).find(child);
+
+  const findColSubComponent = (colTestId, childComponent) =>
+    findCol(colTestId).find(childComponent);
+
+  const findDeleteModal = () => wrapper.findComponent(DevopsAdoptionDeleteModal);
+
+  describe('table headings', () => {
+    let headers;
+
+    beforeEach(() => {
+      createComponent();
+      headers = wrapper.findAllByTestId(TABLE_TEST_IDS_HEADERS);
+    });
+
+    it('displays the correct number of headings', () => {
+      expect(headers).toHaveLength(devopsAdoptionOverviewTableHeaders.length);
+    });
+
+    describe.each(devopsAdoptionOverviewTableHeaders)('header fields', ({ label, index }) => {
+      let headerWrapper;
+
+      beforeEach(() => {
+        headerWrapper = headers.at(index);
+      });
+
+      it(`displays the correct table heading text for "${label}"`, () => {
+        expect(headerWrapper.text()).toContain(label);
+      });
+    });
+  });
+
+  describe('table fields', () => {
+    describe('enabled namespace name', () => {
+      it('displays the correct name', () => {
+        createComponent();
+
+        expect(findCol(TABLE_TEST_IDS_NAMESPACE).text()).toBe('Group 1');
+      });
+
+      describe('"This group" badge', () => {
+        const thisGroupGid = devopsAdoptionNamespaceData.nodes[0].namespace.id;
+
+        it.each`
+          scenario                            | expected | provide
+          ${'is not shown by default'}        | ${false} | ${null}
+          ${'is not shown for other groups'}  | ${false} | ${{ groupGid: 'anotherGroupGid' }}
+          ${'is shown for the current group'} | ${true}  | ${{ groupGid: thisGroupGid }}
+        `('$scenario', ({ expected, provide }) => {
+          createComponent({ provide });
+
+          const badge = findColSubComponent(TABLE_TEST_IDS_NAMESPACE, GlBadge);
+
+          expect(badge.exists()).toBe(expected);
+        });
+      });
+
+      describe('pending state (no snapshot data available)', () => {
+        beforeEach(() => {
+          createComponent();
+        });
+
+        it('grays the text out', () => {
+          const name = findColRowChild(TABLE_TEST_IDS_NAMESPACE, 1, 'span');
+
+          expect(name.classes()).toStrictEqual(['gl-text-gray-400']);
+        });
+
+        describe('hourglass icon', () => {
+          let icon;
+
+          beforeEach(() => {
+            icon = findColRowChild(TABLE_TEST_IDS_NAMESPACE, 1, GlIcon);
+          });
+
+          it('displays the icon', () => {
+            expect(icon.exists()).toBe(true);
+            expect(icon.props('name')).toBe('hourglass');
+          });
+        });
+      });
+    });
+
+    const testCols = DEVOPS_ADOPTION_TABLE_CONFIGURATION.map((col) => [col.title, col.testId]);
+
+    it.each(testCols)('displays the progress bar for %s', (title, testId) => {
+      createComponent();
+
+      const progressBar = findColSubComponent(testId, GlProgressBar);
+
+      expect(progressBar.exists()).toBe(true);
+    });
+
+    describe.each`
+      scenario              | tooltipText                                            | provide                                                            | disabled
+      ${'not active group'} | ${'Remove Group from the table.'}                      | ${{}}                                                              | ${false}
+      ${'active group'}     | ${'You cannot remove the group you are currently in.'} | ${{ groupGid: devopsAdoptionNamespaceData.nodes[0].namespace.id }} | ${true}
+    `('actions column when $scenario', ({ tooltipText, provide, disabled }) => {
+      beforeEach(() => {
+        createComponent({ provide });
+      });
+
+      it('displays the actions icon', () => {
+        const button = findColSubComponent(TABLE_TEST_IDS_ACTIONS, GlButton);
+
+        expect(button.exists()).toBe(true);
+        expect(button.props('disabled')).toBe(disabled);
+        expect(button.props('icon')).toBe('remove');
+        expect(button.props('category')).toBe('tertiary');
+      });
+
+      it('wraps the icon in an element with a tooltip', () => {
+        const iconWrapper = findCol(TABLE_TEST_IDS_ACTIONS);
+        const tooltip = getBinding(iconWrapper.element, 'gl-tooltip');
+
+        expect(iconWrapper.exists()).toBe(true);
+        expect(tooltip).toBeDefined();
+        expect(tooltip.value).toBe(tooltipText);
+      });
+    });
+  });
+
+  describe('delete modal integration', () => {
+    beforeEach(() => {
+      createComponent();
+
+      wrapper.setData({
+        selectedNamespace: devopsAdoptionNamespaceData.nodes[0],
+      });
+    });
+
+    it('re emits trackModalOpenState with the given value', async () => {
+      findDeleteModal().vm.$emit('trackModalOpenState', true);
+
+      expect(wrapper.emitted('trackModalOpenState')).toStrictEqual([[true]]);
+    });
+  });
+});

ee/spec/frontend/analytics/devops_report/devops_adoption/mock_data.js

@@ -96,6 +96,29 @@ export const devopsAdoptionTableHeaders = [
   },
 ];
+export const devopsAdoptionOverviewTableHeaders = [
+  {
+    index: 0,
+    label: 'Group',
+  },
+  {
+    index: 1,
+    label: 'Dev',
+  },
+  {
+    index: 2,
+    label: 'Sec',
+  },
+  {
+    index: 3,
+    label: 'Ops',
+  },
+  {
+    index: 4,
+    label: '',
+  },
+];
+
 export const genericErrorMessage = 'An error occurred while saving changes. Please try again.';
 export const dataErrorMessage = 'Name already taken.';