test: Add test case.

Author: jaywcjlove

package.json

@@ -13,6 +13,8 @@
     "prepare": "husky install && npm run build",
     "watch": "tsbb watch",
     "build": "tsbb build",
+    "test": "tsbb test --env=jsdom",
+    "coverage": "tsbb test --coverage",
     "doc": "kkt build --app-src ./website",
     "start": "kkt start --app-src ./website",
     "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,html,less,md,json}'"
@@ -51,6 +53,7 @@
     "@codemirror/theme-one-dark": "0.19.0",
     "@codemirror/view": "0.19.4"
   },
+  "jest": {},
   "eslintConfig": {
     "extends": [
       "react-app",
@@ -80,18 +83,21 @@
     "@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-github-corners": "1.5.1",
     "@uiw/react-markdown-preview": "3.3.0",
     "@uiw/react-shields": "1.1.1",
     "@uiw/reset.css": "1.0.5",
     "code-example": "3.0.6",
     "husky": "7.0.2",
+    "jest": "27.1.0",
     "kkt": "6.11.0",
     "lint-staged": "11.1.2",
     "prettier": "2.3.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "tsbb": "3.0.4"
+    "react-test-renderer": "17.0.2",
+    "tsbb": "3.1.0"
   },
   "browserslist": {
     "production": [

src/theme/dark.ts

@@ -0,0 +1,71 @@
+/* eslint-disable jest/no-conditional-expect */
+import React, { useEffect, useRef } from 'react';
+import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
+// import '@testing-library/jest-dom';
+// import userEvent from '@testing-library/user-event';
+import CodeMirror, { ReactCodeMirrorRef } from '../src';
+
+it('CodeMirror', async () => {
+  const component = renderer.create(<CodeMirror />);
+  let tree = component.toJSON();
+  if (tree && !Array.isArray(tree)) {
+    expect(tree.type).toEqual('div');
+    expect(tree.props.className).toEqual('cm-theme-light');
+  }
+});
+
+it('CodeMirror onChange', async () => {
+  render(
+    <CodeMirror
+      autoFocus
+      value="console.log('Hello world!')"
+      onChange={(value) => {
+        expect(value).toEqual(`console.log('Hello world!')`);
+      }}
+    />,
+  );
+  // const cont = document.querySelector('.cm-content');
+});
+
+it('CodeMirror onUpdate', async () => {
+  render(
+    <CodeMirror
+      value="console.log('Hello world!')"
+      autoFocus
+      onUpdate={(viewUpdate) => {
+        expect(viewUpdate.state.doc.length).toEqual(27);
+      }}
+    />,
+  );
+});
+
+it('CodeMirror ref', async () => {
+  function Demo() {
+    const ref = useRef<ReactCodeMirrorRef>(null);
+    useEffect(() => {
+      expect(Object.keys(ref.current!)).toEqual(['editor', 'state', 'view']);
+    }, [ref]);
+
+    return <CodeMirror ref={ref} value="console.log('Hello world!')" />;
+  }
+  render(<Demo />);
+});
+
+it('CodeMirror theme', async () => {
+  const component = renderer.create(<CodeMirror theme="dark" />);
+  let tree = component.toJSON();
+  if (tree && !Array.isArray(tree)) {
+    expect(tree.type).toEqual('div');
+    expect(tree.props.className).toEqual('cm-theme-dark');
+  }
+});
+
+it('CodeMirror className', async () => {
+  const component = renderer.create(<CodeMirror className="test" />);
+  let tree = component.toJSON();
+  if (tree && !Array.isArray(tree)) {
+    expect(tree.type).toEqual('div');
+    expect(tree.props.className).toEqual('cm-theme-light test');
+  }
+});

test/index.test.tsx

@@ -18,5 +18,5 @@
     "moduleResolution": "node",
     "noEmit": true
   },
-  "include": ["src/**/*", "website/**/*", ".kktrc.ts"]
+  "include": ["src/**/*", "website/**/*", "test/*", ".kktrc.ts"]
 }