WIP

addons/jest/package.json

@@ -27,27 +27,12 @@
     "@storybook/addons": "^3.2.15",
     "global": "^4.3.2",
     "prop-types": "^15.6.0",
-    "styled-components": "^2.2.3"
+    "glamor": "^2.20.40",
+    "glamorous": "^4.11.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "cross-env": "^5.1.1",
-    "css-loader": "^0.28.7",
-    "enzyme": "^3.1.1",
-    "eslint": "^4.10.0",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-config-prettier": "^2.7.0",
-    "eslint-import-resolver-webpack": "^0.8.3",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.4.0",
-    "jest": "^21.2.1",
     "react": "^16.1.0",
-    "react-dom": "^16.1.0",
-    "style-loader": "^0.19.0"
+    "react-dom": "^16.1.0"
   },
   "peerDependencies": {
     "react": "*",

addons/jest/src/components/Indicator.js

@@ -1,30 +1,25 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
-const Indicator = ({ color, size, children = '', right }) => (
-  <div
-    style={{
-      boxSizing: 'border-box',
-      padding: `0 ${size / 2}px`,
-      minWidth: size,
-      minHeight: size,
-      fontSize: size / 1.4,
-      lineHeight: `${size}px`,
-      color: 'white',
-      textTransform: 'uppercase',
-      borderRadius: size / 2,
-      backgroundColor: color,
-      marginLeft: right ? size / 2 : 0,
-      marginRight: right ? 0 : size / 2,
-    }}
-  >
-    {children}
-  </div>
-);
+import glamorous from 'glamorous';
+
+const Indicator = glamorous.div(({ color, size, right }) => ({
+  boxSizing: 'border-box',
+  padding: `0 ${size / 2}px`,
+  minWidth: size,
+  minHeight: size,
+  fontSize: size / 1.4,
+  lineHeight: `${size}px`,
+  color: 'white',
+  textTransform: 'uppercase',
+  borderRadius: size / 2,
+  backgroundColor: color,
+  marginLeft: right ? size / 2 : 0,
+  marginRight: right ? 0 : size / 2,
+}));
 
 Indicator.defaultProps = {
   right: false,
-  children: null,
+  children: '',
 };
 
 Indicator.propTypes = {

addons/jest/src/components/Result.js

@@ -1,17 +1,125 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+
+import glamorous from 'glamorous';
 
 import Indicator from './Indicator';
 import colors from '../colors';
 
-const FlexContainer = styled.div`
+const FlexContainer = glamorous.div`
   display: flex;
   align-items: center;
 `;
 
+const Positive = glamorous.strong({
+  color: colors.success,
+});
+const Negative = glamorous.strong({
+  color: colors.error,
+});
+
+const createSubgroup = (acc, item, i, list) => {
+  // setup aggregators
+  if (!acc.list) {
+    acc.list = [];
+  }
+  if (!acc.grouped) {
+    acc.grouped = [];
+  }
+
+  // start of stop extraction
+  if (acc.startTrigger(item)) {
+    // debugger; //eslint-disable-line
+    acc.mode = 'inject';
+    acc.injectionPoint = i;
+  }
+  if (acc.endTrigger(item)) {
+    acc.mode = 'stop';
+  }
+
+  // push item in correct aggregator
+  if (acc.mode === 'inject') {
+    acc.grouped.push(item);
+  } else {
+    acc.list.push(item);
+  }
+
+  // on last iteration inject at detected injectionpoint, and group
+  if (i === list.length - 1) {
+    return acc.list.reduce((eacc, el, ei) => {
+      switch (acc.injectionPoint - 1) {
+        // case -1: {
+        //   return eacc.concat(acc.grouper({ children: acc.grouped })).concat(el);
+        // }
+        case ei: {
+          // return eacc.concat(acc.grouper({ children: acc.grouped })).concat(el);
+          return eacc.concat(el).concat(acc.grouper({ children: acc.grouped }));
+        }
+        default: {
+          return eacc.concat(el);
+        }
+      }
+      // ei === acc.injectionPoint
+      //   ? eacc.concat(acc.grouper({ children: acc.grouped })).concat(el)
+      //   : eacc.concat(el),
+    }, []);
+  }
+  return acc;
+};
+
+const Message = ({ msg }) => {
+  const data = msg
+    .split(/\[2m/)
+    .join('')
+    .split(/\[22m/)
+    .reduce((acc, item) => acc.concat(item), [])
+    .map(
+      (item, li) =>
+        typeof item === 'string'
+          ? item
+              .split(/\[32m(.*?)\[39m/)
+              .map((i, index) => (index % 2 ? <Positive key={`p_${li}_${i}`}>{i}</Positive> : i))
+          : item
+    )
+    .reduce((acc, item) => acc.concat(item), [])
+    .map(
+      (item, li) =>
+        typeof item === 'string'
+          ? item
+              .split(/\[31m(.*?)\[39m/)
+              .map((i, index) => (index % 2 ? <Negative key={`n_${li}_${i}`}>{i}</Negative> : i))
+          : item
+    )
+    .reduce((acc, item) => acc.concat(item), [])
+    // trim all section of whitespace - BUGGY
+    // .reduce((acc, i) => {
+    //   if (typeof i === 'string') {
+    //     const ii = i.trim();
+    //     return ii === '' ? acc : acc.concat(ii);
+    //   }
+    //   return acc.concat(i);
+    // }, [])
+    .reduce(createSubgroup, {
+      startTrigger: e => typeof e === 'string' && e.indexOf('Error: ') === 0,
+      endTrigger: e => typeof e === 'string' && e.match('Expected '),
+      grouper: props => <section {...props} />,
+    })
+    .reduce(createSubgroup, {
+      startTrigger: e => typeof e === 'string' && e.match(/at(.|\n)+\d+:\d+\)/),
+      endTrigger: () => false,
+      grouper: props => <section {...props} />,
+    });
+
+  return <pre>{data}</pre>;
+};
+Message.propTypes = {
+  msg: PropTypes.string.isRequired,
+};
+
 const Result = ({ fullName, title, status, failureMessages }) => {
   const color = status === 'passed' ? colors.success : colors.error;
+
+  // debugger; //eslint-disable-line
   return (
     <div>
       <div
@@ -32,20 +140,7 @@ const Result = ({ fullName, title, status, failureMessages }) => {
         </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>'),
-            }}
-          />
-        ))}
+      {failureMessages && failureMessages.map((msg, i) => <Message msg={msg} key={i} />)}
     </div>
   );
 };

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

@@ -7,4 +7,3 @@ 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/package.json

@@ -7,7 +7,8 @@
     "eject": "react-scripts eject",
     "start": "react-scripts start",
     "storybook": "start-storybook -p 9010 -s public",
-    "test": "jest --env=jsdom --json --outputFile=./node_modules/.cache/jest-results.json"
+    "test": "react-scripts test --env=jsdom",
+    "generate-addon-jest-testresults": "jest src/stories/addon-jest.test.js --env=jsdom --json --outputFile=src/stories/addon-jest.testresults.json"
   },
   "dependencies": {
     "eventemitter3": "^2.0.3",
@@ -22,23 +23,21 @@
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^3.2.15",
-    "@storybook/addon-actions": "^3.2.11",
-    "@storybook/addon-backgrounds": "^3.2.14",
-    "@storybook/addon-centered": "^3.2.10",
-    "@storybook/addon-events": "^3.2.10",
-    "@storybook/addon-info": "^3.2.11",
-    "@storybook/addon-jest": "^3.2.11",
-    "@storybook/addon-knobs": "^3.2.10",
-    "@storybook/addon-links": "^3.2.10",
-    "@storybook/addon-notes": "^3.2.10",
-    "@storybook/addon-options": "^3.2.10",
-    "@storybook/addon-storyshots": "^3.2.11",
-    "@storybook/addons": "^3.2.10",
-    "@storybook/components": "^3.2.10",
-    "@storybook/react": "^3.2.11",
+    "@storybook/addon-actions": "^3.2.15",
+    "@storybook/addon-backgrounds": "^3.2.15",
+    "@storybook/addon-centered": "^3.2.15",
+    "@storybook/addon-events": "^3.2.15",
+    "@storybook/addon-info": "^3.2.15",
+    "@storybook/addon-jest": "^3.2.15",
+    "@storybook/addon-knobs": "^3.2.15",
+    "@storybook/addon-links": "^3.2.15",
+    "@storybook/addon-notes": "^3.2.15",
+    "@storybook/addon-options": "^3.2.15",
+    "@storybook/addon-storyshots": "^3.2.15",
+    "@storybook/addons": "^3.2.15",
+    "@storybook/components": "^3.2.15",
+    "@storybook/react": "^3.2.15",
     "babel-jest": "^21.2.0",
-    "enzyme": "^3.1.1",
-    "enzyme-adapter-react-16": "^1.0.4",
     "jest": "^21.2.1",
     "react-scripts": "1.0.17"
   },
@@ -47,9 +46,8 @@
     "verbose": true,
     "coverageDirectory": "coverage/",
     "notify": true,
-    "setupTestFrameworkScriptFile": "<rootDir>/.jest-setup.js",
     "transform": {
-      ".*": "<rootDir>/node_modules/babel-jest"
+      ".*": "babel-jest"
     },
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",

examples/cra-kitchen-sink/src/stories/addon-jest.stories.js

@@ -2,14 +2,16 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 
 import { withTests } from '@storybook/addon-jest';
-import SimpleList from '../components/SimpleList';
-
-import results from '.cache/jest-results.json';
+import results from './addon-jest.testresults.json';
 
 const withTestsFiles = withTests({
   results,
 });
 
 storiesOf('Addon jest', module)
-  .addDecorator(withTestsFiles('SimpleList'))
-  .add('withTests', () => <SimpleList items={['apple', 'orange', 'banana']} />);
+  .addDecorator(withTestsFiles('addon-jest'))
+  .add('withTests', () => (
+    <div>
+      <p>Hello</p>
+    </div>
+  ));

examples/cra-kitchen-sink/src/stories/addon-jest.test.js

@@ -0,0 +1,31 @@
+test('true should be true', () => {
+  expect(true).toBe(true);
+});
+
+describe('In a describe: ', () => {
+  test('true should still be true', () => {
+    expect(true).toBe(true);
+  });
+
+  test('a list should contain 3 items', () => {
+    expect(['a', 'b', '3']).toHaveLength(3);
+  });
+
+  test('everything is awesome', () => {
+    expect('everything is all right').toEqual('everything is awesome');
+  });
+});
+
+describe('A bunch of failing tests: ', () => {
+  test('true should still be true', () => {
+    expect(true).toBe(false);
+  });
+
+  test('a list should contain 3 items', () => {
+    expect(['a', 'b', '3']).toContain(301);
+  });
+
+  test('should work', () => {
+    expect(() => {}).toThrow();
+  });
+});

jest.config.js

@@ -12,7 +12,7 @@ module.exports = {
     '<rootDir>/lib',
     '<rootDir>/examples/cra-kitchen-sink',
   ],
-  testPathIgnorePatterns: ['/node_modules/', '/addons/jest/example'],
+  testPathIgnorePatterns: ['/node_modules/', 'addon-jest.test.js'],
   collectCoverage: false,
   collectCoverageFrom: [
     'app/**/*.{js,jsx}',

package.json

@@ -24,7 +24,7 @@
     "precommit": "lint-staged",
     "coverage": "codecov",
     "danger": "danger",
-    "dev": "lerna exec --parallel -- babel src -d dist --ignore tests,__tests__,test.js,stories/,story.jsx --plugins \"transform-runtime\" --copy-files -w",
+    "dev": "lerna exec --parallel -- babel src -d dist --ignore tests/,__tests__/,.test.js,stories/,.story.js,.stories.js --plugins \"transform-runtime\" --copy-files -w",
     "docs:build": "npm --prefix docs run build",
     "docs:deploy:ci": "npm --prefix docs run deploy:ci",
     "docs:deploy:manual": "npm --prefix docs run deploy:manual",

scripts/prepare.js

@@ -11,7 +11,7 @@ shell.rm('-rf', 'dist');
 
 const babel = path.join(__dirname, '..', 'node_modules', '.bin', 'babel');
 const args = [
-  '--ignore tests,__tests__,test.js,stories/,story.jsx',
+  '--ignore tests/*,__tests__/,**.test.js,stories/,**.story.js,**.stories.js',
   '--plugins "transform-runtime"',
   './src --out-dir ./dist',
   '--copy-files',