Complete code coverage for external runtime (#11)

Complete code coverage for external runtime

x-pack/dev-tools/jest/create_jest_config.js

@@ -24,20 +24,20 @@ export function createJestConfig({ kibanaDirectory, xPackKibanaDirectory }) {
       '^plugins/([^/.]*)(.*)': `${kibanaDirectory}/src/legacy/core_plugins/$1/public$2`,
       '^legacy/plugins/xpack_main/(.*);': `${xPackKibanaDirectory}/legacy/plugins/xpack_main/public/$1`,
       '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': fileMockPath,
+      '\\.module.(css|scss)$': 'identity-obj-proxy',
       '\\.(css|less|scss)$': `${kibanaDirectory}/src/dev/jest/mocks/style_mock.js`,
       '^test_utils/enzyme_helpers': `${xPackKibanaDirectory}/test_utils/enzyme_helpers.tsx`,
       '^test_utils/find_test_subject': `${xPackKibanaDirectory}/test_utils/find_test_subject.ts`,
     },
     coverageDirectory: '<rootDir>/../target/kibana-coverage/jest',
-    coverageReporters: [
-      'html',
-    ],
+    coverageReporters: ['html'],
     setupFiles: [
       `${kibanaDirectory}/src/dev/jest/setup/babel_polyfill.js`,
       `<rootDir>/dev-tools/jest/setup/polyfills.js`,
       `<rootDir>/dev-tools/jest/setup/enzyme.js`,
     ],
     setupFilesAfterEnv: [`${kibanaDirectory}/src/dev/jest/setup/mocks.js`],
+    testEnvironment: 'jest-environment-jsdom-fourteen',
     testMatch: ['**/*.test.{js,ts,tsx}'],
     transform: {
       '^.+\\.(js|tsx?)$': `${kibanaDirectory}/src/dev/jest/babel_transform.js`,

x-pack/legacy/plugins/canvas/external_runtime/__mocks__/supported_renderers.js

@@ -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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import ReactDOM from 'react-dom';
+import React from 'react';
+
+const renderers = [
+  'debug',
+  'error',
+  'image',
+  'repeatImage',
+  'revealImage',
+  'markdown',
+  'metric',
+  'pie',
+  'plot',
+  'progress',
+  'shape',
+  'table',
+  'text',
+];
+
+export const renderFunctions = renderers.map(fn => () => ({
+  name: fn,
+  displayName: fn,
+  help: fn,
+  reuseDomNode: true,
+  render: domNode => {
+    ReactDOM.render(<div>{fn} mock</div>, domNode);
+  },
+}));

x-pack/legacy/plugins/canvas/external_runtime/api/__tests__/embed.test.tsx

@@ -0,0 +1,120 @@
+/*
+ * 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 { mount } from 'enzyme';
+import React from 'react';
+import { snapshots, tick } from '../../test';
+import { embed } from '../embed';
+
+jest.mock('../../supported_renderers');
+
+describe('Embed API', () => {
+  beforeEach(function() {
+    // @ts-ignore Applying a global in Jest is alright.
+    global.fetch = jest.fn().mockImplementation(() => {
+      const p = new Promise((resolve, _reject) => {
+        resolve({
+          ok: true,
+          json: () => {
+            return snapshots.hello;
+          },
+        });
+      });
+      return p;
+    });
+  });
+
+  test('Embeds successfully with default properties', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const wrapper = mount(<div kbn-canvas-embed="canvas" kbn-canvas-url="workpad.json"></div>, {
+      attachTo: container,
+    });
+
+    expect(wrapper.html()).toMatchSnapshot();
+    embed();
+    await tick();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  test('Embeds successfully with height specified', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const wrapper = mount(
+      <div kbn-canvas-embed="canvas" kbn-canvas-height="350" kbn-canvas-url="workpad.json"></div>,
+      {
+        attachTo: container,
+      }
+    );
+
+    expect(wrapper.html()).toMatchSnapshot();
+    embed();
+    await tick();
+    expect(wrapper.html()).toMatch(
+      /<div class=\"container\" style="height: 350px; width: 525px;\">/
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  test('Embeds successfully with width specified', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const wrapper = mount(
+      <div kbn-canvas-embed="canvas" kbn-canvas-width="400" kbn-canvas-url="workpad.json"></div>,
+      {
+        attachTo: container,
+      }
+    );
+
+    expect(wrapper.html()).toMatchSnapshot();
+    embed();
+    await tick();
+    expect(wrapper.html()).toMatch(
+      /<div class=\"container\" style="height: 267px; width: 400px;\">/
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  test('Embeds successfully with width and height specified', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const wrapper = mount(
+      <div
+        kbn-canvas-embed="canvas"
+        kbn-canvas-width="350"
+        kbn-canvas-height="350"
+        kbn-canvas-url="workpad.json"
+      ></div>,
+      {
+        attachTo: container,
+      }
+    );
+
+    expect(wrapper.html()).toMatchSnapshot();
+    embed();
+    await tick();
+    expect(wrapper.html()).toMatch(
+      /<div class=\"container\" style="height: 350px; width: 350px;\">/
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  test('Embeds successfully with page specified', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const wrapper = mount(
+      <div kbn-canvas-embed="canvas" kbn-canvas-page="0" kbn-canvas-url="workpad.json"></div>,
+      {
+        attachTo: container,
+      }
+    );
+
+    expect(wrapper.html()).toMatchSnapshot();
+    embed();
+    await tick();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

x-pack/legacy/plugins/canvas/external_runtime/api/embed.tsx

@@ -10,16 +10,35 @@ import { App } from '../components/app';
 import { CanvasRenderedWorkpad } from '../types';
 
 export interface Options {
-  /** The preferred height to scale the embedded workpad.  If only `height` is
+  /**
+   * The preferred height to scale the embedded workpad.  If only `height` is
    * specified, `width` will be calculated by the workpad ratio.  If both are
-   * specified, the ratio will be overriden by an absolute size. */
+   * specified, the ratio will be overriden by an absolute size.
+   */
   height?: number;
-  /** The preferred width to scale the embedded workpad.  If only `width` is
+  /**
+   * The preferred width to scale the embedded workpad.  If only `width` is
    * specified, `height` will be calculated by the workpad ratio.  If both are
-   * specified, the ratio will be overriden by an absolute size. */
+   * specified, the ratio will be overriden by an absolute size.
+   */
   width?: number;
   /** The initial page to display. */
   page?: number;
+  /**
+   * Should the runtime automatically move through the pages of the workpad?
+   * @default false
+   */
+  autoplay?: boolean;
+  /**
+   * The interval upon which the pages will advance in time format, (e.g. 2s, 1m)
+   * @default '5s'
+   * */
+  interval?: string;
+  /**
+   * Should the toolbar be hidden?
+   * @default false
+   */
+  toolbar?: boolean;
 }
 
 const PREFIX = 'kbn-canvas';
@@ -51,12 +70,15 @@ const getWorkpad = async (url: string): Promise<CanvasRenderedWorkpad | null> =>
 };
 
 const updateArea = async (area: Element) => {
-  const { url, page: pageAttr, height: heightAttr, weight: widthAttr } = getAttributes(area, [
-    'url',
-    'page',
-    'height',
-    'width',
-  ]);
+  const {
+    url,
+    page: pageAttr,
+    height: heightAttr,
+    width: widthAttr,
+    autoplay,
+    interval,
+    toolbar,
+  } = getAttributes(area, ['url', 'page', 'height', 'width', 'autoplay', 'interval', 'toolbar']);
 
   if (url) {
     const workpad = await getWorkpad(url);
@@ -68,22 +90,32 @@ const updateArea = async (area: Element) => {
 
       if (height && !width) {
         // If we have a height but no width, the width should honor the workpad ratio.
-        width = workpad.width * (height / workpad.height);
+        width = Math.round(workpad.width * (height / workpad.height));
       } else if (width && !height) {
         // If we have a width but no height, the height should honor the workpad ratio.
-        height = workpad.height * (width / workpad.width);
+        height = Math.round(workpad.height * (width / workpad.width));
       }
 
       const stage = {
         height: height || workpad.height,
         width: width || workpad.width,
-        page: page ? page : workpad.page,
+        page: page !== null ? page : workpad.page,
+      };
+
+      const settings = {
+        autoplay: {
+          isEnabled: !!autoplay,
+          interval: interval || '5s',
+        },
+        toolbar: {
+          isAutohide: !!toolbar,
+        },
       };
 
       area.classList.add('kbnCanvas');
       area.removeAttribute(EMBED);
 
-      render(<App workpad={workpad} {...{ stage }} />, area);
+      render(<App workpad={workpad} {...{ stage, settings }} />, area);
     }
   }
 };

x-pack/legacy/plugins/canvas/external_runtime/components/__examples__/runtime.examples.tsx

@@ -5,7 +5,7 @@
  */
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-import { Context } from '../../context/mock';
+import { TestingContext } from '../../test';
 
 import hello from '../../test/hello.json';
 import { Canvas } from '../canvas.container';
@@ -14,17 +14,17 @@ import { RenderedElement } from '../rendered_element.container';
 
 storiesOf('runtime', module)
   .add('Canvas', () => (
-    <Context height={448}>
+    <TestingContext height={448}>
       <Canvas />
-    </Context>
+    </TestingContext>
   ))
   .add('Page', () => (
-    <Context height={720}>
+    <TestingContext height={720}>
       <Page index={0} />
-    </Context>
+    </TestingContext>
   ))
   .add('RenderedElement', () => (
-    <Context height={720}>
+    <TestingContext height={720}>
       <RenderedElement element={hello.pages[0].elements[0]} index={0} />
-    </Context>
+    </TestingContext>
   ));