graph_spec.js 2.8 KB
Newer Older
1
import Vue from 'vue';
2
import Graph from '~/monitoring/components/graph.vue';
3 4
import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins';
import eventHub from '~/monitoring/event_hub';
5
import { deploymentData, convertDatesMultipleSeries, singleRowMetricsMultipleSeries } from './mock_data';
6 7

const createComponent = (propsData) => {
8
  const Component = Vue.extend(Graph);
9 10 11 12 13 14

  return new Component({
    propsData,
  }).$mount();
};

15 16
const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);

17
describe('Graph', () => {
18
  beforeEach(() => {
19
    spyOn(MonitoringMixins.methods, 'formatDeployments').and.returnValue({});
20 21 22 23
  });

  it('has a title', () => {
    const component = createComponent({
24
      columnData: convertedMetrics[1],
25 26 27 28 29
      classType: 'col-md-6',
      updateAspectRatio: false,
      deploymentData,
    });

30
    expect(component.$el.querySelector('.text-center').innerText.trim()).toBe(component.graphData.title);
31 32 33 34 35
  });

  describe('Computed props', () => {
    it('axisTransform translates an element Y position depending of its height', () => {
      const component = createComponent({
36
        columnData: convertedMetrics[1],
37 38 39 40 41 42 43 44 45 46 47 48
        classType: 'col-md-6',
        updateAspectRatio: false,
        deploymentData,
      });

      const transformedHeight = `${component.graphHeight - 100}`;
      expect(component.axisTransform.indexOf(transformedHeight))
        .not.toEqual(-1);
    });

    it('outterViewBox gets a width and height property based on the DOM size of the element', () => {
      const component = createComponent({
49
        columnData: convertedMetrics[1],
50 51 52 53 54 55 56 57 58 59 60 61 62 63
        classType: 'col-md-6',
        updateAspectRatio: false,
        deploymentData,
      });

      const viewBoxArray = component.outterViewBox.split(' ');
      expect(typeof component.outterViewBox).toEqual('string');
      expect(viewBoxArray[2]).toEqual(component.graphWidth.toString());
      expect(viewBoxArray[3]).toEqual(component.graphHeight.toString());
    });
  });

  it('sends an event to the eventhub when it has finished resizing', (done) => {
    const component = createComponent({
64
      columnData: convertedMetrics[1],
65 66 67 68 69 70 71 72 73 74 75 76
      classType: 'col-md-6',
      updateAspectRatio: false,
      deploymentData,
    });
    spyOn(eventHub, '$emit');

    component.updateAspectRatio = true;
    Vue.nextTick(() => {
      expect(eventHub.$emit).toHaveBeenCalled();
      done();
    });
  });
77

78
  it('has a title for the y-axis and the chart legend that comes from the backend', () => {
79
    const component = createComponent({
80
      columnData: convertedMetrics[1],
81 82 83 84 85
      classType: 'col-md-6',
      updateAspectRatio: false,
      deploymentData,
    });

86 87
    expect(component.yAxisLabel).toEqual(component.graphData.y_label);
    expect(component.legendTitle).toEqual(component.graphData.queries[0].label);
88
  });
89
});