Improve existing e2e repeat tests a bit (#45001)

* Improve existing e2e repeat tests a bit

* nicer menu blur

e2e/dashboards-suite/Repeating_a_panel_horizontally.spec.ts

@@ -2,14 +2,50 @@ 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');
+  });
+
+  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'];
+    panelTitles.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;
+        });
+    });
+  });
 
+  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) => {
@@ -23,7 +59,35 @@ describe('Repeating a panel horizontally', () => {
           prevTop = top;
         });
     });
+    panelsNotShown.forEach((title) => {
+      e2e.components.Panels.Panel.title(title).should('not.exist');
+    });
   });
 
-  // TODO: Add test for the case when we pass variables in the url
+  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');
+    });
+  });
 });

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');
+    });
+  });
 });

e2e/dashboards-suite/Repeating_an_empty_row.spec.ts

@@ -2,13 +2,46 @@ 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;
+    const rowTitles = ['Row title 1', 'Row title 2', 'Row title 3'];
+    rowTitles.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;
+        });
+    });
+  });
+
+  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) => {
@@ -17,7 +50,31 @@ describe('Repeating empty rows', () => {
           prevTop = top;
         });
     });
+
+    rowsNotShown.forEach((title) => {
+      e2e.components.DashboardRow.title(title).should('not.exist');
+    });
   });
 
-  // TODO: Add test for the case when we pass variables in the url
+  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');
+    });
+  });
 });