From 6e88802cabe0db4db0ae499288bdb61afc82a4e5 Mon Sep 17 00:00:00 2001 From: Ezequiel Victorero Date: Thu, 23 May 2024 10:35:03 -0300 Subject: [PATCH] Snapshots: Add e2e test for Scenes view (#88003) --- e2e/run-suite | 14 ++++- .../dashboard-suite/snapshot-create.spec.ts | 60 +++++++++++++++++++ .../src/selectors/pages.ts | 8 +++ .../scene/DashboardControls.tsx | 6 +- .../sharing/ShareSnapshotTab.tsx | 18 +++++- 5 files changed, 102 insertions(+), 4 deletions(-) create mode 100644 e2e/scenes/dashboard-suite/snapshot-create.spec.ts diff --git a/e2e/run-suite b/e2e/run-suite index d40abcc5fd4..d19c3bbfd1a 100755 --- a/e2e/run-suite +++ b/e2e/run-suite @@ -91,7 +91,19 @@ case "$1" in env[SCENES]=true cypressConfig[specPattern]=$rootForScenesSuite/*/$testFilesForSingleSuite cypressConfig[video]=false - # CMD="cypress open" + case "$2" in + "debug") + echo -e "Debug mode" + env[SLOWMO]=1 + PARAMS="--no-exit" + enterpriseSuite=$(basename "${args[2]}") + ;; + "dev") + echo "Dev mode" + CMD="cypress open" + enterpriseSuite=$(basename "${args[2]}") + ;; + esac ;; *) diff --git a/e2e/scenes/dashboard-suite/snapshot-create.spec.ts b/e2e/scenes/dashboard-suite/snapshot-create.spec.ts new file mode 100644 index 00000000000..c478b98fa26 --- /dev/null +++ b/e2e/scenes/dashboard-suite/snapshot-create.spec.ts @@ -0,0 +1,60 @@ +import { e2e } from '../utils'; + +describe('Snapshots', () => { + beforeEach(() => { + e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD')); + }); + + it('Create a snapshot dashboard', () => { + // Opening a dashboard + cy.intercept({ + pathname: '/api/ds/query', + }).as('query'); + e2e.flows.openDashboard({ uid: 'ZqZnVvFZz' }); + cy.wait('@query'); + + const panelsToCheck = [ + 'Raw Data Graph', + 'Last non-null', + 'min', + 'Max', + 'The data from graph above with seriesToColumns transform', + ]; + + // Open the sharing modal + e2e.components.NavToolbar.shareDashboard().click(); + + // Select the snapshot tab + e2e.pages.ShareDashboardModal.SnapshotScene.Tab().click(); + + // Publish snapshot + cy.intercept('POST', '/api/snapshots').as('save'); + e2e.pages.ShareDashboardModal.SnapshotScene.PublishSnapshot().click(); + cy.wait('@save'); + + // Copy link button should be visible + e2e.pages.ShareDashboardModal.SnapshotScene.CopyUrlButton().should('exist'); + + // Copy the snapshot URL form the input and open the snapshot + e2e.pages.ShareDashboardModal.SnapshotScene.CopyUrlInput() + .invoke('val') + .then((text) => cy.wrap(text).as('url')); + + // Open the snapshot using the new URL + cy.get('@url').then((url) => { + e2e.pages.ShareDashboardModal.SnapshotScene.visit(getSnapshotKey(String(url))); + }); + + // Validate the dashboard controls are rendered + e2e.pages.Dashboard.Controls().should('exist'); + + // Validate the panels are rendered + for (const title of panelsToCheck) { + e2e.components.Panels.Panel.title(title).should('be.visible'); + } + }); +}); +// +const getSnapshotKey = (url: string): string => { + return url.split('/').pop(); +}; diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts index b9efadec03e..574b8c3fd29 100644 --- a/packages/grafana-e2e-selectors/src/selectors/pages.ts +++ b/packages/grafana-e2e-selectors/src/selectors/pages.ts @@ -73,6 +73,7 @@ export const Pages = { next: 'data-testid playlist next dashboard button', }, }, + Controls: 'data-testid dashboard controls', SubMenu: { submenu: 'Dashboard submenu', submenuItem: 'data-testid template variable', @@ -271,6 +272,13 @@ export const Pages = { PublicDashboardScene: { Tab: 'Tab Public Dashboard', }, + SnapshotScene: { + url: (key: string) => `/dashboard/snapshot/${key}`, + Tab: 'Tab Snapshot', + PublishSnapshot: 'data-testid publish snapshot button', + CopyUrlButton: 'data-testid snapshot copy url button', + CopyUrlInput: 'data-testid snapshot copy url input', + }, }, PublicDashboard: { page: 'public-dashboard-page', diff --git a/public/app/features/dashboard-scene/scene/DashboardControls.tsx b/public/app/features/dashboard-scene/scene/DashboardControls.tsx index e62cd864efe..fb46c138d4a 100644 --- a/public/app/features/dashboard-scene/scene/DashboardControls.tsx +++ b/public/app/features/dashboard-scene/scene/DashboardControls.tsx @@ -2,6 +2,7 @@ import { css, cx } from '@emotion/css'; import React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; +import { selectors } from '@grafana/e2e-selectors'; import { SceneObjectState, SceneObject, @@ -60,7 +61,10 @@ function DashboardControlsRenderer({ model }: SceneComponentProps +
{variableControls.map((c) => ( diff --git a/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx b/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx index d0de8715791..a039db09064 100644 --- a/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx +++ b/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx @@ -2,6 +2,7 @@ import React from 'react'; import useAsyncFn from 'react-use/lib/useAsyncFn'; import { SelectableValue } from '@grafana/data'; +import { selectors as e2eSelectors } from '@grafana/e2e-selectors'; import { getBackendSrv } from '@grafana/runtime'; import { SceneComponentProps, sceneGraph, SceneObjectBase, SceneObjectRef, VizPanel } from '@grafana/scenes'; import { Button, ClipboardButton, Field, Input, Modal, RadioButtonGroup } from '@grafana/ui'; @@ -14,6 +15,8 @@ import { DashboardInteractions } from '../utils/interactions'; import { SceneShareTabState } from './types'; +const selectors = e2eSelectors.pages.ShareDashboardModal.SnapshotScene; + const getExpireOptions = () => { const DEFAULT_EXPIRE_OPTION: SelectableValue = { label: t('share-modal.snapshot.expire-week', '1 Week'), @@ -214,7 +217,12 @@ function ShareSnapshoTabRenderer({ model }: SceneComponentProps )} - @@ -226,11 +234,17 @@ function ShareSnapshoTabRenderer({ model }: SceneComponentProps snapshotResult.value!.url}> + snapshotResult.value!.url} + > Copy }