Dashboards/E2E: Add tests for removing panel(s) (#104998)

* Dashboards/E2E: Add tests for removing panel(s)

e2e/dashboards-edit-v2-suite/dashboards-remove-panel.spec.ts

@@ -0,0 +1,37 @@
+import { e2e } from '../utils';
+
+const PAGE_UNDER_TEST = 'edediimbjhdz4b/a-tall-dashboard';
+
+describe('Dashboard panels', () => {
+  beforeEach(() => {
+    e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'));
+  });
+
+  it('can remove a panel', () => {
+    e2e.pages.Dashboards.visit();
+    e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` });
+
+    e2e.flows.scenes.toggleEditMode();
+
+    e2e.flows.scenes.removePanels(/^Panel #1$/);
+
+    // Check that panel has been deleted
+    e2e.components.Panels.Panel.headerContainer()
+      .contains(/^Panel #1$/)
+      .should('not.exist');
+  });
+
+  it('can remove several panels at once', () => {
+    e2e.pages.Dashboards.visit();
+    e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` });
+
+    e2e.flows.scenes.toggleEditMode();
+
+    e2e.flows.scenes.removePanels(/^Panel #1$/, /^Panel #2$/, /^Panel #3$/);
+
+    // Check that panels have been deleted
+    e2e.components.Panels.Panel.headerContainer()
+      .contains(/^Panel #[123]$/)
+      .should('not.exist');
+  });
+});

e2e/utils/flows/scenes/index.ts

@@ -1,2 +1,4 @@
 export * from './addPanel';
 export * from './configurePanel';
+export * from './removePanel';
+export * from './toggleEditMode';

e2e/utils/flows/scenes/removePanel.ts

@@ -0,0 +1,17 @@
+import { e2e } from '../..';
+
+import { selectPanels } from './selectPanel';
+
+export const removePanels = (...panelTitles: Array<string | RegExp>) => {
+  selectPanels(panelTitles);
+
+  // Delete the panels
+  e2e.components.EditPaneHeader.deleteButton().click();
+
+  // Confirm deletion via modal
+  e2e.pages.ConfirmModal.delete().click();
+};
+
+export const removePanel = (panelTitle: string | RegExp) => {
+  removePanels(panelTitle);
+};

e2e/utils/flows/scenes/selectPanel.ts

@@ -0,0 +1,11 @@
+import { e2e } from '../..';
+
+export const selectPanel = (panelTitle: string | RegExp, shift = false) => {
+  e2e.components.Panels.Panel.headerContainer().contains(panelTitle).click({ shiftKey: shift });
+};
+
+export const selectPanels = (panelTitles: Array<string | RegExp>) => {
+  for (const panel of panelTitles) {
+    selectPanel(panel, true);
+  }
+};

e2e/utils/flows/scenes/toggleEditMode.ts

@@ -0,0 +1,5 @@
+import { e2e } from '../..';
+
+export const toggleEditMode = () => {
+  e2e.components.NavToolbar.editDashboard.editButton().should('be.visible').click();
+};