test: unit test for react

hrsdef · Jan 26, 2022 · 85f74bd · 85f74bd
1 parent 0af8b88
commit 85f74bd
Show file tree

Hide file tree

Showing 26 changed files with 225 additions and 203 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -20,7 +20,7 @@ module.exports = function(api) {
                 // "debug": true
             }],
             "@babel/preset-typescript",
-            // "@babel/preset-react"
+            "@babel/preset-react"
         ],
         "plugins": [
             ["@babel/plugin-transform-runtime", {

diff --git a/components/cascader/index.ts b/components/cascader/index.ts
@@ -76,6 +76,7 @@ export class Cascader<
     protected hasValue() {
         const {value} = this.get();
         const has = super.hasValue();
+
         if (has && !(value as V[]).length) return false;
         return has;
     }

diff --git a/components/dropdown/demos/tooltip.md b/components/dropdown/demos/tooltip.md
@@ -3,10 +3,7 @@ title: 菜单项添加Tooltip提示
 order: 5
 ---
 
-使用`Tooltip`包裹需要提示的菜单项`DropdownItem`即可添加提示，需要注意的是：
-在Intact下，当用`Tooltip`包裹触发器时，需要使用另外的元素将它包裹起来，因为`Tooltip`实际
-返回的是两个元素，一个是它的触发器，一个是提示内容层。而`Dropdown`的触发器只能
-接受一个元素，所以需要另外再包起来（如本例中`item 4`)。
+使用`Tooltip`包裹需要提示的菜单项`DropdownItem`即可添加提示
 
 ```vdt
 import {Dropdown, DropdownMenu, DropdownItem, Button, Tooltip} from 'kpc';
@@ -23,11 +20,9 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Tooltip} from 'kpc';
                 <DropdownItem disabled>item 3</DropdownItem>
             </Tooltip>
             <Dropdown position={{my: 'left top', at: 'right top'}}>
-                <div>
-                    <Tooltip content="This is a nested Dropdown.">
-                        <DropdownItem>item 4</DropdownItem>
-                    </Tooltip>
-                </div>
+                <Tooltip content="This is a nested Dropdown.">
+                    <DropdownItem>item 4</DropdownItem>
+                </Tooltip>
                 <DropdownMenu>
                     <DropdownItem>item 1</DropdownItem>
                     <Tooltip content="nested DropdownItem">

diff --git a/components/dropdown/dropdown.ts b/components/dropdown/dropdown.ts
@@ -231,7 +231,9 @@ export class Dropdown<
 
     private callOriginalCallback(name: string, e: MouseEvent) {
         const callback = this.triggerProps[name];
+        const callbackOnDropdown = this.get<Function>(name);
         if (isFunction(callback)) callback(e);
+        if (isFunction(callbackOnDropdown)) callbackOnDropdown(e);
     }
 
     private normalizeTriggerProps(props: any) {

diff --git a/components/layout/demos/aside.md b/components/layout/demos/aside.md
@@ -33,7 +33,7 @@ import {
             </MenuItem>
             <MenuItem key="2" disabled><Icon class="ion-star" />menu 2</MenuItem>
             <MenuItem key="3">
-                <i class="k-icon ion-heart"></i>menu 3
+                <Icon class="ion-heart" />menu 3
                 <Menu>
                     <MenuItem key="3-1">sub menu 1</MenuItem>
                     <MenuItem key="3-2">sub menu 2</MenuItem>

diff --git a/components/portal.ts b/components/portal.ts
@@ -11,6 +11,8 @@ import {
     remove,
     TypeDefs,
     inject,
+    nextTick,
+    callAll,
 } from 'intact';
 import {isString} from 'intact-shared';
 import {DIALOG} from './dialog/constants';
@@ -49,16 +51,20 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
         this.initContainer(nextProps.container, parentDom, anchor);
 
         // add mount method to queue to let sub-component be appended after parent-component
-        mountedQueue.push(() => {
+        // mountedQueue.push(() => {
+        // nextTick(() => {
+            // const mountedQueue: Function[] = [];
             mount(
                 nextProps.children as VNode,
                 this.container!,
                 this,
                 this.$SVG,
                 null,
-                mountedQueue
+                mountedQueue,
             );
-        });
+            // callAll(mountedQueue);
+        // });
+        // });
         super.$render(lastVNode, nextVNode, parentDom, anchor, mountedQueue);
     }
 
@@ -79,21 +85,25 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
         }
         const nextContainer = this.container!;
 
-        if (lastContainer === nextContainer) {
-            patch(
-                lastProps.children as VNode,
-                nextProps.children as VNode,
-                nextContainer,
-                this,
-                this.$SVG,
-                anchor,
-                mountedQueue,
-                false,
-            );
-        } else {
-            remove(lastProps.children as VNode, lastContainer, false);
-            mount(nextProps.children as VNode, nextContainer, this, this.$SVG, anchor, mountedQueue);
-        }
+        // nextTick(() => {
+            // const mountedQueue: Function[] = [];
+            if (lastContainer === nextContainer) {
+                patch(
+                    lastProps.children as VNode,
+                    nextProps.children as VNode,
+                    nextContainer,
+                    this,
+                    this.$SVG,
+                    anchor,
+                    mountedQueue,
+                    false,
+                );
+            } else {
+                remove(lastProps.children as VNode, lastContainer, false);
+                mount(nextProps.children as VNode, nextContainer, this, this.$SVG, anchor, mountedQueue);
+            }
+            // callAll(mountedQueue);
+        // });
 
         super.$update(lastVNode, nextVNode, parentDom, anchor, mountedQueue, force);
     }

diff --git a/components/table/table.ts b/components/table/table.ts
@@ -23,8 +23,8 @@ import type {Events} from '../types';
 
 export interface TableProps<
     T = any,
-    C extends CheckType = CheckType,
     K extends TableRowKey = TableRowKey,
+    C extends CheckType = CheckType,
     S extends string = string,
     G extends TableGroupValue = TableGroupValue
 > {
@@ -134,11 +134,11 @@ const events: Events<TableEvents> = {
 
 export class Table<
     T = any,
-    C extends CheckType = 'checkbox',
-    K extends TableRowKey = number,
-    S extends string = string,
-    G extends TableGroupValue = TableGroupValue
-> extends Component<TableProps<T, C, K, S, G>, TableEvents<T, K>, TableBlocks<T>> {
+    RowKey extends TableRowKey = TableRowKey,
+    Checkbox extends CheckType = 'checkbox',
+    Sort extends string = string,
+    Group extends TableGroupValue = TableGroupValue
+> extends Component<TableProps<T, RowKey, Checkbox, Sort, Group>, TableEvents<T, RowKey>, TableBlocks<T>> {
     static template = template;
     static typeDefs = typeDefs;
     static defaults = defaults;
@@ -261,7 +261,7 @@ export class Table<
     }
 
     @bind
-    private clickRow(data: T, index: number, key: K) {
+    private clickRow(data: T, index: number, key: RowKey) {
         this.trigger('clickRow', data, index, key);
     }
 

diff --git a/components/table/useChecked.ts b/components/table/useChecked.ts
@@ -26,7 +26,7 @@ export function useChecked(
     getGrid: () => TableGrid,
     loopData: ReturnType<typeof useTree>['loopData'],
 ) {
-    const instance = useInstance() as Table<any, TableCheckType, TableRowKey>;
+    const instance = useInstance() as Table<any, TableRowKey, TableCheckType>;
     let allStatus: RowStatus[] = [];
 
     function isChecked(key: TableRowKey) {

diff --git a/components/table/useDisableRow.ts b/components/table/useDisableRow.ts
@@ -5,7 +5,7 @@ import type {useTree} from './useTree';
 export function useDisableRow(
     loopData: ReturnType<typeof useTree>['loopData'],
 ) {
-    const instance = useInstance() as Table<any, TableCheckType, TableRowKey>;
+    const instance = useInstance() as Table<any, TableRowKey>;
     let enabledKeys: TableRowKey[] = [];
     let disabledKeys: TableRowKey[] = [];
     let allKeys: TableRowKey[] = [];

diff --git a/components/table/useDraggable.ts b/components/table/useDraggable.ts
@@ -4,7 +4,7 @@ import {useState} from '../../hooks/useState';
 import type {TableRow} from './row';
 
 export function useDraggable() {
-    const instance = useInstance() as Table<any, any, TableRowKey>;
+    const instance = useInstance() as Table<any, TableRowKey>;
     const draggingKey = useState<TableRowKey | null>(null);
 
     let originIndex: number;

diff --git a/components/table/useMerge.ts b/components/table/useMerge.ts
@@ -24,7 +24,7 @@ export type TableGrid = TableGridItem[][];
 export function useMerge(
     getCols: () => Props<TableColumnProps>[],
 ) {
-    const instance = useInstance() as Table<any, TableCheckType>;
+    const instance = useInstance() as Table<any, TableRowKey, TableCheckType>;
     let grid: TableGrid = [];
 
     function handleSpans() {

diff --git a/components/table/useSelected.ts b/components/table/useSelected.ts
@@ -4,7 +4,7 @@ import {inArray} from './useChecked';
 import {toggleArray} from '../utils';
 
 export function useSelected() {
-    const instance = useInstance() as Table<any, any, TableRowKey>;
+    const instance = useInstance() as Table<any, TableRowKey>;
 
     function isSelected(key: TableRowKey) {
         return inArray(instance.get('selectedKeys'), key);

diff --git a/components/transfer/demos/customFilter.md b/components/transfer/demos/customFilter.md
@@ -112,6 +112,7 @@ export default class extends Component<Props> {
     @bind
     fetch() {
         mockApi(this.get('policy')!).then(data => {
+            if (this.$unmounted) return;
             this.originData = data;
             this.filter();
         });
@@ -132,23 +133,29 @@ export default class extends Component<Props> {
 
 ```vue-script
 created() {
-    this._fetch();
+    this.fetch();
 },
 watch: {
     policy: function() {
-        this._fetch();
+        this.fetch();
     },
     keywords: function() {
-        this._filter();
+        this.filter();
     },
 },
 ```
 
 ```react-methods
+private $unmounted: boolean = false;
+
 componentDidMount() {
     this.fetch();
 }
 
+componentWillUnmount() {
+    this.$unmounted = true;
+}
+
 setState<K extends keyof Props>(state: Pick<Props, K>, cb?: () => void) {
     if ('policy' in state) {
         super.setState(state, this.fetch);

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
   "module": "index.js",
   "scripts": {
     "test": "karma start test/karma.conf.js",
-    "test:react": "cross-env REACT=1 karma start test/karma.react.conf.js",
+    "test:react": "cross-env REACT=1 karma start packages/kpc-react/__tests__/karma.conf.js",
     "test:theme": "mocha test/themes/index.js",
     "test:angular": "cd ./packages/kpc-angular && npm run test -- --watch=false --browsers=ChromeHeadless",
     "test:vue-next": "cross-env VUE_NEXT=1 karma start packages/kpc-vue-next/karma.conf.js",
@@ -90,6 +90,7 @@
     "@types/js-yaml": "^4.0.1",
     "@types/marked": "^2.0.2",
     "@types/mocha": "^8.2.2",
+    "@types/react-dom": "^17.0.11",
     "@types/tinycolor2": "^1.4.2",
     "@types/webpack-env": "^1.16.0",
     "@vue/babel-plugin-jsx": "^1.0.1",

diff --git a/packages/kpc-react/__tests__/index.ts b/packages/kpc-react/__tests__/index.ts
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import {Component, createRef} from 'intact';
+import {mount, unmount, testDemos, wait, nextFrame} from '../../../test/utils';
+import {matchSnapshot} from 'chai-karma-snapshot';
+import mx from '../components/diagram/mxgraph/mx';
+import '../../../test/test.styl';
+
+chai.use(matchSnapshot);
+
+mx.mxClient.IS_POINTER = false;
+
+const testsContext = require.context('../components/', true, /index\.react\.spec\.ts/);
+testsContext.keys().forEach(testsContext);
+
+// const reactReq = require.context('~/components/', true, /^((?!(affix|code|layout)).)*\/demos\/.*react\.tsx$/);
+const reactReq = require.context('~/components/', true, /^((?!(affix|code)).)*\/demos\/.*react\.tsx$/);
+// const reactReq = require.context('~/components/', true, /button\/demos\/.*react\.tsx$/);
+
+describe('React Demos', () => {
+    afterEach(() => unmount());
+
+    function wrap(Demo: any) {
+        return class extends Component {
+            static template = '<div ref={this.elementRef}></div>';
+            private elementRef = createRef<HTMLElement>();
+
+            mounted() {
+                ReactDOM.render(
+                    React.createElement(Demo),
+                    this.elementRef.value!
+                );
+            }
+
+            beforeUnmount() {
+                ReactDOM.unmountComponentAtNode(this.elementRef.value!);
+            }
+        }
+    }
+
+    testDemos(reactReq, async (Demo) => {
+        const [instance, element] = mount(wrap(Demo as any));
+        await wait();
+        expect(element.innerHTML).to.matchSnapshot();
+    });
+});
diff --git a/packages/kpc-react/__tests__/karma.conf.js b/packages/kpc-react/__tests__/karma.conf.js
@@ -0,0 +1,50 @@
+const {webpackConfigReact} = require('../../../test/webpack');
+const path = require('path');
+const os = require('os');
+
+// for get font files
+// https://github.com/ryanclark/karma-webpack/issues/498#issuecomment-790040818
+const output = {
+    path: path.join(os.tmpdir(), '_karma_webpack_') + Math.floor(Math.random() * 1000000),
+};
+
+module.exports = function (config) {
+    config.set({
+        browsers: process.env.UPDATE || process.env.CI ? ['MyChromeHeadless'] : undefined,
+        customLaunchers: {
+            'MyChromeHeadless': {
+                base: 'ChromeHeadless',
+                flags: ['--window-size=1920,1080'],
+            }
+        },
+        frameworks: ['webpack', 'mocha', 'sinon-chai', 'snapshot', 'mocha-snapshot'],
+        reporters: ['mocha'],
+        files: [
+            './index.ts',
+            // '**/__snapshots__/**/*.md',
+        ],
+        preprocessors: {
+            './index.ts': ['webpack', 'sourcemap'],
+            // '**/__snapshots__/**/*.md': ['snapshot'],
+        },
+        webpack: {...webpackConfigReact().toConfig(), output},
+        webpackMiddleware: {
+            // noInfo: true
+        },
+        // autoWatch: true,
+        mochaReporter: {
+            showDiff: true,
+        },
+        client: {
+            mocha: {
+                reporter: 'html',
+                ui: 'bdd',
+            }
+        },
+        // snapshot: {
+            // update: process.env.UPDATE === '1',
+        // },
+        // logLevel: config.LOG_INFO,
+        // singleRun: true,
+    });
+};