Merge branch 'jivl-redesign-contributors-graph' into 'master'

Add bar chart component

See merge request gitlab-org/gitlab-ce!20082

1 files changed, 85 insertions, 0 deletions

diff --git a/spec/javascripts/vue_shared/components/bar_chart_spec.js b/spec/javascripts/vue_shared/components/bar_chart_spec.js
new file mode 100644
index 00000000000..7e91cd6f63f
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/bar_chart_spec.js
@@ -0,0 +1,85 @@
+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)');
+  });
+});