Add latest changes from gitlab-org/gitlab@master

5 files changed, 152 insertions, 16 deletions

diff --git a/spec/frontend/monitoring/components/charts/time_series_spec.js b/spec/frontend/monitoring/components/charts/time_series_spec.js
index c05bf1a547d..7d5a08bc4a1 100644
--- a/spec/frontend/monitoring/components/charts/time_series_spec.js
+++ b/spec/frontend/monitoring/components/charts/time_series_spec.js
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import { setTestTimeout } from 'helpers/timeout';
 import { GlLink } from '@gitlab/ui';
 import { TEST_HOST } from 'jest/helpers/test_constants';
@@ -11,7 +11,7 @@ import {
 import { cloneDeep } from 'lodash';
 import { shallowWrapperContainsSlotText } from 'helpers/vue_test_utils_helper';
 import { createStore } from '~/monitoring/stores';
-import { panelTypes } from '~/monitoring/constants';
+import { panelTypes, chartHeight } from '~/monitoring/constants';
 import TimeSeries from '~/monitoring/components/charts/time_series.vue';
 import * as types from '~/monitoring/stores/mutation_types';
 import { deploymentData, mockProjectDir, annotationsData } from '../../mock_data';
@@ -40,10 +40,10 @@ describe('Time series component', () => {
   let mockGraphData;
   let store;
 
-  const makeTimeSeriesChart = (graphData, type) =>
-    mount(TimeSeries, {
+  const createWrapper = (graphData = mockGraphData, mountingMethod = shallowMount) =>
+    mountingMethod(TimeSeries, {
       propsData: {
-        graphData: { ...graphData, type },
+        graphData,
         deploymentData: store.state.monitoringDashboard.deploymentData,
         annotations: store.state.monitoringDashboard.annotations,
         projectPath: `${TEST_HOST}${mockProjectDir}`,
@@ -80,9 +80,9 @@ describe('Time series component', () => {
 
       const findChart = () => timeSeriesChart.find({ ref: 'chart' });
 
-      beforeEach(done => {
-        timeSeriesChart = makeTimeSeriesChart(mockGraphData, 'area-chart');
-        timeSeriesChart.vm.$nextTick(done);
+      beforeEach(() => {
+        timeSeriesChart = createWrapper(mockGraphData, mount);
+        return timeSeriesChart.vm.$nextTick();
       });
 
       it('allows user to override max value label text using prop', () => {
@@ -101,6 +101,21 @@ describe('Time series component', () => {
         });
       });
 
+      it('chart sets a default height', () => {
+        const wrapper = createWrapper();
+        expect(wrapper.props('height')).toBe(chartHeight);
+      });
+
+      it('chart has a configurable height', () => {
+        const mockHeight = 599;
+        const wrapper = createWrapper();
+
+        wrapper.setProps({ height: mockHeight });
+        return wrapper.vm.$nextTick().then(() => {
+          expect(wrapper.props('height')).toBe(mockHeight);
+        });
+      });
+
       describe('events', () => {
         describe('datazoom', () => {
           let eChartMock;
@@ -126,7 +141,7 @@ describe('Time series component', () => {
               }),
             };
 
-            timeSeriesChart = makeTimeSeriesChart(mockGraphData);
+            timeSeriesChart = createWrapper(mockGraphData, mount);
             timeSeriesChart.vm.$nextTick(() => {
               findChart().vm.$emit('created', eChartMock);
               done();
@@ -551,7 +566,10 @@ describe('Time series component', () => {
           const findChartComponent = () => timeSeriesAreaChart.find(dynamicComponent.component);
 
           beforeEach(done => {
-            timeSeriesAreaChart = makeTimeSeriesChart(mockGraphData, dynamicComponent.chartType);
+            timeSeriesAreaChart = createWrapper(
+              { ...mockGraphData, type: dynamicComponent.chartType },
+              mount,
+            );
             timeSeriesAreaChart.vm.$nextTick(done);
           });
 
@@ -633,7 +651,7 @@ describe('Time series component', () => {
           Object.assign(metric, { result: metricResultStatus.result }),
         );
 
-        timeSeriesChart = makeTimeSeriesChart(graphData, 'area-chart');
+        timeSeriesChart = createWrapper({ ...graphData, type: 'area-chart' }, mount);
         timeSeriesChart.vm.$nextTick(done);
       });
 
diff --git a/spec/frontend/monitoring/components/dashboard_panel_spec.js b/spec/frontend/monitoring/components/dashboard_panel_spec.js
index 3c0292e016d..d440c063dd4 100644
--- a/spec/frontend/monitoring/components/dashboard_panel_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_panel_spec.js
@@ -52,11 +52,11 @@ describe('Dashboard Panel', () => {
   const exampleText = 'example_text';
 
   const findCopyLink = () => wrapper.find({ ref: 'copyChartLink' });
-  const findTimeChart = () => wrapper.find({ ref: 'timeChart' });
+  const findTimeChart = () => wrapper.find({ ref: 'timeSeriesChart' });
   const findTitle = () => wrapper.find({ ref: 'graphTitle' });
   const findContextualMenu = () => wrapper.find({ ref: 'contextualMenu' });
 
-  const createWrapper = props => {
+  const createWrapper = (props, options = {}) => {
     wrapper = shallowMount(DashboardPanel, {
       propsData: {
         graphData,
@@ -64,6 +64,7 @@ describe('Dashboard Panel', () => {
       },
       store,
       mocks,
+      ...options,
     });
   };
 
@@ -80,6 +81,22 @@ describe('Dashboard Panel', () => {
     axiosMock.reset();
   });
 
+  describe('Renders slots', () => {
+    it('renders "topLeft" slot', () => {
+      createWrapper(
+        {},
+        {
+          slots: {
+            topLeft: `<div class="top-left-content">OK</div>`,
+          },
+        },
+      );
+
+      expect(wrapper.find('.top-left-content').exists()).toBe(true);
+      expect(wrapper.find('.top-left-content').text()).toBe('OK');
+    });
+  });
+
   describe('When no graphData is available', () => {
     beforeEach(() => {
       createWrapper({
@@ -111,7 +128,7 @@ describe('Dashboard Panel', () => {
     });
   });
 
-  describe('when graph data is available', () => {
+  describe('When graphData is available', () => {
     beforeEach(() => {
       createWrapper();
     });
@@ -182,10 +199,13 @@ describe('Dashboard Panel', () => {
         ${singleStatMetricsResult}                 | ${MonitorSingleStatChart}
         ${graphDataPrometheusQueryRangeMultiTrack} | ${MonitorHeatmapChart}
         ${barMockData}                             | ${MonitorBarChart}
-      `('type $data.type renders the expected component', ({ data, component }) => {
-        createWrapper({ graphData: data });
+      `('wrapps a $data.type component binding attributes', ({ data, component }) => {
+        const attrs = { attr1: 'attr1Value', attr2: 'attr2Value' };
+        createWrapper({ graphData: data }, { attrs });
+
         expect(wrapper.find(component).exists()).toBe(true);
         expect(wrapper.find(component).isVueInstance()).toBe(true);
+        expect(wrapper.find(component).attributes()).toMatchObject(attrs);
       });
     });
   });
@@ -436,6 +456,32 @@ describe('Dashboard Panel', () => {
     });
   });
 
+  describe('Expand to full screen', () => {
+    const findExpandBtn = () => wrapper.find({ ref: 'expandBtn' });
+
+    describe('when there is no @expand listener', () => {
+      it('does not show `View full screen` option', () => {
+        createWrapper();
+        expect(findExpandBtn().exists()).toBe(false);
+      });
+    });
+
+    describe('when there is an @expand listener', () => {
+      beforeEach(() => {
+        createWrapper({}, { listeners: { expand: () => {} } });
+      });
+
+      it('shows the `expand` option', () => {
+        expect(findExpandBtn().exists()).toBe(true);
+      });
+
+      it('emits the `expand` event', () => {
+        findExpandBtn().vm.$emit('click');
+        expect(wrapper.emitted('expand')).toHaveLength(1);
+      });
+    });
+  });
+
   describe('panel alerts', () => {
     const setMetricsSavedToDb = val =>
       monitoringDashboard.getters.metricsSavedToDb.mockReturnValue(val);
diff --git a/spec/frontend/monitoring/store/utils_spec.js b/spec/frontend/monitoring/store/utils_spec.js
index 7ee2a16b4bd..fe5754e1216 100644
--- a/spec/frontend/monitoring/store/utils_spec.js
+++ b/spec/frontend/monitoring/store/utils_spec.js
@@ -27,6 +27,7 @@ describe('mapToDashboardViewModel', () => {
           group: 'Group 1',
           panels: [
             {
+              id: 'ID_ABC',
               title: 'Title A',
               xLabel: '',
               xAxis: {
@@ -49,6 +50,7 @@ describe('mapToDashboardViewModel', () => {
           key: 'group-1-0',
           panels: [
             {
+              id: 'ID_ABC',
               title: 'Title A',
               type: 'chart-type',
               xLabel: '',
@@ -127,11 +129,13 @@ describe('mapToDashboardViewModel', () => {
 
     it('panel with x_label', () => {
       setupWithPanel({
+        id: 'ID_123',
         title: panelTitle,
         x_label: 'x label',
       });
 
       expect(getMappedPanel()).toEqual({
+        id: 'ID_123',
         title: panelTitle,
         xLabel: 'x label',
         xAxis: {
@@ -149,10 +153,12 @@ describe('mapToDashboardViewModel', () => {
 
     it('group y_axis defaults', () => {
       setupWithPanel({
+        id: 'ID_456',
         title: panelTitle,
       });
 
       expect(getMappedPanel()).toEqual({
+        id: 'ID_456',
         title: panelTitle,
         xLabel: '',
         y_label: '',
diff --git a/spec/frontend/reports/components/__snapshots__/issue_status_icon_spec.js.snap b/spec/frontend/reports/components/__snapshots__/issue_status_icon_spec.js.snap
new file mode 100644
index 00000000000..70e1ff01323
--- /dev/null
+++ b/spec/frontend/reports/components/__snapshots__/issue_status_icon_spec.js.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IssueStatusIcon renders "failed" state correctly 1`] = `
+<div
+  class="report-block-list-icon failed"
+>
+  <icon-stub
+    data-qa-selector="status_failed_icon"
+    name="status_failed_borderless"
+    size="24"
+  />
+</div>
+`;
+
+exports[`IssueStatusIcon renders "neutral" state correctly 1`] = `
+<div
+  class="report-block-list-icon neutral"
+>
+  <icon-stub
+    data-qa-selector="status_neutral_icon"
+    name="dash"
+    size="24"
+  />
+</div>
+`;
+
+exports[`IssueStatusIcon renders "success" state correctly 1`] = `
+<div
+  class="report-block-list-icon success"
+>
+  <icon-stub
+    data-qa-selector="status_success_icon"
+    name="status_success_borderless"
+    size="24"
+  />
+</div>
+`;
diff --git a/spec/frontend/reports/components/issue_status_icon_spec.js b/spec/frontend/reports/components/issue_status_icon_spec.js
new file mode 100644
index 00000000000..3a55ff0a9e3
--- /dev/null
+++ b/spec/frontend/reports/components/issue_status_icon_spec.js
@@ -0,0 +1,29 @@
+import { shallowMount } from '@vue/test-utils';
+import ReportItem from '~/reports/components/issue_status_icon.vue';
+import { STATUS_FAILED, STATUS_NEUTRAL, STATUS_SUCCESS } from '~/reports/constants';
+
+describe('IssueStatusIcon', () => {
+  let wrapper;
+
+  const createComponent = ({ status }) => {
+    wrapper = shallowMount(ReportItem, {
+      propsData: {
+        status,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it.each([STATUS_SUCCESS, STATUS_NEUTRAL, STATUS_FAILED])(
+    'renders "%s" state correctly',
+    status => {
+      createComponent({ status });
+
+      expect(wrapper.element).toMatchSnapshot();
+    },
+  );
+});