Add specs and add i18njivanvl-add-chart-empty-state

This updates the pot file to include the `no data to display`
string, also this adds specs for the panel_type component
as well

3 files changed, 48 insertions, 1 deletions

diff --git a/app/assets/javascripts/monitoring/components/charts/empty_chart.vue b/app/assets/javascripts/monitoring/components/charts/empty_chart.vue
index 14be1a7d5b9..73682adc4ee 100644
--- a/app/assets/javascripts/monitoring/components/charts/empty_chart.vue
+++ b/app/assets/javascripts/monitoring/components/charts/empty_chart.vue
@@ -36,6 +36,6 @@ export default {
       :style="svgContainerStyle"
       v-html="chartEmptyStateIllustration"
     ></div>
-    <h5 class="text-center prepend-top-8">No data to display</h5>
+    <h5 class="text-center prepend-top-8">{{ __('No data to display') }}</h5>
   </div>
 </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index bd26ca6714d..00c2afd9c37 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -6917,6 +6917,9 @@ msgstr ""
 msgid "No data found"
 msgstr ""
 
+msgid "No data to display"
+msgstr ""
+
 msgid "No details available"
 msgstr ""
 
diff --git a/spec/javascripts/monitoring/panel_type_spec.js b/spec/javascripts/monitoring/panel_type_spec.js
new file mode 100644
index 00000000000..8ce24041e97
--- /dev/null
+++ b/spec/javascripts/monitoring/panel_type_spec.js
@@ -0,0 +1,44 @@
+import { shallowMount } from '@vue/test-utils';
+import PanelType from '~/monitoring/components/panel_type.vue';
+import EmptyChart from '~/monitoring/components/charts/empty_chart.vue';
+import { graphDataPrometheusQueryRange } from './mock_data';
+
+describe('Panel Type component', () => {
+  let panelType;
+  const dashboardWidth = 100;
+
+  describe('When no graphData is available', () => {
+    let glEmptyChart;
+    const graphDataNoResult = graphDataPrometheusQueryRange;
+    graphDataNoResult.queries[0].result = [];
+
+    beforeEach(() => {
+      panelType = shallowMount(PanelType, {
+        propsData: {
+          dashboardWidth,
+          graphData: graphDataNoResult,
+        },
+      });
+    });
+
+    afterEach(() => {
+      panelType.destroy();
+    });
+
+    describe('Empty Chart component', () => {
+      beforeEach(() => {
+        glEmptyChart = panelType.find(EmptyChart);
+      });
+
+      it('is a Vue instance', () => {
+        expect(glEmptyChart.isVueInstance()).toBe(true);
+      });
+
+      it('it receives a graph title', () => {
+        const props = glEmptyChart.props();
+
+        expect(props.graphTitle).toBe(panelType.vm.graphData.title);
+      });
+    });
+  });
+});