diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-04 12:08:20 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-04 12:08:20 +0300 |
commit | d80f3cd75e700b6e62910865bfd36734644ffa89 (patch) | |
tree | aa2fa2f2b4385854c13591bef8e74924ef661657 /spec/frontend/monitoring/components/charts/column_spec.js | |
parent | be81c1578d65f25edfde8aa550f190b8d3e6d976 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/monitoring/components/charts/column_spec.js')
-rw-r--r-- | spec/frontend/monitoring/components/charts/column_spec.js | 59 |
1 files changed, 39 insertions, 20 deletions
diff --git a/spec/frontend/monitoring/components/charts/column_spec.js b/spec/frontend/monitoring/components/charts/column_spec.js index d6a96ffbd65..f368cb7916c 100644 --- a/spec/frontend/monitoring/components/charts/column_spec.js +++ b/spec/frontend/monitoring/components/charts/column_spec.js @@ -6,56 +6,75 @@ jest.mock('~/lib/utils/icon_utils', () => ({ getSvgIconPathContent: jest.fn().mockResolvedValue('mockSvgPathContent'), })); +const yAxisName = 'Y-axis mock name'; +const yAxisFormat = 'bytes'; +const yAxisPrecistion = 3; +const dataValues = [ + [1495700554.925, '8.0390625'], + [1495700614.925, '8.0390625'], + [1495700674.925, '8.0390625'], +]; + describe('Column component', () => { - let columnChart; + let wrapper; + + const findChart = () => wrapper.find(GlColumnChart); + const chartProps = prop => findChart().props(prop); beforeEach(() => { - columnChart = shallowMount(ColumnChart, { + wrapper = shallowMount(ColumnChart, { propsData: { graphData: { + yAxis: { + name: yAxisName, + format: yAxisFormat, + precision: yAxisPrecistion, + }, metrics: [ { - x_label: 'Time', - y_label: 'Usage', result: [ { metric: {}, - values: [ - [1495700554.925, '8.0390625'], - [1495700614.925, '8.0390625'], - [1495700674.925, '8.0390625'], - ], + values: dataValues, }, ], }, ], }, - containerWidth: 100, }, }); }); afterEach(() => { - columnChart.destroy(); + wrapper.destroy(); }); describe('wrapped components', () => { describe('GitLab UI column chart', () => { - let glColumnChart; + it('is a Vue instance', () => { + expect(findChart().isVueInstance()).toBe(true); + }); - beforeEach(() => { - glColumnChart = columnChart.find(GlColumnChart); + it('receives data properties needed for proper chart render', () => { + expect(chartProps('data').values).toEqual(dataValues); }); - it('is a Vue instance', () => { - expect(glColumnChart.isVueInstance()).toBe(true); + it('passes the y axis name correctly', () => { + expect(chartProps('yAxisTitle')).toBe(yAxisName); }); - it('receives data properties needed for proper chart render', () => { - const props = glColumnChart.props(); + it('passes the y axis configuration correctly', () => { + expect(chartProps('option').yAxis).toMatchObject({ + name: yAxisName, + axisLabel: { + formatter: expect.any(Function), + }, + scale: false, + }); + }); - expect(props.data).toBe(columnChart.vm.chartData); - expect(props.option).toBe(columnChart.vm.chartOptions); + it('passes a dataZoom configuration', () => { + expect(chartProps('option').dataZoom).toBeDefined(); }); }); }); |