Move date time picker tests to dashboard header spec

As the date time picked is located in the dashboard header, the specs
should match. This also simplifies some store mocking.

spec/frontend/monitoring/components/dashboard_header_spec.js

@@ -2,6 +2,8 @@ import { shallowMount } from '@vue/test-utils';
 import { createStore } from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';
 import { GlDeprecatedDropdownItem, GlSearchBoxByType, GlLoadingIcon } from '@gitlab/ui';
+import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
+import RefreshButton from '~/monitoring/components/refresh_button.vue';
 import DashboardHeader from '~/monitoring/components/dashboard_header.vue';
 import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
 import DuplicateDashboardModal from '~/monitoring/components/duplicate_dashboard_modal.vue';
@@ -35,6 +37,9 @@ describe('Dashboard header', () => {
   const findEnvsDropdownSearchMsg = () => wrapper.find({ ref: 'monitorEnvironmentsDropdownMsg' });
   const findEnvsDropdownLoadingIcon = () => findEnvsDropdown().find(GlLoadingIcon);
 
+  const findDateTimePicker = () => wrapper.find(DateTimePicker);
+  const findRefreshButton = () => wrapper.find(RefreshButton);
+
   const findActionsMenu = () => wrapper.find('[data-testid="actions-menu"]');
   const findCreateDashboardMenuItem = () =>
     findActionsMenu().find('[data-testid="action-create-dashboard"]');
@@ -205,6 +210,59 @@ describe('Dashboard header', () => {
     });
   });
 
+  describe('date time picker', () => {
+    beforeEach(() => {
+      createShallowWrapper();
+    });
+
+    it('is rendered', () => {
+      expect(findDateTimePicker().exists()).toBe(true);
+    });
+
+    describe('timezone setting', () => {
+      const setupWithTimezone = value => {
+        store = createStore({ dashboardTimezone: value });
+        createShallowWrapper();
+      };
+
+      describe('local timezone is enabled by default', () => {
+        it('shows the data time picker in local timezone', () => {
+          expect(findDateTimePicker().props('utc')).toBe(false);
+        });
+      });
+
+      describe('when LOCAL timezone is enabled', () => {
+        beforeEach(() => {
+          setupWithTimezone('LOCAL');
+        });
+
+        it('shows the data time picker in local timezone', () => {
+          expect(findDateTimePicker().props('utc')).toBe(false);
+        });
+      });
+
+      describe('when UTC timezone is enabled', () => {
+        beforeEach(() => {
+          setupWithTimezone('UTC');
+        });
+
+        it('shows the data time picker in UTC format', () => {
+          expect(findDateTimePicker().props('utc')).toBe(true);
+        });
+      });
+    });
+  });
+
+  describe('refresh button', () => {
+    beforeEach(() => {
+      createShallowWrapper();
+    });
+
+    it('is rendered', () => {
+      expect(findRefreshButton().exists()).toBe(true);
+    });
+  });
+
   describe('when a dashboard has been duplicated in the duplicate dashboard modal', () => {
     beforeEach(() => {
       store.state.monitoringDashboard.projectPath = 'root/sandbox';

spec/frontend/monitoring/components/dashboard_spec.js

@@ -10,8 +10,6 @@ import { dashboardEmptyStates, metricStates } from '~/monitoring/constants';
 import Dashboard from '~/monitoring/components/dashboard.vue';
 
 import DashboardHeader from '~/monitoring/components/dashboard_header.vue';
-import RefreshButton from '~/monitoring/components/refresh_button.vue';
-import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue';
 import EmptyState from '~/monitoring/components/empty_state.vue';
 import GroupEmptyState from '~/monitoring/components/group_empty_state.vue';
@@ -449,7 +447,7 @@ describe('Dashboard', () => {
   });
 
   describe('star dashboards', () => {
-    const findToggleStar = () => wrapper.find(DashboardHeader).find({ ref: 'toggleStarBtn' });
+    const findToggleStar = () => findDashboardHeader().find({ ref: 'toggleStarBtn' });
     const findToggleStarIcon = () => findToggleStar().find(GlIcon);
 
     beforeEach(() => {
@@ -527,28 +525,6 @@ describe('Dashboard', () => {
     });
   });
 
-  it('renders the datetimepicker dropdown', () => {
-    createMountedWrapper({ hasMetrics: true });
-
-    setupStoreWithData(store);
-
-    return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.find(DateTimePicker).exists()).toBe(true);
-    });
-  });
-
-  it('renders the refresh dashboard button', () => {
-    createMountedWrapper({ hasMetrics: true });
-
-    setupStoreWithData(store);
-
-    return wrapper.vm.$nextTick().then(() => {
-      const refreshBtn = wrapper.find(DashboardHeader).find(RefreshButton);
-
-      expect(refreshBtn.exists()).toBe(true);
-    });
-  });
-
   describe('variables section', () => {
     beforeEach(() => {
       createShallowWrapper({ hasMetrics: true });
@@ -806,57 +782,6 @@ describe('Dashboard', () => {
     });
   });
 
-  describe('dashboard timezone', () => {
-    const setupWithTimezone = value => {
-      store = createStore({ dashboardTimezone: value });
-      setupStoreWithData(store);
-      createShallowWrapper({ hasMetrics: true });
-      return wrapper.vm.$nextTick;
-    };
-
-    describe('local timezone is enabled by default', () => {
-      beforeEach(() => {
-        return setupWithTimezone();
-      });
-
-      it('shows the data time picker in local timezone', () => {
-        expect(
-          findDashboardHeader()
-            .find(DateTimePicker)
-            .props('utc'),
-        ).toBe(false);
-      });
-    });
-
-    describe('when LOCAL timezone is enabled', () => {
-      beforeEach(() => {
-        return setupWithTimezone('LOCAL');
-      });
-
-      it('shows the data time picker in local timezone', () => {
-        expect(
-          findDashboardHeader()
-            .find(DateTimePicker)
-            .props('utc'),
-        ).toBe(false);
-      });
-    });
-
-    describe('when UTC timezone is enabled', () => {
-      beforeEach(() => {
-        return setupWithTimezone('UTC');
-      });
-
-      it('shows the data time picker in UTC format', () => {
-        expect(
-          findDashboardHeader()
-            .find(DateTimePicker)
-            .props('utc'),
-        ).toBe(true);
-      });
-    });
-  });
-
   describe('cluster health', () => {
     beforeEach(() => {
       createShallowWrapper({ hasMetrics: true, showHeader: false });
@@ -1039,7 +964,7 @@ describe('Dashboard', () => {
   });
 
   describe('add custom metrics', () => {
-    const findAddMetricButton = () => wrapper.find(DashboardHeader).find({ ref: 'addMetricBtn' });
+    const findAddMetricButton = () => findDashboardHeader().find({ ref: 'addMetricBtn' });
 
     describe('when not available', () => {
       beforeEach(() => {