test: Add test case.

Author: jaywcjlove

package.json

@@ -13,7 +13,9 @@
     "css:watch": "compile-less -d src -o esm --watch",
     "css:build:dist": "compile-less -d src --combine markdown.css --rm-global",
     "watch": "tsbb watch",
-    "build": "tsbb build && npm run css:build && npm run css:build:dist"
+    "build": "tsbb build && npm run css:build && npm run css:build:dist",
+    "test": "tsbb test --env=jsdom",
+    "coverage": "tsbb test --env=jsdom --coverage"
   },
   "repository": {
     "type": "git",
@@ -33,6 +35,11 @@
     "prismjs",
     "react-markdown"
   ],
+  "jest": {
+    "transformIgnorePatterns": [
+      "<rootDir>/node_modules/?!(.*)"
+    ]
+  },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
@@ -53,14 +60,17 @@
     "@kkt/scope-plugin-options": "6.11.0",
     "@types/react": "17.0.20",
     "@types/react-dom": "17.0.9",
+    "@types/react-test-renderer": "17.0.1",
     "@uiw/react-codesandbox": "1.1.0",
     "@uiw/react-github-corners": "1.5.3",
     "@uiw/react-shields": "1.1.2",
     "@uiw/reset.css": "1.0.5",
     "compile-less-cli": "1.8.8",
     "kkt": "6.11.0",
+    "jest": "27.1.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-test-renderer": "17.0.2",
     "tsbb": "3.1.5"
   },
   "eslintConfig": {

test/index.test.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useRef } from 'react';
+import TestRenderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
+import MarkdownPreview, { MarkdownPreviewRef } from '../src';
+
+it('Should output a TestRenderer', async () => {
+  const component = TestRenderer.create(<MarkdownPreview source="## Hello World!" />);
+  let tree = component.toJSON();
+  if (tree && !Array.isArray(tree)) {
+    expect(tree.type).toEqual('div');
+    expect(tree.props.disabled).toBeFalsy();
+    expect(tree.props.onScroll).toBeUndefined();
+    expect(tree.props.style).toBeUndefined();
+    expect(tree.props.onMouseOver).toBeUndefined();
+    expect(tree.props.className).toEqual('wmde-markdown wmde-markdown-color ');
+  }
+});
+
+it('Test case prefixCls props', async () => {
+  const component = TestRenderer.create(<MarkdownPreview prefixCls="" source="" />);
+  let tree = component.toJSON();
+  if (tree && !Array.isArray(tree)) {
+    expect(tree.type).toEqual('div');
+    expect(tree.props.disabled).toBeFalsy();
+    expect(tree.props.onScroll).toBeUndefined();
+    expect(tree.props.style).toBeUndefined();
+    expect(tree.props.onMouseOver).toBeUndefined();
+    expect(tree.props.className).toEqual(' ');
+  }
+});
+
+it('MarkdownPreview anchor', async () => {
+  const source = `### MarkdownPreview`;
+  render(<MarkdownPreview source={source} />);
+  const octicon = document.querySelector('.octicon-link');
+  expect(Object.keys(octicon as any).length).toEqual(2);
+  Object.keys(octicon as any).forEach((elm) => {
+    const fiberNode = (octicon as any)[elm];
+    expect(typeof fiberNode).toEqual('object');
+    if (fiberNode['className']) {
+      expect(fiberNode.className).toEqual('octicon octicon-link');
+      expect(fiberNode.width).toEqual('16');
+      expect(fiberNode.height).toEqual('16');
+      expect(fiberNode['aria-hidden']).toEqual('true');
+    }
+  });
+});
+
+it('MarkdownPreview Ref', async () => {
+  const source = `### MarkdownPreview`;
+  function Demo() {
+    const ref = useRef<MarkdownPreviewRef>(null);
+    useEffect(() => {
+      if (ref.current) {
+        expect(Object.keys(ref.current)).toEqual([ 'source', 'mdp' ]);
+      }
+    });
+    return (
+      <MarkdownPreview ref={ref} source={source} />
+    );
+  }
+  render(<Demo />);
+});

tsconfig.json

@@ -23,6 +23,7 @@
     "noEmit": true
   },
   "include": [
-    "website"
+    "website",
+    "test"
   ]
 }