Merge branch 'mrincon/move-time-picker-tests' into 'master'

Move date time picker tests to dashboard header spec

See merge request gitlab-org/gitlab!38543

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(() => {