Add addon-jest to examples/cra-kitchen-sink

addons/jest/package.json

@@ -26,7 +26,8 @@
   "dependencies": {
     "@storybook/addons": "^3.2.15",
     "global": "^4.3.2",
-    "prop-types": "^15.6.0"
+    "prop-types": "^15.6.0",
+    "styled-components": "^2.2.3"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

addons/jest/src/components/Indicator.js

@@ -21,11 +21,17 @@ const Indicator = ({ color, size, children = '', right }) => (
     {children}
   </div>
 );
+
+Indicator.defaultProps = {
+  right: false,
+  children: null,
+};
+
 Indicator.propTypes = {
   color: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
-  children: PropTypes.node.isRequired,
-  right: PropTypes.bool.isRequired,
+  children: PropTypes.node,
+  right: PropTypes.bool,
 };
 
 export default Indicator;

addons/jest/src/components/TestsPanel.js → addons/jest/src/components/Panel.js

@@ -2,10 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Indicator from './Indicator';
-import provideTests from '../hoc/provideTests';
+import Result from './Result';
+import provideJestResult from '../hoc/provideJestResult';
 import colors from '../colors';
 
-const TestsPanel = ({ tests }) => {
+const Panel = ({ tests }) => {
   const style = {
     padding: '10px 20px',
     flex: 1,
@@ -104,58 +105,29 @@ const TestsPanel = ({ tests }) => {
               </div>
             </h2>
             <ul style={{ listStyle: 'none', fontSize: 14 }}>
-              {result.assertionResults.map(({ fullName, status, failureMessages }) => {
-                const color = status === 'passed' ? colors.success : colors.error;
-                return (
-                  <li key={fullName}>
-                    <div
-                      style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                      }}
-                    >
-                      <div style={{ display: 'flex', alignItems: 'center' }}>
-                        <Indicator color={color} size={10} />
-                        <div>{fullName}</div>
-                      </div>
-                      <div style={{ display: 'flex', alignItems: 'center' }}>
-                        <Indicator color={color} size={14} right>
-                          {status}
-                        </Indicator>
-                      </div>
-                    </div>
-                    {/* eslint-disable react/no-array-index-key */}
-                    {failureMessages &&
-                      failureMessages.map((msg, i) => (
-                        <pre
-                          key={i}
-                          style={{ marginTop: 5, whiteSpace: 'pre-wrap' }}
-                          dangerouslySetInnerHTML={{
-                            __html: msg
-                              .replace(/\[22?m?/g, '')
-                              .replace(/\[31m/g, `<strong style="color: ${colors.error}">`)
-                              .replace(/\[32m/g, `<strong style="color: ${colors.success}">`)
-                              .replace(/\[39m/g, '</strong>'),
-                          }}
-                        />
-                      ))}
-                  </li>
-                );
-              })}
+              {result.assertionResults.map(res => (
+                <li key={res.fullName || res.title}>
+                  <Result {...res} />
+                </li>
+              ))}
             </ul>
           </section>
         );
       })}
     </div>
   );
 };
-TestsPanel.propTypes = {
+
+Panel.defaultProps = {
+  tests: null,
+};
+
+Panel.propTypes = {
   tests: PropTypes.arrayOf(
     PropTypes.shape({
       result: PropTypes.object,
     })
-  ).isRequired,
+  ),
 };
 
-export default provideTests(TestsPanel);
+export default provideJestResult(Panel);

addons/jest/src/components/TestsPanelTitle.js → addons/jest/src/components/PanelTitle.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import provideTests from '../hoc/provideTests';
+import provideJestResult from '../hoc/provideJestResult';
 import Indicator from './Indicator';
 import colors from '../colors';
 
-const TestPanelTitle = ({ tests }) => {
+const PanelTitle = ({ tests }) => {
   if (!tests) {
     return (
       <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -26,12 +26,17 @@ const TestPanelTitle = ({ tests }) => {
     </div>
   );
 };
-TestPanelTitle.propTypes = {
+
+PanelTitle.defaultProps = {
+  tests: null,
+};
+
+PanelTitle.propTypes = {
   tests: PropTypes.arrayOf(
     PropTypes.shape({
       result: PropTypes.object,
     })
-  ).isRequired,
+  ),
 };
 
-export default provideTests(TestPanelTitle);
+export default provideJestResult(PanelTitle);

addons/jest/src/components/Result.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import Indicator from './Indicator';
+import colors from '../colors';
+
+const FlexContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Result = ({ fullName, title, status, failureMessages }) => {
+  const color = status === 'passed' ? colors.success : colors.error;
+  return (
+    <div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <FlexContainer>
+          <Indicator color={color} size={10} />
+          <div>{fullName || title}</div>
+        </FlexContainer>
+        <FlexContainer>
+          <Indicator color={color} size={14} right>
+            {status}
+          </Indicator>
+        </FlexContainer>
+      </div>
+      {/* eslint-disable react/no-array-index-key, react/no-danger  */}
+      {failureMessages &&
+        failureMessages.map((msg, i) => (
+          <pre
+            key={i}
+            style={{ marginTop: 5, whiteSpace: 'pre-wrap' }}
+            dangerouslySetInnerHTML={{
+              __html: msg
+                .replace(/\[22?m?/g, '')
+                .replace(/\[31m/g, `<strong style="color: ${colors.error}">`)
+                .replace(/\[32m/g, `<strong style="color: ${colors.success}">`)
+                .replace(/\[39m/g, '</strong>'),
+            }}
+          />
+        ))}
+    </div>
+  );
+};
+
+Result.defaultProps = {
+  fullName: '',
+  title: '',
+};
+
+Result.propTypes = {
+  fullName: PropTypes.string,
+  title: PropTypes.string,
+  status: PropTypes.string.isRequired,
+  failureMessages: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+export default Result;

addons/jest/src/index.js

@@ -1 +1,35 @@
-export { default } from './withTests';
+import addons from '@storybook/addons';
+
+const findTestResults = (testFiles, jestTestResults, jestTestFilesExt) =>
+  testFiles.map(name => {
+    if (jestTestResults && jestTestResults.testResults) {
+      return {
+        name,
+        result: jestTestResults.testResults.find(t =>
+          new RegExp(`${name}${jestTestFilesExt}`).test(t.name)
+        ),
+      };
+    }
+    return { name };
+  });
+
+const emitAddTests = ({ kind, story, testFiles, options }) => {
+  addons.getChannel().emit('storybook/tests/add_tests', {
+    kind,
+    storyName: story,
+    tests: findTestResults(testFiles, options.results, options.filesExt),
+  });
+};
+
+export const withTests = userOptions => {
+  const defaultOptions = {
+    filesExt: '((\\.specs?)|(\\.tests?))?(\\.js)?$',
+  };
+  const options = Object.assign({}, defaultOptions, userOptions);
+
+  return (...testFiles) => (storyFn, { kind, story }) => {
+    emitAddTests({ kind, story, testFiles, options });
+
+    return storyFn();
+  };
+};

addons/jest/src/register.js

@@ -2,14 +2,14 @@
 import React from 'react';
 import addons from '@storybook/addons';
 
-import TestPanelTitle from './components/TestsPanelTitle';
-import TestsPanel from './components/TestsPanel';
+import PanelTitle from './components/PanelTitle';
+import Panel from './components/Panel';
 
 // Register the addon with a unique name.
 addons.register('storybook/tests', api => {
   // Also need to set a unique name to the panel.
   addons.addPanel('storybook/tests/panel', {
-    title: <TestPanelTitle channel={addons.getChannel()} api={api} />,
-    render: () => <TestsPanel channel={addons.getChannel()} api={api} />,
+    title: <PanelTitle channel={addons.getChannel()} api={api} />,
+    render: () => <Panel channel={addons.getChannel()} api={api} />,
   });
 });

examples/cra-kitchen-sink/.jest-setup.js

@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });

examples/cra-kitchen-sink/.storybook/addons.js

@@ -6,3 +6,5 @@ import '@storybook/addon-options/register';
 import '@storybook/addon-knobs/register';
 import '@storybook/addon-backgrounds/register';
 import '@storybook/addon-a11y/register';
+import '@storybook/addon-jest/register';
+import '@storybook/addon-jest/styles';

examples/cra-kitchen-sink/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'file-stub';

examples/cra-kitchen-sink/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};