[Lens] Add functional test for example integration (#103460)

x-pack/examples/embedded_lens_example/public/app.tsx

@@ -17,6 +17,7 @@ import {
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiTitle,
+  EuiCallOut,
 } from '@elastic/eui';
 import { IndexPattern } from 'src/plugins/data/public';
 import { CoreStart } from 'kibana/public';
@@ -149,6 +150,7 @@ export const App = (props: {
                 <EuiFlexGroup>
                   <EuiFlexItem grow={false}>
                     <EuiButton
+                      data-test-subj="lns-example-change-color"
                       isLoading={isLoading}
                       onClick={() => {
                         // eslint-disable-next-line no-bitwise
@@ -177,12 +179,32 @@ export const App = (props: {
                         setColor(newColor);
                       }}
                     >
-                      Edit in Lens
+                      Edit in Lens (new tab)
+                    </EuiButton>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiButton
+                      aria-label="Open lens in same tab"
+                      data-test-subj="lns-example-open-editor"
+                      isDisabled={!props.plugins.lens.canUseEditor()}
+                      onClick={() => {
+                        props.plugins.lens.navigateToPrefilledEditor(
+                          {
+                            id: '',
+                            timeRange: time,
+                            attributes: getLensAttributes(props.defaultIndexPattern!, color),
+                          },
+                          false
+                        );
+                      }}
+                    >
+                      Edit in Lens (same tab)
                     </EuiButton>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
                     <EuiButton
                       aria-label="Save visualization into library or embed directly into any dashboard"
+                      data-test-subj="lns-example-save"
                       isDisabled={!getLensAttributes(props.defaultIndexPattern, color)}
                       onClick={() => {
                         setIsSaveModalVisible(true);
@@ -191,6 +213,21 @@ export const App = (props: {
                       Save Visualization
                     </EuiButton>
                   </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiButton
+                      aria-label="Change time range"
+                      data-test-subj="lns-example-change-time-range"
+                      isDisabled={!getLensAttributes(props.defaultIndexPattern, color)}
+                      onClick={() => {
+                        setTime({
+                          from: '2015-09-18T06:31:44.000Z',
+                          to: '2015-09-23T18:31:44.000Z',
+                        });
+                      }}
+                    >
+                      Change time range
+                    </EuiButton>
+                  </EuiFlexItem>
                 </EuiFlexGroup>
                 <LensComponent
                   id=""
@@ -230,7 +267,13 @@ export const App = (props: {
                 )}
               </>
             ) : (
-              <p>This demo only works if your default index pattern is set and time based</p>
+              <EuiCallOut
+                title="Please define a default index pattern to use this demo"
+                color="danger"
+                iconType="alert"
+              >
+                <p>This demo only works if your default index pattern is set and time based</p>
+              </EuiCallOut>
             )}
           </EuiPageContentBody>
         </EuiPageContent>

x-pack/test/examples/config.ts

@@ -33,7 +33,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
       reportName: 'X-Pack Example plugin functional tests',
     },
 
-    testFiles: [require.resolve('./search_examples')],
+    testFiles: [require.resolve('./search_examples'), require.resolve('./embedded_lens')],
 
     kbnTestServer: {
       ...xpackFunctionalConfig.get('kbnTestServer'),

x-pack/test/examples/embedded_lens/embedded_example.ts

@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import expect from '@kbn/expect';
+import { FtrProviderContext } from '../../functional/ftr_provider_context';
+
+// eslint-disable-next-line import/no-default-export
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const PageObjects = getPageObjects(['lens', 'common', 'dashboard', 'timeToVisualize']);
+  const elasticChart = getService('elasticChart');
+  const testSubjects = getService('testSubjects');
+  const retry = getService('retry');
+
+  async function checkData() {
+    const data = await elasticChart.getChartDebugData();
+    expect(data!.bars![0].bars.length).to.eql(24);
+  }
+
+  describe('show and save', () => {
+    beforeEach(async () => {
+      await PageObjects.common.navigateToApp('embedded_lens_example');
+      await elasticChart.setNewChartUiDebugFlag(true);
+      await testSubjects.click('lns-example-change-time-range');
+      await PageObjects.lens.waitForVisualization();
+    });
+
+    it('should show chart', async () => {
+      await testSubjects.click('lns-example-change-color');
+      await PageObjects.lens.waitForVisualization();
+      await checkData();
+    });
+
+    it('should save to dashboard', async () => {
+      await testSubjects.click('lns-example-save');
+      await PageObjects.timeToVisualize.setSaveModalValues('From example', {
+        saveAsNew: true,
+        redirectToOrigin: false,
+        addToDashboard: 'new',
+        dashboardId: undefined,
+        saveToLibrary: false,
+      });
+
+      await testSubjects.click('confirmSaveSavedObjectButton');
+      await retry.waitForWithTimeout('Save modal to disappear', 1000, () =>
+        testSubjects
+          .missingOrFail('confirmSaveSavedObjectButton')
+          .then(() => true)
+          .catch(() => false)
+      );
+      await PageObjects.lens.goToTimeRange();
+      await PageObjects.dashboard.waitForRenderComplete();
+      await checkData();
+    });
+
+    it('should load Lens editor', async () => {
+      await testSubjects.click('lns-example-open-editor');
+      await PageObjects.lens.waitForVisualization();
+      await checkData();
+    });
+  });
+}

x-pack/test/examples/embedded_lens/index.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { PluginFunctionalProviderContext } from 'test/plugin_functional/services';
+
+// eslint-disable-next-line import/no-default-export
+export default function ({ getService, loadTestFile }: PluginFunctionalProviderContext) {
+  const esArchiver = getService('esArchiver');
+  const kibanaServer = getService('kibanaServer');
+
+  describe('embedded Lens examples', function () {
+    before(async () => {
+      await esArchiver.load('x-pack/test/functional/es_archives/logstash_functional');
+      await esArchiver.load('x-pack/test/functional/es_archives/lens/basic'); // need at least one index pattern
+      await kibanaServer.uiSettings.update({
+        defaultIndex: 'logstash-*',
+      });
+    });
+
+    after(async () => {
+      await esArchiver.unload('x-pack/test/functional/es_archives/lens/basic');
+    });
+
+    describe('', function () {
+      this.tags(['ciGroup4', 'skipFirefox']);
+
+      loadTestFile(require.resolve('./embedded_example'));
+    });
+  });
+}