Refactor i18n text

Refactor the i18n texts to all be in the same place.

Updated the changelog to be more specific.

Updated the spec file to use the extended wrapper.

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

@@ -32,8 +32,8 @@ export default {
           startDate: new Date(Date.now() - THIRTY_DAYS),
         };
       },
-      result(res) {
-        const groupCoverage = res.data?.group?.codeCoverageActivities?.nodes;
+      result({ data }) {
+        const groupCoverage = data.group.codeCoverageActivities.nodes;
         const { projectCount, averageCoverage, coverageCount } =
           groupCoverage?.[groupCoverage.length - 1] || {};
 
@@ -74,27 +74,24 @@ export default {
       isLoading: false,
     };
   },
-  i18n: {
-    cardTitle: __('Overall Activity'),
-  },
   computed: {
     metrics() {
       return [
         {
           key: 'projectCount',
           value: this.projectCount,
-          label: s__('RepositoriesAnalytics|Projects with Coverage'),
+          label: this.$options.text.metrics.projectCountLabel,
         },
         {
           key: 'averageCoverage',
           value: this.averageCoverage,
           unit: '%',
-          label: s__('RepositoriesAnalytics|Average Coverage by Job'),
+          label: this.$options.text.metrics.averageCoverageLabel,
         },
         {
           key: 'coverageCount',
           value: this.coverageCount,
-          label: s__('RepositoriesAnalytics|Jobs with Coverage'),
+          label: this.$options.text.metrics.coverageCountLabel,
         },
       ];
     },
@@ -127,12 +124,23 @@ export default {
     yAxisName: __('Coverage'),
     xAxisName: __('Date'),
     graphName: s__('RepositoriesAnalytics|Average coverage'),
+    graphTooltipMessage: __('Code Coverage: %{coveragePercentage}%{percentSymbol}'),
+    metrics: {
+      cardTitle: __('Overall Activity'),
+      projectCountLabel: s__('RepositoriesAnalytics|Projects with Coverage'),
+      averageCoverageLabel: s__('RepositoriesAnalytics|Average Coverage by Job'),
+      coverageCountLabel: s__('RepositoriesAnalytics|Jobs with Coverage'),
+    },
   },
 };
 </script>
 <template>
   <div>
-    <metric-card :title="$options.i18n.cardTitle" :metrics="metrics" :is-loading="isLoading" />
+    <metric-card
+      :title="$options.text.metrics.cardTitle"
+      :metrics="metrics"
+      :is-loading="isLoading"
+    />
 
     <gl-card>
       <template #header>
@@ -153,7 +161,7 @@ export default {
           {{ tooltipTitle }}
         </template>
         <template #tooltip-content>
-          <gl-sprintf :message="__('Code Coverage: %{coveragePercentage}%{percentSymbol}')">
+          <gl-sprintf :message="$options.text.graphTooltipMessage">
             <template #coveragePercentage>
               {{ coveragePercentage }}
             </template>

ee/changelogs/unreleased/215140-graph-the-average-code-coverage-of-all-of-a-group-s-projects.yml

 ---
-title: Graph group average code coverage
+title: Adds a graph to the group repositories analytics page
 merge_request: 53319
 author:
 type: added

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

@@ -3,6 +3,7 @@ import { mount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import TestCoverageSummary from 'ee/analytics/repository_analytics/components/test_coverage_summary.vue';
 import getGroupTestCoverage from 'ee/analytics/repository_analytics/graphql/queries/get_group_test_coverage.query.graphql';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 
@@ -15,8 +16,8 @@ describe('Test coverage table component', () => {
   const findProjectsWithTests = () => wrapper.find('.js-metric-card-item:nth-child(1) h3');
   const findAverageCoverage = () => wrapper.find('.js-metric-card-item:nth-child(2) h3');
   const findTotalCoverages = () => wrapper.find('.js-metric-card-item:nth-child(3) h3');
-  const findGroupCoverageChart = () => wrapper.find('[data-testid="group-coverage-chart"]');
-  const findChartLoadingState = () => wrapper.find('[data-testid="group-coverage-chart-loading"]');
+  const findGroupCoverageChart = () => wrapper.findByTestId('group-coverage-chart');
+  const findChartLoadingState = () => wrapper.findByTestId('group-coverage-chart-loading');
   const findLoadingState = () => wrapper.find(GlSkeletonLoading);
 
   const createComponent = ({ data = {} } = {}, withApollo = false) => {
@@ -50,7 +51,7 @@ describe('Test coverage table component', () => {
       };
     }
 
-    wrapper = mount(TestCoverageSummary, props);
+    wrapper = extendedWrapper(mount(TestCoverageSummary, props));
   };
 
   afterEach(() => {