Add tests for the coverage table

Add tests for the empty state, loading state,
and checking that the data is being loaded
into the table properly.

ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.vue

@@ -66,20 +66,18 @@ export default {
     },
     selectProject({ id }) {
       if (this.allProjectsSelected) {
+        // Clear out all the selected projects
         this.allProjectsSelected = false;
-        this.selectedProjectIds = [id];
-        this.getCoverageData();
-        return;
+        this.selectedProjectIds = [];
       }
 
       const index = this.selectedProjectIds.indexOf(id);
       if (index < 0) {
         this.selectedProjectIds.push(id);
-        this.getCoverageData();
-        return;
+      } else {
+        this.selectedProjectIds.splice(index, 1);
       }
 
-      this.selectedProjectIds.splice(index, 1);
       this.getCoverageData();
     },
   },
@@ -90,15 +88,15 @@ export default {
     },
     {
       key: 'coverage',
-      label: __('Coverage'),
+      label: s__('RepositoriesAnalytics|Coverage'),
     },
     {
       key: 'numberOfCoverages',
-      label: __('Number of Coverages'),
+      label: s__('RepositoriesAnalytics|Number of Coverages'),
     },
     {
       key: 'lastUpdate',
-      label: __('Last Update'),
+      label: s__('RepositoriesAnalytics|Last Update'),
     },
   ],
   text: {
@@ -120,7 +118,12 @@ export default {
       />
     </template>
 
-    <gl-skeleton-loader v-if="isLoading" :width="430" :height="55">
+    <gl-skeleton-loader
+      v-if="isLoading"
+      :width="430"
+      :height="55"
+      data-testid="test-coverage-loading-state"
+    >
       <rect width="90" height="10" x="0" y="0" rx="4" />
       <rect width="80" height="10" x="95" y="0" rx="4" />
       <rect width="145" height="10" x="180" y="0" rx="4" />
@@ -144,7 +147,7 @@ export default {
 
     <gl-table
       v-else-if="hasCoverageData"
-      data-testid="coverage-data-table"
+      data-testid="test-coverage-data-table"
       thead-class="thead-white"
       :fields="$options.tableFields"
       :items="coverageData"
@@ -163,16 +166,19 @@ export default {
       </template>
 
       <template #cell(project)="{ item }">
-        <div>{{ item.name }}</div>
+        <div :data-testid="`${item.id}-name`">{{ item.name }}</div>
       </template>
       <template #cell(coverage)="{ item }">
-        <div>{{ item.codeCoverage.average }}%</div>
+        <div :data-testid="`${item.id}-average`">{{ item.codeCoverage.average }}%</div>
       </template>
       <template #cell(numberOfCoverages)="{ item }">
-        <div>{{ item.codeCoverage.count }}</div>
+        <div :data-testid="`${item.id}-count`">{{ item.codeCoverage.count }}</div>
       </template>
       <template #cell(lastUpdate)="{ item }">
-        <time-ago-tooltip :time="item.codeCoverage.lastUpdatedAt" />
+        <time-ago-tooltip
+          :time="item.codeCoverage.lastUpdatedAt"
+          :data-testid="`${item.id}-date`"
+        />
       </template>
     </gl-table>
 
@@ -181,6 +187,7 @@ export default {
       :svg-path="coverageTableEmptyStateSvgPath"
       :title="$options.text.emptyStateTitle"
       :description="$options.text.emptyStateDescription"
+      data-testid="test-coverage-table-empty-state"
     />
   </gl-card>
 </template>

ee/spec/frontend/analytics/repository_analytics/components/test_coverage_table_spec.js

+import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
+import { useFakeDate } from 'helpers/fake_date';
+import TestCoverageTable from 'ee/analytics/repository_analytics/components/test_coverage_table.vue';
+
+const localVue = createLocalVue();
+
+describe('Test coverage table component', () => {
+  useFakeDate();
+  let wrapper;
+
+  const createComponent = (mountFn = shallowMount, data = {}) => {
+    wrapper = mountFn(TestCoverageTable, {
+      localVue,
+      provide: {
+        coverageTableEmptyStateSvgPath: '/empty.svg',
+      },
+      data() {
+        return {
+          coverageData: [],
+          hasError: false,
+          allProjectsSelected: false,
+          selectedProjectIds: [],
+          isLoading: false,
+          ...data,
+        };
+      },
+      mocks: {
+        $apollo: {
+          queries: {
+            coverageData: {
+              query: jest.fn().mockResolvedValue(),
+            },
+          },
+        },
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when code coverage is empty', () => {
+    it('renders empty state', () => {
+      createComponent();
+      const emptyState = wrapper.find('[data-testid="test-coverage-table-empty-state"]');
+
+      expect(emptyState.exists()).toBe(true);
+    });
+  });
+
+  describe('when query is loading', () => {
+    it('renders loading state', () => {
+      createComponent(shallowMount, { isLoading: true });
+      const loadingState = wrapper.find('[data-testid="test-coverage-loading-state"');
+
+      expect(loadingState.exists()).toBe(true);
+    });
+  });
+
+  describe('when code coverage is available', () => {
+    it('renders coverage table', () => {
+      const id = 'gid://gitlab/Project/1';
+      const name = 'GitLab';
+      const average = '74.35';
+      const count = '5';
+      const yesterday = new Date();
+      yesterday.setDate(yesterday.getDate() - 1);
+
+      createComponent(mount, {
+        coverageData: [
+          {
+            id,
+            name,
+            codeCoverage: {
+              average,
+              count,
+              lastUpdatedAt: yesterday.toISOString(),
+            },
+          },
+        ],
+      });
+      const coverageTable = wrapper.find('[data-testid="test-coverage-data-table"');
+      const expectedName = wrapper.find(`[data-testid="${id}-name"`);
+      const expectedAverage = wrapper.find(`[data-testid="${id}-average"`);
+      const expectedCount = wrapper.find(`[data-testid="${id}-count"`);
+      const expectedDate = wrapper.find(`[data-testid="${id}-date"`);
+
+      expect(coverageTable.exists()).toBe(true);
+      expect(expectedName.text()).toBe(name);
+      expect(expectedAverage.text()).toBe(`${average}%`);
+      expect(expectedCount.text()).toBe(count);
+      expect(expectedDate.text()).toBe('1 day ago');
+    });
+  });
+});

locale/gitlab.pot

@@ -15064,9 +15064,6 @@ msgstr ""
 msgid "Last Seen"
 msgstr ""
 
-msgid "Last Update"
-msgstr ""
-
 msgid "Last Used"
 msgstr ""
 
@@ -18057,9 +18054,6 @@ msgstr ""
 msgid "Number of %{itemTitle}"
 msgstr ""
 
-msgid "Number of Coverages"
-msgstr ""
-
 msgid "Number of Elasticsearch replicas"
 msgstr ""
 
@@ -22025,6 +22019,9 @@ msgstr ""
 msgid "Repositories Analytics"
 msgstr ""
 
+msgid "RepositoriesAnalytics|Coverage"
+msgstr ""
+
 msgid "RepositoriesAnalytics|Download Historic Test Coverage Data"
 msgstr ""
 
@@ -22037,6 +22034,12 @@ msgstr ""
 msgid "RepositoriesAnalytics|Historic Test Coverage Data is available in raw format (.csv) for further analysis."
 msgstr ""
 
+msgid "RepositoriesAnalytics|Last Update"
+msgstr ""
+
+msgid "RepositoriesAnalytics|Number of Coverages"
+msgstr ""
+
 msgid "RepositoriesAnalytics|Please select a project or multiple projects to display their most recent test coverage data."
 msgstr ""