Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

tests: add click through test for history 

applied patch from https://github.com/bonitoo-io/selenium-accept-infl2/pull/56
pull/18103/head
karel-rehor 2020-05-14 10:23:22 -06:00 committed by Greg
parent 912d058d59
commit 98549869d2
4 changed files with 253 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
e2e/features/monitoring/history.feature
View File

@ -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

34
e2e/src/pages/monitoring/checkStatusHistoryPage.js
View File

@ -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;

48
e2e/src/step_definitions/monitoring/checkStatusHistoryStepDefs.js
View File

@ -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();
});

145
e2e/src/steps/monitoring/checkStatusHistorySteps.js
View File

@ -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;