Snapshots: Add e2e test for Scenes view (#88003)

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
       ;;
 
     *)

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();
+};

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

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<DashboardContr
   const showDebugger = location.search.includes('scene-debugger');
 
   return (
-    <div className={cx(styles.controls, meta.isEmbedded && styles.embedded)}>
+    <div
+      data-testid={selectors.pages.Dashboard.Controls}
+      className={cx(styles.controls, meta.isEmbedded && styles.embedded)}
+    >
       <Stack grow={1} wrap={'wrap'}>
         {variableControls.map((c) => (
           <c.Component model={c} key={c.state.key} />

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<number> = {
     label: t('share-modal.snapshot.expire-week', '1 Week'),
@@ -214,7 +217,12 @@ function ShareSnapshoTabRenderer({ model }: SceneComponentProps<ShareSnapshotTab
                 {snapshotSharingOptions?.externalSnapshotName}
               </Button>
             )}
-            <Button variant="primary" disabled={snapshotResult.loading} onClick={() => createSnapshot()}>
+            <Button
+              variant="primary"
+              disabled={snapshotResult.loading}
+              onClick={() => createSnapshot()}
+              data-testid={selectors.PublishSnapshot}
+            >
               <Trans i18nKey="share-modal.snapshot.local-button">Publish Snapshot</Trans>
             </Button>
           </Modal.ButtonRow>
@@ -226,11 +234,17 @@ function ShareSnapshoTabRenderer({ model }: SceneComponentProps<ShareSnapshotTab
         <>
           <Field label={t('share-modal.snapshot.url-label', 'Snapshot URL')}>
             <Input
+              data-testid={selectors.CopyUrlInput}
               id="snapshot-url-input"
               value={snapshotResult.value.url}
               readOnly
               addonAfter={
-                <ClipboardButton icon="copy" variant="primary" getText={() => snapshotResult.value!.url}>
+                <ClipboardButton
+                  data-testid={selectors.CopyUrlButton}
+                  icon="copy"
+                  variant="primary"
+                  getText={() => snapshotResult.value!.url}
+                >
                   <Trans i18nKey="share-modal.snapshot.copy-link-button">Copy</Trans>
                 </ClipboardButton>
               }