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.

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\)).)*$/

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

@@ -1,24 +1,28 @@
+/* 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.less'
 
-// fonts are included in index.html for the app, but storybook does not use that
-var fontLink = document.createElement('link')
-fontLink.setAttribute('href', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css') // 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', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css') // eslint-disable-line max-len
+  fontLink.setAttribute('rel', 'stylesheet')
+  fontLink.setAttribute('type', 'text/css')
+  fontLink.setAttribute('async', '')
+  document.getElementsByTagName('head')[0].appendChild(fontLink)
 
-var lessLink = document.createElement('link')
-lessLink.setAttribute('href', '//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js') // eslint-disable-line max-len
-lessLink.setAttribute('rel', 'stylesheet')
-lessLink.setAttribute('type', 'text/css')
-lessLink.setAttribute('async', '')
-document.getElementsByTagName('head')[0].appendChild(lessLink)
+  var lessLink = document.createElement('link')
+  lessLink.setAttribute('href', '//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js') // eslint-disable-line max-len
+  lessLink.setAttribute('rel', 'stylesheet')
+  lessLink.setAttribute('type', 'text/css')
+  lessLink.setAttribute('async', '')
+  document.getElementsByTagName('head')[0].appendChild(lessLink)
+}
 
 // Set up locale data so formats etc. will work properly
 addLocaleData({

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

@@ -0,0 +1,27 @@
+import initStoryshots from '@storybook/addon-storyshots'
+import {
+  mockAddons,
+  notNoTestRegex,
+  snapshotWithoutDecorators
+} from '../.storybook-editor/storyshots-util'
+
+initStoryshots({
+  suite: 'Frontend Storyshots',
+  configPath: '.storybook-frontend',
+  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: /^(?!(NOTHING|NOTHINGELSE)$).*$/,
+  storyNameRegex: notNoTestRegex,
+  test: snapshotWithoutDecorators
+})

server/zanata-frontend/src/frontend/app/components/Icon/Icon.story.js

@@ -1,18 +1,20 @@
 import React from 'react'
-import { storiesOf, action } from '@storybook/react'
+import { storiesOf } from '@storybook/react'
 import { Icon } from '../'
 import iconList from '../Icon/list'
 
 function renderIcon (name, size) {
-  return <span title={name}> <Icon name={name} className={size} /> </span>
+  return (
+    <span key={name} title={name}> <Icon name={name} className={size} /> </span>
+  )
 }
 
 function allIconsSize (size) {
   return iconList.map((name) => renderIcon(name, size))
 }
 
 storiesOf('Icon', module)
-    .add('default', () => (
+  .add('default', () => (
     <div>
       <h2>Size n2</h2>
       {allIconsSize('n2')}