86 lines
2.3 KiB
JavaScript
86 lines
2.3 KiB
JavaScript
|
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)');
|
||
|
|
});
|
||
|
|
});
|