test: e2e tests

.gitignore

@@ -35,3 +35,8 @@ logs
 
 # temp
 temp-gallery.md
+
+# Tools
+/test-results/
+/playwright-report/
+/playwright/.cache/

package.json

@@ -4,10 +4,12 @@
   "scripts": {
     "start": "pnpm run build:lib && pnpm -r --stream --filter=./site run start",
     "test": "pnpm -r --stream --filter=./packages/* run test",
+    "test:e2e": "pnpm exec playwright test",
     "lint": "pnpm -r --stream --filter=./packages/* run lint",
     "build": "pnpm -r --stream --filter=!./site run build",
     "build:site": "pnpm -r --stream --filter=./site run build",
     "build:lib": "pnpm -r --stream --filter=!./site run build:lib",
+    "dev:graphs": "cd packages/graphs && pnpm run dev",
     "profile": "webpack --config webpack.config.js --mode production --profile --json > stats.json",
     "prettier": "prettier --write \"**/**.{js,jsx,tsx,ts,less,md,json}\"",
     "ci:version": "pnpm changeset version",
@@ -23,6 +25,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
     "@changesets/cli": "^2.27.9",
+    "@playwright/test": "^1.49.1",
     "@swc/jest": "^0.2.37",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react-hooks": "^7.0.2",
@@ -43,6 +46,7 @@
     "enzyme-to-json": "^3.6.2",
     "eslint": "^7.32.0",
     "identity-obj-proxy": "^3.0.0",
+    "istanbul": "^0.4.5",
     "jest": "^26.6.3",
     "jest-canvas-mock": "^2.5.2",
     "jest-electron": "^0.1.12",
@@ -52,6 +56,8 @@
     "less-loader": "^10.2.0",
     "np": "^10.0.7",
     "npm-run-all": "^4.1.5",
+    "playwright-test-coverage": "^1.2.12",
+    "playwright-test-coverage-native": "^0.3.0",
     "prettier": "^2.8.8",
     "prettier-plugin-organize-imports": "^4.1.0",
     "prettier-plugin-packagejson": "^2.5.3",
@@ -84,12 +90,16 @@
   "sideEffects": false,
   "license": "MIT",
   "dependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
     "conventional-changelog-cli": "^5.0.0",
     "less-plugin-npm-import": "^2.1.0",
+    "nyc": "^17.1.0",
     "remark-frontmatter": "^4.0.1",
     "remark-parse": "^10.0.2",
     "remark-stringify": "^10.0.3",
     "to-vfile": "^7.2.4",
-    "unified": "^10.1.2"
+    "unified": "^10.1.2",
+    "v8-to-istanbul": "^9.3.0",
+    "vite-plugin-istanbul": "^5.0.0"
   }
 }

packages/graphs/src/index.ts

@@ -25,5 +25,6 @@ export { CollapseExpandIcon, RCNode } from './core/base';
 export type { OrganizationChartNodeProps, TextNodeProps } from './core/base/node';
 export { measureTextSize } from './core/utils/measure-text';
 export { getNodeSide } from './core/utils/node';
+export { mergeOptions } from './core/utils/options';
 export type { GraphOptions } from './types';
 export { G6 };

packages/graphs/tests/datasets/algorithm-category.json

@@ -43,7 +43,7 @@
       "children": [
         { "id": "Multiple linear regression" },
         { "id": "Partial least squares" },
-        { "id": "Multi-layer feed forward neural network" },
+        { "id": "Multi-layer feedforward neural network" },
         { "id": "General regression neural network" },
         { "id": "Support vector regression" }
       ]

packages/graphs/tests/demos/dendrogram.tsx

@@ -1,25 +1,13 @@
 import { Dendrogram as DendrogramComponent, DendrogramOptions } from '@ant-design/graphs';
-import { treeToGraphData } from '@antv/g6';
 import React from 'react';
 import data from '../datasets/algorithm-category.json';
+import { useGraphOptions } from './hooks/useQueryOptions';
 
 export const Dendrogram = () => {
-  const options: DendrogramOptions = {
+  const options = useGraphOptions<DendrogramOptions>({
     autoFit: 'view',
-    data: treeToGraphData(data),
-    direction: 'vertical',
-    compact: true,
-    behaviors: (prev) => [
-      ...prev,
-      {
-        key: 'hover-activate',
-        type: 'hover-activate',
-        degree: Infinity,
-        direction: 'in',
-        inactiveState: 'inactive',
-      },
-    ],
-  };
+    data,
+  });
 
   return <DendrogramComponent {...options} />;
 };

