diff --git a/src/components/test/code-snippet.jsx b/src/components/test/code-snippet.jsx index 46cc118e..08f05c58 100644 --- 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 ? actual : + expected ); - const renderLegendRight = () => isDiff && ( - useInlineDiffs + const renderLegendRight = () => (isInlineDiff ? {'expected\n\n'} : {'- actual\n\n'} ); @@ -91,7 +88,7 @@ class CodeSnippet extends Component { { renderLegendLeft() } { renderLegendRight() } - { (isDiff && useInlineDiffs) ? code.map(mapInlineDiffCode) : code } + { isInlineDiff ? code.map(mapInlineDiffCode) : code } { !!label && showLabel && { label } } diff --git a/test/spec/components/test/code-snippet.test.jsx b/test/spec/components/test/code-snippet.test.jsx index 60fe2b1d..b7415e1b 100644 --- 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('', () => { let node; - const getInstance = (instanceProps, store = {}) => { - const wrapper = mount( - - - , { - attachTo: node - } - ); - return wrapper; - }; + const getInstance = instanceProps => ( + mount( + , + { attachTo: node } + ) + ); beforeEach(() => { node = document.createElement('div'); @@ -113,7 +108,7 @@ describe('', () => { const props = { code: 'function(){console.log(\'sample code\');}' }; - const wrapper = mount(); + const wrapper = getInstance(props); sinon.spy(CodeSnippet.prototype, 'shouldComponentUpdate'); wrapper.setProps({ highlight: false