feat(tooltip): add unit test

.browserslistrc

@@ -0,0 +1,2 @@
+defaults and supports es6-module
+maintained node versions

package.json

@@ -25,7 +25,6 @@
     "@rushstack/eslint-patch": "1.2.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/vue": "6.6.0",
-    "@types/dompurify": "^2",
     "@types/lodash-es": "4.17.6",
     "@types/marked": "^4",
     "@types/testing-library__jest-dom": "5.14.5",
@@ -71,9 +70,9 @@
     "chart.js": "3.9.1",
     "date-fns": "2.29.3",
     "defu": "6.1.0",
-    "dompurify": "^2.4.0",
     "fuse.js": "6.6.2",
     "interactjs": "1.10.17",
+    "isomorphic-dompurify": "^0.23.0",
     "lodash-es": "4.17.21",
     "marked": "^4.1.1",
     "p-queue": "^7.3.0",

src/components/markdown/index.spec.ts

@@ -0,0 +1,102 @@
+import { render } from '@testing-library/vue'
+import {
+  markdown,
+  pMd,
+  vPMd,
+} from '.'
+
+describe('markdown', () => {
+  it('should able render markdown', () => {
+    const result = markdown('**Hello** _world_')
+
+    expect(result).toBe('<p><strong>Hello</strong> <em>world</em></p>\n')
+  })
+
+  it('should sanitize result by default', () => {
+    const result = markdown("123<a href='javascript:alert(1)'>I am a dolphin!</a>")
+
+    expect(result).toBe('<p>123<a>I am a dolphin!</a></p>\n')
+  })
+
+  it('should render inline when options.inline set to true', () => {
+    const result = markdown('**Hello** _world_', { inline: true })
+
+    expect(result).toBe('<strong>Hello</strong> <em>world</em>')
+  })
+
+  it('should not sanitize when options.unsecure set to true', () => {
+    const result = markdown("123<a href='javascript:alert(1)'>I am a dolphin!</a>", { unsecure: true })
+
+    expect(result).toBe("<p>123<a href='javascript:alert(1)'>I am a dolphin!</a></p>\n")
+  })
+})
+
+describe('v-p-md', () => {
+  it('should able render markdown', () => {
+    const screen = render({
+      directives: { pMd },
+      template  : `
+        <div
+          data-testid="sample"
+          v-p-md="'**Hello** _world_'"
+        />
+      `,
+    })
+
+    const sample = screen.getByTestId('sample')
+
+    expect(sample.innerHTML).toBe('<p><strong>Hello</strong> <em>world</em></p>\n')
+  })
+
+  it('should sanitize result by default', () => {
+    const screen = render({
+      directives: { pMd },
+      template  : `
+        <div
+          data-testid="sample"
+          v-p-md="'123<a href=\\'javascript:alert(1)\\'>I am a dolphin!</a>'"
+        />
+      `,
+    })
+
+    const sample = screen.getByTestId('sample')
+
+    expect(sample.innerHTML).toBe('<p>123<a>I am a dolphin!</a></p>\n')
+  })
+
+  it('should render inline when add modifiers `inline`', () => {
+    const screen = render({
+      directives: { pMd },
+      template  : `
+        <div
+          data-testid="sample"
+          v-p-md.inline="'**Hello** _world_'"
+        />
+      `,
+    })
+
+    const sample = screen.getByTestId('sample')
+
+    expect(sample.innerHTML).toBe('<strong>Hello</strong> <em>world</em>')
+  })
+
+  it('should not sanitize when add modifiers `unsecure`', () => {
+    const screen = render({
+      directives: { pMd },
+      template  : `
+        <div
+          data-testid="sample"
+          v-p-md.unsecure="'123<a href=\\'javascript:alert(1)\\'>I am a dolphin!</a>'"
+        />
+      `,
+    })
+
+    const sample = screen.getByTestId('sample')
+
+    expect(sample.innerHTML).toBe('<p>123<a href="javascript:alert(1)">I am a dolphin!</a></p>\n')
+  })
+
+  it('should export alias vPMd', () => {
+    expect(pMd).toBe(vPMd)
+  })
+})

src/components/markdown/index.ts

@@ -1,19 +1,41 @@
 import { Directive } from 'vue-demi'
 import { marked } from 'marked'
-import DOMPurify from 'dompurify'
+import { sanitize } from 'isomorphic-dompurify'
 
-export function markdown (text: string, { inline = false, sanitize = true }) {
-  const html = inline
+export interface MarkdownOption {
+  /**
+   * Use inline parsing
+   * @default false
+   * @link https://marked.js.org/using_advanced#inline
+   */
+  inline: boolean,
+  /**
+   * Disabled sanitize HTML result
+   * @default false
+   */
+  unsecure: boolean,
+}
+
+/**
+ * Parse markdown to html string
+ * @param text markdown string
+ * @param options parsing options
+ */
+export function markdown (text: string = '', options: Partial<MarkdownOption> = {}) {
+  const html = options.inline
     ? marked.parseInline(text)
     : marked.parse(text)
 
-  return sanitize ? DOMPurify.sanitize(html) : html
+  if (html && !options.unsecure)
+    return sanitize(html)
+
+  return html ?? ''
 }
 
 export const pMd: Directive<HTMLElement, string> = (el, { value, modifiers }) => {
   el.innerHTML = markdown(value, {
     inline  : modifiers.inline,
-    sanitize: !modifiers.unsecure,
+    unsecure: modifiers.unsecure,
   })
 }