diff options
Diffstat (limited to 'spec/frontend/monitoring/components/charts/heatmap_spec.js')
-rw-r--r-- | spec/frontend/monitoring/components/charts/heatmap_spec.js | 107 |
1 files changed, 70 insertions, 37 deletions
diff --git a/spec/frontend/monitoring/components/charts/heatmap_spec.js b/spec/frontend/monitoring/components/charts/heatmap_spec.js index 5e2c1932e9e..2a1c78025ae 100644 --- a/spec/frontend/monitoring/components/charts/heatmap_spec.js +++ b/spec/frontend/monitoring/components/charts/heatmap_spec.js @@ -1,68 +1,101 @@ import { shallowMount } from '@vue/test-utils'; import { GlHeatmap } from '@gitlab/ui/dist/charts'; +import timezoneMock from 'timezone-mock'; import Heatmap from '~/monitoring/components/charts/heatmap.vue'; import { graphDataPrometheusQueryRangeMultiTrack } from '../../mock_data'; describe('Heatmap component', () => { - let heatmapChart; + let wrapper; let store; - beforeEach(() => { - heatmapChart = shallowMount(Heatmap, { + const findChart = () => wrapper.find(GlHeatmap); + + const createWrapper = (props = {}) => { + wrapper = shallowMount(Heatmap, { propsData: { graphData: graphDataPrometheusQueryRangeMultiTrack, containerWidth: 100, + ...props, }, store, }); - }); + }; - afterEach(() => { - heatmapChart.destroy(); - }); + describe('wrapped chart', () => { + let glHeatmapChart; - describe('wrapped components', () => { - describe('GitLab UI heatmap chart', () => { - let glHeatmapChart; + beforeEach(() => { + createWrapper(); + glHeatmapChart = findChart(); + }); - beforeEach(() => { - glHeatmapChart = heatmapChart.find(GlHeatmap); - }); + afterEach(() => { + wrapper.destroy(); + }); - it('is a Vue instance', () => { - expect(glHeatmapChart.isVueInstance()).toBe(true); - }); + it('is a Vue instance', () => { + expect(glHeatmapChart.isVueInstance()).toBe(true); + }); - it('should display a label on the x axis', () => { - expect(heatmapChart.vm.xAxisName).toBe(graphDataPrometheusQueryRangeMultiTrack.x_label); - }); + it('should display a label on the x axis', () => { + expect(wrapper.vm.xAxisName).toBe(graphDataPrometheusQueryRangeMultiTrack.x_label); + }); - it('should display a label on the y axis', () => { - expect(heatmapChart.vm.yAxisName).toBe(graphDataPrometheusQueryRangeMultiTrack.y_label); - }); + it('should display a label on the y axis', () => { + expect(wrapper.vm.yAxisName).toBe(graphDataPrometheusQueryRangeMultiTrack.y_label); + }); - // According to the echarts docs https://echarts.apache.org/en/option.html#series-heatmap.data - // each row of the heatmap chart is represented by an array inside another parent array - // e.g. [[0, 0, 10]], the format represents the column, the row and finally the value - // corresponding to the cell + // According to the echarts docs https://echarts.apache.org/en/option.html#series-heatmap.data + // each row of the heatmap chart is represented by an array inside another parent array + // e.g. [[0, 0, 10]], the format represents the column, the row and finally the value + // corresponding to the cell - it('should return chartData with a length of x by y, with a length of 3 per array', () => { - const row = heatmapChart.vm.chartData[0]; + it('should return chartData with a length of x by y, with a length of 3 per array', () => { + const row = wrapper.vm.chartData[0]; - expect(row.length).toBe(3); - expect(heatmapChart.vm.chartData.length).toBe(30); - }); + expect(row.length).toBe(3); + expect(wrapper.vm.chartData.length).toBe(30); + }); + + it('returns a series of labels for the x axis', () => { + const { xAxisLabels } = wrapper.vm; + + expect(xAxisLabels.length).toBe(5); + }); - it('returns a series of labels for the x axis', () => { - const { xAxisLabels } = heatmapChart.vm; + describe('y axis labels', () => { + const gmtLabels = ['3:00 PM', '4:00 PM', '5:00 PM', '6:00 PM', '7:00 PM', '8:00 PM']; - expect(xAxisLabels.length).toBe(5); + it('y-axis labels are formatted in AM/PM format', () => { + expect(findChart().props('yAxisLabels')).toEqual(gmtLabels); }); - it('returns a series of labels for the y axis', () => { - const { yAxisLabels } = heatmapChart.vm; + describe('when in PT timezone', () => { + const ptLabels = ['8:00 AM', '9:00 AM', '10:00 AM', '11:00 AM', '12:00 PM', '1:00 PM']; + const utcLabels = gmtLabels; // Identical in this case + + beforeAll(() => { + timezoneMock.register('US/Pacific'); + }); + + afterAll(() => { + timezoneMock.unregister(); + }); + + it('by default, y-axis is formatted in PT', () => { + createWrapper(); + expect(findChart().props('yAxisLabels')).toEqual(ptLabels); + }); + + it('when the chart uses local timezone, y-axis is formatted in PT', () => { + createWrapper({ timezone: 'LOCAL' }); + expect(findChart().props('yAxisLabels')).toEqual(ptLabels); + }); - expect(yAxisLabels.length).toBe(6); + it('when the chart uses UTC, y-axis is formatted in UTC', () => { + createWrapper({ timezone: 'UTC' }); + expect(findChart().props('yAxisLabels')).toEqual(utcLabels); + }); }); }); }); |