Standarize e2e for addDashbaord e2e flow

This commit is contained in:
Alexandra Vargas 2024-03-14 14:50:56 +01:00
parent ae70cd953d
commit 6b9ea9d5a4
11 changed files with 41 additions and 15 deletions

View File

@ -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"],

View File

@ -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');

View File

@ -139,9 +139,11 @@ export const addDashboard = (config?: Partial<AddDashboardConfig>) => {
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');

View File

@ -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',
},

View File

@ -141,8 +141,8 @@ export const addDashboard = (config?: Partial<AddDashboardConfig>) => {
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');

View File

@ -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) => (
<SaveButton isValid={isValid} isLoading={state.loading} onSave={onSave} overwrite={overwrite} />
<SaveButton
isValid={isValid}
isLoading={state.loading}
onSave={onSave}
overwrite={overwrite}
testId={selectors.pages.SaveDashboardModal.saveButtonDrawer}
/>
);
function renderFooter(error?: Error) {

View File

@ -45,7 +45,13 @@ export function SaveDashboardForm({ dashboard, drawer, changeInfo }: Props) {
);
const saveButton = (overwrite: boolean) => (
<SaveButton isValid={hasChanges} isLoading={state.loading} onSave={onSave} overwrite={overwrite} />
<SaveButton
isValid={hasChanges}
isLoading={state.loading}
onSave={onSave}
overwrite={overwrite}
testId={selectors.pages.SaveDashboardModal.saveButtonDrawer}
/>
);
function renderFooter(error?: Error) {

View File

@ -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 (
<Button
disabled={!isValid || isLoading}
icon={isLoading ? 'spinner' : undefined}
aria-label={selectors.pages.SaveDashboardModal.save}
data-testid={testIdSelector}
onClick={() => onSave(overwrite)}
variant={overwrite ? 'destructive' : 'primary'}
>

View File

@ -417,6 +417,7 @@ export function ToolbarActions({ dashboard }: Props) {
key="save"
size="sm"
variant={'primary'}
data-testid={selectors.pages.SaveDashboardModal.saveDashboardToolbar}
>
Save dashboard
</Button>
@ -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
</Button>

View File

@ -315,6 +315,7 @@ export const DashNav = React.memo<Props>((props) => {
onDismiss: hideModal,
});
}}
data-testid={e2eSelectors.pages.SaveDashboardModal.saveDashboardToolbar}
/>
)}
</ModalsController>

View File

@ -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 = ({
<Button type="button" variant="secondary" onClick={onCancel} fill="outline">
Cancel
</Button>
<Button disabled={isLoading} type="submit" aria-label="Save dashboard button">
<Button
disabled={isLoading}
type="submit"
aria-label="Save dashboard button"
data-testid={selectors.pages.SaveDashboardModal.saveButtonDrawer}
>
{isLoading ? 'Saving...' : 'Save'}
</Button>
</HorizontalGroup>