import Vue from 'vue'; import GraphFlag from '~/monitoring/components/graph/flag.vue'; import { deploymentData } from '../mock_data'; const createComponent = (propsData) => { const Component = Vue.extend(GraphFlag); return new Component({ propsData, }).$mount(); }; const defaultValuesComponent = { currentXCoordinate: 200, currentYCoordinate: 100, currentFlagPosition: 100, currentData: { time: new Date('2017-06-04T18:17:33.501Z'), value: '1.49609375', }, graphHeight: 300, graphHeightOffset: 120, showFlagContent: true, realPixelRatio: 1, timeSeries: [ { values: [ { time: new Date('2017-06-04T18:17:33.501Z'), value: '1.49609375', }, ], }, ], unitOfDisplay: 'ms', currentDataIndex: 0, legendTitle: 'Average', currentCoordinates: {}, }; const deploymentFlagData = { ...deploymentData[0], ref: deploymentData[0].ref.name, xPos: 10, time: new Date(deploymentData[0].created_at), }; describe('GraphFlag', () => { let component; it('has a line at the currentXCoordinate', () => { component = createComponent(defaultValuesComponent); expect(component.$el.style.left) .toEqual(`${70 + component.currentXCoordinate}px`); }); describe('Deployment flag', () => { it('shows a deployment flag when deployment data provided', () => { const deploymentFlagComponent = createComponent({ ...defaultValuesComponent, deploymentFlagData, }); expect( deploymentFlagComponent.$el.querySelector('.popover-title'), ).toContainText('Deployed'); }); it('contains the ref when a tag is available', () => { const deploymentFlagComponent = createComponent({ ...defaultValuesComponent, deploymentFlagData: { ...deploymentFlagData, sha: 'f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187', tag: true, ref: '1.0', }, }); expect( deploymentFlagComponent.$el.querySelector('.deploy-meta-content'), ).toContainText('f5bcd1d9'); expect( deploymentFlagComponent.$el.querySelector('.deploy-meta-content'), ).toContainText('1.0'); }); it('does not contain the ref when a tag is unavailable', () => { const deploymentFlagComponent = createComponent({ ...defaultValuesComponent, deploymentFlagData: { ...deploymentFlagData, sha: 'f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187', tag: false, ref: '1.0', }, }); expect( deploymentFlagComponent.$el.querySelector('.deploy-meta-content'), ).toContainText('f5bcd1d9'); expect( deploymentFlagComponent.$el.querySelector('.deploy-meta-content'), ).not.toContainText('1.0'); }); }); describe('Computed props', () => { beforeEach(() => { component = createComponent(defaultValuesComponent); }); it('formatTime', () => { expect(component.formatTime).toMatch(/\d:17PM/); }); it('formatDate', () => { expect(component.formatDate).toEqual('04 Jun 2017, '); }); it('cursorStyle', () => { expect(component.cursorStyle).toEqual({ top: '20px', left: '270px', height: '180px', }); }); it('flagOrientation', () => { expect(component.flagOrientation).toEqual('left'); }); }); });