diff --git a/e2e-playwright/dashboard-new-layouts/dashboards-repeats-custom-grid.spec.ts b/e2e-playwright/dashboard-new-layouts/dashboards-repeats-custom-grid.spec.ts index 8cc1f552377..03f927676ca 100644 --- a/e2e-playwright/dashboard-new-layouts/dashboards-repeats-custom-grid.spec.ts +++ b/e2e-playwright/dashboard-new-layouts/dashboards-repeats-custom-grid.spec.ts @@ -1,14 +1,12 @@ -import { test, expect } from '@grafana/plugin-e2e'; - import testV2DashWithRepeats from '../dashboards/V2DashWithRepeats.json'; +import { test, expect } from './fixtures'; import { checkRepeatedPanelTitles, verifyChanges, movePanel, getPanelPosition, saveDashboard, - importTestDashboard, goToEmbeddedPanel, } from './utils'; @@ -34,8 +32,8 @@ test.describe( tag: ['@dashboards'], }, () => { - test('can enable repeats', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard(page, selectors, 'Custom grid repeats - add repeats'); + test('can enable repeats', async ({ dashboardPage, selectors, page, importDashboard }) => { + await importDashboard('Custom grid repeats - add repeats'); await dashboardPage.getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.editButton).click(); @@ -62,13 +60,8 @@ test.describe( await checkRepeatedPanelTitles(dashboardPage, selectors, repeatTitleBase, repeatOptions); }); - test('can update repeats with variable change', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard( - page, - selectors, - 'Custom grid repeats - update on variable change', - JSON.stringify(testV2DashWithRepeats) - ); + test('can update repeats with variable change', async ({ dashboardPage, selectors, page, importDashboard }) => { + await importDashboard('Custom grid repeats - update on variable change', JSON.stringify(testV2DashWithRepeats)); await dashboardPage .getByGrafanaSelector( @@ -94,13 +87,8 @@ test.describe( ) ).toBeHidden(); }); - test('can update repeats in edit pane', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard( - page, - selectors, - 'Custom grid repeats - update through edit pane', - JSON.stringify(testV2DashWithRepeats) - ); + test('can update repeats in edit pane', async ({ dashboardPage, selectors, page, importDashboard }) => { + await importDashboard('Custom grid repeats - update through edit pane', JSON.stringify(testV2DashWithRepeats)); await dashboardPage.getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.editButton).click(); @@ -122,13 +110,8 @@ test.describe( await checkRepeatedPanelTitles(dashboardPage, selectors, newTitleBase, repeatOptions); }); - test('can update repeats in panel editor', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard( - page, - selectors, - 'Custom grid repeats - update through panel editor', - JSON.stringify(testV2DashWithRepeats) - ); + test('can update repeats in panel editor', async ({ dashboardPage, selectors, page, importDashboard }) => { + await importDashboard('Custom grid repeats - update through panel editor', JSON.stringify(testV2DashWithRepeats)); await dashboardPage.getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.editButton).click(); @@ -181,10 +164,13 @@ test.describe( await checkRepeatedPanelTitles(dashboardPage, selectors, newTitleBase, repeatOptions); }); - test('can update repeats in panel editor when loaded directly', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard( - page, - selectors, + test('can update repeats in panel editor when loaded directly', async ({ + dashboardPage, + selectors, + page, + importDashboard, + }) => { + await importDashboard( 'Custom grid repeats - update through directly loaded panel editor', JSON.stringify(testV2DashWithRepeats) ); @@ -232,13 +218,8 @@ test.describe( await checkRepeatedPanelTitles(dashboardPage, selectors, newTitleBase, repeatOptions); }); - test('can move repeated panels', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard( - page, - selectors, - 'Custom grid repeats - move repeated panels', - JSON.stringify(testV2DashWithRepeats) - ); + test('can move repeated panels', async ({ dashboardPage, selectors, page, importDashboard }) => { + await importDashboard('Custom grid repeats - move repeated panels', JSON.stringify(testV2DashWithRepeats)); await dashboardPage.getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.editButton).click(); @@ -276,13 +257,8 @@ test.describe( `${repeatTitleBase}${repeatOptions.at(-1)}` ); }); - test('can view repeated panel', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard( - page, - selectors, - 'Custom grid repeats - move repeated panels', - JSON.stringify(testV2DashWithRepeats) - ); + test('can view repeated panel', async ({ dashboardPage, selectors, page, importDashboard }) => { + await importDashboard('Custom grid repeats - move repeated panels', JSON.stringify(testV2DashWithRepeats)); await dashboardPage .getByGrafanaSelector(selectors.components.Panels.Panel.title(`${repeatTitleBase}${repeatOptions.at(-1)}`)) @@ -332,10 +308,8 @@ test.describe( ).toBeVisible(); }); - test('can view embedded repeated panel', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard( - page, - selectors, + test('can view embedded repeated panel', async ({ dashboardPage, selectors, page, importDashboard }) => { + await importDashboard( 'Custom grid repeats - view embedded repeated panel', JSON.stringify(testV2DashWithRepeats) ); @@ -353,13 +327,8 @@ test.describe( ) ).toBeVisible(); }); - test('can remove repeats', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard( - page, - selectors, - 'Custom grid repeats - remove repeats', - JSON.stringify(testV2DashWithRepeats) - ); + test('can remove repeats', async ({ dashboardPage, selectors, page, importDashboard }) => { + await importDashboard('Custom grid repeats - remove repeats', JSON.stringify(testV2DashWithRepeats)); // verify 6 panels are present (4 repeats and 2 normal) expect( diff --git a/e2e-playwright/dashboard-new-layouts/dashboards-repeats-tabs-layout.spec.ts b/e2e-playwright/dashboard-new-layouts/dashboards-repeats-tabs-layout.spec.ts index f78bbc5e08e..b8b5b06c605 100644 --- a/e2e-playwright/dashboard-new-layouts/dashboards-repeats-tabs-layout.spec.ts +++ b/e2e-playwright/dashboard-new-layouts/dashboards-repeats-tabs-layout.spec.ts @@ -1,11 +1,9 @@ -import { test, expect } from '@grafana/plugin-e2e'; - import V2DashWithTabRepeats from '../dashboards/V2DashWithTabRepeats.json'; +import { test, expect } from './fixtures'; import { verifyChanges, saveDashboard, - importTestDashboard, goToEmbeddedPanel, checkRepeatedTabTitles, groupIntoTab, @@ -35,8 +33,8 @@ test.describe( tag: ['@dashboards'], }, () => { - test('can enable tab repeats', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard(page, selectors, 'Tabs layout repeats - add repeats'); + test('can enable tab repeats', async ({ dashboardPage, selectors, page, importDashboard }) => { + await importDashboard('Tabs layout repeats - add repeats'); await dashboardPage.getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.editButton).click(); @@ -69,13 +67,8 @@ test.describe( await checkRepeatedTabTitles(dashboardPage, selectors, repeatTitleBase, repeatOptions); }); - test('can update tab repeats with variable change', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard( - page, - selectors, - 'Tabs layout repeats - update on variable change', - JSON.stringify(V2DashWithTabRepeats) - ); + test('can update tab repeats with variable change', async ({ dashboardPage, selectors, page, importDashboard }) => { + await importDashboard('Tabs layout repeats - update on variable change', JSON.stringify(V2DashWithTabRepeats)); const c1Var = dashboardPage.getByGrafanaSelector(selectors.pages.Dashboard.SubMenu.submenuItemLabels('c1')); await c1Var @@ -97,13 +90,8 @@ test.describe( dashboardPage.getByGrafanaSelector(selectors.components.Tab.title(`${repeatTitleBase}${repeatOptions.at(-1)}`)) ).toBeHidden(); }); - test('can update repeats in edit pane', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard( - page, - selectors, - 'Tabs layout repeats - update through edit pane', - JSON.stringify(V2DashWithTabRepeats) - ); + test('can update repeats in edit pane', async ({ dashboardPage, selectors, page, importDashboard }) => { + await importDashboard('Tabs layout repeats - update through edit pane', JSON.stringify(V2DashWithTabRepeats)); await dashboardPage.getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.editButton).click(); // select first/original repeat tab to activate edit pane @@ -125,10 +113,8 @@ test.describe( await checkRepeatedTabTitles(dashboardPage, selectors, newTitleBase, repeatOptions); }); - test('can update repeats after panel change', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard( - page, - selectors, + test('can update repeats after panel change', async ({ dashboardPage, selectors, page, importDashboard }) => { + await importDashboard( 'Tabs layout repeats - update repeats after panel change', JSON.stringify(V2DashWithTabRepeats) ); @@ -165,10 +151,13 @@ test.describe( ).toBeVisible(); }); - test('can update repeats after panel change in editor', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard( - page, - selectors, + test('can update repeats after panel change in editor', async ({ + dashboardPage, + selectors, + page, + importDashboard, + }) => { + await importDashboard( 'Tabs layout repeats - update repeats after panel change in editor', JSON.stringify(V2DashWithTabRepeats) ); @@ -225,10 +214,13 @@ test.describe( ).toBeVisible(); }); - test('can hide canvas grid add row action in repeats', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard( - page, - selectors, + test('can hide canvas grid add row action in repeats', async ({ + dashboardPage, + selectors, + page, + importDashboard, + }) => { + await importDashboard( 'Tabs layout repeats - hide canvas add action in repeats', JSON.stringify(V2DashWithTabRepeats) ); @@ -244,13 +236,8 @@ test.describe( await expect(dashboardPage.getByGrafanaSelector(selectors.components.CanvasGridAddActions.addRow)).toBeHidden(); }); - test('can move repeated tabs', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard( - page, - selectors, - 'Tabs layout repeats - move repeated tabs', - JSON.stringify(V2DashWithTabRepeats) - ); + test('can move repeated tabs', async ({ dashboardPage, selectors, page, importDashboard }) => { + await importDashboard('Tabs layout repeats - move repeated tabs', JSON.stringify(V2DashWithTabRepeats)); await dashboardPage.getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.editButton).click(); await moveTab(dashboardPage, page, selectors, `${repeatTitleBase}${repeatOptions.at(0)}`, 'New tab'); @@ -269,13 +256,8 @@ test.describe( expect(normalTab2?.x).toBeLessThan(repeatedTab2?.x || 0); }); - test('can load into repeated tab', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard( - page, - selectors, - 'Tabs layout repeats - can load into repeated tab', - JSON.stringify(V2DashWithTabRepeats) - ); + test('can load into repeated tab', async ({ dashboardPage, selectors, page, importDashboard }) => { + await importDashboard('Tabs layout repeats - can load into repeated tab', JSON.stringify(V2DashWithTabRepeats)); await dashboardPage .getByGrafanaSelector(selectors.components.Tab.title(`${repeatTitleBase}${repeatOptions.at(2)}`)) @@ -292,13 +274,8 @@ test.describe( ).toBe('true'); }); - test('can view panels in repeated tab', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard( - page, - selectors, - 'Tabs layout repeats - view panels in repeated tabs', - JSON.stringify(V2DashWithTabRepeats) - ); + test('can view panels in repeated tab', async ({ dashboardPage, selectors, page, importDashboard }) => { + await importDashboard('Tabs layout repeats - view panels in repeated tabs', JSON.stringify(V2DashWithTabRepeats)); // non repeated panel in repeated tab await dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title('New panel')).first().hover(); @@ -367,10 +344,8 @@ test.describe( ).toBeVisible(); }); - test('can view embedded panels in repeated tab', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard( - page, - selectors, + test('can view embedded panels in repeated tab', async ({ dashboardPage, selectors, page, importDashboard }) => { + await importDashboard( 'Tabs layout repeats - view embedded panels in repeated tabs', JSON.stringify(V2DashWithTabRepeats) ); @@ -417,13 +392,8 @@ test.describe( ).toBeVisible(); }); - test('can remove repeats', async ({ dashboardPage, selectors, page }) => { - await importTestDashboard( - page, - selectors, - 'Tabs layout repeats - remove repeats', - JSON.stringify(V2DashWithTabRepeats) - ); + test('can remove repeats', async ({ dashboardPage, selectors, page, importDashboard }) => { + await importDashboard('Tabs layout repeats - remove repeats', JSON.stringify(V2DashWithTabRepeats)); // verify 5 tabs are present (4 repeats and 1 normal) await checkRepeatedTabTitles(dashboardPage, selectors, repeatTitleBase, repeatOptions); diff --git a/e2e-playwright/dashboard-new-layouts/fixtures.ts b/e2e-playwright/dashboard-new-layouts/fixtures.ts new file mode 100644 index 00000000000..9374b1ea06e --- /dev/null +++ b/e2e-playwright/dashboard-new-layouts/fixtures.ts @@ -0,0 +1,31 @@ +import { test as base } from '@grafana/plugin-e2e'; + +import { importTestDashboard } from './utils'; + +type ImportDashboardFn = (title: string, dashJSON?: string) => Promise; + +/** + * Extended test fixtures for dashboard-new-layouts tests. + * Provides `importDashboard` - a wrapped version of `importTestDashboard` that + * automatically cleans up dashboards after each test. + */ +export const test = base.extend<{ importDashboard: ImportDashboardFn }>({ + // imports dashboard and cleans it up after the test + importDashboard: async ({ page, selectors, request }, use) => { + const importedUIDs: string[] = []; + + const importDashboard: ImportDashboardFn = async (title, dashJSON) => { + const uid = await importTestDashboard(page, selectors, title, dashJSON); + importedUIDs.push(uid); + return uid; + }; + + await use(importDashboard); + + for (const uid of importedUIDs) { + await request.delete(`/api/dashboards/uid/${uid}`); + } + }, +}); + +export { expect } from '@grafana/plugin-e2e'; diff --git a/e2e-playwright/dashboard-new-layouts/utils.ts b/e2e-playwright/dashboard-new-layouts/utils.ts index 69851994812..f1f6fa7a1cb 100644 --- a/e2e-playwright/dashboard-new-layouts/utils.ts +++ b/e2e-playwright/dashboard-new-layouts/utils.ts @@ -160,7 +160,12 @@ export async function verifyChanges( await dashboardPage.getByGrafanaSelector(selectors.components.Drawer.General.close).click(); } -export async function importTestDashboard(page: Page, selectors: E2ESelectorGroups, title: string, dashInput?: string) { +export async function importTestDashboard( + page: Page, + selectors: E2ESelectorGroups, + title: string, + dashInput?: string +): Promise { await page.goto(selectors.pages.ImportDashboard.url); await page .getByTestId(selectors.components.DashboardImportPage.textarea) @@ -177,6 +182,15 @@ export async function importTestDashboard(page: Page, selectors: E2ESelectorGrou } await expect(page.locator('[data-testid="uplot-main-div"]').first()).toBeVisible(); + + if (testV2Dashboard.metadata.uid) { + return testV2Dashboard.metadata.uid; + } + // else extract from url + const url = new URL(page.url()); + const pathParts = url.pathname.split('/'); + const dIndex = pathParts.indexOf('d'); + return dIndex !== -1 ? pathParts[dIndex + 1] : ''; } export async function goToEmbeddedPanel(page: Page) {