Merge pull request #1678 from rayou/add-unit-tests-for-lib-markdown

Added unit tests for lib/markdown

browser/lib/markdown.js

@@ -4,11 +4,9 @@ import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
 import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
+import katex from 'katex'
 import {lastFindInArray} from './utils'
 
-// FIXME We should not depend on global variable.
-const katex = window.katex
-
 function createGutter (str, firstLineNumber) {
   if (Number.isNaN(firstLineNumber)) firstLineNumber = 1
   const lastLineNumber = (str.match(/\n/g) || []).length + firstLineNumber - 1

lib/main.html

@@ -97,7 +97,6 @@
   </script>
 
   <script src="../node_modules/js-sequence-diagrams/fucknpm/sequence-diagram-min.js"></script>
-  <script src="../node_modules/katex/dist/katex.min.js"></script>
   <script src="../node_modules/react/dist/react.min.js"></script>
   <script src="../node_modules/react-dom/dist/react-dom.min.js"></script>
   <script src="../node_modules/redux/dist/redux.min.js"></script>

package.json

@@ -93,7 +93,7 @@
     "uuid": "^3.2.1"
   },
   "devDependencies": {
-    "ava": "^0.16.0",
+    "ava": "^0.25.0",
     "babel-core": "^6.14.0",
     "babel-loader": "^6.2.0",
     "babel-plugin-react-transform": "^2.0.0",
@@ -102,6 +102,7 @@
     "babel-preset-react": "^6.3.13",
     "babel-preset-react-hmre": "^1.0.1",
     "babel-register": "^6.11.6",
+    "browser-env": "^3.2.5",
     "concurrently": "^3.4.0",
     "copy-to-clipboard": "^3.0.6",
     "css-loader": "^0.19.0",
@@ -121,6 +122,7 @@
     "jsdom": "^9.4.2",
     "json-loader": "^0.5.4",
     "merge-stream": "^1.0.0",
+    "mock-require": "^3.0.1",
     "nib": "^1.1.0",
     "react-color": "^2.2.2",
     "react-css-modules": "^3.7.6",
@@ -144,7 +146,9 @@
       "tests/**/*-test.js"
     ],
     "require": [
-      "babel-register"
+      "babel-register",
+      "./tests/helpers/setup-browser-env.js",
+      "./tests/helpers/setup-electron-mock.js"
     ],
     "babel": "inherit"
   }

tests/fixtures/markdowns.js

@@ -0,0 +1,57 @@
+const basic = `
+# Welcome to Boostnote!
+## Click here to edit markdown :wave:
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/L0qNPLsvmyM" frameborder="0" allowfullscreen></iframe>
+
+## Docs :memo:
+- [Boostnote | Boost your happiness, productivity and creativity.](https://hackernoon.com/boostnote-boost-your-happiness-productivity-and-creativity-315034efeebe)
+- [Cloud Syncing & Backups](https://github.com/BoostIO/Boostnote/wiki/Cloud-Syncing-and-Backup)
+- [How to sync your data across Desktop and Mobile apps](https://github.com/BoostIO/Boostnote/wiki/Sync-Data-Across-Desktop-and-Mobile-apps)
+- [Convert data from **Evernote** to Boostnote.](https://github.com/BoostIO/Boostnote/wiki/Evernote)
+- [Keyboard Shortcuts](https://github.com/BoostIO/Boostnote/wiki/Keyboard-Shortcuts)
+- [Keymaps in Editor mode](https://github.com/BoostIO/Boostnote/wiki/Keymaps-in-Editor-mode)
+- [How to set syntax highlight in Snippet note](https://github.com/BoostIO/Boostnote/wiki/Syntax-Highlighting)
+
+---
+
+## Article Archive :books:
+- [Reddit English](http://bit.ly/2mOJPu7)
+- [Reddit Spanish](https://www.reddit.com/r/boostnote_es/)
+- [Reddit Chinese](https://www.reddit.com/r/boostnote_cn/)
+- [Reddit Japanese](https://www.reddit.com/r/boostnote_jp/)
+
+---
+
+## Community :beers:
+- [GitHub](http://bit.ly/2AWWzkD)
+- [Twitter](http://bit.ly/2z8BUJZ)
+- [Facebook Group](http://bit.ly/2jcca8t)
+`
+
+const codeblock = `
+\`\`\`js:filename.js:2
+var project = 'boostnote';
+\`\`\`
+`
+
+const katex = `
+$$
+c = \pm\sqrt{a^2 + b^2}
+$$
+`
+
+const checkboxes = `
+- [ ] Unchecked
+- [x] Checked
+`
+
+const smartQuotes = 'This is a "QUOTE".'
+
+export default {
+  basic,
+  codeblock,
+  katex,
+  checkboxes,
+  smartQuotes
+}

