Public Dashboards: add e2e tests for public dashboards (#52970)

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -4,6 +4,7 @@ import { connect, ConnectedProps } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 
 import { locationUtil, textUtil } from '@grafana/data';
+import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
 import { locationService } from '@grafana/runtime';
 import { ButtonGroup, ModalsController, ToolbarButton, PageToolbar, useForceUpdate, Tag } from '@grafana/ui';
 import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
@@ -31,6 +32,8 @@ const mapDispatchToProps = {
 
 const connector = connect(null, mapDispatchToProps);
 
+const selectors = e2eSelectors.pages.Dashboard.DashNav;
+
 export interface OwnProps {
   dashboard: DashboardModel;
   isFullscreen: boolean;
@@ -157,7 +160,7 @@ export const DashNav = React.memo<Props>((props) => {
     }
 
     if (dashboard.meta.publicDashboardEnabled) {
-      buttons.push(<Tag name="Public" colorIndex={5}></Tag>);
+      buttons.push(<Tag name="Public" colorIndex={5} data-testid={selectors.publicDashboardTag}></Tag>);
     }
 
     if (dashboard.uid && config.featureToggles.dashboardComments) {

public/app/features/dashboard/components/ShareModal/SharePublicDashboard.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
+import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
 import { reportInteraction } from '@grafana/runtime/src';
 import {
   Alert,
@@ -37,6 +38,8 @@ interface Acknowledgements {
 
 export const SharePublicDashboard = (props: Props) => {
   const dashboardVariables = props.dashboard.getVariables();
+  const selectors = e2eSelectors.pages.ShareDashboardModal.PublicDashboard;
+
   const [publicDashboard, setPublicDashboardConfig] = useState<PublicDashboard>({
     isEnabled: false,
     uid: '',
@@ -93,7 +96,11 @@ export const SharePublicDashboard = (props: Props) => {
     <>
       <p>Welcome to Grafana public dashboards alpha!</p>
       {dashboardHasTemplateVariables(dashboardVariables) ? (
-        <Alert severity="warning" title="dashboard cannot be public">
+        <Alert
+          severity="warning"
+          title="dashboard cannot be public"
+          data-testid={selectors.TemplateVariablesWarningAlert}
+        >
           This dashboard cannot be made public because it has template variables
         </Alert>
       ) : (
@@ -121,6 +128,7 @@ export const SharePublicDashboard = (props: Props) => {
                   label="Your entire dashboard will be public"
                   value={acknowledgements.public}
                   disabled={publicDashboardPersisted(publicDashboard)}
+                  data-testid={selectors.WillBePublicCheckbox}
                   onChange={(e) => onAcknowledge('public', e.currentTarget.checked)}
                 />
               </div>
@@ -130,6 +138,7 @@ export const SharePublicDashboard = (props: Props) => {
                   label="Publishing currently only works with a subset of datasources"
                   value={acknowledgements.datasources}
                   disabled={publicDashboardPersisted(publicDashboard)}
+                  data-testid={selectors.LimitedDSCheckbox}
                   onChange={(e) => onAcknowledge('datasources', e.currentTarget.checked)}
                 />
                 <LinkButton
@@ -147,6 +156,7 @@ export const SharePublicDashboard = (props: Props) => {
                 label="Making your dashboard public will cause queries to run each time the dashboard is viewed which may increase costs"
                 value={acknowledgements.usage}
                 disabled={publicDashboardPersisted(publicDashboard)}
+                data-testid={selectors.CostIncreaseCheckbox}
                 onChange={(e) => onAcknowledge('usage', e.currentTarget.checked)}
               />
               <LinkButton
@@ -188,6 +198,7 @@ export const SharePublicDashboard = (props: Props) => {
               <Field label="Enabled" description="Configures whether current dashboard can be available publicly">
                 <Switch
                   disabled={dashboardHasTemplateVariables(dashboardVariables)}
+                  data-testid={selectors.EnableSwitch}
                   value={publicDashboard?.isEnabled}
                   onChange={() => {
                     reportInteraction('grafana_dashboards_public_enable_clicked', {
@@ -206,8 +217,10 @@ export const SharePublicDashboard = (props: Props) => {
                   <Input
                     value={generatePublicDashboardUrl(publicDashboard)}
                     readOnly
+                    data-testid={selectors.CopyUrlInput}
                     addonAfter={
                       <ClipboardButton
+                        data-testid={selectors.CopyUrlButton}
                         variant="primary"
                         icon="copy"
                         getText={() => {
@@ -228,7 +241,11 @@ export const SharePublicDashboard = (props: Props) => {
                 severity="warning"
               />
             )}
-            <Button disabled={!acknowledged() || props.dashboard.hasUnsavedChanges()} onClick={onSavePublicConfig}>
+            <Button
+              disabled={!acknowledged() || props.dashboard.hasUnsavedChanges()}
+              onClick={onSavePublicConfig}
+              data-testid={selectors.SaveConfigButton}
+            >
               Save Sharing Configuration
             </Button>
           </div>