Improve existing e2e repeat tests a bit (#45001)

* Improve existing e2e repeat tests a bit

* nicer menu blur
This commit is contained in:
Ashley Harrison
2022-02-07 16:24:30 +00:00
committed by GitHub
parent 9c2dd505ff
commit a552e7323f
3 changed files with 192 additions and 7 deletions
@@ -2,10 +2,12 @@ import { e2e } from '@grafana/e2e';
const PAGE_UNDER_TEST = 'WVpf2jp7z/repeating-a-panel-horizontally';
describe('Repeating a panel horizontally', () => {
it('should be able to repeat a panel horizontally', () => {
beforeEach(() => {
e2e.flows.login('admin', 'admin');
e2e.flows.openDashboard({ uid: PAGE_UNDER_TEST });
});
it('should be able to repeat a panel horizontally', () => {
e2e.flows.openDashboard({ uid: PAGE_UNDER_TEST });
let prevLeft = Number.NEGATIVE_INFINITY;
let prevTop = null;
const panelTitles = ['Panel Title 1', 'Panel Title 2', 'Panel Title 3'];
@@ -25,5 +27,67 @@ describe('Repeating a panel horizontally', () => {
});
});
// TODO: Add test for the case when we pass variables in the url
it('responds to changes to the variables', () => {
e2e.flows.openDashboard({ uid: PAGE_UNDER_TEST });
let prevLeft = Number.NEGATIVE_INFINITY;
let prevTop = null;
const panelTitles = ['Panel Title 1', 'Panel Title 2', 'Panel Title 3'];
panelTitles.forEach((title) => {
e2e.components.Panels.Panel.title(title).should('be.visible');
});
// Change to only show panels 1 + 3
e2e.pages.Dashboard.SubMenu.submenuItemLabels('horizontal').click();
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('1').click();
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('3').click();
// blur the dropdown
e2e().get('body').click();
const panelsShown = ['Panel Title 1', 'Panel Title 3'];
const panelsNotShown = ['Panel Title 2'];
panelsShown.forEach((title) => {
e2e.components.Panels.Panel.title(title)
.should('be.visible')
.then(($el) => {
const { left, top } = $el[0].getBoundingClientRect();
expect(left).to.be.greaterThan(prevLeft);
if (prevTop !== null) {
expect(top).to.be.equal(prevTop);
}
prevLeft = left;
prevTop = top;
});
});
panelsNotShown.forEach((title) => {
e2e.components.Panels.Panel.title(title).should('not.exist');
});
});
it('loads a dashboard based on the query params correctly', () => {
// Have to manually add the queryParams to the url because they have the same name
e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?var-horizontal=1&var-horizontal=3` });
let prevLeft = Number.NEGATIVE_INFINITY;
let prevTop = null;
const panelsShown = ['Panel Title 1', 'Panel Title 3'];
const panelsNotShown = ['Panel Title 2'];
// Check correct panels are displayed
panelsShown.forEach((title) => {
e2e.components.Panels.Panel.title(title)
.should('be.visible')
.then(($el) => {
const { left, top } = $el[0].getBoundingClientRect();
expect(left).to.be.greaterThan(prevLeft);
if (prevTop !== null) {
expect(top).to.be.equal(prevTop);
}
prevLeft = left;
prevTop = top;
});
});
panelsNotShown.forEach((title) => {
e2e.components.Panels.Panel.title(title).should('not.exist');
});
});
});
@@ -2,8 +2,11 @@ import { e2e } from '@grafana/e2e';
const PAGE_UNDER_TEST = 'OY8Ghjt7k/repeating-a-panel-vertically';
describe('Repeating a panel vertically', () => {
it('should be able to repeat a panel vertically', () => {
beforeEach(() => {
e2e.flows.login('admin', 'admin');
});
it('should be able to repeat a panel vertically', () => {
e2e.flows.openDashboard({ uid: PAGE_UNDER_TEST });
let prevTop = Number.NEGATIVE_INFINITY;
@@ -24,5 +27,66 @@ describe('Repeating a panel vertically', () => {
});
});
// TODO: Add test for the case when we pass variables in the url
it('responds to changes to the variables', () => {
e2e.flows.openDashboard({ uid: PAGE_UNDER_TEST });
let prevTop = Number.NEGATIVE_INFINITY;
let prevLeft = null;
const panelTitles = ['Panel Title 1', 'Panel Title 2', 'Panel Title 3'];
panelTitles.forEach((title) => {
e2e.components.Panels.Panel.title(title).should('be.visible');
});
// Change to only show panels 1 + 3
e2e.pages.Dashboard.SubMenu.submenuItemLabels('vertical').click();
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('1').click();
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('3').click();
// blur the dropdown
e2e().get('body').click();
const panelsShown = ['Panel Title 1', 'Panel Title 3'];
const panelsNotShown = ['Panel Title 2'];
panelsShown.forEach((title) => {
e2e.components.Panels.Panel.title(title)
.should('be.visible')
.then(($el) => {
const { left, top } = $el[0].getBoundingClientRect();
expect(top).to.be.greaterThan(prevTop);
if (prevLeft !== null) {
expect(left).to.be.equal(prevLeft);
}
prevLeft = left;
prevTop = top;
});
});
panelsNotShown.forEach((title) => {
e2e.components.Panels.Panel.title(title).should('not.exist');
});
});
it('loads a dashboard based on the query params correctly', () => {
// Have to manually add the queryParams to the url because they have the same name
e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?var-vertical=1&var-vertical=3` });
let prevTop = Number.NEGATIVE_INFINITY;
let prevLeft = null;
const panelsShown = ['Panel Title 1', 'Panel Title 3'];
const panelsNotShown = ['Panel Title 2'];
panelsShown.forEach((title) => {
e2e.components.Panels.Panel.title(title)
.should('be.visible')
.then(($el) => {
const { left, top } = $el[0].getBoundingClientRect();
expect(top).to.be.greaterThan(prevTop);
if (prevLeft !== null) {
expect(left).to.be.equal(prevLeft);
}
prevLeft = left;
prevTop = top;
});
});
panelsNotShown.forEach((title) => {
e2e.components.Panels.Panel.title(title).should('not.exist');
});
});
});
@@ -2,8 +2,11 @@ import { e2e } from '@grafana/e2e';
const PAGE_UNDER_TEST = 'dtpl2Ctnk/repeating-an-empty-row';
describe('Repeating empty rows', () => {
it('should be able to repeat empty rows vertically', () => {
beforeEach(() => {
e2e.flows.login('admin', 'admin');
});
it('should be able to repeat empty rows vertically', () => {
e2e.flows.openDashboard({ uid: PAGE_UNDER_TEST });
let prevTop = Number.NEGATIVE_INFINITY;
@@ -19,5 +22,59 @@ describe('Repeating empty rows', () => {
});
});
// TODO: Add test for the case when we pass variables in the url
it('responds to changes to the variables', () => {
e2e.flows.openDashboard({ uid: PAGE_UNDER_TEST });
let prevTop = Number.NEGATIVE_INFINITY;
const rowTitles = ['Row title 1', 'Row title 2', 'Row title 3'];
rowTitles.forEach((title) => {
e2e.components.DashboardRow.title(title).should('be.visible');
});
// Change to only show rows 1 + 3
e2e.pages.Dashboard.SubMenu.submenuItemLabels('row').click();
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('1').click();
e2e.pages.Dashboard.SubMenu.submenuItemValueDropDownOptionTexts('3').click();
// blur the dropdown
e2e().get('body').click();
const rowsShown = ['Row title 1', 'Row title 3'];
const rowsNotShown = ['Row title 2'];
rowsShown.forEach((title) => {
e2e.components.DashboardRow.title(title)
.should('be.visible')
.then(($el) => {
const { top } = $el[0].getBoundingClientRect();
expect(top).to.be.greaterThan(prevTop);
prevTop = top;
});
});
rowsNotShown.forEach((title) => {
e2e.components.DashboardRow.title(title).should('not.exist');
});
});
it('loads a dashboard based on the query params correctly', () => {
// Have to manually add the queryParams to the url because they have the same name
e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?var-row=1&var-row=3` });
let prevTop = Number.NEGATIVE_INFINITY;
const rowsShown = ['Row title 1', 'Row title 3'];
const rowsNotShown = ['Row title 2'];
rowsShown.forEach((title) => {
e2e.components.DashboardRow.title(title)
.should('be.visible')
.then(($el) => {
const { top } = $el[0].getBoundingClientRect();
expect(top).to.be.greaterThan(prevTop);
prevTop = top;
});
});
rowsNotShown.forEach((title) => {
e2e.components.DashboardRow.title(title).should('not.exist');
});
});
});