1 files changed, 20 insertions, 10 deletions

diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js
index 9c94925c817..98c7856a61a 100644
--- a/spec/frontend/projects/pipelines/charts/components/app_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js
@@ -13,6 +13,7 @@ jest.mock('~/lib/utils/url_utility');
 
 const DeploymentFrequencyChartsStub = { name: 'DeploymentFrequencyCharts', render: () => {} };
 const LeadTimeChartsStub = { name: 'LeadTimeCharts', render: () => {} };
+const TimeToRestoreServiceChartsStub = { name: 'TimeToRestoreServiceCharts', render: () => {} };
 const ProjectQualitySummaryStub = { name: 'ProjectQualitySummary', render: () => {} };
 
 describe('ProjectsPipelinesChartsApp', () => {
@@ -31,6 +32,7 @@ describe('ProjectsPipelinesChartsApp', () => {
           stubs: {
             DeploymentFrequencyCharts: DeploymentFrequencyChartsStub,
             LeadTimeCharts: LeadTimeChartsStub,
+            TimeToRestoreServiceCharts: TimeToRestoreServiceChartsStub,
             ProjectQualitySummary: ProjectQualitySummaryStub,
           },
         },
@@ -47,6 +49,7 @@ describe('ProjectsPipelinesChartsApp', () => {
   const findAllGlTabs = () => wrapper.findAll(GlTab);
   const findGlTabAtIndex = (index) => findAllGlTabs().at(index);
   const findLeadTimeCharts = () => wrapper.find(LeadTimeChartsStub);
+  const findTimeToRestoreServiceCharts = () => wrapper.find(TimeToRestoreServiceChartsStub);
   const findDeploymentFrequencyCharts = () => wrapper.find(DeploymentFrequencyChartsStub);
   const findPipelineCharts = () => wrapper.find(PipelineCharts);
   const findProjectQualitySummary = () => wrapper.find(ProjectQualitySummaryStub);
@@ -62,6 +65,7 @@ describe('ProjectsPipelinesChartsApp', () => {
       expect(findGlTabAtIndex(0).attributes('title')).toBe('Pipelines');
       expect(findGlTabAtIndex(1).attributes('title')).toBe('Deployment frequency');
       expect(findGlTabAtIndex(2).attributes('title')).toBe('Lead time');
+      expect(findGlTabAtIndex(3).attributes('title')).toBe('Time to restore service');
     });
 
     it('renders the pipeline charts', () => {
@@ -76,6 +80,10 @@ describe('ProjectsPipelinesChartsApp', () => {
       expect(findLeadTimeCharts().exists()).toBe(true);
     });
 
+    it('renders the time to restore service charts', () => {
+      expect(findTimeToRestoreServiceCharts().exists()).toBe(true);
+    });
+
     it('renders the project quality summary', () => {
       expect(findProjectQualitySummary().exists()).toBe(true);
     });
@@ -123,10 +131,11 @@ describe('ProjectsPipelinesChartsApp', () => {
 
     describe('event tracking', () => {
       it.each`
-        testId                        | event
-        ${'pipelines-tab'}            | ${'p_analytics_ci_cd_pipelines'}
-        ${'deployment-frequency-tab'} | ${'p_analytics_ci_cd_deployment_frequency'}
-        ${'lead-time-tab'}            | ${'p_analytics_ci_cd_lead_time'}
+        testId                           | event
+        ${'pipelines-tab'}               | ${'p_analytics_ci_cd_pipelines'}
+        ${'deployment-frequency-tab'}    | ${'p_analytics_ci_cd_deployment_frequency'}
+        ${'lead-time-tab'}               | ${'p_analytics_ci_cd_lead_time'}
+        ${'time-to-restore-service-tab'} | ${'p_analytics_ci_cd_time_to_restore_service'}
       `('tracks the $event event when clicked', ({ testId, event }) => {
         jest.spyOn(API, 'trackRedisHllUserEvent');
 
@@ -141,12 +150,13 @@ describe('ProjectsPipelinesChartsApp', () => {
 
   describe('when provided with a query param', () => {
     it.each`
-      chart                     | tab
-      ${'lead-time'}            | ${'2'}
-      ${'deployment-frequency'} | ${'1'}
-      ${'pipelines'}            | ${'0'}
-      ${'fake'}                 | ${'0'}
-      ${''}                     | ${'0'}
+      chart                        | tab
+      ${'time-to-restore-service'} | ${'3'}
+      ${'lead-time'}               | ${'2'}
+      ${'deployment-frequency'}    | ${'1'}
+      ${'pipelines'}               | ${'0'}
+      ${'fake'}                    | ${'0'}
+      ${''}                        | ${'0'}
     `('shows the correct tab for URL parameter "$chart"', ({ chart, tab }) => {
       setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts?chart=${chart}`);
       getParameterValues.mockImplementation((name) => {