tests/helpers/setup-browser-env.js

@@ -0,0 +1,9 @@
+import browserEnv from 'browser-env'
+browserEnv(['window', 'document'])
+
+window.localStorage = {
+  // polyfill
+  getItem () {
+    return '{}'
+  }
+}

tests/helpers/setup-electron-mock.js

@@ -0,0 +1,11 @@
+import mock from 'mock-require'
+
+const noop = () => {}
+
+mock('electron', {
+  remote: {
+    app: {
+      getAppPath: noop
+    }
+  }
+})

tests/lib/markdown-test.js

@@ -0,0 +1,36 @@
+import test from 'ava'
+import Markdown from 'browser/lib/markdown'
+import markdownFixtures from '../fixtures/markdowns'
+
+// basic markdown instance which meant to be used in every test cases.
+// To test markdown options, initialize a new instance in your test case
+const md = new Markdown()
+
+test('Markdown.render() should renders markdown correctly', t => {
+  const rendered = md.render(markdownFixtures.basic)
+  t.snapshot(rendered)
+})
+
+test('Markdown.render() should renders codeblock correctly', t => {
+  const rendered = md.render(markdownFixtures.codeblock)
+  t.snapshot(rendered)
+})
+
+test('Markdown.render() should renders KaTeX correctly', t => {
+  const rendered = md.render(markdownFixtures.katex)
+  t.snapshot(rendered)
+})
+
+test('Markdown.render() should renders checkboxes', t => {
+  const rendered = md.render(markdownFixtures.checkboxes)
+  t.snapshot(rendered)
+})
+
+test('Markdown.render() should text with quotes correctly', t => {
+  const renderedSmartQuotes = md.render(markdownFixtures.smartQuotes)
+  t.snapshot(renderedSmartQuotes)
+
+  const newmd = new Markdown({ typographer: false })
+  const renderedNonSmartQuotes = newmd.render(markdownFixtures.smartQuotes)
+  t.snapshot(renderedNonSmartQuotes)
+})

tests/lib/rc-parser-test.js

@@ -29,5 +29,5 @@ test('RcParser should return a json object', t => {
 })
 
 function filePath (filename) {
-  return path.join('boostnoterc', filename)
+  return path.join(`${__dirname}/boostnoterc`, filename)
 }

tests/lib/snapshots/markdown-test.js.md

