refactor: upgrade to father 4 & dumi 2 (#626)

* chore: bump father

* part test

* test: more test case

* test: more test case

* test: rest test

* chore: doc dest

.dumirc.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'dumi';
+
+export default defineConfig({
+  themeConfig: {
+    name: 'Tabs',
+  },
+  mfsu: false,
+});

.fatherrc.js

@@ -1,9 +1,5 @@
-export default {
-  cjs: 'babel',
-  esm: { type: 'babel', importLibToEs: true },
-  preCommit: {
-    eslint: true,
-    prettier: true,
-  },
-  runtimeHelpers: true,
-};
+import { defineConfig } from 'father';
+
+export default defineConfig({
+  plugins: ['@rc-component/father-plugin'],
+});

.gitignore

@@ -37,3 +37,4 @@ package-lock.json
 .umi-production
 .umi-test
 .env.local
+.dumi

docs/demo/animated.md

@@ -1,3 +1,8 @@
-## animated
+---
+title: Animated
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/animated.tsx">
+<code src="../examples/animated.tsx"></code>

docs/demo/basic.md

@@ -1,3 +1,8 @@
-## basic
+---
+title: Basic
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/basic.tsx">
+<code src="../examples/basic.tsx"></code>

docs/demo/editable.md

@@ -1,3 +1,8 @@
-## editable
+---
+title: Editable
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/editable.tsx">
+<code src="../examples/editable.tsx"></code>

docs/demo/extra.md

@@ -1,3 +1,8 @@
-## extra
+---
+title: Extra
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/extra.tsx">
+<code src="../examples/extra.tsx"></code>

docs/demo/mix.md

@@ -1,3 +1,8 @@
-## mix
+---
+title: Mix
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/mix.tsx">
+<code src="../examples/mix.tsx"></code>

docs/demo/overflow.md

@@ -1,3 +1,8 @@
-## overflow
+---
+title: Overflow
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/overflow.tsx">
+<code src="../examples/overflow.tsx"></code>

docs/demo/position.md

@@ -1,3 +1,8 @@
-## position
+---
+title: Position
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/position.tsx">
+<code src="../examples/position.tsx"></code>

docs/demo/renderTabBar-dragable.md

@@ -1,3 +1,8 @@
-## renderTabBar-dragable
+---
+title: renderTabBar-dragable
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/renderTabBar-dragable.tsx">
+<code src="../examples/renderTabBar-dragable.tsx"></code>

docs/demo/renderTabBar-sticky.md

@@ -1,3 +1,10 @@
+---
+title: renderTabBar-sticky
+nav:
+  title: Demo
+  path: /demo
+---
+
 ## renderTabBar-sticky
 
-<code src="../examples/renderTabBar-sticky.tsx">
+<code src="../examples/renderTabBar-sticky.tsx"></code>

docs/demo/renderTabBar-use-panes.md

@@ -1,3 +1,8 @@
-## renderTabBar-use-panes
+---
+title: enderTabBar-use-panes
+nav:
+  title: Demo
+  path: /demo
+---
 
-<code src="../examples/renderTabBar-use-panes.tsx">
+<code src="../examples/renderTabBar-use-panes.tsx"></code>

jest.config.js

@@ -1,5 +1,24 @@
+// Copy from antd jest config file. We need compile `rc-resize-observer`
+const compileModules = [
+  'array-move',
+  'react-dnd',
+  'react-dnd-html5-backend',
+  '@react-dnd',
+  'dnd-core',
+  'tween-one',
+  '@babel',
+  '@ant-design',
+];
+
+const ignoreList = [];
+
+// cnpm use `_` as prefix
+['', '_'].forEach((prefix) => {
+  compileModules.forEach((module) => {
+    ignoreList.push(`${prefix}${module}`);
+  });
+});
+
 module.exports = {
-  setupFiles: ['./tests/setup.js'],
-  snapshotSerializers: [require.resolve('enzyme-to-json/serializer')],
-  setupFilesAfterEnv: ['<rootDir>/tests/setupFilesAfterEnv.js'],
+  transformIgnorePatterns: [`/node_modules/(?!${ignoreList.join('|')})[^/]+?/(?!(es)/)`],
 };

package.json

@@ -33,7 +33,7 @@
     "build": "dumi build",
     "docs:deploy": "gh-pages -d .doc",
     "compile": "father build && npm run compile:style",
-    "test": "father test",
+    "test": "rc-test",
     "coverage": "father test --coverage",
     "now-build": "npm run build",
     "lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js",
@@ -42,38 +42,35 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^13.0.0",
     "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.5",
-    "@types/keyv": "3.1.4",
     "@types/jest": "^25.2.3",
+    "@types/keyv": "3.1.4",
     "@types/react": "^17.0.14",
     "@types/react-dom": "^16.9.8",
     "@umijs/fabric": "^2.3.1",
     "coveralls": "^3.0.6",
     "cross-env": "^7.0.2",
-    "dumi": "^1.1.0",
-    "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.7.0",
-    "enzyme-to-json": "^3.3.4",
+    "dumi": "^2.0.0",
     "eslint": "^7.0.0",
     "fastclick": "~1.0.6",
-    "father": "^2.29.2",
+    "father": "^4.0.0",
     "gh-pages": "^3.1.0",
     "history": "^1.17.0",
     "immutability-helper": "^3.0.1",
     "less": "^3.11.1",
     "np": "^7.5.0",
-    "preact": "^8.2.1",
     "preact-compat": "^3.16.0",
-    "react": "^16.0.0",
+    "rc-test": "^7.0.14",
+    "react": "^18.0.0",
     "react-dnd": "^10.0.0",
     "react-dnd-html5-backend": "^10.0.0",
-    "react-dom": "^16.0.0",
+    "react-dom": "^18.0.0",
     "react-sticky": "^6.0.3",
-    "react-test-renderer": "^16.0.0",
     "sortablejs": "^1.7.0",
-    "typescript": "^4.0.5"
+    "typescript": "^4.0.5",
+    "@rc-component/father-plugin": "^1.0.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
@@ -88,4 +85,4 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   }
-}
+}

