Slightly better tests for Preview

TailorDev · Mar 11, 2016 · a98e517 · a98e517
1 parent ad63226
commit a98e517
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 32 deletions.
diff --git a/app/components/Preview.jsx b/app/components/Preview.jsx
@@ -9,20 +9,24 @@ export default class Preview extends Component {
     super(props, context);
 
     this.requestAnimationId = false;
+    this.injectDependencies = this.injectDependencies.bind(this);
   }
 
-  componentWillMount() {
-    PreviewLoader().then((deps) => {
-      this.marked = deps.marked.setOptions({
-        sanitize: false,
-        highlight: function (code) {
-          return deps.hljs.highlightAuto(code).value;
-        }
-      });
+  injectDependencies(marked, hljs, emojione) {
+    this.marked = marked.setOptions({
+      sanitize: false,
+      highlight: function (code) {
+        return hljs.highlightAuto(code).value;
+      }
+    });
 
-      this.emojione = deps.emojione;
-      this.emojione.ascii = true;
+    this.emojione = emojione;
+    this.emojione.ascii = true;
+  }
 
+  componentWillMount() {
+    PreviewLoader().then((deps) => {
+      this.injectDependencies(deps.marked, deps.hljs, deps.emojione);
       this.forceUpdate();
     });
   }
@@ -51,19 +55,19 @@ export default class Preview extends Component {
     return this.props.raw !== nextProps.raw;
   }
 
-  getHTML(marked, emojione) {
+  getHTML() {
     let html;
 
-    if (!marked) {
+    if (!this.marked) {
       html = [
         '<div class="preview-loader">',
         '<p>Loading all the rendering stuff...</p>',
         '<i class="fa fa-spinner fa-spin"></i>',
         '</div>'
       ].join('');
     } else {
-      html = marked(this.props.raw.toString());
-      html = emojione.toImage(html);
+      html = this.marked(this.props.raw.toString());
+      html = this.emojione.toImage(html);
     }
 
     return {
@@ -77,7 +81,7 @@ export default class Preview extends Component {
         <div
           ref="rendered"
           className="rendered"
-          dangerouslySetInnerHTML={this.getHTML(this.marked, this.emojione)} />
+          dangerouslySetInnerHTML={this.getHTML()} />
       </div>
     );
   }

diff --git a/app/components/__tests__/Preview-test.js b/app/components/__tests__/Preview-test.js
@@ -13,15 +13,6 @@ import Preview from '../Preview';
 
 describe('<Preview />', () => {
 
-  before(() => {
-    marked.setOptions({
-      sanitize: false,
-      highlight: function (code) {
-        return hljs.highlightAuto(code).value;
-      }
-    });
-  });
-
   it('renders a block with preview css class', () => {
     const wrapper = shallow(<Preview raw={""} pos={0} />);
     expect(wrapper.find('.preview')).to.have.length(1);
@@ -35,32 +26,34 @@ describe('<Preview />', () => {
 
   it('renders content', () => {
     const wrapper = shallow(<Preview raw={"foo"} pos={0} />);
-    const html = wrapper.instance().getHTML(marked, emojione).__html;
+    wrapper.instance().injectDependencies(marked, hljs, emojione);
 
-    expect(html).to.contain('foo');
+    expect(wrapper.instance().getHTML().__html).to.contain('foo');
   });
 
   it('converts markdown into HTML', () => {
     const wrapper = shallow(<Preview raw={"*italic*"} pos={0} />);
-    const html = wrapper.instance().getHTML(marked, emojione).__html;
+    wrapper.instance().injectDependencies(marked, hljs, emojione);
 
-    expect(html).to.contain('<em>italic</em>');
+    expect(wrapper.instance().getHTML().__html).to.contain('<em>italic</em>');
   });
 
   it('converts Emoji', () => {
     const wrapper = shallow(<Preview raw={":smile:"} pos={0} />);
-    const html = wrapper.instance().getHTML(marked, emojione).__html;
 
-    expect(html).to.contain(
+    wrapper.instance().injectDependencies(marked, hljs, emojione);
+
+    expect(wrapper.instance().getHTML().__html).to.contain(
       '<img class="emojione" alt="😄" src="//cdn.jsdelivr.net/emojione/assets/png/1f604.png?v=2.1.1"/>'
     );
   });
 
   it('highlights code blocks', () => {
     const wrapper = shallow(<Preview raw={"```python\nprint()```"} pos={0} />);
-    const html = wrapper.instance().getHTML(marked, emojione).__html;
 
-    expect(html).to.contain(
+    wrapper.instance().injectDependencies(marked, hljs, emojione);
+
+    expect(wrapper.instance().getHTML().__html).to.contain(
       [
         '<pre><code class="lang-python">',
         '<span class="hljs-function">',