@@ -0,0 +1,76 @@
+# Snapshot report for `tests/lib/markdown-test.js`
+
+The actual snapshot is saved in `markdown-test.js.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## Markdown.render() should renders KaTeX correctly
+
+> Snapshot 1
+
+    `<span class="katex-display"><span class="katex"><span class="katex-mathml"><math><semantics><mrow><mi>c</mi><mo>=</mo><mi>p</mi><mi>m</mi><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mrow><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup></mrow></mrow><annotation encoding="application/x-tex">c = pmsqrt{a^2 + b^2}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="strut" style="height:0.8641079999999999em;"></span><span class="strut bottom" style="height:1.0585479999999998em;vertical-align:-0.19444em;"></span><span class="base"><span class="mord mathit">c</span><span class="mord rule" style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mord rule" style="margin-right:0.2777777777777778em;"></span><span class="mord mathit">p</span><span class="mord mathit">m</span><span class="mord mathit">s</span><span class="mord mathit" style="margin-right:0.03588em;">q</span><span class="mord mathit" style="margin-right:0.02778em;">r</span><span class="mord mathit">t</span><span class="mord"><span class="mord"><span class="mord mathit">a</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8641079999999999em;"><span style="top:-3.113em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span><span class="mord rule" style="margin-right:0.2222222222222222em;"></span><span class="mbin">+</span><span class="mord rule" style="margin-right:0.2222222222222222em;"></span><span class="mord"><span class="mord mathit">b</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8641079999999999em;"><span style="top:-3.113em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span></span></span></span></span></span>␊
+    `
+
+## Markdown.render() should renders checkboxes
+
+> Snapshot 1
+
+    `<ul>␊
+    <li class="taskListItem"><input type="checkbox" id="checkbox-2" /> Unchecked</li>␊
+    <li class="taskListItem"><input type="checkbox" checked id="checkbox-3" /> Checked</li>␊
+    </ul>␊
+    `
+
+## Markdown.render() should renders codeblock correctly
+
+> Snapshot 1
+
+    `<pre class="code CodeMirror"><span class="filename">filename.js</span><span class="lineNumber CodeMirror-gutters"><span class="CodeMirror-linenumber">2</span></span><code class="js">var project = 'boostnote';␊
+    </code></pre>␊
+    `
+
+## Markdown.render() should renders markdown correctly
+
+> Snapshot 1
+
+    `<h1 data-line="1" id="Welcome-to-Boostnote">Welcome to Boostnote!</h1>␊
+    <h2 data-line="2" id="Click-here-to-edit-markdown-%F0%9F%91%8B">Click here to edit markdown 👋</h2>␊
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/L0qNPLsvmyM" frameborder="0" allowfullscreen></iframe>␊
+    <h2 data-line="6" id="Docs-%F0%9F%93%9D">Docs 📝</h2>␊
+    <ul>␊
+    <li><a href="https://hackernoon.com/boostnote-boost-your-happiness-productivity-and-creativity-315034efeebe">Boostnote | Boost your happiness, productivity and creativity.</a></li>␊
+    <li><a href="https://github.com/BoostIO/Boostnote/wiki/Cloud-Syncing-and-Backup">Cloud Syncing &amp; Backups</a></li>␊
+    <li><a href="https://github.com/BoostIO/Boostnote/wiki/Sync-Data-Across-Desktop-and-Mobile-apps">How to sync your data across Desktop and Mobile apps</a></li>␊
+    <li><a href="https://github.com/BoostIO/Boostnote/wiki/Evernote">Convert data from <strong>Evernote</strong> to Boostnote.</a></li>␊
+    <li><a href="https://github.com/BoostIO/Boostnote/wiki/Keyboard-Shortcuts">Keyboard Shortcuts</a></li>␊
+    <li><a href="https://github.com/BoostIO/Boostnote/wiki/Keymaps-in-Editor-mode">Keymaps in Editor mode</a></li>␊
+    <li><a href="https://github.com/BoostIO/Boostnote/wiki/Syntax-Highlighting">How to set syntax highlight in Snippet note</a></li>␊
+    </ul>␊
+    <hr />␊
+    <h2 data-line="17" id="Article-Archive-%F0%9F%93%9A">Article Archive 📚</h2>␊
+    <ul>␊
+    <li><a href="http://bit.ly/2mOJPu7">Reddit English</a></li>␊
+    <li><a href="https://www.reddit.com/r/boostnote_es/">Reddit Spanish</a></li>␊
+    <li><a href="https://www.reddit.com/r/boostnote_cn/">Reddit Chinese</a></li>␊
+    <li><a href="https://www.reddit.com/r/boostnote_jp/">Reddit Japanese</a></li>␊
+    </ul>␊
+    <hr />␊
+    <h2 data-line="25" id="Community-%F0%9F%8D%BB">Community 🍻</h2>␊
+    <ul>␊
+    <li><a href="http://bit.ly/2AWWzkD">GitHub</a></li>␊
+    <li><a href="http://bit.ly/2z8BUJZ">Twitter</a></li>␊
+    <li><a href="http://bit.ly/2jcca8t">Facebook Group</a></li>␊
+    </ul>␊
+    `
+
+## Markdown.render() should text with quotes correctly
+
+> Snapshot 1
+
+    `<p data-line="0">This is a “QUOTE”.</p>␊
+    `
+
+> Snapshot 2
+
+    `<p data-line="0">This is a &quot;QUOTE&quot;.</p>␊
+    `