src/TabNavList/OperationNode.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { useState, useEffect } from 'react';
-import KeyCode from 'rc-util/lib/KeyCode';
-import Menu, { MenuItem } from 'rc-menu';
 import Dropdown from 'rc-dropdown';
-import type { Tab, TabsLocale, EditableConfig } from '../interface';
+import Menu, { MenuItem } from 'rc-menu';
+import KeyCode from 'rc-util/lib/KeyCode';
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import type { EditableConfig, Tab, TabsLocale } from '../interface';
 import AddButton from './AddButton';
 
 export interface OperationNodeProps {

tests/common/util.tsx

@@ -1,6 +1,9 @@
 /* eslint-disable @typescript-eslint/no-invalid-this */
-import React from 'react';
+import { act } from '@testing-library/react';
 import type { ReactWrapper } from 'enzyme';
+import { _rs as onEsResize } from 'rc-resize-observer/es/utils/observerUtil';
+import { _rs as onLibResize } from 'rc-resize-observer/lib/utils/observerUtil';
+import React from 'react';
 import Tabs from '../../src';
 import type { TabsProps } from '../../src/Tabs';
 
@@ -85,23 +88,23 @@ export function btnOffsetPosition() {
   return 20 * index;
 }
 
-export function getTransformX(wrapper: ReactWrapper) {
-  const { transform } = wrapper.find('.rc-tabs-nav-list').props().style;
+export function getTransformX(container: Element) {
+  const { transform } = container.querySelector<HTMLElement>('.rc-tabs-nav-list').style;
   const match = transform.match(/\(([-\d.]+)px/);
   if (!match) {
     // eslint-disable-next-line no-console
-    console.log(wrapper.find('.rc-tabs-nav-list').html());
+    // console.log(container.querySelector('.rc-tabs-nav-list').innerHTML);
     throw new Error(`Not find transformX: ${transform}`);
   }
   return Number(match[1]);
 }
 
-export function getTransformY(wrapper: ReactWrapper) {
-  const { transform } = wrapper.find('.rc-tabs-nav-list').props().style;
+export function getTransformY(container: Element) {
+  const { transform } = container.querySelector<HTMLElement>('.rc-tabs-nav-list').style;
   const match = transform.match(/,\s*([-\d.]+)px/);
   if (!match) {
     // eslint-disable-next-line no-console
-    console.log(wrapper.find('.rc-tabs-nav-list').html());
+    // console.log(wrapper.find('.rc-tabs-nav-list').html());
     throw new Error(`Not find transformY: ${transform}`);
   }
   return Number(match[1]);
@@ -143,6 +146,15 @@ export function getTabs(props: TabsProps = null) {
   );
 }
 
-export function triggerResize(wrapper: ReactWrapper) {
-  (wrapper.find('.rc-tabs-nav').find('ResizeObserver').first().props() as any).onResize();
-}
+// export function triggerResize(wrapper: ReactWrapper) {
+//   (wrapper.find('.rc-tabs-nav').find('ResizeObserver').first().props() as any).onResize();
+// }
+
+export const triggerResize = (container: Element) => {
+  const target = container.querySelector('.rc-tabs-nav');
+
+  act(() => {
+    onLibResize([{ target } as ResizeObserverEntry]);
+    onEsResize([{ target } as ResizeObserverEntry]);
+  });
+};