Add unit test by Jest

package.json

@@ -41,6 +41,22 @@
     "singleQuote": true,
     "trailingComma": "es5"
   },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.ts",
+      "src/**/*.js"
+    ],
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      ".*\\.d\\.ts"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "lines": 95
+      }
+    },
+    "preset": "ts-jest"
+  },
   "scripts": {
     "build": "yarn -s clean && rollup -c ./rollup.config.js",
     "clean": "rimraf lib",
@@ -51,11 +67,18 @@
     "format:write": "yarn -s format --write",
     "lint:ts": "tslint \"{src,test}/**/*.ts\"",
     "postinstall": "node ./node_modules/vscode/bin/install",
-    "preversion": "npm-run-all --npm-path yarn --parallel check-audit check-ts format:check lint:*",
+    "preversion": "npm-run-all --npm-path yarn --parallel check-audit check-ts format:check lint:* test:*:coverage",
+    "test:unit": "jest",
+    "test:unit:coverage": "jest --coverage",
     "version": "node version.js && git add -A CHANGELOG.md",
     "watch": "rollup -w -c ./rollup.config.js"
   },
   "devDependencies": {
+    "@types/jest": "^24.0.0",
+    "@types/markdown-it": "^0.0.7",
+    "jest": "^24.1.0",
+    "markdown-it": "^8.4.2",
+    "markdown-it-emoji": "^1.4.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.16.4",
     "rimraf": "^2.6.3",
@@ -65,6 +88,7 @@
     "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-terser": "^4.0.3",
     "rollup-plugin-typescript": "^1.0.0",
+    "ts-jest": "^23.10.5",
     "tslint": "^5.12.1",
     "tslint-config-airbnb": "^5.11.1",
     "tslint-config-prettier": "^1.17.0",

preview.js

@@ -0,0 +1,3 @@
+import preview from './src/preview'
+
+preview()

rollup.config.js

@@ -24,7 +24,7 @@ export default [
     plugins,
   },
   {
-    input: 'src/preview.ts',
+    input: 'preview.js',
     output: { file: 'lib/preview.js', format: 'iife', sourcemap },
     plugins,
   },

src/extension.test.ts

@@ -0,0 +1,89 @@
+/** @jest-environment node */
+import { Marp } from '@marp-team/marp-core'
+import markdownIt from 'markdown-it'
+import markdownItEmoji from 'markdown-it-emoji'
+import { activate, extendMarkdownIt } from './extension'
+
+afterEach(() => jest.restoreAllMocks())
+
+describe('#activate', () => {
+  it('contains #extendMarkdownIt', () =>
+    expect(activate()).toEqual(expect.objectContaining({ extendMarkdownIt })))
+})
+
+describe('#extendMarkdownIt', () => {
+  const marpMd = (md: string) => `---\nmarp: true\n---\n\n${md}`
+
+  describe('Marp Core', () => {
+    const markdown = '# Hello :wave:\n\n<!-- header: Hi -->'
+
+    it('has not any extends without marp front-matter', () => {
+      const html = extendMarkdownIt(new markdownIt()).render(markdown)
+
+      expect(html).not.toContain('<div id="marp-vscode">')
+      expect(html).not.toContain('<style id="marp-vscode-style">')
+      expect(html).not.toContain('svg')
+      expect(html).not.toContain('img')
+    })
+
+    it('extends Marp feature with marp front-matter', () => {
+      const html = extendMarkdownIt(new markdownIt()).render(marpMd(markdown))
+
+      expect(html).toContain('<div id="marp-vscode">')
+      expect(html).toContain('<style id="marp-vscode-style">')
+      expect(html).toContain('svg')
+      expect(html).toContain('img')
+    })
+  })
+
+  describe('Emoji support', () => {
+    it('overrides injected markdown-it-emoji renderer by other plugin', () => {
+      const md = extendMarkdownIt(new markdownIt().use(markdownItEmoji))
+
+      expect(md.render(':+1:')).not.toContain('data-marp-twemoji')
+      expect(md.render(marpMd(':+1:'))).toContain('data-marp-twemoji')
+    })
+  })
+
+  describe('Code highlight', () => {
+    const markdown = '```javascript\nconst test = 1\n```'
+
+    let highlight: jest.Mock
+    let md: markdownIt
+    let marpHighlighter: jest.SpyInstance
+
+    beforeEach(() => {
+      marpHighlighter = jest.spyOn(Marp.prototype, 'highlighter')
+      highlight = jest.fn(() => 'baseHighlight')
+      md = extendMarkdownIt(new markdownIt({ highlight }))
+    })
+
+    it('uses original highlighter when Marp is disabled', () => {
+      md.render(markdown)
+
+      expect(highlight).toBeCalled()
+      expect(marpHighlighter).not.toBeCalled()
+    })
+
+    it('uses Marp highlighter when Marp is enabled', () => {
+      md.render(marpMd(markdown))
+
+      expect(highlight).not.toBeCalled()
+      expect(marpHighlighter).toReturnWith(expect.stringContaining('hljs'))
+    })
+
+    it('supports mermaid plugin by other VSCode plugin', () => {
+      const html = md.render(marpMd('```mermaid\n>>\n```'))
+
+      expect(marpHighlighter).toReturnWith('')
+      expect(html).toContain('<div class="mermaid">&gt;&gt;')
+    })
+
+    it('passes code through when specified unknown language', () => {
+      const html = md.render(marpMd('```unknownlang\nv => 5\n```'))
+
+      expect(marpHighlighter).toReturnWith('')
+      expect(html).toContain('<code class="language-unknownlang">')
+    })
+  })
+})

src/extension.ts

@@ -4,7 +4,7 @@ const frontMatterRegex = /^---\s*([^]*)?(?:-{3}|\.{3})\s*/
 const marpDirectiveRegex = /^marp\s*:\s*true\s*$/m
 const marpVscodeEnabled = Symbol()
 
-function extendMarkdownIt(md: any) {
+export function extendMarkdownIt(md: any) {
   const marp: any = new Marp({
     container: { tag: 'div', id: 'marp-vscode' },
     emoji: { twemoji: { ext: 'png' } },

src/preview.test.ts

@@ -0,0 +1,53 @@
+import browserCjs from '@marp-team/marp-core/lib/browser.cjs'
+import { webkit } from '@marp-team/marpit-svg-polyfill'
+import preview from './preview'
+
+jest.mock('@marp-team/marp-core/lib/browser.cjs')
+jest.mock('@marp-team/marpit-svg-polyfill')
+
+beforeEach(() => {
+  jest.clearAllMocks()
+
+  document.head.innerHTML = ''
+  document.body.innerHTML = ''
+})
+
+describe('Preview HTML', () => {
+  it('does not call browser context JS when HTML has not Marp slide', () => {
+    preview()
+    expect(browserCjs).not.toBeCalled()
+    expect(webkit).not.toBeCalled()
+  })
+
+  it('calls browser context JS when HTML has Marp slide', () => {
+    document.body.innerHTML = '<div id="marp-vscode"></div>'
+
+    preview()
+    expect(browserCjs).toBeCalled()
+    expect(webkit).toBeCalled()
+  })
+
+  it('removes all styles excepted Marp when HTML has Marp slide', () => {
+    document.head.innerHTML = `
+      <style id="_defaultStyles"></style>
+      <link rel="stylesheet" href="vscode-resource:/user/defined.css" />
+      <link rel="stylesheet" href="vscode-resource:/marp-vscode/style.css" />
+    `.trim()
+
+    document.body.innerHTML = `
+      <style id="another-plugin"></style>
+      <style id="marp-vscode-style"></style>
+      <div id="marp-vscode"></div>
+    `.trim()
+
+    expect(document.querySelectorAll('style')).toHaveLength(3)
+    expect(document.querySelectorAll('link')).toHaveLength(2)
+
+    preview()
+
+    expect(document.querySelectorAll('style')).toHaveLength(1)
+    expect(document.getElementById('marp-vscode-style')).toBeTruthy()
+    expect(document.querySelectorAll('link')).toHaveLength(1)
+    expect(document.querySelector('link')!.href).toContain('marp-vscode')
+  })
+})

src/preview.ts

@@ -1,24 +1,26 @@
 import browserCjs from '@marp-team/marp-core/lib/browser.cjs'
 import { webkit } from '@marp-team/marpit-svg-polyfill'
 
-const marpEnabled = document.getElementById('marp-vscode')
+export default function preview() {
+  const marpEnabled = document.getElementById('marp-vscode')
 
-if (marpEnabled) {
-  // Remove default styles
-  const styles = document.querySelectorAll('style:not(#marp-vscode-style)')
-  const links = document.querySelectorAll(
-    'link[rel="stylesheet"]:not([href*="/marp-vscode/"])'
-  )
-  styles.forEach(elm => elm.remove())
-  links.forEach(elm => elm.remove())
+  if (marpEnabled) {
+    // Remove default styles
+    const styles = document.querySelectorAll('style:not(#marp-vscode-style)')
+    const links = document.querySelectorAll(
+      'link[rel="stylesheet"]:not([href*="/marp-vscode/"])'
+    )
+    styles.forEach(elm => elm.remove())
+    links.forEach(elm => elm.remove())
 
-  // Run Marp observer
-  browserCjs()
+    // Run Marp observer
+    browserCjs()
 
-  // VSCode has the same rendering bug as WebKit.
-  const observer = () => {
-    webkit()
-    window.requestAnimationFrame(observer)
+    // VSCode has the same rendering bug as WebKit.
+    const observer = () => {
+      webkit()
+      window.requestAnimationFrame(observer)
+    }
+    observer()
   }
-  observer()
 }