From a552e7323f4de3a32ecb8ad9509eaa5fd458eb37 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Mon, 7 Feb 2022 16:24:30 +0000 Subject: [PATCH] Improve existing e2e repeat tests a bit (#45001) * Improve existing e2e repeat tests a bit * nicer menu blur --- .../Repeating_a_panel_horizontally.spec.ts | 70 ++++++++++++++++++- .../Repeating_a_panel_vertically.spec.ts | 68 +++++++++++++++++- .../Repeating_an_empty_row.spec.ts | 61 +++++++++++++++- 3 files changed, 192 insertions(+), 7 deletions(-) diff --git a/e2e/dashboards-suite/Repeating_a_panel_horizontally.spec.ts b/e2e/dashboards-suite/Repeating_a_panel_horizontally.spec.ts index cb1418e4466..57f52646f52 100644 --- a/e2e/dashboards-suite/Repeating_a_panel_horizontally.spec.ts +++ b/e2e/dashboards-suite/Repeating_a_panel_horizontally.spec.ts @@ -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'); + }); + }); }); diff --git a/e2e/dashboards-suite/Repeating_a_panel_vertically.spec.ts b/e2e/dashboards-suite/Repeating_a_panel_vertically.spec.ts index c12052278bc..2c07c8beb2e 100644 --- a/e2e/dashboards-suite/Repeating_a_panel_vertically.spec.ts +++ b/e2e/dashboards-suite/Repeating_a_panel_vertically.spec.ts @@ -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'); + }); + }); }); diff --git a/e2e/dashboards-suite/Repeating_an_empty_row.spec.ts b/e2e/dashboards-suite/Repeating_an_empty_row.spec.ts index 002eae58da8..b9756c2ce5a 100644 --- a/e2e/dashboards-suite/Repeating_an_empty_row.spec.ts +++ b/e2e/dashboards-suite/Repeating_an_empty_row.spec.ts @@ -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'); + }); + }); });