1 files changed, 52 insertions, 23 deletions

diff --git a/spec/frontend/issue_show/components/incidents/incident_tabs_spec.js b/spec/frontend/issue_show/components/incidents/incident_tabs_spec.js
index c6200fd69bf..416870d1408 100644
--- a/spec/frontend/issue_show/components/incidents/incident_tabs_spec.js
+++ b/spec/frontend/issue_show/components/incidents/incident_tabs_spec.js
@@ -1,5 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
+import merge from 'lodash/merge';
 import { GlTab } from '@gitlab/ui';
+import waitForPromises from 'helpers/wait_for_promises';
 import INVALID_URL from '~/lib/utils/invalid_url';
 import IncidentTabs from '~/issue_show/components/incidents/incident_tabs.vue';
 import { descriptionProps } from '../../mock_data';
@@ -18,36 +20,45 @@ const mockAlert = {
 describe('Incident Tabs component', () => {
   let wrapper;
 
-  const mountComponent = (data = {}) => {
-    wrapper = shallowMount(IncidentTabs, {
-      propsData: {
-        ...descriptionProps,
-      },
-      stubs: {
-        DescriptionComponent: true,
-      },
-      provide: {
-        fullPath: '',
-        iid: '',
-      },
-      data() {
-        return { alert: mockAlert, ...data };
-      },
-      mocks: {
-        $apollo: {
-          queries: {
-            alert: {
-              loading: true,
+  const mountComponent = (data = {}, options = {}) => {
+    wrapper = shallowMount(
+      IncidentTabs,
+      merge(
+        {
+          propsData: {
+            ...descriptionProps,
+          },
+          stubs: {
+            DescriptionComponent: true,
+            MetricsTab: true,
+          },
+          provide: {
+            fullPath: '',
+            iid: '',
+            uploadMetricsFeatureAvailable: true,
+          },
+          data() {
+            return { alert: mockAlert, ...data };
+          },
+          mocks: {
+            $apollo: {
+              queries: {
+                alert: {
+                  loading: true,
+                },
+              },
             },
           },
         },
-      },
-    });
+        options,
+      ),
+    );
   };
 
   const findTabs = () => wrapper.findAll(GlTab);
   const findSummaryTab = () => findTabs().at(0);
-  const findAlertDetailsTab = () => findTabs().at(1);
+  const findMetricsTab = () => wrapper.find('[data-testid="metrics-tab"]');
+  const findAlertDetailsTab = () => wrapper.find('[data-testid="alert-details-tab"]');
   const findAlertDetailsComponent = () => wrapper.find(AlertDetailsTable);
   const findDescriptionComponent = () => wrapper.find(DescriptionComponent);
   const findHighlightBarComponent = () => wrapper.find(HighlightBar);
@@ -100,6 +111,24 @@ describe('Incident Tabs component', () => {
     });
   });
 
+  describe('upload metrics feature available', () => {
+    it('shows the metric tab when metrics are available', async () => {
+      mountComponent({}, { provide: { uploadMetricsFeatureAvailable: true } });
+
+      await waitForPromises();
+
+      expect(findMetricsTab().exists()).toBe(true);
+    });
+
+    it('hides the tab when metrics are not available', async () => {
+      mountComponent({}, { provide: { uploadMetricsFeatureAvailable: false } });
+
+      await waitForPromises();
+
+      expect(findMetricsTab().exists()).toBe(false);
+    });
+  });
+
   describe('Snowplow tracking', () => {
     beforeEach(() => {
       jest.spyOn(Tracking, 'event');