gitlab-org--gitlab-foss/spec/javascripts/monitoring/graph_spec.js

import Vue from 'vue';
import Graph from '~/monitoring/components/graph.vue';
import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins';
import eventHub from '~/monitoring/event_hub';
import { deploymentData, convertDatesMultipleSeries, singleRowMetricsMultipleSeries } from './mock_data';

const tagsPath = 'http://test.host/frontend-fixtures/environments-project/tags';
const projectPath = 'http://test.host/frontend-fixtures/environments-project';
const createComponent = (propsData) => {
  const Component = Vue.extend(Graph);

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

const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);

describe('Graph', () => {
  beforeEach(() => {
    spyOn(MonitoringMixins.methods, 'formatDeployments').and.returnValue({});
  });

  it('has a title', () => {
    const component = createComponent({
      graphData: convertedMetrics[1],
      classType: 'col-md-6',
      updateAspectRatio: false,
      deploymentData,
      tagsPath,
      projectPath,
    });

    expect(component.$el.querySelector('.text-center').innerText.trim()).toBe(component.graphData.title);
  });

  describe('Computed props', () => {
    it('axisTransform translates an element Y position depending of its height', () => {
      const component = createComponent({
        graphData: convertedMetrics[1],
        classType: 'col-md-6',
        updateAspectRatio: false,
        deploymentData,
        tagsPath,
        projectPath,
      });

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

    it('outerViewBox gets a width and height property based on the DOM size of the element', () => {
      const component = createComponent({
        graphData: convertedMetrics[1],
        classType: 'col-md-6',
        updateAspectRatio: false,
        deploymentData,
        tagsPath,
        projectPath,
      });

      const viewBoxArray = component.outerViewBox.split(' ');
      expect(typeof component.outerViewBox).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({
      graphData: convertedMetrics[1],
      classType: 'col-md-6',
      updateAspectRatio: false,
      deploymentData,
      tagsPath,
      projectPath,
    });
    spyOn(eventHub, '$emit');

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

  it('has a title for the y-axis and the chart legend that comes from the backend', () => {
    const component = createComponent({
      graphData: convertedMetrics[1],
      classType: 'col-md-6',
      updateAspectRatio: false,
      deploymentData,
      tagsPath,
      projectPath,
    });

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

  it('sets the currentData object based on the hovered data index', () => {
    const component = createComponent({
      graphData: convertedMetrics[1],
      classType: 'col-md-6',
      updateAspectRatio: false,
      deploymentData,
      graphIdentifier: 0,
      hoverData: {
        hoveredDate: new Date('Sun Aug 27 2017 06:11:51 GMT-0500 (CDT)'),
        currentDeployXPos: null,
      },
      tagsPath,
      projectPath,
    });

    component.positionFlag();
    expect(component.currentData).toBe(component.timeSeries[0].values[10]);
    expect(component.currentDataIndex).toEqual(10);
  });
});