Feature/inline diff

src/components/report.jsx

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import DevTools from 'mobx-react-devtools';
-import { observer } from 'mobx-react';
+import { Provider, observer } from 'mobx-react';
 import { Footer, Navbar } from 'components';
 import { NavMenu } from 'components/nav-menu';
 import { Suite } from 'components/suite';
@@ -50,26 +50,28 @@ class MochawesomeReport extends Component {
     };
 
     return (
-      <div>
-        <Navbar
-          reportTitle={ reportTitle }
-          stats={ stats }
-          qsWidth={ quickSummaryWidth }
-          mobileBreakpoint={ mobileBreakpoint }
-          qsNodeRef={ node => (this.qsNode = node) } />
-        <div id='details' className={ cx('details', 'container') }>
-          { suites.map(suite => (
-            <Suite
-              key={ suite.uuid }
-              suite={ suite }
-              enableChart={ enableChart }
-              enableCode={ enableCode } />)
-          ) }
+      <Provider reportStore={ this.props.store }>
+        <div>
+          <Navbar
+            reportTitle={ reportTitle }
+            stats={ stats }
+            qsWidth={ quickSummaryWidth }
+            mobileBreakpoint={ mobileBreakpoint }
+            qsNodeRef={ node => (this.qsNode = node) } />
+          <div id='details' className={ cx('details', 'container') }>
+            { suites.map(suite => (
+              <Suite
+                key={ suite.uuid }
+                suite={ suite }
+                enableChart={ enableChart }
+                enableCode={ enableCode } />)
+            ) }
+          </div>
+          <Footer />
+          <NavMenu suites={ allSuites } { ...navMenuProps } />
+          { devMode && <DevTools position={ { bottom: 0, right: 20 } } /> }
         </div>
-        <Footer />
-        <NavMenu suites={ allSuites } { ...navMenuProps } />
-        { devMode && <DevTools position={ { bottom: 0, right: 20 } } /> }
-      </div>
+      </Provider>
     );
   }
 }

src/components/test/code-snippet.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable import/no-dynamic-require, react/no-danger */
 import React, { Component } from 'react';
+import { inject } from 'mobx-react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
 import hljs from 'highlight.js/lib/highlight';
@@ -8,16 +9,18 @@ import styles from './test.css';
 
 const cx = classNames.bind(styles);
 
