From 98549869d21c82ce8fcd70891afeecb37fdf7b0d Mon Sep 17 00:00:00 2001 From: karel-rehor Date: Thu, 14 May 2020 10:23:22 -0600 Subject: [PATCH] tests: add click through test for history applied patch from https://github.com/bonitoo-io/selenium-accept-infl2/pull/56 --- e2e/features/monitoring/history.feature | 28 +++- .../monitoring/checkStatusHistoryPage.js | 34 ++++ .../monitoring/checkStatusHistoryStepDefs.js | 48 ++++++ .../monitoring/checkStatusHistorySteps.js | 145 ++++++++++++++++++ 4 files changed, 253 insertions(+), 2 deletions(-) diff --git a/e2e/features/monitoring/history.feature b/e2e/features/monitoring/history.feature index f8dc905312..8ba3cb877d 100644 --- a/e2e/features/monitoring/history.feature +++ b/e2e/features/monitoring/history.feature @@ -22,12 +22,36 @@ Feature: Monitoring - Alerts - History When UI sign in user "DEFAULT" When click nav menu item "Alerting" Then the Alerting page is loaded - -# Create checks over API + # Need to create events for toggle markers + When wait "60" seconds # Exercise controls + Scenario: Exercise Event History Controls + When hover over the name of the check card "Threshold Check from File" + When click open history of the check card "Threshold Check from File" + When click open history confirm of the check card "Threshold Check from File" + When click event history filter input + Then the event history examples dropdown is visible + When click the alert history title + Then the event history examples dropdown is not visible + When get events history graph area + When get event marker types and locations + When zoom into event markers + Then the event marker locations have changed + Then the events history graph has changed + Then the event toggle "OK" is off + Then the event toggle "CRIT" is on + When get events history graph area + When get event marker types and locations + #Unzoom + When double click history graph area + Then the event marker locations have changed + Then the events history graph has changed + Then the event toggle "OK" is off + Then the event toggle "CRIT" is on # Toggle markers + #incl. hover bars and heads # Filter - N.B. clear filter shows all checks diff --git a/e2e/src/pages/monitoring/checkStatusHistoryPage.js b/e2e/src/pages/monitoring/checkStatusHistoryPage.js index bccfa836d1..afc008862a 100644 --- a/e2e/src/pages/monitoring/checkStatusHistoryPage.js +++ b/e2e/src/pages/monitoring/checkStatusHistoryPage.js @@ -6,6 +6,12 @@ const filterInput = '//*[./*[@data-testid=\'input-field--default\']]//*[@data-te const eventRows = '.event-row'; const eventRowCheckNameField = '//*[./*[@class=\'event-row\']][%INDEX%]//a'; const eventRowsAtLevel = '//*[./*[@class=\'event-row\']]//*[contains(@class,\'level-table-field--%LEVEL%\')]'; +const eventMarkersDiv = '[data-testid=event-markers]'; +const eventFilterExamplesDropdown = '[data-testid=dropdown-menu]'; +const eventMarkerByIndex = '[data-testid=event-markers] > div:nth-of-type(%INDEX%)'; +const eventMarkers = '[data-testid=event-markers] > *'; +const eventMarkersByType = '[data-testid=event-markers] > [class*=\'event-marker--line__%TYPE%\''; +const eventMarkerToggleByType = '[data-testid=event-marker-vis-toggle-%TYPE%] > *'; const canvasGraphAxes = 'canvas.giraffe-axes'; const canvasGraphContent = 'canvas.giraffe-layer-line'; @@ -62,6 +68,34 @@ class checkStatusHistoryPage extends influxPage { return await this.driver.findElements(By.xpath(eventRowsAtLevel.replace('%LEVEL%', level))) } + async getEventMarkersDiv(){ + return await this.driver.findElement(By.css(eventMarkersDiv)); + } + + async getEventFilterExamplesDropdown(){ + return await this.driver.findElement(By.css(eventFilterExamplesDropdown)); + } + + static getEventFilterExamplesDropdownSelector(){ + return { type: 'css', selector: eventFilterExamplesDropdown}; + } + + async getEventMarkerByIndex(index){ + return await this.driver.findElement(By.css(eventMarkerByIndex.replace('%INDEX%', index))); + } + + async getEventMarkers(){ + return await this.driver.findElements(By.css(eventMarkers)); + } + + async getEventMarkersByType(){ + return await this.driver.findElement(By.css(eventMarkersByType.replace('%TYPE%', type.toLowerCase()))); + } + + async getEventMarkerToggleByType(type){ + return await this.driver.findElement(By.css(eventMarkerToggleByType.replace('%TYPE%', type.toLowerCase()))); + } + } module.exports = checkStatusHistoryPage; diff --git a/e2e/src/step_definitions/monitoring/checkStatusHistoryStepDefs.js b/e2e/src/step_definitions/monitoring/checkStatusHistoryStepDefs.js index c9252e1dec..6323675e40 100644 --- a/e2e/src/step_definitions/monitoring/checkStatusHistoryStepDefs.js +++ b/e2e/src/step_definitions/monitoring/checkStatusHistoryStepDefs.js @@ -23,3 +23,51 @@ When(/^click the check name of event no "(.*)"$/, async index => { Then(/^there is at least "(.*)" events at level "(.*)"$/, async (count, level) => { await ckStatHistSteps.verifyMinimumCountEventsAtLevel(count, level); }); + +When(/^click event history filter input$/, async () => { + await ckStatHistSteps.clickEventFilterInput(); +}); + +Then(/^the event history examples dropdown is visible$/, async () => { + await ckStatHistSteps.verifyFilterExamplesDropdownVisible(); +}); + +Then(/^the event history examples dropdown is not visible$/, async () => { + await ckStatHistSteps.verifyFilterExamplesDropdownNotVisible(); +}); + +When(/^get events history graph area$/, async () => { + await ckStatHistSteps.getEventsHistoryGraph(); +}); + +Then(/^the events history graph has changed$/, async () => { + await ckStatHistSteps.verifyEventsHistoryGraphChanged(); +}); + +When(/^get event marker types and locations$/, async () => { + await ckStatHistSteps.getEventMarkerTypesAndLocations(); +}); + +When(/^click the alert history title$/, async () => { + await ckStatHistSteps.clickAlertHistoryTitle(); +}); + +When(/^zoom into event markers$/, async () => { + await ckStatHistSteps.zoomInOnEventMarkers(); +}); + +Then(/^the event marker locations have changed$/, async () => { + await ckStatHistSteps.verifyEventMarkerLocationChanges(); +}); + +Then(/^the event toggle "(.*)" is off$/, async event => { + await ckStatHistSteps.verifyEventToggleOff(event); +}); + +Then(/^the event toggle "(.*)" is on$/, async event => { + await ckStatHistSteps.verifyEventToggleOn(event); +}); + +When(/^double click history graph area$/, async () => { + await ckStatHistSteps.doubleClickHistoryGraph(); +}); diff --git a/e2e/src/steps/monitoring/checkStatusHistorySteps.js b/e2e/src/steps/monitoring/checkStatusHistorySteps.js index 8b92741908..cd04168b29 100644 --- a/e2e/src/steps/monitoring/checkStatusHistorySteps.js +++ b/e2e/src/steps/monitoring/checkStatusHistorySteps.js @@ -2,6 +2,9 @@ const influxSteps = require(__srcdir + '/steps/influx/influxSteps.js'); const checkStatusHistoryPage = require(__srcdir + '/pages/monitoring/checkStatusHistoryPage.js'); const expect = require('chai').expect; +const graphAxesStoreName = 'historyGraphAxes'; +const graphContentStoreName = 'historyGraphContent'; + class checkStatusHistorySteps extends influxSteps { constructor(driver) { @@ -48,6 +51,148 @@ class checkStatusHistorySteps extends influxSteps { throw e; }) } + + async clickEventFilterInput(){ + await this.clickAndWait(await this.ckHistPage.getFilterInput()); + } + + async verifyFilterExamplesDropdownVisible(){ + await this.assertVisible(await this.ckHistPage.getEventFilterExamplesDropdown()); + } + + async verifyFilterExamplesDropdownNotVisible(){ + await this.assertNotPresent(await checkStatusHistoryPage.getEventFilterExamplesDropdownSelector()); + } + + async clickAlertHistoryTitle(){ + await this.clickAndWait(await this.ckHistPage.getAlertHistoryTitle()); + } + + async zoomInOnEventMarkers(){ + await this.ckHistPage.getEventMarkers().then(async markers => { + let first = await this.ckHistPage.getEventMarkerByIndex(1); + let last = await this.ckHistPage.getEventMarkerByIndex(markers.length); + //console.log("DEBUG first " + JSON.stringify(await first.getRect())); + //console.log("DEBUG last " + JSON.stringify(await last.getRect())); + await this.driver.executeScript('arguments[0].style.border=\'3px solid red\'', first); + await this.driver.executeScript('arguments[0].style.border=\'3px solid red\'', last); + await this.ckHistPage.getCanvasGraphContent().then(async canvas => { + //console.log("DEBUG canvas " + JSON.stringify(await canvas.getRect())); + let action = await this.driver.actions(); + let rect = await canvas.getRect(); + let x = parseInt(rect.x); + let y = parseInt(rect.y); + //let targetX = parseInt(((rect.width/denom) * numer) + x); + let targetY = parseInt((rect.height / 2) + y); + let targetX1 = (await first.getRect()).x - 2; + + //console.log("DEBUG targetX1 " + targetX1 + ' type: ' + typeof(targetX1)); + await action.move({x: parseInt(targetX1), y: targetY, duration: 500}) + .perform(); + + let action2 = await this.driver.actions(); + let targetX2 = (await last.getRect()).x + 2; + + await action2.press() + .move({x: parseInt(targetX2), y: targetY, duration: 500}) + .release() + .perform(); + + await this.driver.sleep(200); // todo better wait - let graph update + }) + }) + } + + async getEventsHistoryGraph(){ + await this.ckHistPage.getCanvasGraphAxes().then(async canvasAxes => { + if(typeof __dataBuffer.graphCellAxes === 'undefined') { + __dataBuffer.graphCellAxes = []; + } + /* eslint-disable require-atomic-updates */ + __dataBuffer.graphCellAxes[graphAxesStoreName] = await this.driver + .executeScript('return arguments[0].toDataURL(\'image/png\');', canvasAxes); + + // console.log('DEBUG __dataBuffer.graphCellAxes[' + graphAxesStoreName + "] " + + // __dataBuffer.graphCellAxes[graphAxesStoreName]); + + await this.ckHistPage.getCanvasGraphContent().then(async canvasLine => { + if(typeof __dataBuffer.graphCellLine === 'undefined') { + __dataBuffer.graphCellLine = []; + } + __dataBuffer.graphCellLine[graphContentStoreName] = await this.driver + .executeScript('return arguments[0].toDataURL(\'image/png\');', canvasLine); + + // console.log('DEBUG __dataBuffer.graphCellLine[' + graphContentStoreName + "] " + + // __dataBuffer.graphCellLine[graphContentStoreName]); + }); + }); + } + + async verifyEventsHistoryGraphChanged(){ + await this.ckHistPage.getCanvasGraphAxes().then(async canvasAxes => { + let currentAxes = await this.driver + .executeScript('return arguments[0].toDataURL(\'image/png\');', canvasAxes); + + await expect(currentAxes).to.not.equal(__dataBuffer.graphCellAxes[graphAxesStoreName]); + + await this.ckHistPage.getCanvasGraphContent().then(async canvasLine => { + let currentLine = await this.driver + .executeScript('return arguments[0].toDataURL(\'image/png\');', canvasLine); + await expect(currentLine).to.not.equal(__dataBuffer.graphCellLine[graphContentStoreName]); + }); + }); + + } + + async getEventMarkerTypesAndLocations(){ + await this.ckHistPage.getEventMarkers().then(async markers => { + + __dataBuffer.eventMarkers = []; + + for(let marker of markers){ + //await console.log("DEBUG Marker " + JSON.stringify(await marker.getAttribute('class')) + ' ' + // + JSON.stringify(await marker.getRect())); + let rect = await marker.getRect(); + __dataBuffer.eventMarkers.push({ clazz: await marker.getAttribute('class'), rect: rect }) + } + }); + } + + async verifyEventMarkerLocationChanges(){ + await this.ckHistPage.getEventMarkers().then(async markers => { + for(let i = 0; i < markers.length; i++){ + //await console.log(`DEBUG __dataBuffer.eventMarkers[${i}]: ${JSON.stringify(__dataBuffer.eventMarkers[i])} `); + expect(await markers[i].getAttribute('class')).to.equal(__dataBuffer.eventMarkers[i].clazz); + let rect = await markers[i].getRect(); + expect(rect.x).to.not.equal(__dataBuffer.eventMarkers[i].rect.x) + } + }); + } + + async verifyEventToggleOff(event){ + await this.verifyElementContainsClass(await this.ckHistPage.getEventMarkerToggleByType(event), 'eye-closed'); + } + + async verifyEventToggleOn(event){ + await this.verifyElementContainsClass(await this.ckHistPage.getEventMarkerToggleByType(event), 'eye-open'); + } + + async doubleClickHistoryGraph(){ + await this.ckHistPage.getCanvasGraphContent().then(async canvas => { + let rect = await canvas.getRect(); + let x = parseInt(rect.x); + let y = parseInt(rect.y); + let centX = parseInt((rect.width/2) + x); + let centY = parseInt((rect.height/2) + y); + let action = this.driver.actions(); + await action.move({x: centX, y: centY, duration: 1000}) + .doubleClick() + .perform(); + + await this.driver.sleep(500); //give graph time to redraw + }) + } + } module.exports = checkStatusHistorySteps;