Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42

2 files changed, 70 insertions, 4 deletions

diff --git a/spec/frontend/vue_shared/alert_details/alert_details_spec.js b/spec/frontend/vue_shared/alert_details/alert_details_spec.js
index 7ee6e29e6de..7aa54a1c55a 100644
--- a/spec/frontend/vue_shared/alert_details/alert_details_spec.js
+++ b/spec/frontend/vue_shared/alert_details/alert_details_spec.js
@@ -12,12 +12,17 @@ import AlertSummaryRow from '~/vue_shared/alert_details/components/alert_summary
 import { PAGE_CONFIG, SEVERITY_LEVELS } from '~/vue_shared/alert_details/constants';
 import createIssueMutation from '~/vue_shared/alert_details/graphql/mutations/alert_issue_create.mutation.graphql';
 import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
+import MetricImagesTab from '~/vue_shared/components/metric_images/metric_images_tab.vue';
+import createStore from '~/vue_shared/components/metric_images/store/';
+import service from '~/vue_shared/alert_details/service';
 import mockAlerts from './mocks/alerts.json';
 
 const mockAlert = mockAlerts[0];
 const environmentName = 'Production';
 const environmentPath = '/fake/path';
 
+jest.mock('~/vue_shared/alert_details/service');
+
 describe('AlertDetails', () => {
   let environmentData = { name: environmentName, path: environmentPath };
   let mock;
@@ -67,9 +72,11 @@ describe('AlertDetails', () => {
           $route: { params: {} },
         },
         stubs: {
-          ...stubs,
           AlertSummaryRow,
+          'metric-images-tab': true,
+          ...stubs,
         },
+        store: createStore({}, service),
       }),
     );
   }
@@ -91,7 +98,7 @@ describe('AlertDetails', () => {
   const findEnvironmentName = () => wrapper.findByTestId('environmentName');
   const findEnvironmentPath = () => wrapper.findByTestId('environmentPath');
   const findDetailsTable = () => wrapper.findComponent(AlertDetailsTable);
-  const findMetricsTab = () => wrapper.findByTestId('metrics');
+  const findMetricsTab = () => wrapper.findComponent(MetricImagesTab);
 
   describe('Alert details', () => {
     describe('when alert is null', () => {
@@ -129,8 +136,21 @@ describe('AlertDetails', () => {
         expect(wrapper.findByTestId('startTimeItem').exists()).toBe(true);
         expect(wrapper.findByTestId('startTimeItem').props('time')).toBe(mockAlert.startedAt);
       });
+    });
+
+    describe('Metrics tab', () => {
+      it('should mount without errors', () => {
+        mountComponent({
+          mountMethod: mount,
+          provide: {
+            canUpdate: true,
+            iid: '1',
+          },
+          stubs: {
+            MetricImagesTab,
+          },
+        });
 
-      it('renders the metrics tab', () => {
         expect(findMetricsTab().exists()).toBe(true);
       });
     });
@@ -312,7 +332,9 @@ describe('AlertDetails', () => {
 
     describe('header', () => {
       const findHeader = () => wrapper.findByTestId('alert-header');
-      const stubs = { TimeAgoTooltip: { template: '<span>now</span>' } };
+      const stubs = {
+        TimeAgoTooltip: { template: '<span>now</span>' },
+      };
 
       describe('individual header fields', () => {
         describe.each`
diff --git a/spec/frontend/vue_shared/alert_details/service_spec.js b/spec/frontend/vue_shared/alert_details/service_spec.js
new file mode 100644
index 00000000000..790854d0ca7
--- /dev/null
+++ b/spec/frontend/vue_shared/alert_details/service_spec.js
@@ -0,0 +1,44 @@
+import { fileList, fileListRaw } from 'jest/vue_shared/components/metric_images/mock_data';
+import {
+  getMetricImages,
+  uploadMetricImage,
+  updateMetricImage,
+  deleteMetricImage,
+} from '~/vue_shared/alert_details/service';
+import * as alertManagementAlertsApi from '~/api/alert_management_alerts_api';
+
+jest.mock('~/api/alert_management_alerts_api');
+
+describe('Alert details service', () => {
+  it('fetches metric images', async () => {
+    alertManagementAlertsApi.fetchAlertMetricImages.mockResolvedValue({ data: fileListRaw });
+    const result = await getMetricImages();
+
+    expect(alertManagementAlertsApi.fetchAlertMetricImages).toHaveBeenCalled();
+    expect(result).toEqual(fileList);
+  });
+
+  it('uploads a metric image', async () => {
+    alertManagementAlertsApi.uploadAlertMetricImage.mockResolvedValue({ data: fileListRaw[0] });
+    const result = await uploadMetricImage();
+
+    expect(alertManagementAlertsApi.uploadAlertMetricImage).toHaveBeenCalled();
+    expect(result).toEqual(fileList[0]);
+  });
+
+  it('updates a metric image', async () => {
+    alertManagementAlertsApi.updateAlertMetricImage.mockResolvedValue({ data: fileListRaw[0] });
+    const result = await updateMetricImage();
+
+    expect(alertManagementAlertsApi.updateAlertMetricImage).toHaveBeenCalled();
+    expect(result).toEqual(fileList[0]);
+  });
+
+  it('deletes a metric image', async () => {
+    alertManagementAlertsApi.deleteAlertMetricImage.mockResolvedValue({ data: '' });
+    const result = await deleteMetricImage();
+
+    expect(alertManagementAlertsApi.deleteAlertMetricImage).toHaveBeenCalled();
+    expect(result).toEqual({});
+  });
+});