+@inject(stores => ({ useInlineDiffs: stores.reportStore && stores.reportStore.useInlineDiffs }))
 class CodeSnippet extends Component {
   static displayName = 'CodeSnippet';
 
   static propTypes = {
     className: PropTypes.string,
-    code: PropTypes.string,
+    code: PropTypes.oneOfType([ PropTypes.string, PropTypes.array ]),
     lang: PropTypes.string,
     highlight: PropTypes.bool,
     label: PropTypes.string,
-    showLabel: PropTypes.bool
+    showLabel: PropTypes.bool,
+    useInlineDiffs: PropTypes.bool
   };
 
   static defaultProps = {
@@ -34,24 +37,59 @@ class CodeSnippet extends Component {
     return !isEqual(this.props, nextProps);
   }
 
+  shouldHighlight() {
+    const { code, highlight, lang, useInlineDiffs } = this.props;
+    if (lang === 'diff' && useInlineDiffs) {
+      return false;
+    }
+    return code && highlight;
+  }
+
   highlightCode() {
-    const { code, highlight } = this.props;
-    if (highlight && code) {
+    if (this.shouldHighlight()) {
       hljs.highlightBlock(this.node);
     }
   }
 
   render() {
-    const { className, code, lang, highlight, label, showLabel } = this.props;
-    const cxName = cx(className, lang, { hljs: !highlight });
+    const { className, code, lang, label, showLabel, useInlineDiffs } = this.props;
     const isDiff = lang === 'diff';
+    const cxName = cx(className, lang, {
+      hljs: !this.shouldHighlight(),
+      'code-diff': isDiff,
+      'inline-diff': isDiff && useInlineDiffs
+    });
+
+    const renderLegendLeft = () => isDiff && (
+      useInlineDiffs
+        ? <span className={ cx('code-diff-actual') }>actual</span>
+        : <span className={ cx('code-diff-expected') }>+ expected</span>
+    );
+
+    const renderLegendRight = () => isDiff && (
+      useInlineDiffs
+        ? <span className={ cx('code-diff-expected') }>{'expected\n\n'}</span>
+        : <span className={ cx('code-diff-actual') }>{'- actual\n\n'}</span>
+    );
+
+    const mapInlineDiffCode = ({ added, removed, value }, i) => {
+      if (added) {
+        return <span key={ i } className={ cx('code-diff-expected') }>{ value }</span>;
+      }
+
+      if (removed) {
+        return <span key={ i } className={ cx('code-diff-actual') }>{ value }</span>;
+      }
+
+      return value;
+    };
 
     return !!code && (
       <pre className={ cxName } ref={ node => (this.node = node) }>
         <code>
-          { isDiff && <span className={ cx('code-diff-expected') }>+ expected&nbsp;&nbsp;</span> }
-          { isDiff && <span className={ cx('code-diff-actual') }>{'- actual\n\n'}</span> }
-          { code }
+          { renderLegendLeft() }
+          { renderLegendRight() }
+          { (isDiff && useInlineDiffs) ? code.map(mapInlineDiffCode) : code }
         </code>
         { !!label && showLabel && <span className={ cx('code-label') }>{ label }</span> }
       </pre>

src/components/test/test.css

@@ -178,12 +178,30 @@
   }
 }
 
-.code-diff-expected span {
-  color: #859900;
+.code-diff code > span:first-child {
+  margin-right: 11px;
 }
 
-.code-diff-actual span {
-  color: #dc322f;
+.code-diff-expected {
+  & span {
+    color: #859900;
+  }
+
+  @nest .inline-diff & {
+    background-color: #859900;
+    color: #fff;
+  }
+}
+
+.code-diff-actual {
+  & span {
+    color: #dc322f;
+  }
+
+  @nest .inline-diff & {
+    background-color: #dc322f;
+    color: #fff;
+  }
 }
 
 .code-label {

test/spec/components/test/code-snippet.test.jsx

@@ -3,6 +3,7 @@ import { mount } from 'enzyme';
 import chai, { expect } from 'chai';
 import chaiEnzyme from 'chai-enzyme';
 import sinon from 'sinon';
+import { Provider } from 'mobx-react';
 import CodeSnippet from 'components/test/code-snippet';
 import hljs from 'highlight.js/lib/highlight';
 
@@ -11,10 +12,14 @@ chai.use(chaiEnzyme());
 describe('<CodeSnippet />', () => {
   let node;
 
-  const getInstance = instanceProps => {
-    const wrapper = mount(<CodeSnippet { ...instanceProps } />, {
-      attachTo: node
-    });
+  const getInstance = (instanceProps, store = {}) => {
+    const wrapper = mount(
+      <Provider reportStore={ store }>
+        <CodeSnippet { ...instanceProps } />
+      </Provider>, {
+        attachTo: node
+      }
+    );
     return wrapper;
   };
 
@@ -23,6 +28,7 @@ describe('<CodeSnippet />', () => {
     node.setAttribute('id', 'app');
     document.body.appendChild(node);
     hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));
+    hljs.registerLanguage('diff', require('highlight.js/lib/languages/diff'));
   });
 
   afterEach(() => {
@@ -39,12 +45,31 @@ describe('<CodeSnippet />', () => {
 
   it('renders and highlights diff snippet', () => {
     const props = {
-      code: 'function(){console.log(\'sample code\');}',
+      code: ' {\n-   "a": 2\n+   "a": 1\n }\n',
       lang: 'diff'
     };
-    getInstance(props);
+    const wrapper = getInstance(props);
+    expect(wrapper.hasClass('inline-diff')).to.equal(false);
     expect(document.querySelectorAll('.test-code-diff-expected').length).to.equal(1);
     expect(document.querySelectorAll('.test-code-diff-actual').length).to.equal(1);
+    expect(document.querySelectorAll('.hljs-addition').length).to.equal(3);
+    expect(document.querySelectorAll('.hljs-deletion').length).to.equal(1);
+  });
+
+  it('renders and does not highlight inline diff snippet', () => {
+    const props = {
+      code: [
+        { count: 6, value: '{\n  "a": ' },
+        { count: 1, added: undefined, removed: true, value: '2' },
+        { count: 1, added: true, removed: undefined, value: '1' },
+        { count: 2, value: '\n}' }
+      ],
+      lang: 'diff'
+    };
+    const wrapper = getInstance(props, { useInlineDiffs: true });
+    expect(wrapper.hasClass('inline-diff')).to.equal(true);
+    expect(document.querySelectorAll('.test-code-diff-expected').length).to.equal(2);
+    expect(document.querySelectorAll('.test-code-diff-actual').length).to.equal(2);
   });
 
   it('does not highlight when prop is false', () => {
@@ -83,7 +108,7 @@ describe('<CodeSnippet />', () => {
     const props = {
       code: 'function(){console.log(\'sample code\');}'
     };
-    const wrapper = getInstance(props);
+    const wrapper = mount(<CodeSnippet { ...props } />);
     sinon.spy(CodeSnippet.prototype, 'shouldComponentUpdate');
     wrapper.setProps({
       highlight: false