From 0b88095802595b57520a2b0a32c939371d5fa026 Mon Sep 17 00:00:00 2001 From: Clint Andrew Hall Date: Tue, 17 Sep 2019 21:19:17 -0500 Subject: [PATCH 1/3] Complete code coverage for external runtime --- src/dev/jest/mocks/css_modules_mock.js | 30 + x-pack/dev-tools/jest/create_jest_config.js | 6 +- .../__mocks__/supported_renderers.js | 34 ++ .../__tests__/__snapshots__/app.test.tsx.snap | 11 + .../components/__tests__/app.test.tsx | 38 ++ .../external_runtime/components/app.tsx | 18 +- .../footer.components.examples.storyshot | 0 .../__snapshots__/footer.examples.storyshot | 0 .../footer.components.examples.tsx | 4 +- .../__examples__/footer.examples.tsx | 12 +- .../footer/__tests__/footer.test.tsx | 31 + .../footer/__tests__/page_controls.test.tsx | 55 ++ .../footer/__tests__/page_preview.test.tsx | 28 + .../footer/__tests__/scrubber.test.tsx | 30 + .../footer/__tests__/title.test.tsx | 26 + .../components/footer/page_controls.tsx | 9 +- .../footer/page_preview.container.tsx | 1 + .../settings.components.examples.storyshot | 0 .../__snapshots__/settings.examples.storyshot | 0 .../settings.components.examples.tsx | 4 +- .../__examples__/settings.examples.tsx | 8 +- .../__snapshots__/settings.test.tsx.snap | 553 ++++++++++++++++++ .../__tests__/autoplay_settings.test.tsx | 45 ++ .../settings/__tests__/settings.test.tsx | 85 +++ .../__tests__/toolbar_settings.test.tsx | 31 + .../components/footer/settings/settings.tsx | 1 + .../footer/settings/toolbar_settings.tsx | 1 + .../external_runtime/context/actions.ts | 19 - .../external_runtime/context/mock/context.tsx | 32 +- .../context/mock/renderers.ts | 41 -- .../external_runtime/context/reducer.ts | 22 - .../canvas/external_runtime/css_modules.d.ts | 2 +- .../external_runtime/supported_renderers.d.ts | 9 + .../external_runtime/supported_renderers.js | 35 ++ .../canvas/external_runtime/test/index.ts | 13 + .../canvas/external_runtime/test/utils.ts | 21 + .../canvas/external_runtime/webpack.config.js | 4 - x-pack/legacy/plugins/canvas/scripts/jest.js | 36 +- x-pack/package.json | 1 + yarn.lock | 177 +++++- 40 files changed, 1305 insertions(+), 168 deletions(-) create mode 100644 src/dev/jest/mocks/css_modules_mock.js create mode 100644 x-pack/legacy/plugins/canvas/external_runtime/__mocks__/supported_renderers.js create mode 100644 x-pack/legacy/plugins/canvas/external_runtime/components/__tests__/__snapshots__/app.test.tsx.snap create mode 100644 x-pack/legacy/plugins/canvas/external_runtime/components/__tests__/app.test.tsx rename x-pack/legacy/plugins/canvas/external_runtime/components/{ => footer}/__examples__/__snapshots__/footer.components.examples.storyshot (100%) rename x-pack/legacy/plugins/canvas/external_runtime/components/{ => footer}/__examples__/__snapshots__/footer.examples.storyshot (100%) rename x-pack/legacy/plugins/canvas/external_runtime/components/{ => footer}/__examples__/footer.components.examples.tsx (88%) rename x-pack/legacy/plugins/canvas/external_runtime/components/{ => footer}/__examples__/footer.examples.tsx (73%) create mode 100644 x-pack/legacy/plugins/canvas/external_runtime/components/footer/__tests__/footer.test.tsx create mode 100644 x-pack/legacy/plugins/canvas/external_runtime/components/footer/__tests__/page_controls.test.tsx create mode 100644 x-pack/legacy/plugins/canvas/external_runtime/components/footer/__tests__/page_preview.test.tsx create mode 100644 x-pack/legacy/plugins/canvas/external_runtime/components/footer/__tests__/scrubber.test.tsx create mode 100644 x-pack/legacy/plugins/canvas/external_runtime/components/footer/__tests__/title.test.tsx rename x-pack/legacy/plugins/canvas/external_runtime/components/{ => footer/settings}/__examples__/__snapshots__/settings.components.examples.storyshot (100%) rename x-pack/legacy/plugins/canvas/external_runtime/components/{ => footer/settings}/__examples__/__snapshots__/settings.examples.storyshot (100%) rename x-pack/legacy/plugins/canvas/external_runtime/components/{ => footer/settings}/__examples__/settings.components.examples.tsx (88%) rename x-pack/legacy/plugins/canvas/external_runtime/components/{ => footer/settings}/__examples__/settings.examples.tsx (73%) create mode 100644 x-pack/legacy/plugins/canvas/external_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap create mode 100644 x-pack/legacy/plugins/canvas/external_runtime/components/footer/settings/__tests__/autoplay_settings.test.tsx create mode 100644 x-pack/legacy/plugins/canvas/external_runtime/components/footer/settings/__tests__/settings.test.tsx create mode 100644 x-pack/legacy/plugins/canvas/external_runtime/components/footer/settings/__tests__/toolbar_settings.test.tsx delete mode 100644 x-pack/legacy/plugins/canvas/external_runtime/context/mock/renderers.ts create mode 100644 x-pack/legacy/plugins/canvas/external_runtime/supported_renderers.d.ts create mode 100644 x-pack/legacy/plugins/canvas/external_runtime/supported_renderers.js create mode 100644 x-pack/legacy/plugins/canvas/external_runtime/test/index.ts create mode 100644 x-pack/legacy/plugins/canvas/external_runtime/test/utils.ts diff --git a/src/dev/jest/mocks/css_modules_mock.js b/src/dev/jest/mocks/css_modules_mock.js new file mode 100644 index 0000000000000..b1aaa58307478 --- /dev/null +++ b/src/dev/jest/mocks/css_modules_mock.js @@ -0,0 +1,30 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +module.exports = new Proxy( + {}, + { + get: function getter(target, key) { + if (key === '__esModule') { + return false; + } + return key; + }, + } +); diff --git a/x-pack/dev-tools/jest/create_jest_config.js b/x-pack/dev-tools/jest/create_jest_config.js index e9ed43e81780b..8a4072e6aec46 100644 --- a/x-pack/dev-tools/jest/create_jest_config.js +++ b/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)$': `${kibanaDirectory}/src/dev/jest/mocks/css_modules_mock.js`, '\\.(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: '/../target/kibana-coverage/jest', - coverageReporters: [ - 'html', - ], + coverageReporters: ['html'], setupFiles: [ `${kibanaDirectory}/src/dev/jest/setup/babel_polyfill.js`, `/dev-tools/jest/setup/polyfills.js`, `/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`, diff --git a/x-pack/legacy/plugins/canvas/external_runtime/__mocks__/supported_renderers.js b/x-pack/legacy/plugins/canvas/external_runtime/__mocks__/supported_renderers.js new file mode 100644 index 0000000000000..937299ee85f87 --- /dev/null +++ b/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(
{fn} mock
, domNode); + }, +})); diff --git a/x-pack/legacy/plugins/canvas/external_runtime/components/__tests__/__snapshots__/app.test.tsx.snap b/x-pack/legacy/plugins/canvas/external_runtime/components/__tests__/__snapshots__/app.test.tsx.snap new file mode 100644 index 0000000000000..3201c6f3ef284 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/external_runtime/components/__tests__/__snapshots__/app.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` App renders properly 1`] = ` +"
markdown mock
markdown mock
My Canvas Workpad
" +`; diff --git a/x-pack/legacy/plugins/canvas/external_runtime/components/__tests__/app.test.tsx b/x-pack/legacy/plugins/canvas/external_runtime/components/__tests__/app.test.tsx new file mode 100644 index 0000000000000..cb45d8704a71f --- /dev/null +++ b/x-pack/legacy/plugins/canvas/external_runtime/components/__tests__/app.test.tsx @@ -0,0 +1,38 @@ +/* + * 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, ReactWrapper } from 'enzyme'; +import React from 'react'; +import { App } from '../app'; +import { snapshots, SnapshotNames } from '../../test'; +import { previousPage, currentPage, nextPage } from '../footer/__tests__/page_controls.test'; + +jest.mock('../../supported_renderers'); + +const getWrapper: (name?: SnapshotNames) => ReactWrapper = (name = 'hello') => { + const workpad = snapshots[name]; + const { height, width } = workpad; + const stage = { + height, + width, + page: 0, + }; + + return mount(); +}; + +describe('', () => { + test('App renders properly', () => { + expect(getWrapper().html()).toMatchSnapshot(); + }); + + test('App can be navigated', () => { + const wrapper = getWrapper('austin'); + nextPage(wrapper).simulate('click'); + expect(currentPage(wrapper).text()).toEqual('Page 2 of 28'); + previousPage(wrapper).simulate('click'); + }); +}); diff --git a/x-pack/legacy/plugins/canvas/external_runtime/components/app.tsx b/x-pack/legacy/plugins/canvas/external_runtime/components/app.tsx index 55edc4217d5df..fcf0505bd3044 100644 --- a/x-pack/legacy/plugins/canvas/external_runtime/components/app.tsx +++ b/x-pack/legacy/plugins/canvas/external_runtime/components/app.tsx @@ -5,12 +5,11 @@ */ import React from 'react'; -import { Canvas } from './canvas.container'; -import { initialExternalEmbedState, ExternalEmbedStateProvider } from '../context'; -// @ts-ignore Untyped local -import { renderFunctions } from '../../canvas_plugin_src/renderers'; import { CanvasRenderedWorkpad, ExternalEmbedState, Stage } from '../types'; -import { RendererFactory, RendererSpec } from '../../types'; +import { RendererSpec } from '../../types'; +import { initialExternalEmbedState, ExternalEmbedStateProvider } from '../context'; +import { Canvas } from './canvas.container'; +import { renderFunctions } from '../supported_renderers'; interface Props { stage: Stage; @@ -24,11 +23,10 @@ export const App = (props: Props) => { const { workpad, stage } = props; const renderers: { [key: string]: RendererSpec } = {}; - renderFunctions.forEach((fn: RendererFactory | undefined) => { - if (fn) { - const func = fn(); - renderers[func.name] = func; - } + + renderFunctions.forEach(fn => { + const func = fn(); + renderers[func.name] = func; }); const initialState: ExternalEmbedState = { diff --git a/x-pack/legacy/plugins/canvas/external_runtime/components/__examples__/__snapshots__/footer.components.examples.storyshot b/x-pack/legacy/plugins/canvas/external_runtime/components/footer/__examples__/__snapshots__/footer.components.examples.storyshot similarity index 100% rename from x-pack/legacy/plugins/canvas/external_runtime/components/__examples__/__snapshots__/footer.components.examples.storyshot rename to x-pack/legacy/plugins/canvas/external_runtime/components/footer/__examples__/__snapshots__/footer.components.examples.storyshot diff --git a/x-pack/legacy/plugins/canvas/external_runtime/components/__examples__/__snapshots__/footer.examples.storyshot b/x-pack/legacy/plugins/canvas/external_runtime/components/footer/__examples__/__snapshots__/footer.examples.storyshot similarity index 100% rename from x-pack/legacy/plugins/canvas/external_runtime/components/__examples__/__snapshots__/footer.examples.storyshot rename to x-pack/legacy/plugins/canvas/external_runtime/components/footer/__examples__/__snapshots__/footer.examples.storyshot diff --git a/x-pack/legacy/plugins/canvas/external_runtime/components/__examples__/footer.components.examples.tsx b/x-pack/legacy/plugins/canvas/external_runtime/components/footer/__examples__/footer.components.examples.tsx similarity index 88% rename from x-pack/legacy/plugins/canvas/external_runtime/components/__examples__/footer.components.examples.tsx rename to x-pack/legacy/plugins/canvas/external_runtime/components/footer/__examples__/footer.components.examples.tsx index 409c21a9a4561..32895a35caa51 100644 --- a/x-pack/legacy/plugins/canvas/external_runtime/components/__examples__/footer.components.examples.tsx +++ b/x-pack/legacy/plugins/canvas/external_runtime/components/footer/__examples__/footer.components.examples.tsx @@ -8,8 +8,8 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; -import { Title } from '../footer/title'; -import { PageControls } from '../footer/page_controls'; +import { Title } from '../title'; +import { PageControls } from '../page_controls'; storiesOf('runtime/Footer/components', module) .add('Title', () => ( diff --git a/x-pack/legacy/plugins/canvas/external_runtime/components/__examples__/footer.examples.tsx b/x-pack/legacy/plugins/canvas/external_runtime/components/footer/__examples__/footer.examples.tsx similarity index 73% rename from x-pack/legacy/plugins/canvas/external_runtime/components/__examples__/footer.examples.tsx rename to x-pack/legacy/plugins/canvas/external_runtime/components/footer/__examples__/footer.examples.tsx index 7d26b0a5d05e9..76d93adf70ccf 100644 --- a/x-pack/legacy/plugins/canvas/external_runtime/components/__examples__/footer.examples.tsx +++ b/x-pack/legacy/plugins/canvas/external_runtime/components/footer/__examples__/footer.examples.tsx @@ -5,13 +5,13 @@ */ import { storiesOf } from '@storybook/react'; import React from 'react'; -import { Context } from '../../context/mock'; +import { Context } from '../../../context/mock'; -import { Footer } from '../footer/footer.container'; -import { Title } from '../footer/title.container'; -import { PageControls } from '../footer/page_controls.container'; -import { PagePreview } from '../footer/page_preview.container'; -import { Scrubber } from '../footer/scrubber.container'; +import { Footer } from '../footer.container'; +import { Title } from '../title.container'; +import { PageControls } from '../page_controls.container'; +import { PagePreview } from '../page_preview.container'; +import { Scrubber } from '../scrubber.container'; storiesOf('runtime/Footer', module) .add('Footer', () => ( diff --git a/x-pack/legacy/plugins/canvas/external_runtime/components/footer/__tests__/footer.test.tsx b/x-pack/legacy/plugins/canvas/external_runtime/components/footer/__tests__/footer.test.tsx new file mode 100644 index 0000000000000..4eba1c24fcdd6 --- /dev/null +++ b/x-pack/legacy/plugins/canvas/external_runtime/components/footer/__tests__/footer.test.tsx @@ -0,0 +1,31 @@ +/* + * 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 { Context } from '../../../context/mock'; +import { Footer } from '../footer.container'; + +describe('