1 files changed, 48 insertions, 4 deletions

diff --git a/spec/frontend/monitoring/components/charts/column_spec.js b/spec/frontend/monitoring/components/charts/column_spec.js
index f368cb7916c..89739a7485d 100644
--- a/spec/frontend/monitoring/components/charts/column_spec.js
+++ b/spec/frontend/monitoring/components/charts/column_spec.js
@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import timezoneMock from 'timezone-mock';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import ColumnChart from '~/monitoring/components/charts/column.vue';
 
@@ -18,10 +19,7 @@ const dataValues = [
 describe('Column component', () => {
   let wrapper;
 
-  const findChart = () => wrapper.find(GlColumnChart);
-  const chartProps = prop => findChart().props(prop);
-
-  beforeEach(() => {
+  const createWrapper = (props = {}) => {
     wrapper = shallowMount(ColumnChart, {
       propsData: {
         graphData: {
@@ -41,14 +39,60 @@ describe('Column component', () => {
             },
           ],
         },
+        ...props,
       },
     });
+  };
+  const findChart = () => wrapper.find(GlColumnChart);
+  const chartProps = prop => findChart().props(prop);
+
+  beforeEach(() => {
+    createWrapper();
   });
 
   afterEach(() => {
     wrapper.destroy();
   });
 
+  describe('xAxisLabel', () => {
+    const mockDate = Date.UTC(2020, 4, 26, 20); // 8:00 PM in GMT
+
+    const useXAxisFormatter = date => {
+      const { xAxis } = chartProps('option');
+      const { formatter } = xAxis.axisLabel;
+      return formatter(date);
+    };
+
+    it('x-axis is formatted correctly in AM/PM format', () => {
+      expect(useXAxisFormatter(mockDate)).toEqual('8:00 PM');
+    });
+
+    describe('when in PT timezone', () => {
+      beforeAll(() => {
+        timezoneMock.register('US/Pacific');
+      });
+
+      afterAll(() => {
+        timezoneMock.unregister();
+      });
+
+      it('by default, values are formatted in PT', () => {
+        createWrapper();
+        expect(useXAxisFormatter(mockDate)).toEqual('1:00 PM');
+      });
+
+      it('when the chart uses local timezone, y-axis is formatted in PT', () => {
+        createWrapper({ timezone: 'LOCAL' });
+        expect(useXAxisFormatter(mockDate)).toEqual('1:00 PM');
+      });
+
+      it('when the chart uses UTC, y-axis is formatted in UTC', () => {
+        createWrapper({ timezone: 'UTC' });
+        expect(useXAxisFormatter(mockDate)).toEqual('8:00 PM');
+      });
+    });
+  });
+
   describe('wrapped components', () => {
     describe('GitLab UI column chart', () => {
       it('is a Vue instance', () => {