From 6b9ea9d5a4370c5c9c963908f827927a667c4f68 Mon Sep 17 00:00:00 2001 From: Alexandra Vargas Date: Thu, 14 Mar 2024 14:50:56 +0100 Subject: [PATCH] Standarize e2e for addDashbaord e2e flow --- .betterer.results | 3 --- e2e/dashboards-suite/textbox-variables.spec.ts | 4 ++-- e2e/utils/flows/addDashboard.ts | 8 +++++--- packages/grafana-e2e-selectors/src/selectors/pages.ts | 3 +++ packages/grafana-e2e/src/flows/addDashboard.ts | 4 ++-- .../dashboard-scene/saving/SaveDashboardAsForm.tsx | 9 ++++++++- .../dashboard-scene/saving/SaveDashboardForm.tsx | 8 +++++++- public/app/features/dashboard-scene/saving/shared.tsx | 6 ++++-- .../features/dashboard-scene/scene/NavToolbarActions.tsx | 2 ++ .../features/dashboard/components/DashNav/DashNav.tsx | 1 + .../SaveDashboard/forms/SaveDashboardAsForm.tsx | 8 +++++++- 11 files changed, 41 insertions(+), 15 deletions(-) diff --git a/.betterer.results b/.betterer.results index ca5c0a6a24e..1af01bbf839 100644 --- a/.betterer.results +++ b/.betterer.results @@ -2540,9 +2540,6 @@ exports[`better eslint`] = { [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "1"] ], - "public/app/features/dashboard-scene/saving/shared.tsx:5381": [ - [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"] - ], "public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"], diff --git a/e2e/dashboards-suite/textbox-variables.spec.ts b/e2e/dashboards-suite/textbox-variables.spec.ts index 4b5790a7f76..dc486cbe389 100644 --- a/e2e/dashboards-suite/textbox-variables.spec.ts +++ b/e2e/dashboards-suite/textbox-variables.spec.ts @@ -143,9 +143,9 @@ function copyExistingDashboard() { e2e.pages.Dashboard.Settings.General.saveAsDashBoard().should('be.visible').click(); - e2e.pages.SaveDashboardAsModal.newName().should('be.visible').type(`${Date.now()}`); + e2e.pages.SaveDashboardModal.newName().should('be.visible').type(`${Date.now()}`); - e2e.pages.SaveDashboardAsModal.save().should('be.visible').click(); + e2e.pages.SaveDashboardModal.saveDashboardToolbar().should('be.visible').click(); cy.wait('@save-dash'); cy.wait('@load-dash'); diff --git a/e2e/utils/flows/addDashboard.ts b/e2e/utils/flows/addDashboard.ts index cc8e7548032..f83846a30e6 100644 --- a/e2e/utils/flows/addDashboard.ts +++ b/e2e/utils/flows/addDashboard.ts @@ -139,9 +139,11 @@ export const addDashboard = (config?: Partial) => { setDashboardTimeRange(timeRange); - e2e.components.PageToolbar.item('Save dashboard').click(); - e2e.pages.SaveDashboardAsModal.newName().clear().type(title, { force: true }); - e2e.pages.SaveDashboardAsModal.save().click(); + //Use different selectors if dashboardScene feature flag is enabled + + e2e.components.PageToolbar.itemButton('Save dashboard').click(); + e2e.pages.SaveDashboardModal.newName().clear().type(title, { force: true }); + e2e.pages.SaveDashboardModal.saveButtonDrawer().click(); e2e.flows.assertSuccessNotification(); e2e.pages.AddDashboard.itemButton('Create new panel button').should('be.visible'); diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts index ae54d0ce941..f5c8b82a676 100644 --- a/packages/grafana-e2e-selectors/src/selectors/pages.ts +++ b/packages/grafana-e2e-selectors/src/selectors/pages.ts @@ -222,7 +222,10 @@ export const Pages = { save: 'Save dashboard button', }, SaveDashboardModal: { + newName: 'Save dashboard title field', save: 'Dashboard settings Save Dashboard Modal Save button', + saveDashboardToolbar: 'data-testid Save dashboard', + saveButtonDrawer: 'data-testid Save dashboard button', saveVariables: 'Dashboard settings Save Dashboard Modal Save variables checkbox', saveTimerange: 'Dashboard settings Save Dashboard Modal Save timerange checkbox', }, diff --git a/packages/grafana-e2e/src/flows/addDashboard.ts b/packages/grafana-e2e/src/flows/addDashboard.ts index 2526a03422e..d5ae0548bbd 100644 --- a/packages/grafana-e2e/src/flows/addDashboard.ts +++ b/packages/grafana-e2e/src/flows/addDashboard.ts @@ -141,8 +141,8 @@ export const addDashboard = (config?: Partial) => { setDashboardTimeRange(timeRange); e2e.components.PageToolbar.item('Save dashboard').click(); - e2e.pages.SaveDashboardAsModal.newName().clear().type(title, { force: true }); - e2e.pages.SaveDashboardAsModal.save().click(); + e2e.pages.SaveDashboardModal.newName().clear().type(title, { force: true }); + e2e.pages.SaveDashboardModal.saveButtonDrawer().click(); e2e.flows.assertSuccessNotification(); e2e.pages.AddDashboard.itemButton('Create new panel button').should('be.visible'); diff --git a/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx b/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx index 5f201c9f6a1..930a29de07a 100644 --- a/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx +++ b/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx @@ -2,6 +2,7 @@ import debounce from 'debounce-promise'; import React from 'react'; import { UseFormSetValue, useForm } from 'react-hook-form'; +import { selectors } from '@grafana/e2e-selectors'; import { Dashboard } from '@grafana/schema'; import { Button, Input, Switch, Field, Label, TextArea, Stack, Alert, Box } from '@grafana/ui'; import { FolderPicker } from 'app/core/components/Select/FolderPicker'; @@ -66,7 +67,13 @@ export function SaveDashboardAsForm({ dashboard, drawer, changeInfo }: Props) { ); const saveButton = (overwrite: boolean) => ( - + ); function renderFooter(error?: Error) { diff --git a/public/app/features/dashboard-scene/saving/SaveDashboardForm.tsx b/public/app/features/dashboard-scene/saving/SaveDashboardForm.tsx index 280fe65cebc..a3120ed9aa1 100644 --- a/public/app/features/dashboard-scene/saving/SaveDashboardForm.tsx +++ b/public/app/features/dashboard-scene/saving/SaveDashboardForm.tsx @@ -45,7 +45,13 @@ export function SaveDashboardForm({ dashboard, drawer, changeInfo }: Props) { ); const saveButton = (overwrite: boolean) => ( - + ); function renderFooter(error?: Error) { diff --git a/public/app/features/dashboard-scene/saving/shared.tsx b/public/app/features/dashboard-scene/saving/shared.tsx index ad52947cb44..ed65e21059a 100644 --- a/public/app/features/dashboard-scene/saving/shared.tsx +++ b/public/app/features/dashboard-scene/saving/shared.tsx @@ -56,14 +56,16 @@ export interface SaveButtonProps { onSave: (overwrite: boolean) => void; isLoading: boolean; isValid?: boolean; + testId?: string; } -export function SaveButton({ overwrite, isLoading, isValid, onSave }: SaveButtonProps) { +export function SaveButton({ overwrite, isLoading, isValid, onSave, testId }: SaveButtonProps) { + const testIdSelector = testId ? testId : selectors.pages.SaveDashboardModal.save; return ( @@ -474,6 +475,7 @@ export function ToolbarActions({ dashboard }: Props) { tooltip="Save changes" size="sm" variant={isDirty ? 'primary' : 'secondary'} + data-testid={selectors.pages.SaveDashboardModal.saveDashboardToolbar} > Save dashboard diff --git a/public/app/features/dashboard/components/DashNav/DashNav.tsx b/public/app/features/dashboard/components/DashNav/DashNav.tsx index ff50667bc3b..7c3af86a722 100644 --- a/public/app/features/dashboard/components/DashNav/DashNav.tsx +++ b/public/app/features/dashboard/components/DashNav/DashNav.tsx @@ -315,6 +315,7 @@ export const DashNav = React.memo((props) => { onDismiss: hideModal, }); }} + data-testid={e2eSelectors.pages.SaveDashboardModal.saveDashboardToolbar} /> )} diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx index 8e435c158b8..4ae8dbd6712 100644 --- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx +++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx @@ -1,5 +1,6 @@ import React, { ChangeEvent } from 'react'; +import { selectors } from '@grafana/e2e-selectors'; import { config } from '@grafana/runtime'; import { Button, Input, Switch, Form, Field, InputControl, HorizontalGroup, Label, TextArea } from '@grafana/ui'; import { FolderPicker } from 'app/core/components/Select/FolderPicker'; @@ -188,7 +189,12 @@ export const SaveDashboardAsForm = ({ -