importVuefrom'vue';importMonitoringPathsfrom'~/monitoring/components/monitoring_paths.vue';importcreateTimeSeriesfrom'~/monitoring/utils/multiple_time_series';import{singleRowMetricsMultipleSeries,convertDatesMultipleSeries}from'./mock_data';constcreateComponent=(propsData)=>{constComponent=Vue.extend(MonitoringPaths);returnnewComponent({propsData,}).$mount();};constconvertedMetrics=convertDatesMultipleSeries(singleRowMetricsMultipleSeries);consttimeSeries=createTimeSeries(convertedMetrics[0].queries[0].result,428,272,120);describe('Monitoring Paths',()=>{it('renders two paths to represent a line and the area underneath it',()=>{constcomponent=createComponent({generatedLinePath:timeSeries[0].linePath,generatedAreaPath:timeSeries[0].areaPath,lineColor:'#ccc',areaColor:'#fff',});constmetricArea=component.$el.querySelector('.metric-area');constmetricLine=component.$el.querySelector('.metric-line');expect(metricArea.getAttribute('fill')).toBe('#fff');expect(metricArea.getAttribute('d')).toBe(timeSeries[0].areaPath);expect(metricLine.getAttribute('stroke')).toBe('#ccc');expect(metricLine.getAttribute('d')).toBe(timeSeries[0].linePath);});});