import Vue from 'vue'; import BarChart from '~/vue_shared/components/bar_chart.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; function getRandomArbitrary(min, max) { return Math.random() * (max - min) + min; } function generateRandomData(dataNumber) { const randomGraphData = []; for (let i = 1; i <= dataNumber; i += 1) { randomGraphData.push({ name: `random ${i}`, value: parseInt(getRandomArbitrary(1, 8), 10), }); } return randomGraphData; } describe('Bar chart component', () => { let barChart; const graphData = generateRandomData(10); beforeEach(() => { const BarChartComponent = Vue.extend(BarChart); barChart = mountComponent(BarChartComponent, { graphData, yAxisLabel: 'data', }); }); afterEach(() => { barChart.$destroy(); }); it('calculates the padding for even distribution across bars', () => { barChart.vbWidth = 1000; const result = barChart.calculatePadding(30); // since padding can't be higher than 1 and lower than 0 // for more info: https://github.com/d3/d3-scale#band-scales expect(result).not.toBeLessThan(0); expect(result).not.toBeGreaterThan(1); }); it('formats the tooltip title', () => { const tooltipTitle = barChart.setTooltipTitle(barChart.graphData[0]); expect(tooltipTitle).toContain('random 1:'); }); it('has a translates the bar graphs on across the X axis', () => { barChart.panX = 100; expect(barChart.barTranslationTransform).toEqual('translate(100, 0)'); }); it('translates the scroll indicator to the far right side', () => { barChart.vbWidth = 500; expect(barChart.scrollIndicatorTransform).toEqual('translate(420, 0)'); }); it('translates the x-axis to the bottom of the viewbox and pan coordinates', () => { barChart.panX = 100; barChart.vbHeight = 250; expect(barChart.xAxisLocation).toEqual('translate(100, 250)'); }); it('Contains a total of 4 ticks across the y axis', () => { const ticks = barChart.$el.querySelector('.y-axis').querySelectorAll('.tick').length; expect(ticks).toEqual(4); }); it('rotates the x axis labels a total of 90 degress (CCW)', () => { const xAxisLabel = barChart.$el.querySelector('.x-axis').querySelectorAll('text')[0]; expect(xAxisLabel.getAttribute('transform')).toEqual('rotate(-90)'); }); });