diff --git a/e2e/dashboard-new-layouts/dashboard-edit-flows.ts b/e2e/dashboard-new-layouts/dashboard-edit-flows.ts index 7fb5a804a22..e8af764a415 100644 --- a/e2e/dashboard-new-layouts/dashboard-edit-flows.ts +++ b/e2e/dashboard-new-layouts/dashboard-edit-flows.ts @@ -1,5 +1,9 @@ import { e2e } from '../utils'; +const deselectPanels = () => { + e2e.pages.Dashboard.Controls().click(); +}; + // Common flows for adding/editing variables on the new edit pane export const flows = { newEditPaneVariableClick() { @@ -13,6 +17,33 @@ export const flows = { e2e.components.PanelEditor.ElementEditPane.variableNameInput().clear().type(variable.name).blur(); e2e.components.PanelEditor.ElementEditPane.variableLabelInput().clear().type(variable.label).blur(); }, + firstPanelTitleShouldBe(panelTitle: string) { + return e2e.components.Panels.Panel.headerContainer() + .first() + .within(() => cy.get('h2').first().should('have.text', panelTitle)); + }, + deselectPanels, + changePanelTitle(oldPanelTitle: string, newPanelTitle: string) { + deselectPanels(); + const oldPanelRegex = new RegExp(`^${oldPanelTitle}$`); + e2e.flows.scenes.selectPanel(oldPanelRegex); + + e2e.components.PanelEditor.OptionsPane.fieldInput('Title') + .should('have.value', oldPanelTitle) + .clear() + .type(newPanelTitle); + e2e.components.PanelEditor.OptionsPane.fieldInput('Title').should('have.value', newPanelTitle); + }, + changePanelDescription(panelTitle: string, newDescription: string) { + deselectPanels(); + const panelTitleRegex = new RegExp(`^${panelTitle}$`); + e2e.flows.scenes.selectPanel(panelTitleRegex); + + e2e.components.PanelEditor.OptionsPane.fieldLabel('panel-options Description').within(() => { + cy.get('textarea').type(newDescription); + cy.get('textarea').should('have.value', newDescription); + }); + }, }; export type Variable = { diff --git a/e2e/dashboard-new-layouts/dashboards-edit-panel-title-description.spec.ts b/e2e/dashboard-new-layouts/dashboards-edit-panel-title-description.spec.ts new file mode 100644 index 00000000000..3b522db3c8d --- /dev/null +++ b/e2e/dashboard-new-layouts/dashboards-edit-panel-title-description.spec.ts @@ -0,0 +1,38 @@ +import { e2e } from '../utils'; + +import { flows } from './dashboard-edit-flows'; + +const PAGE_UNDER_TEST = '5SdHCadmz/panel-tests-graph'; + +describe('Dashboard', () => { + beforeEach(() => { + e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD')); + }); + + it('can edit panel title and description', () => { + e2e.pages.Dashboards.visit(); + e2e.flows.openDashboard({ uid: `${PAGE_UNDER_TEST}?orgId=1` }); + + e2e.flows.scenes.toggleEditMode(); + + const oldTitle = 'No Data Points Warning'; + flows.firstPanelTitleShouldBe(oldTitle); + + const newDescription = 'A description of this panel'; + flows.changePanelDescription(oldTitle, newDescription); + + const newTitle = 'New Panel Title'; + flows.changePanelTitle(oldTitle, newTitle); + + // Check that new title is reflected in panel header + flows.firstPanelTitleShouldBe(newTitle); + + // Reveal description tooltip and check that its value is as expected + const descriptionIcon = () => cy.get('[data-testid="title-items-container"] > span').first(); + descriptionIcon().click({ force: true }); + descriptionIcon().then((el) => { + const tooltipId = el.attr('aria-describedby'); + cy.get(`[id="${tooltipId}"]`).should('have.text', `${newDescription}\n`); + }); + }); +}); diff --git a/e2e/utils/flows/scenes/index.ts b/e2e/utils/flows/scenes/index.ts index c933c1e89d1..c18a4151ab0 100644 --- a/e2e/utils/flows/scenes/index.ts +++ b/e2e/utils/flows/scenes/index.ts @@ -5,3 +5,4 @@ export * from './toggleEditMode'; export * from './movePanel'; export * from './groupPanels'; export * from './saveDashboard'; +export * from './selectPanel';