Merge branch '284381-group-code-coverage-query' into 'master'

Update group code coverage projects query

See merge request gitlab-org/gitlab!56124

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

@@ -22,23 +22,29 @@ export default {
     TimeAgoTooltip,
   },
   mixins: [glFeatureFlagsMixin()],
+  inject: {
+    groupFullPath: {
+      default: '',
+    },
+  },
   apollo: {
     projects: {
       query: getProjectsTestCoverage,
       debounce: 500,
       variables() {
         return {
-          projectIds: this.selectedProjectIds,
+          groupFullPath: this.groupFullPath,
+          projectIds: this.projectIdsToFetch,
         };
       },
       result({ data }) {
+        const projects = data.group.projects.nodes;
         // Keep data from all queries so that we don't
         // fetch the same data more than once
         this.allCoverageData = [
           ...this.allCoverageData,
-          // Remove the projects that don't have any code coverage
-          ...data.projects.nodes
-            .filter(({ codeCoverageSummary }) => Boolean(codeCoverageSummary))
+          ...projects
+            .filter(({ id }) => !this.allCoverageData.some((project) => project.id === id))
             .map((project) => ({
               ...project,
               codeCoveragePath: joinPaths(
@@ -48,6 +54,9 @@ export default {
             })),
         ];
       },
+      update(data) {
+        return data.group.projects.nodes;
+      },
       error() {
         this.handleError();
       },
@@ -62,10 +71,11 @@ export default {
   data() {
     return {
       allProjectsSelected: false,
-      allCoverageData: [],
+      allCoverageData: [], // All data we have ever received whether selected or not
       hasError: false,
       isLoading: false,
-      projectIds: {},
+      selectedProjectIds: {},
+      projects: {},
     };
   },
   computed: {
@@ -74,16 +84,28 @@ export default {
     },
     skipQuery() {
       // Skip if we haven't selected any projects yet
-      return !this.selectedProjectIds.length;
+      return !this.allProjectsSelected && !this.projectIdsToFetch.length;
     },
-    selectedProjectIds() {
+    /**
+     * projectIdsToFetch is a subset of selectedProjectIds
+     * The difference is that it only returns the projects
+     * that we have selected but haven't requested yet
+     */
+    projectIdsToFetch() {
+      if (this.allProjectsSelected) {
+        return null;
+      }
       // Get the IDs of the projects that we haven't requested yet
-      return Object.keys(this.projectIds).filter(
+      return Object.keys(this.selectedProjectIds).filter(
         (id) => !this.allCoverageData.some((project) => project.id === id),
       );
     },
     selectedCoverageData() {
-      return this.allCoverageData.filter(({ id }) => this.projectIds[id]);
+      if (this.allProjectsSelected) {
+        return this.allCoverageData;
+      }
+
+      return this.allCoverageData.filter(({ id }) => this.selectedProjectIds[id]);
     },
     sortedCoverageData() {
       // Sort the table by most recently updated coverage report
@@ -106,25 +128,24 @@ export default {
         api.trackRedisHllUserEvent(this.$options.usagePingProjectEvent);
       }
     },
-    selectAllProjects(allProjects) {
-      this.projectIds = Object.fromEntries(allProjects.map(({ id }) => [id, true]));
+    selectAllProjects() {
       this.allProjectsSelected = true;
     },
     toggleProject({ id }) {
       if (this.allProjectsSelected) {
         // Reset all project selections to false
         this.allProjectsSelected = false;
-        this.projectIds = Object.fromEntries(
-          Object.entries(this.projectIds).map(([key]) => [key, false]),
+        this.selectedProjectIds = Object.fromEntries(
+          Object.entries(this.selectedProjectIds).map(([key]) => [key, false]),
         );
       }
 
-      if (Object.prototype.hasOwnProperty.call(this.projectIds, id)) {
-        Vue.set(this.projectIds, id, !this.projectIds[id]);
+      if (Object.prototype.hasOwnProperty.call(this.selectedProjectIds, id)) {
+        Vue.set(this.selectedProjectIds, id, !this.selectedProjectIds[id]);
         return;
       }
 
-      Vue.set(this.projectIds, id, true);
+      Vue.set(this.selectedProjectIds, id, true);
     },
   },
   tableFields: [

ee/app/assets/javascripts/analytics/repository_analytics/graphql/queries/get_group_projects.query.graphql

@@ -2,7 +2,7 @@
 
 query getGroupProjects($groupFullPath: ID!, $after: String) {
   group(fullPath: $groupFullPath) {
-    projects(after: $after, first: 100) {
+    projects(hasCodeCoverage: true, after: $after, first: 100) {
       nodes {
         name
         id

ee/app/assets/javascripts/analytics/repository_analytics/graphql/queries/get_projects_test_coverage.query.graphql

-query getProjectsTestCoverage($projectIds: [ID!]) {
-  projects(ids: $projectIds) {
-    nodes {
-      fullPath
-      id
-      name
-      repository {
-        rootRef
-      }
-      codeCoverageSummary {
-        averageCoverage
-        coverageCount
-        lastUpdatedOn
+query getProjectsTestCoverage($groupFullPath: ID!, $projectIds: [ID!]) {
+  group(fullPath: $groupFullPath) {
+    projects(hasCodeCoverage: true, ids: $projectIds) {
+      nodes {
+        fullPath
+        id
+        name
+        repository {
+          rootRef
+        }
+        codeCoverageSummary {
+          averageCoverage
+          coverageCount
+          lastUpdatedOn
+        }
       }
     }
   }

ee/changelogs/unreleased/284381-group-code-coverage-query.yml

+---
+title: Fix group code coverage table to show all projects correctly
+merge_request: 56124
+author:
+type: fixed

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

+import { GlTable } from '@gitlab/ui';
 import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
+import SelectProjectsDropdown from 'ee/analytics/repository_analytics/components/select_projects_dropdown.vue';
 import TestCoverageTable from 'ee/analytics/repository_analytics/components/test_coverage_table.vue';
 import getGroupProjects from 'ee/analytics/repository_analytics/graphql/queries/get_group_projects.query.graphql';
 import getProjectsTestCoverage from 'ee/analytics/repository_analytics/graphql/queries/get_projects_test_coverage.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import waitForPromises from 'helpers/wait_for_promises';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import Api from '~/api';
 import { getTimeago } from '~/lib/utils/datetime_utility';
 import { defaultTestCoverageTable, projects } from '../mock_data';
@@ -12,54 +15,60 @@ import { defaultTestCoverageTable, projects } from '../mock_data';
 jest.mock('~/api.js');
 
 const localVue = createLocalVue();
+localVue.use(VueApollo);
 
 describe('Test coverage table component', () => {
   let wrapper;
+  let getProjectsTestCoverageSpy;
   const timeago = getTimeago();
 
-  const findEmptyState = () => wrapper.find('[data-testid="test-coverage-table-empty-state"]');
-  const findLoadingState = () => wrapper.find('[data-testid="test-coverage-loading-state"');
-  const findTable = () => wrapper.find('[data-testid="test-coverage-data-table"');
+  const findProjectsDropdown = () => wrapper.findComponent(SelectProjectsDropdown);
+  const findEmptyState = () => wrapper.findByTestId('test-coverage-table-empty-state');
+  const findLoadingState = () => wrapper.findByTestId('test-coverage-loading-state');
+  const findTable = () => wrapper.findComponent(GlTable);
   const findTableRows = () => findTable().findAll('tbody tr');
-  const findProjectNameById = (id) => wrapper.find(`[data-testid="${id}-name"`);
-  const findProjectAverageById = (id) => wrapper.find(`[data-testid="${id}-average"`);
-  const findProjectCountById = (id) => wrapper.find(`[data-testid="${id}-count"`);
-  const findProjectDateById = (id) => wrapper.find(`[data-testid="${id}-date"`);
+  const findProjectNameById = (id) => wrapper.findByTestId(`${id}-name`);
+  const findProjectAverageById = (id) => wrapper.findByTestId(`${id}-average`);
+  const findProjectCountById = (id) => wrapper.findByTestId(`${id}-count`);
+  const findProjectDateById = (id) => wrapper.findByTestId(`${id}-date`);
 
-  const createMockApolloProvider = () => {
-    localVue.use(VueApollo);
+  const clickSelectAllProjects = async () => {
+    findProjectsDropdown().vm.$emit('select-all-projects');
 
-    return createMockApollo([
+    await nextTick();
+    jest.runOnlyPendingTimers();
+    await nextTick();
+  };
+
+  const createComponent = ({ glFeatures = {}, mockData = {}, mountFn = shallowMount } = {}) => {
+    const mockApollo = createMockApollo([
       [getGroupProjects, jest.fn().mockResolvedValue()],
-      [
-        getProjectsTestCoverage,
-        jest.fn().mockResolvedValue({
-          data: { projects: { nodes: projects } },
-        }),
-      ],
+      [getProjectsTestCoverage, getProjectsTestCoverageSpy],
     ]);
+
+    wrapper = extendedWrapper(
+      mountFn(TestCoverageTable, {
+        localVue,
+        apolloProvider: mockApollo,
+        data() {
+          return {
+            ...defaultTestCoverageTable,
+            ...mockData,
+          };
+        },
+        provide: {
+          glFeatures,
+          groupFullPath: 'gitlab-org',
+        },
+      }),
+    );
   };
 
-  const createComponent = ({
-    glFeatures = {},
-    mockApollo,
-    mockData = {},
-    mountFn = shallowMount,
-  } = {}) => {
-    wrapper = mountFn(TestCoverageTable, {
-      localVue,
-      data() {
-        return {
-          ...defaultTestCoverageTable,
-          ...mockData,
-        };
-      },
-      apolloProvider: mockApollo,
-      provide: {
-        glFeatures,
-      },
+  beforeEach(() => {
+    getProjectsTestCoverageSpy = jest.fn().mockResolvedValue({
+      data: { group: { projects: { nodes: projects } } },
     });
-  };
+  });
 
   afterEach(() => {
     wrapper.destroy();
@@ -83,19 +92,17 @@ describe('Test coverage table component', () => {
   });
 
   describe('when code coverage is available', () => {
-    it('renders coverage table', () => {
+    it('renders coverage table', async () => {
       const {
         id,
         name,
         codeCoverageSummary: { averageCoverage, coverageCount, lastUpdatedOn },
       } = projects[0];
-      createComponent({
-        mockData: {
-          allCoverageData: projects,
-          projectIds: { [id]: true },
-        },
-        mountFn: mount,
-      });
+      createComponent({ mountFn: mount });
+
+      await clickSelectAllProjects();
+
+      expect(getProjectsTestCoverageSpy).toHaveBeenCalled();
 
       expect(findTable().exists()).toBe(true);
       expect(findProjectNameById(id).text()).toBe(name);
@@ -104,40 +111,43 @@ describe('Test coverage table component', () => {
       expect(findProjectDateById(id).text()).toBe(timeago.format(lastUpdatedOn));
     });
 
-    it('sorts the table by the most recently updated report', () => {
+    it('sorts the table by the most recently updated report', async () => {
       const project = projects[0];
       const today = '2021-01-30T20:34:14.302Z';
       const yesterday = '2021-01-29T20:34:14.302Z';
-      createComponent({
-        mockData: {
-          allCoverageData: [
-            {
-              ...project,
-              name: 'should be last',
-              id: 1,
-              codeCoverageSummary: {
-                ...project.codeCoverageSummary,
-                lastUpdatedOn: yesterday,
-              },
+      getProjectsTestCoverageSpy = jest.fn().mockResolvedValue({
+        data: {
+          group: {
+            projects: {
+              nodes: [
+                {
+                  ...project,
+                  name: 'should be last',
+                  id: 1,
+                  codeCoverageSummary: {
+                    ...project.codeCoverageSummary,
+                    lastUpdatedOn: yesterday,
+                  },
+                },
+                {
+                  ...project,
+                  name: 'should be first',
+                  id: 2,
+                  codeCoverageSummary: {
+                    ...project.codeCoverageSummary,
+                    lastUpdatedOn: today,
+                  },
+                },
+              ],
             },
-            {
-              ...project,
-              name: 'should be first',
-              id: 2,
-              codeCoverageSummary: {
-                ...project.codeCoverageSummary,
-                lastUpdatedOn: today,
-              },
-            },
-          ],
-          projectIds: {
-            1: true,
-            2: true,
           },
         },
-        mountFn: mount,
       });
 
+      createComponent({ mountFn: mount });
+
+      await clickSelectAllProjects();
+
       expect(findTable().exists()).toBe(true);
       expect(findTableRows().at(0).text()).toContain('should be first');
       expect(findTableRows().at(1).text()).toContain('should be last');
@@ -150,69 +160,48 @@ describe('Test coverage table component', () => {
         repository: { rootRef },
       } = projects[0];
       const expectedPath = `/${fullPath}/-/graphs/${rootRef}/charts`;
-      createComponent({
-        mockApollo: createMockApolloProvider(),
-        mockData: {
-          projectIds: { [id]: true },
-        },
-        mountFn: mount,
-      });
-      // We have to wait for apollo to make the mock query and fill the table before
-      // we can click on the project link inside the table. Neither `runOnlyPendingTimers`
-      // nor `waitForPromises` work on their own to accomplish this.
-      jest.runOnlyPendingTimers();
-      await waitForPromises();
+      createComponent({ mountFn: mount });
+
+      await clickSelectAllProjects();
 
       expect(findTable().exists()).toBe(true);
       expect(findProjectNameById(id).attributes('href')).toBe(expectedPath);
     });
+  });
 
-    describe('with usage metrics', () => {
-      describe('with :usageDataITestingGroupCodeCoverageProjectClickTotal enabled', () => {
-        it('tracks i_testing_group_code_coverage_project_click_total metric', async () => {
-          const { id } = projects[0];
-          createComponent({
-            glFeatures: { usageDataITestingGroupCodeCoverageProjectClickTotal: true },
-            mockApollo: createMockApolloProvider(),
-            mockData: {
-              projectIds: { [id]: true },
-            },
-            mountFn: mount,
-          });
-          // We have to wait for apollo to make the mock query and fill the table before
-          // we can click on the project link inside the table. Neither `runOnlyPendingTimers`
-          // nor `waitForPromises` work on their own to accomplish this.
-          jest.runOnlyPendingTimers();
-          await waitForPromises();
-          findProjectNameById(id).trigger('click');
-
-          expect(Api.trackRedisHllUserEvent).toHaveBeenCalledTimes(1);
-          expect(Api.trackRedisHllUserEvent).toHaveBeenCalledWith(
-            wrapper.vm.$options.usagePingProjectEvent,
-          );
+  describe('with usage metrics', () => {
+    describe('with :usageDataITestingGroupCodeCoverageProjectClickTotal enabled', () => {
+      it('tracks i_testing_group_code_coverage_project_click_total metric', async () => {
+        const { id } = projects[0];
+        createComponent({
+          glFeatures: { usageDataITestingGroupCodeCoverageProjectClickTotal: true },
+          mountFn: mount,
         });
+
+        await clickSelectAllProjects();
+
+        findProjectNameById(id).trigger('click');
+
+        expect(Api.trackRedisHllUserEvent).toHaveBeenCalledTimes(1);
+        expect(Api.trackRedisHllUserEvent).toHaveBeenCalledWith(
+          wrapper.vm.$options.usagePingProjectEvent,
+        );
       });
+    });
 
-      describe('with :usageDataITestingGroupCodeCoverageProjectClickTotal disabled', () => {
-        it('does not track i_testing_group_code_coverage_project_click_total metric', async () => {
-          const { id } = projects[0];
-          createComponent({
-            glFeatures: { usageDataITestingGroupCodeCoverageProjectClickTotal: false },
-            mockApollo: createMockApolloProvider(),
-            mockData: {
-              projectIds: { [id]: true },
-            },
-            mountFn: mount,
-          });
-          // We have to wait for apollo to make the mock query and fill the table before
-          // we can click on the project link inside the table. Neither `runOnlyPendingTimers`
-          // nor `waitForPromises` work on their own to accomplish this.
-          jest.runOnlyPendingTimers();
-          await waitForPromises();
-          findProjectNameById(id).trigger('click');
-
-          expect(Api.trackRedisHllUserEvent).not.toHaveBeenCalled();
+    describe('with :usageDataITestingGroupCodeCoverageProjectClickTotal disabled', () => {
+      it('does not track i_testing_group_code_coverage_project_click_total metric', async () => {
+        const { id } = projects[0];
+        createComponent({
+          glFeatures: { usageDataITestingGroupCodeCoverageProjectClickTotal: false },
+          mountFn: mount,
         });
+
+        await clickSelectAllProjects();
+
+        findProjectNameById(id).trigger('click');
+
+        expect(Api.trackRedisHllUserEvent).not.toHaveBeenCalled();
       });
     });
   });