Merge pull request #665 from zanata/efloden/refactor-highlightjs-imports

refactor: reduce imports for react-sytax-highlighter
zanata · Feb 2, 2018 · 679c472 · 679c472
2 parents 84506eb + f59430d
commit 679c472
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 2 deletions.
diff --git a/server/zanata-frontend/src/app/editor/components/TransUnitTranslationPanel.js b/server/zanata-frontend/src/app/editor/components/TransUnitTranslationPanel.js
@@ -8,8 +8,13 @@ import { LoaderText } from '../../components'
 import { pick } from 'lodash'
 import { phraseTextSelectionRange } from '../actions/phrases-actions'
 import { getSyntaxHighlighting } from '../reducers'
-import SyntaxHighlighter from 'react-syntax-highlighter'
+import SyntaxHighlighter, { registerLanguage }
+  from 'react-syntax-highlighter/light'
+import xml from 'react-syntax-highlighter/languages/hljs/xml'
 import { atelierLakesideLight } from 'react-syntax-highlighter/styles/hljs'
+
+registerLanguage('xml', xml)
+
 /**
  * Panel to display and edit translations of a phrase.
  */
@@ -188,7 +193,7 @@ class TransUnitTranslationPanel extends React.Component {
   }
 }
 
-class TranslationItem extends React.Component {
+export class TranslationItem extends React.Component {
   static propTypes = {
     dropdownIsOpen: PropTypes.bool.isRequired,
     index: PropTypes.number.isRequired,

diff --git a/server/zanata-frontend/src/app/editor/components/TransUnitTranslationPanel.test.js b/server/zanata-frontend/src/app/editor/components/TransUnitTranslationPanel.test.js
@@ -0,0 +1,97 @@
+jest.disableAutomock()
+
+import React from 'react'
+import ReactDOMServer from 'react-dom/server'
+import { TranslationItem } from './TransUnitTranslationPanel'
+import Textarea from 'react-textarea-autosize'
+import SyntaxHighlighter, { registerLanguage }
+  from 'react-syntax-highlighter/light'
+import xml from 'react-syntax-highlighter/languages/hljs/xml'
+import { atelierLakesideLight } from 'react-syntax-highlighter/styles/hljs'
+
+registerLanguage('xml', xml)
+
+/* eslint-disable max-len */
+describe('TransUnitTranslationPanelTest', () => {
+  it('TranslationItem Syntax Highlighting on markup', () => {
+    const defaultFunc = () => {}
+    const actual = ReactDOMServer.renderToStaticMarkup(
+      <TranslationItem
+        dropdownIsOpen={false}
+        index={1}
+        isPlural={false}
+        onSelectionChange={defaultFunc}
+        phrase={{id: '1'}}
+        selected={false}
+        selectedPluralIndex={1}
+        selectPhrasePluralIndex={defaultFunc}
+        setTextArea={defaultFunc}
+        textChanged={defaultFunc}
+        translation={'Je ne parle pas français'}
+        directionClass={''}
+        syntaxOn />
+    )
+    const lineStyle = {
+      padding: '0.5rem',
+      width: '90%',
+      whiteSpace: 'pre-wrap',
+      wordWrap: 'break-word'
+    }
+    const expected = ReactDOMServer.renderToStaticMarkup(
+      <div className="TransUnit-item">
+        <Textarea
+          ref={defaultFunc}
+          className={' TransUnit-text'}
+          disabled={false}
+          rows={1}
+          value={'Je ne parle pas français'}
+          placeholder="Enter a translation…"
+          onFocus={defaultFunc}
+          onChange={defaultFunc}
+          onSelect={defaultFunc} />
+        <SyntaxHighlighter
+          language='html'
+          style={atelierLakesideLight}
+          wrapLines
+          lineStyle={lineStyle}>
+          {'Je ne parle pas français'}
+        </SyntaxHighlighter>
+      </div>
+    )
+    expect(actual).toEqual(expected)
+  })
+  it('TranslationItem Syntax Highlighting off markup', () => {
+    const defaultFunc = () => {}
+    const actual = ReactDOMServer.renderToStaticMarkup(
+      <TranslationItem
+        dropdownIsOpen={false}
+        index={1}
+        isPlural={false}
+        onSelectionChange={defaultFunc}
+        phrase={{id: '1'}}
+        selected={false}
+        selectedPluralIndex={1}
+        selectPhrasePluralIndex={defaultFunc}
+        setTextArea={defaultFunc}
+        textChanged={defaultFunc}
+        translation={'Je ne parle pas français'}
+        directionClass={''}
+        syntaxOn={false} />
+    )
+    const expected = ReactDOMServer.renderToStaticMarkup(
+      <div className="TransUnit-item">
+        <Textarea
+          ref={defaultFunc}
+          className={' TransUnit-text'}
+          disabled={false}
+          rows={1}
+          value={'Je ne parle pas français'}
+          placeholder="Enter a translation…"
+          onFocus={defaultFunc}
+          onChange={defaultFunc}
+          onSelect={defaultFunc} />
+      </div>
+    )
+    expect(actual).toEqual(expected)
+  })
+})