code-snippet: don't rely on useInlineDiffs for rendering (#42)

adamgruber · Jun 30, 2017 · be414dc · be414dc
1 parent d92dbdd
commit be414dc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 25 deletions.
diff --git a/src/components/test/code-snippet.jsx b/src/components/test/code-snippet.jsx
@@ -1,15 +1,14 @@
 /* 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 isArray from 'lodash/isArray';
 import hljs from 'highlight.js/lib/highlight';
 import classNames from 'classnames/bind';
 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';
 
@@ -19,8 +18,7 @@ class CodeSnippet extends Component {
     lang: PropTypes.string,
     highlight: PropTypes.bool,
     label: PropTypes.string,
-    showLabel: PropTypes.bool,
-    useInlineDiffs: PropTypes.bool
+    showLabel: PropTypes.bool
   };
 
   static defaultProps = {
@@ -38,8 +36,8 @@ class CodeSnippet extends Component {
   }
 
   shouldHighlight() {
-    const { code, highlight, lang, useInlineDiffs } = this.props;
-    if (lang === 'diff' && useInlineDiffs) {
+    const { code, highlight, lang } = this.props;
+    if (lang === 'diff' && isArray(code)) {
       return false;
     }
     return code && highlight;
@@ -52,24 +50,23 @@ class CodeSnippet extends Component {
   }
 
   render() {
-    const { className, code, lang, label, showLabel, useInlineDiffs } = this.props;
+    const { className, code, lang, label, showLabel } = this.props;
     const isDiff = lang === 'diff';
+    const isInlineDiff = isDiff && isArray(code);
     const shouldHighlight = this.shouldHighlight();
     const cxName = cx(className, {
       [lang]: shouldHighlight,
       hljs: !shouldHighlight,
       'code-diff': isDiff,
-      'inline-diff': isDiff && useInlineDiffs
+      'inline-diff': isInlineDiff
     });
 
-    const renderLegendLeft = () => isDiff && (
-      useInlineDiffs
+    const renderLegendLeft = () => (isInlineDiff
         ? <span className={ cx('code-diff-actual') }>actual</span>
         : <span className={ cx('code-diff-expected') }>+ expected</span>
     );
 
-    const renderLegendRight = () => isDiff && (
-      useInlineDiffs
+    const renderLegendRight = () => (isInlineDiff
         ? <span className={ cx('code-diff-expected') }>{'expected\n\n'}</span>
         : <span className={ cx('code-diff-actual') }>{'- actual\n\n'}</span>
     );
@@ -91,7 +88,7 @@ class CodeSnippet extends Component {
         <code>
           { renderLegendLeft() }
           { renderLegendRight() }
-          { (isDiff && useInlineDiffs) ? code.map(mapInlineDiffCode) : code }
+          { isInlineDiff ? code.map(mapInlineDiffCode) : code }
         </code>
         { !!label && showLabel && <span className={ cx('code-label') }>{ label }</span> }
       </pre>

diff --git a/test/spec/components/test/code-snippet.test.jsx b/test/spec/components/test/code-snippet.test.jsx
@@ -3,7 +3,6 @@ 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';
 
@@ -12,16 +11,12 @@ chai.use(chaiEnzyme());
 describe('<CodeSnippet />', () => {
   let node;
 
-  const getInstance = (instanceProps, store = {}) => {
-    const wrapper = mount(
-      <Provider reportStore={ store }>
-        <CodeSnippet { ...instanceProps } />
-      </Provider>, {
-        attachTo: node
-      }
-    );
-    return wrapper;
-  };
+  const getInstance = instanceProps => (
+    mount(
+      <CodeSnippet { ...instanceProps } />,
+      { attachTo: node }
+    )
+  );
 
   beforeEach(() => {
     node = document.createElement('div');
@@ -113,7 +108,7 @@ describe('<CodeSnippet />', () => {
     const props = {
       code: 'function(){console.log(\'sample code\');}'
     };
-    const wrapper = mount(<CodeSnippet { ...props } />);
+    const wrapper = getInstance(props);
     sinon.spy(CodeSnippet.prototype, 'shouldComponentUpdate');
     wrapper.setProps({
       highlight: false