kibana/x-pack
Clint Andrew Hall 3727b5355a
[Canvas] Storybook for testing and development (#29072)
## Summary

This PR adds [Storybook](https://storybook.js.org/) to our testing and development suite.

![screen shot 2019-01-21 at 4 35 32 pm](https://user-images.githubusercontent.com/297604/51502196-9f856780-1d9a-11e9-97bf-07c99c3f279b.png)

This will allow us to:

1. create a site outlining all components within Canvas, including their TS type information;
2. demonstrate usage of all components by example;
3. allow for individual component testing, both manually and by Jest;
4. iterate and fix bugs on individual components *without* having to start up Kibana, in a [HMR](https://webpack.js.org/concepts/hot-module-replacement/) environment;
5. automatically generate [snapshots](https://jestjs.io/docs/en/snapshot-testing) based on any examples written;

This PR also converts a few components to Typescript and adds examples.

## How this can help us, (with examples)

I was inspired to add this when I was fixing #25342.  In order to fix my changes, I had to run elasticsearch and kibana, as well as refresh my page whenever I needed to test a change.  Had I had a Storybook instance, I would have been done much faster.

In this PR, you'll see I converted `AdvancedFilter` from `renderers` and `FontPicker` and `ImageUpload` from `public/components`.  Would you believe I discovered and fixed bugs just by converting to Typescript and writing examples?

### `AdvancedFilter`

- `onChange` and `commit` are not marked as required in `propTypes`, but the component will error out if they're not supplied.
- `commit` was actually being called twice when 'Apply' was clicked.  This was shown in the 'Actions' panel when I was testing it.

### `FontPicker`

- The `fonts` collection was not strongly-typed, therefore any string could be passed to the `value` parameter without error.
- While the code allows for any font string to be given to the component, there is no way to currently select that value, nor type it in within the control.  This is likely a bug in design.
- The `aria-labeledby` attribute in the drop down includes `undefined`.  This is likely a bug in EUI:

![screen shot 2019-01-21 at 4 25 58 pm](https://user-images.githubusercontent.com/297604/51501908-5ed91e80-1d99-11e9-913a-ce1bb5f4e352.png)

## How to use

- `cd x-pack/plugins/canvas/`
- Run `node scripts/storybook` to start up a local development version, with HMR.
- Run `node scripts/storybook_build` to build a complete static version of the book.
- Run `node scripts/jest` which will run the Storyshots test; run `node scripts/jest --updateSnapshot` if source code has changed as expected.

## Future Work

- Adding Jest coverage and output to the info panels, ([this](https://www.npmjs.com/package/@storybook/addon-jest) is *sick* functionality).
- Adding automatic [a11y testing](https://www.npmjs.com/package/@storybook/addon-a11y), (currently [blocked](https://github.com/storybooks/storybook/issues/4889)).
- Adding generic knobs for stories
- Adding more example info, (e.g. who edited last, descriptions, etc).
2019-02-15 10:35:30 -06:00
..
.github
build_chromium Convert Chromium reports to puppeteer (#21788) 2018-08-29 20:16:06 -04:00
common
dev-tools Reintroduce linting rule that requires single-quotes in x-pack. (#30893) 2019-02-14 12:08:37 -08:00
plugins [Canvas] Storybook for testing and development (#29072) 2019-02-15 10:35:30 -06:00
scripts fix xpack integration tests, add to CI (#30883) 2019-02-14 11:56:50 -05:00
server/lib refactoring server routes in index management to use common code (#30299) 2019-02-12 10:20:20 -05:00
tasks Update paths to ui, server, deprecation, plugin_discovery in src/legacy 2019-02-11 10:41:37 -05:00
test Using POST instead of DELETE for bulk deletion of pipelines (#31023) 2019-02-14 14:01:18 -08:00
test_utils Testing x pack jest integration (#26825) 2019-01-10 14:31:12 -05:00
typings Typings for saved object client (#29951) 2019-02-07 12:43:17 +01:00
webpackShims Migrate x-pack-kibana source to kibana 2018-04-24 13:48:10 -07:00
.gitignore [Canvas] Storybook for testing and development (#29072) 2019-02-15 10:35:30 -06:00
.kibana-plugin-helpers.json Upgrade Assistant Follow-ups (#29663) 2019-02-04 13:36:42 -06:00
gulpfile.js Ref/canvas interpreter2 oss take5 (#26068) 2018-11-23 06:37:25 +01:00
index.js Introduce x-pack/translations plugin. (#30115) 2019-02-05 22:31:28 +01:00
package.json [Canvas] Storybook for testing and development (#29072) 2019-02-15 10:35:30 -06:00
README.md Testing x pack jest integration (#26825) 2019-01-10 14:31:12 -05:00
tsconfig.json Update paths to ui, server, deprecation, plugin_discovery in src/legacy 2019-02-11 10:41:37 -05:00
tslint.yaml [eslint] use disallow license header rule (#26309) 2018-11-27 16:49:17 -08:00

Elastic License Functionality

This directory tree contains files subject to the Elastic License. The files subject to the Elastic License are grouped in this directory to clearly separate them from files licensed under the Apache License 2.0.

Development

By default, Kibana will run with X-Pack installed as mentioned in the contributing guide.

Elasticsearch will run with a basic license. To run with a trial license, including security, you can specifying that with the yarn es command.

Example: yarn es snapshot --license trial --password changeme

Testing

Running unit tests_bundle

You can run unit tests by running:

yarn test

If you want to run tests only for a specific plugin (to save some time), you can run:

yarn test --plugins <plugin>[,<plugin>]*    # where <plugin> is "reporting", etc.

Running single test file

Edit test file, changing top level describe to describe.only. Run tests with normal commands.

Running Jest Unit Tests

# from x-pack folder
node scripts/jest

Debugging browser tests

yarn test:browser:dev

Initializes an environment for debugging the browser tests. Includes an dedicated instance of the kibana server for building the test bundle, and a karma server. When running this task the build is optimized for the first time and then a karma-owned instance of the browser is opened. Click the "debug" button to open a new tab that executes the unit tests.

Run single tests by appending grep parameter to the end of the URL. For example http://localhost:9876/debug.html?grep=ML%20-%20Explorer%20Controller will only run tests with 'ML - Explorer Controller' in the describe block.

Running server unit tests

You can run server-side unit tests by running:

yarn test:server

Running functional tests

The functional UI tests, the API integration tests, and the SAML API integration tests are all run against a live browser, Kibana, and Elasticsearch install. Each set of tests is specified with a unique config that describes how to start the Elasticsearch server, the Kibana server, and what tests to run against them. The sets of tests that exist today are functional UI tests (specified by this config), API integration tests (specified by this config), and SAML API integration tests (specified by this config).

The script runs all sets of tests sequentially like so:

  • builds Elasticsearch and X-Pack
  • runs Elasticsearch with X-Pack
  • starts up the Kibana server with X-Pack
  • runs the functional UI tests against those servers
  • tears down the servers
  • repeats the same process for the API and SAML API integration test configs.

To do all of this in a single command run:

node scripts/functional_tests

Running UI tests

To run only the functional UI tests:

node scripts/functional_tests --config test/functional/config

It does the same as the previous command, except that it only does setup/test/teardown for the UI tests.

Running API integration tests

API integration tests are run with a unique setup usually without UI assets built for the Kibana server.

API integration tests are intended to test only programmatic API exposed by Kibana. There is no need to run browser and simulate user actions, which significantly reduces execution time. In addition, the configuration for API integration tests typically sets optimize.enabled=false for Kibana because UI assets are usually not needed for these tests.

To run only the API integration tests:

node scripts/functional_tests --config test/api_integration/config

Running SAML API integration tests

We also have SAML API integration tests which set up Elasticsearch and Kibana with SAML support. Run only API integration tests with SAML enabled like so:

node scripts/functional_tests --config test/saml_api_integration/config

Running and building Jest integration tests

Jest integration tests can be used to test behavior with Elasticsearch and the Kibana server.

node scripts/jest_integration

An example test exists at test_utils/jest/integration_tests/example_integration.test.ts

Running Reporting functional tests

See here for more information on running reporting tests.

Developing functional tests

If you are developing functional tests then you probably don't want to rebuild Elasticsearch and wait for all that setup on every test run, so instead use this command to build and start just the Elasticsearch and Kibana servers:

node scripts/functional_tests_server

After the servers are started, open a new terminal and run this command to run just the tests (without tearing down Elasticsearch or Kibana):

# Make sure you are in the x-pack directory
cd x-pack

# Invoke the functional_test_runner from Kibana. Try sending --help to learn more
node ../scripts/functional_test_runner

For both of the above commands, it's crucial that you pass in --config to specify the same config file to both commands. This makes sure that the right tests will run against the right servers. Typically a set of tests and server configuration go together.

Read more about how the scripts work here.

For a deeper dive, read more about the way functional tests and servers work here.