Activate storybook addons (ZNTA-2119) (#478)

This activates some storybook addons:

 - host: allows sizing and positioning of the storybook container to better present the component
 - info: shows story code, props details and optional notes
 - knobs: allows changing story input values in a story
 - storyshots: renders each storybook as a snapshot test, which produces a test failure when components render different markup.

Squashed merge of the following:

* chore(ZNTA-2119): add storybook info addon

Includes example usage on editor <Button> component.

* chore(ZNTA-2119): add storybook host addon

Host addon allows positioning the element and providing a specific
size of context to display the component in, as well as a few other
decorations.

* chore(ZNTA-2119): add storybook knobs addon

Includes a button builder story that demonstrates use of the knobs
addon.

* chore(ZNTA-2119): add storyshots

This required several changes to jest and storybook config to have
the storyshots tests execute without errors.
It also includes some cleanup in some of the storybooks and components
that were generating errors or warnings in tests.

* chore(ZNTA-2119): add initial component snapshots

Generated by storyshots.
Note that these are large files with snapshots for all the components
that have stories. This is not ideal, but there is a pull request in
progress for storyshots that will change this so that snapshots are
stored in the component directory, which will make more sense.
See: storybookjs/storybook#1584

* chore(ZNTA-2119): clean up jest mocks

* feat(ZNTA-2119): remove commented-out lines

* feat(ZNTA-2119): fix test failure due to missing TriCheckbox snapshots

Snapshots cannot be written in CI builds, so missing snapshots will fail tests.

server/zanata-frontend/src/frontend/.storybook-editor/addons.js

@@ -1 +1,2 @@
 import '@storybook/addon-actions/register'
+import '@storybook/addon-knobs/register'

server/zanata-frontend/src/frontend/.storybook-editor/config.js

@@ -1,17 +1,21 @@
+/* global document */
 import React from 'react'
 import Icons from '../app/components/Icons'
 import { addLocaleData, IntlProvider } from 'react-intl'
 import { locale, formats } from '../app/editor/config/intl'
 import { addDecorator, configure } from '@storybook/react'
 import './storybook.css'
 
-// fonts are included in index.html for the app, but storybook does not use that
-var fontLink = document.createElement('link')
-fontLink.setAttribute('href', 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,400italic') // eslint-disable-line max-len
-fontLink.setAttribute('rel', 'stylesheet')
-fontLink.setAttribute('type', 'text/css')
-fontLink.setAttribute('async', '')
-document.getElementsByTagName('head')[0].appendChild(fontLink)
+// Storyshots test runs this file too, with no document available.
+if (typeof document !== 'undefined') {
+  // fonts are included in index.html for the app, but storybook does not use that
+  var fontLink = document.createElement('link')
+  fontLink.setAttribute('href', 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,400italic') // eslint-disable-line max-len
+  fontLink.setAttribute('rel', 'stylesheet')
+  fontLink.setAttribute('type', 'text/css')
+  fontLink.setAttribute('async', '')
+  document.getElementsByTagName('head')[0].appendChild(fontLink)
+}
 
 // Set up locale data so formats etc. will work properly
 addLocaleData({

server/zanata-frontend/src/frontend/.storybook-editor/storyshots-editor.test.js

@@ -0,0 +1,27 @@
+import initStoryshots from '@storybook/addon-storyshots'
+import {
+  mockAddons,
+  notNoTestRegex,
+  snapshotWithoutDecorators
+} from './storyshots-util'
+
+initStoryshots({
+  suite: 'Editor Storyshots',
+  configPath: '.storybook-editor',
+  framework: 'react',
+
+  /* add components here that should not have their stories tested
+   * (e.g. when they are under development and not used in the app yet)
+   *
+   * Regex structure:
+   *  ^     start of component name
+   *  (?!   negative lookahead, don't match anything in this group
+   *  (EditorSearchInput|SettingOption|SettingsOptions)$
+   *        component names to not match, add yours in here to not test it
+   *        the $ ensures that excluding Foo does not block testing FooBar.
+   *  ).*$  match any other characters to the end of the string
+   */
+  storyKindRegex: /^(?!(EditorSearchInput|SettingOption|SettingsOptions)$).*$/,
+  storyNameRegex: notNoTestRegex,
+  test: snapshotWithoutDecorators
+})

server/zanata-frontend/src/frontend/.storybook-editor/storyshots-util.js

@@ -0,0 +1,37 @@
+/* global jest expect */
+import renderer from 'react-test-renderer'
+
+/*
+ * Test function that renders stories into snapshots.
+ *
+ * This custom test function strips the decorating icon and other components
+ * so that the tests are cleaner and not dependent on the wrapping decorators.
+ */
+export function snapshotWithoutDecorators ({ story, context }) {
+  const storyElement = story.render(context)
+  const tree = renderer.create(storyElement, {}).toJSON()
+
+  // strip off the padding div and the <Icons />
+  // tree structure is: <div><Icons />{story()}</div>
+  const storyJSON = tree.children[1]
+
+  expect(storyJSON).toMatchSnapshot()
+}
+
+/*
+ * Mock any addons that would add cruft to the snapshots. This keeps the
+ * snapshots cleaner.
+ */
+export function mockAddons () {
+  jest.mock('storybook-host', () => ({
+    // ignore host options, just render the inner story
+    host: (options) => (story) => story()
+  }))
+  jest.mock('@storybook/addon-info', () => ({
+    // without info, muahahahaha! 😈
+    withInfo: (info) => (story) => story
+  }))
+}
+
+/* Matches any story name that does not include "(no test)" */
+export const notNoTestRegex = /^((?!.*?\(no test\)).)*$/