From daba2fcb6e104f32adab141ec85fd5c9a3bdf444 Mon Sep 17 00:00:00 2001 From: Ezekiel Kigbo Date: Tue, 24 Sep 2024 01:51:58 +1000 Subject: [PATCH 1/3] Add storybook stories for repository analytics components This MR: - Adds basic test_coverage_summary stories - Adds basic test_coverage_table stories - Minor refactor story constants into a separate file --- .../components/stories_constants.js | 119 ++++++++++++++++++ .../test_coverage_summary.stories.js | 49 ++++++++ .../components/test_coverage_table.stories.js | 49 ++++++++ 3 files changed, 217 insertions(+) create mode 100644 ee/app/assets/javascripts/analytics/repository_analytics/components/stories_constants.js create mode 100644 ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.stories.js create mode 100644 ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.stories.js diff --git a/ee/app/assets/javascripts/analytics/repository_analytics/components/stories_constants.js b/ee/app/assets/javascripts/analytics/repository_analytics/components/stories_constants.js new file mode 100644 index 00000000000000..7e7db47522b0c6 --- /dev/null +++ b/ee/app/assets/javascripts/analytics/repository_analytics/components/stories_constants.js @@ -0,0 +1,119 @@ +/* eslint-disable @gitlab/require-i18n-strings */ +export const projectsTestCoverageResponse = { + data: { + group: { + id: 101, + projects: { + nodes: [ + { + fullPath: 'fake-group/tui', + id: 'gid://fake-domain/Project/1234', + name: 'tui', + repository: { + rootRef: 'main', + __typename: 'Repository', + }, + codeCoverageSummary: { + averageCoverage: 45.4, + coverageCount: 2, + lastUpdatedOn: '2020-09-24', + __typename: 'CodeCoverageSummary', + }, + __typename: 'Project', + }, + { + fullPath: 'fake-group/cli', + id: 'gid://fake-domain/Project/5678', + name: 'cli', + repository: { + rootRef: 'master', + __typename: 'Repository', + }, + codeCoverageSummary: { + averageCoverage: 64.3, + coverageCount: 1, + lastUpdatedOn: '2020-08-19', + __typename: 'CodeCoverageSummary', + }, + __typename: 'Project', + }, + ], + }, + }, + }, +}; + +export const groupTestCoverageResponse = { + data: { + group: { + id: 10, + codeCoverageActivities: { + nodes: [ + { + projectCount: 4, + averageCoverage: 59.49, + coverageCount: 6, + date: '2020-05-25', + __typename: 'CodeCoverageActivity', + }, + { + projectCount: 3, + averageCoverage: 55.65, + coverageCount: 5, + date: '2020-05-26', + __typename: 'CodeCoverageActivity', + }, + { + projectCount: 5, + averageCoverage: 63.48, + coverageCount: 10, + date: '2020-05-27', + __typename: 'CodeCoverageActivity', + }, + { + projectCount: 6, + averageCoverage: 75.49, + coverageCount: 8, + date: '2020-05-28', + __typename: 'CodeCoverageActivity', + }, + { + projectCount: 6, + averageCoverage: 55.45, + coverageCount: 8, + date: '2020-05-29', + __typename: 'CodeCoverageActivity', + }, + { + projectCount: 1, + averageCoverage: 35.63, + coverageCount: 5, + date: '2020-05-30', + __typename: 'CodeCoverageActivity', + }, + { + projectCount: 3, + averageCoverage: 61.45, + coverageCount: 5, + date: '2020-05-31', + __typename: 'CodeCoverageActivity', + }, + { + projectCount: 3, + averageCoverage: 61.45, + coverageCount: 5, + date: '2020-06-01', + __typename: 'CodeCoverageActivity', + }, + { + projectCount: 4, + averageCoverage: 79.46, + coverageCount: 6, + date: '2020-06-02', + __typename: 'CodeCoverageActivity', + }, + ], + }, + }, + }, +}; diff --git a/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.stories.js b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.stories.js new file mode 100644 index 00000000000000..34299d224c604a --- /dev/null +++ b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.stories.js @@ -0,0 +1,49 @@ +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createMockApollo from 'helpers/mock_apollo_helper'; +import getGroupTestCoverage from '../graphql/queries/get_group_test_coverage.query.graphql'; +import TestCoverageSummary from './test_coverage_summary.vue'; +import { groupTestCoverageResponse } from './stories_constants'; + +Vue.use(VueApollo); + +export default { + component: TestCoverageSummary, + title: 'ee/analytics/repository_analytics/components/test_coverage_summary', +}; + +const createStory = ({ mockApollo, requestHandler = groupTestCoverageResponse } = {}) => { + const defaultApolloProvider = createMockApollo([ + [getGroupTestCoverage, () => Promise.resolve(requestHandler)], + ]); + + return (args, { argTypes }) => ({ + components: { TestCoverageSummary }, + apolloProvider: mockApollo || defaultApolloProvider, + provide: { + groupFullPath: 'path/to/group', + groupName: 'Group Awesome', + }, + props: Object.keys(argTypes), + template: '', + }); +}; + +const defaultData = {}; + +export const Default = { + render: createStory(), + args: defaultData, +}; + +export const Loading = { + render: createStory({ + mockApollo: createMockApollo([[getGroupTestCoverage, () => new Promise(() => {})]]), + }), + args: Default.args, +}; + +export const NoData = { + render: createStory(), + args: Default.args, +}; diff --git a/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.stories.js b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.stories.js new file mode 100644 index 00000000000000..58d3f29694fa1b --- /dev/null +++ b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.stories.js @@ -0,0 +1,49 @@ +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createMockApollo from 'helpers/mock_apollo_helper'; +import getProjectsTestCoverage from '../graphql/queries/get_projects_test_coverage.query.graphql'; +import TestCoverageTable from './test_coverage_table.vue'; +import { projectsTestCoverageResponse } from './stories_constants'; + +Vue.use(VueApollo); + +export default { + component: TestCoverageTable, + title: 'ee/analytics/repository_analytics/components/test_coverage_table', +}; + +const createStory = ({ mockApollo, requestHandler = projectsTestCoverageResponse } = {}) => { + const defaultApolloProvider = createMockApollo([ + [getProjectsTestCoverage, () => Promise.resolve(requestHandler)], + ]); + + return (args, { argTypes }) => ({ + components: { TestCoverageTable }, + apolloProvider: mockApollo || defaultApolloProvider, + provide: { + groupFullPath: 'path/to/group', + groupName: 'Group Awesome', + }, + props: Object.keys(argTypes), + template: '', + }); +}; + +const defaultData = {}; + +export const Default = { + render: createStory(), + args: defaultData, +}; + +export const Loading = { + render: createStory({ + mockApollo: createMockApollo([[getProjectsTestCoverage, () => new Promise(() => {})]]), + }), + args: Default.args, +}; + +export const NoData = { + render: createStory(), + args: Default.args, +}; -- GitLab From b4fc7d00c4dd6b3984aeba181eb402e7ca5b1812 Mon Sep 17 00:00:00 2001 From: Ezekiel Kigbo <3397881-ekigbo@users.noreply.gitlab.com> Date: Tue, 24 Sep 2024 05:41:25 +0000 Subject: [PATCH 2/3] Minor refactor no data states --- .../components/stories_constants.js | 16 +++++++++++++++- .../components/test_coverage_summary.stories.js | 14 +++++--------- .../components/test_coverage_table.stories.js | 13 ++++--------- 3 files changed, 24 insertions(+), 19 deletions(-) diff --git a/ee/app/assets/javascripts/analytics/repository_analytics/components/stories_constants.js b/ee/app/assets/javascripts/analytics/repository_analytics/components/stories_constants.js index 7e7db47522b0c6..573c62e8ce7efe 100644 --- a/ee/app/assets/javascripts/analytics/repository_analytics/components/stories_constants.js +++ b/ee/app/assets/javascripts/analytics/repository_analytics/components/stories_constants.js @@ -7,7 +7,7 @@ export const projectsTestCoverageResponse = { nodes: [ { fullPath: 'fake-group/tui', - id: 'gid://fake-domain/Project/1234', + id: 'gid://fake-domain/Project/1234', name: 'tui', repository: { rootRef: 'main', @@ -43,6 +43,15 @@ export const projectsTestCoverageResponse = { }, }; +export const projectsTestCoverageNoDataResponse = { + data: { + group: { + id: 101, + projects: { nodes: [] }, + }, + }, +}; + export const groupTestCoverageResponse = { data: { group: { @@ -117,3 +126,8 @@ export const groupTestCoverageResponse = { }, }, }; + + +export const groupTestCoverageNoDataResponse = { + data: { group: { id: 10, codeCoverageActivities: { nodes: [] } } }, +}; diff --git a/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.stories.js b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.stories.js index 34299d224c604a..0a6fcc3c6e5c4d 100644 --- a/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.stories.js +++ b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.stories.js @@ -3,7 +3,7 @@ import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import getGroupTestCoverage from '../graphql/queries/get_group_test_coverage.query.graphql'; import TestCoverageSummary from './test_coverage_summary.vue'; -import { groupTestCoverageResponse } from './stories_constants'; +import { groupTestCoverageResponse, groupTestCoverageNoDataResponse } from './stories_constants'; Vue.use(VueApollo); @@ -12,9 +12,9 @@ export default { title: 'ee/analytics/repository_analytics/components/test_coverage_summary', }; -const createStory = ({ mockApollo, requestHandler = groupTestCoverageResponse } = {}) => { +const createStory = ({ mockApollo, response = groupTestCoverageResponse } = {}) => { const defaultApolloProvider = createMockApollo([ - [getGroupTestCoverage, () => Promise.resolve(requestHandler)], + [getGroupTestCoverage, () => Promise.resolve(response)], ]); return (args, { argTypes }) => ({ @@ -29,21 +29,17 @@ const createStory = ({ mockApollo, requestHandler = groupTestCoverageResponse } }); }; -const defaultData = {}; - export const Default = { render: createStory(), - args: defaultData, }; export const Loading = { render: createStory({ mockApollo: createMockApollo([[getGroupTestCoverage, () => new Promise(() => {})]]), }), - args: Default.args, + }; export const NoData = { - render: createStory(), - args: Default.args, + render: createStory({ response: groupTestCoverageNoDataResponse }), }; diff --git a/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.stories.js b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.stories.js index 58d3f29694fa1b..41d2e463b7a263 100644 --- a/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.stories.js +++ b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.stories.js @@ -3,7 +3,7 @@ import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import getProjectsTestCoverage from '../graphql/queries/get_projects_test_coverage.query.graphql'; import TestCoverageTable from './test_coverage_table.vue'; -import { projectsTestCoverageResponse } from './stories_constants'; +import { projectsTestCoverageResponse, projectsTestCoverageNoDataResponse } from './stories_constants'; Vue.use(VueApollo); @@ -12,9 +12,9 @@ export default { title: 'ee/analytics/repository_analytics/components/test_coverage_table', }; -const createStory = ({ mockApollo, requestHandler = projectsTestCoverageResponse } = {}) => { +const createStory = ({ mockApollo, response = projectsTestCoverageResponse } = {}) => { const defaultApolloProvider = createMockApollo([ - [getProjectsTestCoverage, () => Promise.resolve(requestHandler)], + [getProjectsTestCoverage, () => Promise.resolve(response)], ]); return (args, { argTypes }) => ({ @@ -29,21 +29,16 @@ const createStory = ({ mockApollo, requestHandler = projectsTestCoverageResponse }); }; -const defaultData = {}; - export const Default = { render: createStory(), - args: defaultData, }; export const Loading = { render: createStory({ mockApollo: createMockApollo([[getProjectsTestCoverage, () => new Promise(() => {})]]), }), - args: Default.args, }; export const NoData = { - render: createStory(), - args: Default.args, + render: createStory({ response: projectsTestCoverageNoDataResponse }), }; -- GitLab From 8b99fa3a7c2098fe430e44ce9010f18a0543f1f7 Mon Sep 17 00:00:00 2001 From: Ezekiel Kigbo Date: Tue, 24 Sep 2024 16:56:56 +1000 Subject: [PATCH 3/3] Minor prettier fixes --- .../repository_analytics/components/stories_constants.js | 3 +-- .../components/test_coverage_summary.stories.js | 1 - .../components/test_coverage_table.stories.js | 5 ++++- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/ee/app/assets/javascripts/analytics/repository_analytics/components/stories_constants.js b/ee/app/assets/javascripts/analytics/repository_analytics/components/stories_constants.js index 573c62e8ce7efe..002408614cc3dc 100644 --- a/ee/app/assets/javascripts/analytics/repository_analytics/components/stories_constants.js +++ b/ee/app/assets/javascripts/analytics/repository_analytics/components/stories_constants.js @@ -7,7 +7,7 @@ export const projectsTestCoverageResponse = { nodes: [ { fullPath: 'fake-group/tui', - id: 'gid://fake-domain/Project/1234', + id: 'gid://fake-domain/Project/1234', name: 'tui', repository: { rootRef: 'main', @@ -127,7 +127,6 @@ export const groupTestCoverageResponse = { }, }; - export const groupTestCoverageNoDataResponse = { data: { group: { id: 10, codeCoverageActivities: { nodes: [] } } }, }; diff --git a/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.stories.js b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.stories.js index 0a6fcc3c6e5c4d..74a73545edb21e 100644 --- a/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.stories.js +++ b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_summary.stories.js @@ -37,7 +37,6 @@ export const Loading = { render: createStory({ mockApollo: createMockApollo([[getGroupTestCoverage, () => new Promise(() => {})]]), }), - }; export const NoData = { diff --git a/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.stories.js b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.stories.js index 41d2e463b7a263..b892b201e78a2b 100644 --- a/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.stories.js +++ b/ee/app/assets/javascripts/analytics/repository_analytics/components/test_coverage_table.stories.js @@ -3,7 +3,10 @@ import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import getProjectsTestCoverage from '../graphql/queries/get_projects_test_coverage.query.graphql'; import TestCoverageTable from './test_coverage_table.vue'; -import { projectsTestCoverageResponse, projectsTestCoverageNoDataResponse } from './stories_constants'; +import { + projectsTestCoverageResponse, + projectsTestCoverageNoDataResponse, +} from './stories_constants'; Vue.use(VueApollo); -- GitLab