test: Add test case.

Author: jaywcjlove

.gitignore

@@ -1,5 +1,6 @@
 lib
 build
+coverage
 node_modules
 npm-debug.log*
 package-lock.json

package.json

@@ -51,6 +51,7 @@
     "@kkt/raw-modules": "6.10.4",
     "@kkt/scope-plugin-options": "6.10.4",
     "@mapbox/rehype-prism": "0.6.0",
+    "@testing-library/react": "12.0.0",
     "@types/react": "17.0.11",
     "@types/react-dom": "17.0.8",
     "@types/react-test-renderer": "17.0.1",

src/__test__/index.test.tsx

@@ -1,13 +1,101 @@
 /* eslint-disable jest/no-conditional-expect */
+import React, { useRef } from 'react';
 import TestRenderer from 'react-test-renderer';
+import { fireEvent, render } from '@testing-library/react';
 import TextareaCodeEditor from '../';
 
 it('Should output a TextareaCodeEditor', async () => {
   const component = TestRenderer.create(<TextareaCodeEditor />);
   let tree = component.toJSON();
   if (tree && !Array.isArray(tree)) {
-    expect(tree.type).toEqual('button');
+    expect(tree.type).toEqual('div');
     expect(tree.props.disabled).toBeFalsy();
-    expect(tree.props.className).toEqual('w-btn w-btn-default w-btn-primary');
+    expect(tree.props.className).toEqual('w-tc-editor ');
+    expect(tree.props.style).toEqual({
+      position: 'relative',
+      textAlign: 'left',
+      boxSizing: 'border-box',
+      padding: 0,
+      overflow: 'hidden',
+    });
+    expect(tree.children!.length).toEqual(2);
+    tree.children!.forEach((child) => {
+      if (typeof child === 'object') {
+        expect(/^(div|textarea)$/.test(child.type || '')).toBeTruthy();
+        if (child.type === 'textarea') {
+          expect(child.props.autoComplete).toEqual('off');
+          expect(child.props.autoCorrect).toEqual('off');
+          expect(child.props.spellCheck).toEqual('false');
+          expect(child.props.autoCapitalize).toEqual('off');
+          expect(child.props.className).toEqual('w-tc-editor-text');
+        }
+      }
+    });
+  }
+});
+
+it('TextareaCodeEditor language="html"', async () => {
+  const component = TestRenderer.create(
+    <TextareaCodeEditor language="html" onChange={() => {}} value="<div>Hello World!</div>" />,
+  );
+  let tree = component.toJSON();
+  if (tree && !Array.isArray(tree)) {
+    expect(tree.type).toEqual('div');
+    expect(tree.props.disabled).toBeFalsy();
+    expect(tree.props.className).toEqual('w-tc-editor ');
+    expect(tree.props.style).toEqual({
+      position: 'relative',
+      textAlign: 'left',
+      boxSizing: 'border-box',
+      padding: 0,
+      overflow: 'hidden',
+    });
+    expect(tree.children!.length).toEqual(2);
+    tree.children!.forEach((child) => {
+      if (typeof child === 'object') {
+        expect(/^(div|textarea)$/.test(child.type || '')).toBeTruthy();
+        if (child.type === 'textarea') {
+          expect(child.props.autoComplete).toEqual('off');
+          expect(child.props.autoCorrect).toEqual('off');
+          expect(child.props.spellCheck).toEqual('false');
+          expect(child.props.autoCapitalize).toEqual('off');
+          expect(child.props.className).toEqual('w-tc-editor-text');
+        }
+        if (child.type === 'div') {
+          expect(child.props.style).toEqual({
+            paddingTop: 10,
+            paddingRight: 10,
+            paddingBottom: 10,
+            paddingLeft: 10,
+          });
+          expect(child.props.className).toEqual('w-tc-editor-preview language-html');
+          expect(typeof child.props.dangerouslySetInnerHTML).toEqual('object');
+        }
+      }
+    });
+  }
+});
+
+it('TextareaCodeEditor onChange', async () => {
+  const MyComponent = () => {
+    const txtRef = useRef<HTMLTextAreaElement>(null);
+    const [code] = React.useState(`function add(a, b) {\n  return a + b;\n}`);
+    return (
+      <TextareaCodeEditor
+        language="js"
+        value={code}
+        ref={txtRef}
+        onChange={(evn) => {
+          expect(evn.target.value).toEqual('a');
+        }}
+      />
+    );
+  };
+
+  const {
+    container: { firstChild },
+  } = render(<MyComponent />);
+  if (firstChild && firstChild.firstChild) {
+    fireEvent.input(firstChild.firstChild, { target: { value: 'a' } });
   }
 });

src/index.tsx

@@ -16,16 +16,8 @@ export interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes<HT
 }
 
 export default React.forwardRef<HTMLTextAreaElement, TextareaCodeEditorProps>((props, ref) => {
-  const {
-    prefixCls = 'w-tc-editor',
-    value: _,
-    padding = 10,
-    language,
-    className,
-    style,
-    onChange = () => null,
-    ...other
-  } = props;
+  const { prefixCls = 'w-tc-editor', value: _, padding = 10, language, className, style, onChange, ...other } = props;
+
   const [value, setValue] = useState(props.value || '');
   useEffect(() => setValue(props.value || ''), [props.value]);
 
@@ -35,6 +27,7 @@ export default React.forwardRef<HTMLTextAreaElement, TextareaCodeEditorProps>((p
     paddingBottom: padding,
     paddingLeft: padding,
   };
+
   const htmlStr = useMemo(
     () =>
       processHtml(
@@ -74,7 +67,7 @@ export default React.forwardRef<HTMLTextAreaElement, TextareaCodeEditorProps>((p
         ref={ref}
         onChange={(evn) => {
           setValue(evn.target.value);
-          onChange(evn);
+          onChange && onChange(evn);
         }}
         className={`${prefixCls}-text`}
         value={value}

src/style/index.less

@@ -5,7 +5,6 @@
   font-size: 12px;
   &-text,
   &-preview {
-    // padding: 10px;
     min-height: 16px;
   }
   &-preview {
@@ -82,7 +81,7 @@
 
     .token.bold,
     .token.important {
-      font-weight: 700;
+      color: #333;
     }
     .token.tag {
       color: #22863a;

src/utils.ts

@@ -24,6 +24,3 @@ export function htmlEncode(sHtml: string) {
     (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' } as Record<string, string>)[c]),
   );
 }
-
-export const resultString = (text: string) =>
-  text.replace(/<code\sclass="language-(html|css|js)">/, '').replace(/<\/code>/, '');

website/App.tsx

@@ -30,11 +30,9 @@ const App: React.FC = () => {
     if (language) {
       import(`code-example/txt/sample.${language}.txt`)
         .then((code) => {
-          console.log('code:', code.default);
-          setValue(code.default);
+          setValue(code.default || '');
         })
         .catch((err) => {
-          console.log('err:', err);
           setValue('');
         });
     }