1 files changed, 62 insertions, 10 deletions

diff --git a/spec/frontend/monitoring/components/panel_type_spec.js b/spec/frontend/monitoring/components/panel_type_spec.js
index 927d93ab697..782a276a91b 100644
--- a/spec/frontend/monitoring/components/panel_type_spec.js
+++ b/spec/frontend/monitoring/components/panel_type_spec.js
@@ -8,8 +8,17 @@ import PanelType from '~/monitoring/components/panel_type.vue';
 import EmptyChart from '~/monitoring/components/charts/empty_chart.vue';
 import TimeSeriesChart from '~/monitoring/components/charts/time_series.vue';
 import AnomalyChart from '~/monitoring/components/charts/anomaly.vue';
-import { anomalyMockGraphData, graphDataPrometheusQueryRange } from 'jest/monitoring/mock_data';
-import { createStore } from '~/monitoring/stores';
+import {
+  anomalyMockGraphData,
+  graphDataPrometheusQueryRange,
+  mockLogsHref,
+  mockLogsPath,
+  mockNamespace,
+  mockNamespacedData,
+  mockTimeRange,
+} from 'jest/monitoring/mock_data';
+import { createStore, monitoringDashboard } from '~/monitoring/stores';
+import { createStore as createEmbedGroupStore } from '~/monitoring/stores/embed_group';
 
 global.IS_EE = true;
 global.URL.createObjectURL = jest.fn();
@@ -29,6 +38,7 @@ describe('Panel Type component', () => {
   const exampleText = 'example_text';
 
   const findCopyLink = () => wrapper.find({ ref: 'copyChartLink' });
+  const findTimeChart = () => wrapper.find({ ref: 'timeChart' });
 
   const createWrapper = props => {
     wrapper = shallowMount(PanelType, {
@@ -99,8 +109,6 @@ describe('Panel Type component', () => {
   });
 
   describe('when graph data is available', () => {
-    const findTimeChart = () => wrapper.find({ ref: 'timeChart' });
-
     beforeEach(() => {
       createWrapper({
         graphData: graphDataPrometheusQueryRange,
@@ -242,10 +250,6 @@ describe('Panel Type component', () => {
   });
 
   describe('View Logs dropdown item', () => {
-    const mockLogsPath = '/path/to/logs';
-    const mockTimeRange = { duration: { seconds: 120 } };
-
-    const findTimeChart = () => wrapper.find({ ref: 'timeChart' });
     const findViewLogsLink = () => wrapper.find({ ref: 'viewLogsLink' });
 
     beforeEach(() => {
@@ -292,8 +296,7 @@ describe('Panel Type component', () => {
       state.timeRange = mockTimeRange;
 
       return wrapper.vm.$nextTick(() => {
-        const href = `${mockLogsPath}?duration_seconds=${mockTimeRange.duration.seconds}`;
-        expect(findViewLogsLink().attributes('href')).toMatch(href);
+        expect(findViewLogsLink().attributes('href')).toMatch(mockLogsHref);
       });
     });
 
@@ -388,4 +391,53 @@ describe('Panel Type component', () => {
       });
     });
   });
+
+  describe('when using dynamic modules', () => {
+    const { mockDeploymentData, mockProjectPath } = mockNamespacedData;
+
+    beforeEach(() => {
+      store = createEmbedGroupStore();
+      store.registerModule(mockNamespace, monitoringDashboard);
+      store.state.embedGroup.modules.push(mockNamespace);
+
+      wrapper = shallowMount(PanelType, {
+        propsData: {
+          graphData: graphDataPrometheusQueryRange,
+          namespace: mockNamespace,
+        },
+        store,
+        mocks,
+      });
+    });
+
+    it('handles namespaced time range and logs path state', () => {
+      store.state[mockNamespace].timeRange = mockTimeRange;
+      store.state[mockNamespace].logsPath = mockLogsPath;
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find({ ref: 'viewLogsLink' }).attributes().href).toBe(mockLogsHref);
+      });
+    });
+
+    it('handles namespaced deployment data state', () => {
+      store.state[mockNamespace].deploymentData = mockDeploymentData;
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findTimeChart().props().deploymentData).toEqual(mockDeploymentData);
+      });
+    });
+
+    it('handles namespaced project path state', () => {
+      store.state[mockNamespace].projectPath = mockProjectPath;
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findTimeChart().props().projectPath).toBe(mockProjectPath);
+      });
+    });
+
+    it('it renders a time series chart with no errors', () => {
+      expect(wrapper.find(TimeSeriesChart).isVueInstance()).toBe(true);
+      expect(wrapper.find(TimeSeriesChart).exists()).toBe(true);
+    });
+  });
 });