packages/graphs/tests/demos/fishbone-default.tsx → packages/graphs/tests/demos/fishbone.tsx

@@ -1,6 +1,6 @@
-import { Fishbone, FishboneOptions } from '@ant-design/graphs';
-import { treeToGraphData } from '@antv/g6';
+import { Fishbone as ADCFishbone } from '@ant-design/graphs';
 import React from 'react';
+import { useGraphOptions } from './hooks/useQueryOptions';
 
 const data = {
   id: 'Product Profitability Below Expectations',
@@ -52,11 +52,11 @@ const data = {
   ],
 };
 
-export const FishboneDefault = () => {
-  const options: FishboneOptions = {
+export const Fishbone = () => {
+  const options = useGraphOptions({
     autoFit: 'view',
-    data: treeToGraphData(data),
-    type: 'decision',
-  };
-  return <Fishbone {...options} />;
+    data
+  });
+
+  return <ADCFishbone {...options} />;
 };

packages/graphs/tests/demos/flow-graph-product-launch.tsx

@@ -3,6 +3,7 @@ import { isBoolean } from 'lodash';
 import React, { FC } from 'react';
 import styled from 'styled-components';
 import data from '../datasets/product-launch.json';
+import { useGraphOptions } from './hooks/useQueryOptions';
 
 interface StepData {
   name: string;
@@ -152,7 +153,7 @@ function isSingleStep(data: NodeData) {
 }
 
 export const FlowGraphProductLaunch = () => {
-  const options: FlowGraphOptions = {
+  const options = useGraphOptions<FlowGraphOptions>({
     autoFit: 'view',
     data,
     node: {
@@ -192,7 +193,7 @@ export const FlowGraphProductLaunch = () => {
       nodeSize: (data: NodeData) => (isSingleStep(data) ? 160 : 400),
       animation: false,
     },
-  };
+  });
 
   return <FlowGraphComponent {...options} />;
 };

packages/graphs/tests/demos/flow-graph-task-scheduling.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { hexToRgba } from '../../src/core/utils/color';
 import data from '../datasets/task-scheduling.json';
+import { useGraphOptions } from './hooks/useQueryOptions';
 
 const { Text } = Typography;
 
@@ -115,7 +116,7 @@ const TaskNode: React.FC<{
 };
 
 export const FlowGraphTaskScheduling = () => {
-  const options: FlowGraphOptions = {
+  const options = useGraphOptions<FlowGraphOptions>({
     autoFit: 'view',
     data,
     node: {
@@ -143,7 +144,7 @@ export const FlowGraphTaskScheduling = () => {
       },
     },
     behaviors: (prev) => [...prev, 'hover-activate-chain'],
-  };
+  });
 
   return <FlowGraphComponent {...options} />;
 };

packages/graphs/tests/demos/flow-graph.tsx

@@ -2,11 +2,12 @@ import { FlowGraph as FlowGraphComponent, RCNode, type FlowGraphOptions } from '
 import type { NodeData } from '@antv/g6';
 import React from 'react';
 import data from '../datasets/task-scheduling.json';
+import { useGraphOptions } from './hooks/useQueryOptions';
 
 const { TextNode } = RCNode;
 
 export const FlowGraph = () => {
-  const options: FlowGraphOptions = {
+  const options = useGraphOptions<FlowGraphOptions>({
     autoFit: 'view',
     data,
     node: {
@@ -18,7 +19,7 @@ export const FlowGraph = () => {
       },
     },
     behaviors: (prev) => [...prev, 'hover-activate-chain'],
-  };
+  });
 
   return <FlowGraphComponent {...options} />;
 };

packages/graphs/tests/demos/hooks/useQueryOptions.ts

@@ -0,0 +1,28 @@
+import { GraphOptions, mergeOptions } from '@ant-design/graphs';
+import { useSearchParams } from 'react-router-dom';
+
+export const useGraphOptions = <T extends Omit<GraphOptions, 'data'>>(options: T): T => {
+  const [params] = useSearchParams();
+  const queryParams = Object.fromEntries(params) as any;
+
+  if (queryParams.animation === 'false') {
+    queryParams.animation = false;
+  }
+
+  queryParams.devicePixelRatio = 4;
+
+  queryParams.transforms = () => {
+    return (transforms) => {
+      return [
+        ...transforms.filter((transform: any) => transform.key !== 'collapse-expand-react-node'),
+        {
+          ...transforms.find((transform: any) => transform.key === 'collapse-expand-react-node'),
+          enable: queryParams.collapseExpand,
+          ...(queryParams.collapseExpandTrigger && { trigger: queryParams.collapseExpandTrigger }),
+        },
+      ];
+    };
+  };
+
+  return mergeOptions(options, queryParams) as any;
+};

packages/graphs/tests/demos/indented-tree-default.tsx → packages/graphs/tests/demos/indented-tree.tsx

@@ -1,16 +1,15 @@
 import type { IndentedTreeOptions } from '@ant-design/graphs';
-import { G6, IndentedTree as IndentedTreeComponent } from '@ant-design/graphs';
+import { IndentedTree as IndentedTreeComponent } from '@ant-design/graphs';
 import React from 'react';
 import data from '../datasets/algorithm-category.json';
-
-const { treeToGraphData } = G6;
+import { useGraphOptions } from './hooks/useQueryOptions';
 
 export const IndentedTree = () => {
-  const options: IndentedTreeOptions = {
+  const options = useGraphOptions<IndentedTreeOptions>({
     autoFit: 'view',
-    type: 'default',
-    data: treeToGraphData(data),
-  };
+    data,
+    animation: false,
+  });
 
   return <IndentedTreeComponent {...options} />;
 };

packages/graphs/tests/demos/index.tsx

@@ -1,15 +1,11 @@
 export { Dendrogram } from './dendrogram';
-export { FishboneDefault } from './fishbone-default';
+export { Fishbone } from './fishbone';
 export { FlowGraph } from './flow-graph';
 export { FlowGraphProductLaunch } from './flow-graph-product-launch';
 export { FlowGraphTaskScheduling } from './flow-graph-task-scheduling';
-export { IndentedTreeBoxed } from './indented-tree-boxed';
-export { IndentedTree } from './indented-tree-default';
-export { IndentedTreeLinear } from './indented-tree-linear';
-export { MindMapBoxed } from './mind-map-boxed';
+export { IndentedTree } from './indented-tree';
+export { MindMap } from './mind-map';
 export { MindMapCustom } from './mind-map-custom';
-export { MindMap } from './mind-map-default';
-export { MindMapLinear } from './mind-map-linear';
 export { NetworkGraph } from './network-graph';
 export { OrganizationChart } from './organization-chart';
 export { OrganizationChart2 } from './organization-chart2';

packages/graphs/tests/demos/mind-map-custom.tsx

@@ -1,28 +1,29 @@
 import type { MindMapOptions } from '@ant-design/graphs';
-import { G6, getNodeSide, measureTextSize, MindMap as MindMapComponent, RCNode } from '@ant-design/graphs';
+import { getNodeSide, measureTextSize, MindMap as MindMapComponent, RCNode } from '@ant-design/graphs';
 import { Graph, type NodeData } from '@antv/g6';
 import React from 'react';
 import data from '../datasets/algorithm-category.json';
 
-const { treeToGraphData, idOf } = G6;
 const { TextNode } = RCNode;
 
 export const MindMapCustom = () => {
   const options: MindMapOptions = {
-    data: treeToGraphData(data),
+    autoFit: 'view',
+    data,
     node: {
       style: {
         component: (data) => {
           return <TextNode type="outlined" text={data.id} style={{ border: '2px dashed #1783ff' }} />;
         },
-        size: (data) => measureTextSize(idOf(data), [24, 16]),
+        size: (data) => measureTextSize(data.id, [24, 16]),
         dx: function (data: NodeData) {
           const side = getNodeSide(this as unknown as Graph, data);
-          const size = measureTextSize(idOf(data), [24, 16]);
+          const size = measureTextSize(data.id, [24, 16]);
           return side === 'left' ? -size[0] : side === 'center' ? -size[0] / 2 : 0;
         },
       },
     },
+    animation: false,
   };
 
   return <MindMapComponent {...options} />;