Test: canvas functional smoke test (#25262)

~~Blocked by #23046 (pending #25828 merged

Adds functional smoke tests for Canvas. 

- Loads and checks the list of workpads
- Loads the first workpad and checks that elements render

This is the simple workpad it's testing

![screenshot 2018-11-19 12 37 07](https://user-images.githubusercontent.com/404731/48730518-da7ee980-ebf7-11e8-9abb-cf294079bb5f.png)

x-pack/plugins/canvas/public/components/element_content/element_content.js

@@ -51,6 +51,7 @@ export const ElementContent = compose(
       // TODO: 'canvas__element' was added for BWC, It can be removed after a while
       className={'canvas__element canvasElement'}
       style={{ ...renderable.containerStyle, ...size }}
+      data-test-subj="canvasWorkpadPageElementContent"
     >
       <ElementShareContainer
         className="canvasElement__content"

x-pack/plugins/canvas/public/components/workpad_loader/workpad_loader.js

@@ -179,6 +179,7 @@ export class WorkpadLoader extends React.PureComponent {
 
           return (
             <Link
+              data-test-subj="canvasWorkpadLoaderWorkpad"
               name="loadWorkpad"
               params={{ id: workpad.id }}
               aria-label={`Load workpad ${workpadName}`}
@@ -246,6 +247,7 @@ export class WorkpadLoader extends React.PureComponent {
             isSelectable
             selection={selection}
             className="canvasWorkpad__dropzoneTable"
+            data-test-subj="canvasWorkpadLoaderTable"
           />
           <EuiSpacer />
           <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">

x-pack/plugins/canvas/public/components/workpad_page/workpad_page.js

@@ -72,6 +72,7 @@ export class WorkpadPage extends PureComponent {
       <div
         key={page.id}
         id={page.id}
+        data-test-subj="canvasWorkpadPage"
         className={`canvasPage ${className} ${isEditable ? 'canvasPage--isEditable' : ''}`}
         data-shared-items-container
         style={{

x-pack/test/functional/apps/canvas/index.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export default function canvasApp({ loadTestFile }) {
+  describe('Canvas app', function canvasAppTestSuite() {
+    loadTestFile(require.resolve('./smoke_test'));
+  });
+}

x-pack/test/functional/apps/canvas/smoke_test.js

@@ -0,0 +1,81 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import expect from 'expect.js';
+import { parse } from 'url';
+
+export default function canvasSmokeTest({ getService, getPageObjects }) {
+  const esArchiver = getService('esArchiver');
+  const testSubjects = getService('testSubjects');
+  const remote = getService('remote');
+  const retry = getService('retry');
+  const PageObjects = getPageObjects(['common']);
+
+  describe('smoke test', async () => {
+    const workpadListSelector = 'canvasWorkpadLoaderTable canvasWorkpadLoaderWorkpad';
+    const testWorkpadId = 'workpad-1705f884-6224-47de-ba49-ca224fe6ec31';
+
+    before(async () => {
+      // init data
+      await Promise.all([
+        esArchiver.loadIfNeeded('logstash_functional'),
+        esArchiver.load('canvas/default'),
+      ]);
+
+      // load canvas
+      // see also navigateToUrl(app, hash)
+      await PageObjects.common.navigateToApp('canvas');
+    });
+
+    it('loads workpad list', async () => {
+      await retry.try(async () => {
+        const workpadRows = await testSubjects.findAll(workpadListSelector);
+        expect(workpadRows).to.have.length(1);
+        expect(await workpadRows[0].getVisibleText()).to.equal('Test Workpad');
+      });
+    });
+
+    it('loads workpage when clicked', async () => {
+      // click the first workpad in the list to load it
+      await testSubjects.click(workpadListSelector);
+
+      // wait for the workpad page to load
+      await retry.waitFor('workpad page', () => testSubjects.exists('canvasWorkpadPage'));
+
+      // check that workpad loaded in url
+      const url = await remote.getCurrentUrl();
+      expect(parse(url).hash).to.equal(`#/workpad/${testWorkpadId}/page/1`);
+    });
+
+    it('renders elements on workpad', async () => {
+      await retry.try(async () => {
+        // check for elements on the page
+        const elements = await testSubjects.findAll(
+          'canvasWorkpadPage canvasWorkpadPageElementContent'
+        );
+        expect(elements).to.have.length(4);
+
+        // check that the elements are what we expect
+
+        // first is a markdown element
+        const md = await elements[0].findByCssSelector('.canvasMarkdown');
+        expect(await md.getVisibleText()).to.contain('Welcome to Canvas');
+
+        // second element is a datatable that uses essql
+        const serverRows = await elements[1].findAllByCssSelector('.canvasDataTable tbody tr');
+        expect(serverRows).to.have.length(10);
+
+        // third is a datatable that uses csv
+        const commonRows = await elements[2].findAllByCssSelector('.canvasDataTable tbody tr');
+        expect(commonRows).to.have.length(2);
+
+        // fourth is a datatable that uses timelion
+        const timelionRows = await elements[3].findAllByCssSelector('.canvasDataTable tbody tr');
+        expect(timelionRows).to.have.length(12);
+      });
+    });
+  });
+}

x-pack/test/functional/config.js

@@ -62,6 +62,7 @@ export default async function ({ readConfigFile }) {
   return {
     // list paths to the files that contain your plugins tests
     testFiles: [
+      resolve(__dirname, './apps/canvas'),
       resolve(__dirname, './apps/graph'),
       resolve(__dirname, './apps/monitoring'),
       resolve(__dirname, './apps/watcher'),
@@ -178,6 +179,10 @@ export default async function ({ readConfigFile }) {
       },
       infraOps: {
         pathname: '/app/infra'
+      },
+      canvas: {
+        pathname: '/app/canvas',
+        hash: '/',
       }
     },