Add functional tests, that banner is shown (#15121) (#15181)

src/core_plugins/kibana/public/visualize/editor/editor.html

@@ -50,7 +50,11 @@
     index-patterns="[indexPattern]"
   ></filter-bar>
 
-  <div class="kuiInfoPanel kuiInfoPanel--warning kuiVerticalRhythm" ng-if="vis.type.shouldMarkAsExperimentalInUI()">
+  <div
+    class="kuiInfoPanel kuiInfoPanel--warning kuiVerticalRhythm"
+    ng-if="vis.type.shouldMarkAsExperimentalInUI()"
+    data-test-subj="experimentalVisInfo"
+  >
     <div class="kuiInfoPanelBody">
       <div class="kuiInfoPanelBody__message" ng-bind-html="getAdditionalMessage()">
       </div>

src/core_plugins/kibana/public/visualize/wizard/step_1.html

@@ -12,7 +12,7 @@
   </div>
 </kbn-top-nav>
 
-<div class="kuiViewContent kuiViewContent--constrainedWidth">
+<div class="kuiViewContent kuiViewContent--constrainedWidth" data-test-subj="visualizeSelectTypePage">
   <div class="kuiViewContentItem">
     <!-- Header -->
     <div class="visualizeViewContentHeader kuiVerticalRhythm kuiVerticalRhythm--medium">

src/core_plugins/kibana/public/visualize/wizard/step_2.html

@@ -12,7 +12,7 @@
   </div>
 </kbn-top-nav>
 
-<div class="kuiViewContent kuiViewContent--constrainedWidth">
+<div class="kuiViewContent kuiViewContent--constrainedWidth" data-test-subj="visualizeSelectSearch">
   <div class="wizard kuiViewContentItem">
     <div class="wizard-column wizard-column--small">
       <h2 class="kuiTitle kuiVerticalRhythm">

test/functional/apps/visualize/_experimental_vis.js

@@ -0,0 +1,59 @@
+import expect from 'expect.js';
+
+export default ({ getService, getPageObjects }) => {
+  const log = getService('log');
+  const PageObjects = getPageObjects(['common', 'visualize']);
+
+  describe('visualize app', () => {
+
+    describe('experimental visualizations', () => {
+
+      beforeEach(async () => {
+        log.debug('navigateToApp visualize');
+        await PageObjects.common.navigateToUrl('visualize', 'new');
+        await PageObjects.visualize.waitForVisualizationSelectPage();
+      });
+
+      it('should show an notification when creating experimental visualizations', async () => {
+        // Try to find a experimental visualization.
+        const experimentalTypes = await PageObjects.visualize.getExperimentalTypeLinks();
+        if (experimentalTypes.length === 0) {
+          log.info('No experimental visualization found. Skipping this test.');
+          return;
+        }
+
+        // Create a new visualization
+        await experimentalTypes[0].click();
+        // Select a index-pattern/search if this vis requires it
+        await PageObjects.visualize.selectVisSourceIfRequired();
+        // Check that the experimental banner is there and state that this is experimental
+        const info = await PageObjects.visualize.getExperimentalInfo();
+        expect(await info.getVisibleText()).to.contain('experimental');
+      });
+
+      it('should show an notification when creating lab visualizations', async () => {
+        // Try to find a lab visualization.
+        const labTypes = await PageObjects.visualize.getLabTypeLinks();
+        if (labTypes.length === 0) {
+          log.info('No lab visualization found. Skipping this test.');
+          return;
+        }
+
+        // Create a new visualization
+        await labTypes[0].click();
+        // Select a index-pattern/search if this vis requires it
+        await PageObjects.visualize.selectVisSourceIfRequired();
+        // Check that the experimental banner is there and state that this is experimental
+        const info = await PageObjects.visualize.getExperimentalInfo();
+        expect(await info.getVisibleText()).to.contain('experimental');
+      });
+
+      it('should not show that notification for stable visualizations', async () => {
+        await PageObjects.visualize.clickAreaChart();
+        await PageObjects.visualize.clickNewSearch();
+        expect(await PageObjects.visualize.isExperimentalInfoShown()).to.be(false);
+      });
+    });
+
+  });
+};

test/functional/apps/visualize/index.js

@@ -15,6 +15,7 @@ export default function ({ getService, loadTestFile }) {
 
     loadTestFile(require.resolve('./_spy_panel'));
     loadTestFile(require.resolve('./_chart_types'));
+    loadTestFile(require.resolve('./_experimental_vis'));
     loadTestFile(require.resolve('./_gauge_chart'));
     loadTestFile(require.resolve('./_area_chart'));
     loadTestFile(require.resolve('./_line_chart'));

test/functional/page_objects/visualize_page.js

@@ -12,6 +12,10 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
 
   class VisualizePage {
 
+    async waitForVisualizationSelectPage() {
+      await testSubjects.find('visualizeSelectTypePage');
+    }
+
     async clickAreaChart() {
       await find.clickByPartialLinkText('Area');
     }
@@ -108,6 +112,31 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
       return await Promise.all(getChartTypesPromises);
     }
 
+    async selectVisSourceIfRequired() {
+      log.debug('selectVisSourceIfRequired');
+      const selectPage = await testSubjects.findAll('visualizeSelectSearch');
+      if (selectPage.length) {
+        log.debug('a search is required for this visualization');
+        await this.clickNewSearch();
+      }
+    }
+
+    async getLabTypeLinks() {
+      return await remote.findAllByPartialLinkText('(Lab)');
+    }
+
+    async getExperimentalTypeLinks() {
+      return await remote.findAllByPartialLinkText('(Experimental)');
+    }
+
+    async isExperimentalInfoShown() {
+      return await testSubjects.exists('experimentalVisInfo');
+    }
+
+    async getExperimentalInfo() {
+      return await testSubjects.find('experimentalVisInfo');
+    }
+
     async clickAbsoluteButton() {
       await find.clickByCssSelector(
         'ul.nav.nav-pills.nav-stacked.kbn-timepicker-modes:contains("absolute")',