Skip to content

G
gitlab-ce
Commit d61780e9 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas
Browse files
Options

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

Update group code coverage projects query

See merge request gitlab-org/gitlab!56124
parents c82217d8 11533405
Show whitespace changes
Inline Side-by-side
Showing with 172 additions and 155 deletions
ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.vue
View file @ d61780e9
......@@ -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
View file @ d61780e9
......@@ -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
View file @ d61780e9
query getProjectsTestCoverage($projectIds: [ID!]) {
projects(ids: $projectIds) {
query getProjectsTestCoverage($groupFullPath: ID!, $projectIds: [ID!]) {
group(fullPath: $groupFullPath) {
projects(hasCodeCoverage: true, ids: $projectIds) {
nodes {
fullPath
id
......@@ -14,4 +15,5 @@ query getProjectsTestCoverage($projectIds: [ID!]) {
}
}
}
}
}
ee/changelogs/unreleased/284381-group-code-coverage-query.yml 0 → 100644
View file @ d61780e9
---
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
View file @ d61780e9
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,55 +15,61 @@ 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],
]);
};
const createComponent = ({
glFeatures = {},
mockApollo,
mockData = {},
mountFn = shallowMount,
} = {}) => {
wrapper = mountFn(TestCoverageTable, {
wrapper = extendedWrapper(
mountFn(TestCoverageTable, {
localVue,
apolloProvider: mockApollo,
data() {
return {
...defaultTestCoverageTable,
...mockData,
};
},
apolloProvider: mockApollo,
provide: {
glFeatures,
groupFullPath: 'gitlab-org',
},
});
}),
);
};
beforeEach(() => {
getProjectsTestCoverageSpy = jest.fn().mockResolvedValue({
data: { group: { projects: { nodes: projects } } },
});
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
......@@ -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,13 +111,15 @@ 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: [
getProjectsTestCoverageSpy = jest.fn().mockResolvedValue({
data: {
group: {
projects: {
nodes: [
{
...project,
name: 'should be last',
......@@ -130,14 +139,15 @@ describe('Test coverage table component', () => {
},
},
],
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,22 +160,14 @@ 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', () => {
......@@ -173,17 +175,11 @@ describe('Test coverage table component', () => {
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();
await clickSelectAllProjects();
findProjectNameById(id).trigger('click');
expect(Api.trackRedisHllUserEvent).toHaveBeenCalledTimes(1);
......@@ -198,22 +194,15 @@ describe('Test coverage table component', () => {
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();
await clickSelectAllProjects();
findProjectNameById(id).trigger('click');
expect(Api.trackRedisHllUserEvent).not.toHaveBeenCalled();
});
});
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7