From dbffb7a8c4617b1081c26eea8fce1f6068967795 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Wed, 2 Oct 2024 09:25:12 +0200 Subject: [PATCH] Plugin E2e: Support scenes powered dashboard UI (#1155) --- .../plugin-e2e/src/e2e-selectors/types.ts | 6 +++++ .../src/e2e-selectors/versioned/components.ts | 10 ++++++++ .../src/e2e-selectors/versioned/pages.ts | 4 ++-- .../src/models/pages/DashboardPage.ts | 9 ++++++++ .../src/models/pages/PanelEditPage.ts | 23 ++++++++++++++++++- .../datasource/dashboards/dashboard.spec.ts | 14 +++++++++++ .../query-editor/queryEditor.spec.ts | 11 +++++++++ 7 files changed, 74 insertions(+), 3 deletions(-) create mode 100644 packages/plugin-e2e/tests/as-admin-user/datasource/dashboards/dashboard.spec.ts diff --git a/packages/plugin-e2e/src/e2e-selectors/types.ts b/packages/plugin-e2e/src/e2e-selectors/types.ts index 3db3b77cc..00a55dafa 100644 --- a/packages/plugin-e2e/src/e2e-selectors/types.ts +++ b/packages/plugin-e2e/src/e2e-selectors/types.ts @@ -109,6 +109,12 @@ export type Components = { Alert: { alertV2: (severity: string) => string; }; + NavToolbar: { + editDashboard: { + backToDashboardButton: string; + editButton: string; + }; + }; PageToolbar: { item: (tooltip: string) => string; showMoreItems: string; diff --git a/packages/plugin-e2e/src/e2e-selectors/versioned/components.ts b/packages/plugin-e2e/src/e2e-selectors/versioned/components.ts index f9308f16f..8e0a1d93e 100644 --- a/packages/plugin-e2e/src/e2e-selectors/versioned/components.ts +++ b/packages/plugin-e2e/src/e2e-selectors/versioned/components.ts @@ -166,6 +166,16 @@ export const versionedComponents = { [MIN_GRAFANA_VERSION]: (severity: string) => `Alert ${severity}`, }, }, + NavToolbar: { + editDashboard: { + editButton: { + '11.1.0': 'data-testid Edit dashboard button', + }, + backToDashboardButton: { + '11.1.0': 'data-testid Back to dashboard button', + }, + }, + }, PageToolbar: { item: { [MIN_GRAFANA_VERSION]: (tooltip: string) => `${tooltip}`, diff --git a/packages/plugin-e2e/src/e2e-selectors/versioned/pages.ts b/packages/plugin-e2e/src/e2e-selectors/versioned/pages.ts index c8220d712..b94dcaa87 100644 --- a/packages/plugin-e2e/src/e2e-selectors/versioned/pages.ts +++ b/packages/plugin-e2e/src/e2e-selectors/versioned/pages.ts @@ -40,6 +40,7 @@ export const versionedPages = { '9.5.0': (title: string) => `data-testid ${title}`, }, addNewPanel: { + '11.1.0': 'data-testid Add new panel', [MIN_GRAFANA_VERSION]: 'Add new panel', }, itemButtonAddViz: { @@ -70,8 +71,7 @@ export const versionedPages = { url: { [MIN_GRAFANA_VERSION]: (variableIndex: string) => `/dashboard/new?orgId=1&editview=templating&editIndex=${variableIndex}`, - '11.3.0': (variableIndex: string) => - `/dashboard/new?orgId=1&editview=variables&editIndex=${variableIndex}`, + '11.3.0': (variableIndex: string) => `/dashboard/new?orgId=1&editview=variables&editIndex=${variableIndex}`, }, }, }, diff --git a/packages/plugin-e2e/src/models/pages/DashboardPage.ts b/packages/plugin-e2e/src/models/pages/DashboardPage.ts index 58a514c2b..62d2b7d10 100644 --- a/packages/plugin-e2e/src/models/pages/DashboardPage.ts +++ b/packages/plugin-e2e/src/models/pages/DashboardPage.ts @@ -78,12 +78,21 @@ export class DashboardPage extends GrafanaPage { */ async addPanel(): Promise { const { components, pages } = this.ctx.selectors; + + // From Grafana 11.3.0, one needs to click the edit button before adding a new panel in already existing dashboards + if (semver.gte(this.ctx.grafanaVersion, '11.3.0') && this.dashboard?.uid) { + await this.getByGrafanaSelector(components.NavToolbar.editDashboard.editButton).click(); + } + if (semver.gte(this.ctx.grafanaVersion, '10.0.0')) { await this.getByGrafanaSelector( components.PageToolbar.itemButton(components.PageToolbar.itemButtonTitle) ).click(); await this.getByGrafanaSelector(pages.AddDashboard.itemButton(pages.AddDashboard.itemButtonAddViz)).click(); } else { + if (this.dashboard?.uid) { + await this.getByGrafanaSelector(components.PageToolbar.item('Add panel')).click(); + } await this.getByGrafanaSelector(pages.AddDashboard.addNewPanel).click(); } diff --git a/packages/plugin-e2e/src/models/pages/PanelEditPage.ts b/packages/plugin-e2e/src/models/pages/PanelEditPage.ts index 2073bc5f8..d38ab897c 100644 --- a/packages/plugin-e2e/src/models/pages/PanelEditPage.ts +++ b/packages/plugin-e2e/src/models/pages/PanelEditPage.ts @@ -6,6 +6,7 @@ import { GrafanaPage } from './GrafanaPage'; import { TimeRange } from '../components/TimeRange'; import { Panel } from '../components/Panel'; import { radioButtonSetChecked } from '../utils'; +import { DashboardPage } from './DashboardPage'; export class PanelEditPage extends GrafanaPage { datasource: DataSourcePicker; @@ -116,11 +117,31 @@ export class PanelEditPage extends GrafanaPage { return this.getByGrafanaSelector(this.ctx.selectors.components.PanelEditor.toggleVizPicker); } + /** + * Clicks the "Back to dashboard" button in the panel editor + * In versions prior to 11.3.0, this method clicks the "Apply" button instead + */ + async backToDashboard() { + if (semver.gte(this.ctx.grafanaVersion, '11.3.0')) { + await this.getByGrafanaSelector( + this.ctx.selectors.components.NavToolbar.editDashboard.backToDashboardButton + ).click(); + } else if (semver.gte(this.ctx.grafanaVersion, '9.0.0')) { + await this.ctx.page.getByTestId(this.ctx.selectors.components.PanelEditor.applyButton).click(); + } else { + await this.ctx.page.getByLabel('panel editor apply').click(); + } + + return new DashboardPage(this.ctx, this.args); + } + /** * Clicks the "Apply" button in the panel editor + * + * @deprecated use {@link PanelEditPage.backToDashboard} method instead. */ async apply() { - await this.ctx.page.getByTestId(this.ctx.selectors.components.PanelEditor.applyButton).click(); + return this.backToDashboard(); } /** diff --git a/packages/plugin-e2e/tests/as-admin-user/datasource/dashboards/dashboard.spec.ts b/packages/plugin-e2e/tests/as-admin-user/datasource/dashboards/dashboard.spec.ts new file mode 100644 index 000000000..b16eb20f8 --- /dev/null +++ b/packages/plugin-e2e/tests/as-admin-user/datasource/dashboards/dashboard.spec.ts @@ -0,0 +1,14 @@ +import { expect, test } from '../../../../src'; + +test('add panel in already existing dashboard', async ({ gotoDashboardPage, readProvisionedDashboard, page }) => { + const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' }); + const dashboardPage = await gotoDashboardPage(dashboard); + await dashboardPage.addPanel(); + await expect(page.url()).toContain('editPanel'); +}); + +test('add panel in new dashboard', async ({ dashboardPage, page }) => { + const panelEditPage = await dashboardPage.addPanel(); + await expect(panelEditPage.panel.locator).toBeVisible(); + await expect(page.url()).toContain('editPanel'); +}); diff --git a/packages/plugin-e2e/tests/as-admin-user/datasource/query-editor/queryEditor.spec.ts b/packages/plugin-e2e/tests/as-admin-user/datasource/query-editor/queryEditor.spec.ts index c62316d6b..60daff97f 100644 --- a/packages/plugin-e2e/tests/as-admin-user/datasource/query-editor/queryEditor.spec.ts +++ b/packages/plugin-e2e/tests/as-admin-user/datasource/query-editor/queryEditor.spec.ts @@ -47,3 +47,14 @@ test('should set correct cache time on query passed to the backend', async ({ await panelEditPage.refreshPanel(); await expect(await queryReq).toBeTruthy(); }); + +test('backToDashboard method should be backwards compatible and navigate to dashboard page', async ({ + gotoPanelEditPage, + readProvisionedDashboard, + page, +}) => { + const dashboard = await readProvisionedDashboard({ fileName: 'redshift.json' }); + const panelEditPage = await gotoPanelEditPage({ dashboard, id: '3' }); + await panelEditPage.backToDashboard(); + await expect(page.url()).not.toContain('editPanel'); +});