Expand coverage of dashboard tests (#17703) (#18861)

* Expand coverage of dashboard tests and decrease time

* Fix timing error when sub urls fail to save from too fast app link clicking

* discover doesn't have breadcrumbs

* Check top nav text so it works on both listing and saved object edit/view pages

* need to do the add panel operations one at a time

* Need both types of input in filter

* Give test data a title

* Remove incorrect and unnecessary comment

* Move data around and get rid of 6_3 specific naming as we will end up migrating the data as we progress

* Remove code accidentally checked in

src/core_plugins/kibana/public/dashboard/panel/__snapshots__/dashboard_panel.test.js.snap

@@ -10,13 +10,16 @@ exports[`DashboardPanel matches snapshot 1`] = `
   >
     <div
       class="panel-heading"
+      data-test-subj="dashboardPanelHeading-myembeddabletitle"
     >
       <span
-        aria-label="Dashboard panel: "
+        aria-label="Dashboard panel: my embeddable title"
         class="panel-title"
         data-test-subj="dashboardPanelTitle"
-        title=""
-      />
+        title="my embeddable title"
+      >
+        my embeddable title
+      </span>
       <div
         class="kuiMicroButtonGroup"
       >

src/core_plugins/kibana/public/dashboard/panel/dashboard_panel.test.js

@@ -11,6 +11,7 @@ import {
   updateViewMode,
   setPanels,
   updateTimeRange,
+  embeddableIsInitialized,
 } from '../actions';
 import { Provider } from 'react-redux';
 
@@ -37,6 +38,8 @@ beforeAll(() => {
   store.dispatch(updateTimeRange({ to: 'now', from: 'now-15m' }));
   store.dispatch(updateViewMode(DashboardViewMode.EDIT));
   store.dispatch(setPanels({ 'foo1': { panelIndex: 'foo1' } }));
+  const metadata = { title: 'my embeddable title', editUrl: 'editme' };
+  store.dispatch(embeddableIsInitialized({ metadata, panelId: 'foo1' }));
 });
 
 test('DashboardPanel matches snapshot', () => {

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header.js

@@ -13,7 +13,7 @@ export function PanelHeader({ title, actions, isViewOnlyMode, hidePanelTitles })
   }
 
   return (
-    <div className="panel-heading">
+    <div className="panel-heading" data-test-subj={`dashboardPanelHeading-${title.replace(/\s/g, '')}`}>
       <span
         data-test-subj="dashboardPanelTitle"
         className="panel-title"

src/core_plugins/kibana/public/dashboard/top_nav/add_panel.html

@@ -2,7 +2,7 @@
   ng-switch="mode"
   ng-init="mode = 'visualization'"
 >
-  <h2 class="kuiLocalDropdownTitle">
+  <h2 class="kuiLocalDropdownTitle" data-test-subj="dashboardAddPanel">
     Add Panels
   </h2>
 

src/core_plugins/metrics/public/components/no_data.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 function NoDataComponent() {
   return (
-    <div className="metrics_issue">
+    <div className="metrics_issue" data-test-subj="noTSVBDataMessage">
       <div className="metrics_issue__title">No data to display for the selected metrics .</div>
     </div>
   );

src/core_plugins/metrics/public/components/vis_types/markdown/vis.js

@@ -34,7 +34,7 @@ function MarkdownVisualization(props) {
     if (reversed) className += ' reversed';
     const markdownError = markdownSource instanceof Error ? markdownSource : null;
     markdown = (
-      <div className={className}>
+      <div className={className} data-test-subj="tsvbMarkdown">
         {markdownError && <ErrorComponent error={markdownError} />}
         <style type="text/css">{model.markdown_css}</style>
         <div className={contentClassName}>

src/core_plugins/metrics/public/visualizations/components/metric.js

@@ -135,7 +135,13 @@ class Metric extends Component {
           <div ref={(el) => this.inner = el} className="rhythm_metric__inner" style={styles.inner}>
             <div className="rhythm_metric__primary">
               { primaryLabel }
-              <div style={styles.primary_value} className="rhythm_metric__primary-value">{ primaryValue }</div>
+              <div
+                style={styles.primary_value}
+                data-test-subj="tsvbMetricValue"
+                className="rhythm_metric__primary-value"
+              >
+                { primaryValue }
+              </div>
             </div>
             { secondarySnippet }
             {additionalLabel}

src/core_plugins/metrics/public/visualizations/components/top_n.js

@@ -47,7 +47,7 @@ class TopN extends Component {
               style={styles.innerBar}
             />
           </td>
-          <td width="1*" className="rhythm_top_n__value">{ value }</td>
+          <td width="1*" className="rhythm_top_n__value" data-test-subj="tsvbTopNValue">{ value }</td>
         </tr>
       );
     };

src/core_plugins/metrics/public/visualizations/lib/create_legend_series.js

@@ -17,6 +17,7 @@ export default props => (row, i) => {
     <div
       key={key}
       className={classes.join(' ')}
+      data-test-subj="tsvbLegendItem"
     >
       <button
         onClick={event => props.onToggle(event, row.id)}

src/core_plugins/tagcloud/public/tag_cloud_visualization.js

@@ -16,6 +16,7 @@ export class TagCloudVisualization {
 
     const cloudContainer = document.createElement('div');
     cloudContainer.classList.add('tagcloud-vis');
+    cloudContainer.setAttribute('data-test-subj', 'tagCloudVisualization');
     this._containerNode.appendChild(cloudContainer);
 
     this._vis = vis;

src/ui/public/filter_editor/filter_editor.html

@@ -7,6 +7,7 @@
     </div>
 
     <button
+      data-test-subj="filterEditorModalCloseButton"
       class="kuiModalHeaderCloseButton kuiIcon fa-times"
       ng-click="filterEditor.onCancel()"
       aria-label="Close filter popover"

src/ui/public/flot-charts/jquery.flot.js

@@ -2010,7 +2010,7 @@ Licensed under the MIT license.
                             ctx.lineTo(xrange.to + subPixel, yrange.to);
                         } else {
                             ctx.moveTo(xrange.from, yrange.to + subPixel);
-                            ctx.lineTo(xrange.to, yrange.to + subPixel);                            
+                            ctx.lineTo(xrange.to, yrange.to + subPixel);
                         }
                         ctx.stroke();
                     } else {
@@ -2525,9 +2525,9 @@ Licensed under the MIT license.
                 radius = series.points.radius,
                 symbol = series.points.symbol;
 
-            // If the user sets the line width to 0, we change it to a very 
+            // If the user sets the line width to 0, we change it to a very
             // small value. A line width of 0 seems to force the default of 1.
-            // Doing the conditional here allows the shadow setting to still be 
+            // Doing the conditional here allows the shadow setting to still be
             // optional even with a lineWidth of 0.
 
             if( lw == 0 )
@@ -2771,7 +2771,7 @@ Licensed under the MIT license.
 
                 fragments.push(
                     '<td class="legendColorBox"><div style="border:1px solid ' + options.legend.labelBoxBorderColor + ';padding:1px"><div style="width:4px;height:0;border:5px solid ' + entry.color + ';overflow:hidden"></div></div></td>' +
-                    '<td class="legendLabel">' + entry.label + '</td>'
+                    '<td class="legendLabel" data-test-subj="flotLegendLabel">' + entry.label + '</td>'
                 );
             }
 

src/ui/public/partials/paginate_controls.html

@@ -65,6 +65,7 @@
     <li ng-style="{'visibility':'hidden'}" ng-if="page.last">
       <button
         class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton"
+        data-test-subj="paginateNext"
         ng-click="paginate.goToPage(page.next)"
       >
         <span class="euiButtonEmpty__content">»</span>
@@ -73,6 +74,7 @@
     <li ng-style="{'visibility':'visible'}" ng-if="!page.last">
       <button
         class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton"
+        data-test-subj="paginateNext"
         ng-click="paginate.goToPage(page.next)"
       >
         <span class="euiButtonEmpty__content">»</span>

test/functional/apps/dashboard/_create_and_add_embeddables.js

@@ -0,0 +1,46 @@
+import expect from 'expect.js';
+
+import {
+  VisualizeConstants
+} from '../../../../src/core_plugins/kibana/public/visualize/visualize_constants';
+
+export default function ({ getService, getPageObjects }) {
+  const retry = getService('retry');
+  const PageObjects = getPageObjects(['dashboard', 'header', 'visualize']);
+  const remote = getService('remote');
+  const dashboardAddPanel = getService('dashboardAddPanel');
+
+  describe('create and add embeddables', async () => {
+    before(async () => {
+      await PageObjects.dashboard.loadSavedDashboard('few panels');
+    });
+
+    describe('add new visualization link', () => {
+      it('adds a new visualization', async () => {
+        const originalPanelCount = await PageObjects.dashboard.getPanelCount();
+        await PageObjects.dashboard.clickEdit();
+        await dashboardAddPanel.ensureAddPanelIsShowing();
+        await dashboardAddPanel.clickAddNewEmbeddableLink();
+        await PageObjects.visualize.clickAreaChart();
+        await PageObjects.visualize.clickNewSearch();
+        await PageObjects.visualize.saveVisualization('visualization from add new link');
+
+        return retry.try(async () => {
+          const panelCount = await PageObjects.dashboard.getPanelCount();
+          expect(panelCount).to.eql(originalPanelCount + 1);
+        });
+      });
+
+      it('saves the saved visualization url to the app link', async () => {
+        await PageObjects.header.clickVisualize();
+        const currentUrl = await remote.getCurrentUrl();
+        expect(currentUrl).to.contain(VisualizeConstants.EDIT_PATH);
+      });
+
+      after(async () => {
+        await PageObjects.header.clickDashboard();
+      });
+    });
+  });
+}
+