fix: 修复更新逻辑 (#560)

* fix: 修复更新逻辑 * fix: 修改changelog&新增单测
ant-design · Apr 14, 2021 · 089e26c · 089e26c
1 parent 76bff2f
commit 089e26c
Show file tree

Hide file tree

Showing 5 changed files with 189 additions and 26 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,15 @@
-### v: 1.1.1
+## 1.1.2
+
+`2021-04-12`
+
+- 🐞 修复更新逻辑，config immutable 避免底层修改 config 后出现重复更新。
+
+## 1.1.1
 
 - remname: history -> CHANGELOG
 - fix: graph layout and changeData error
 
-### v: 1.1.0
+## 1.1.0
 
 - 文档更新 [#545](https://github.com/ant-design/ant-design-charts/pull/545)
 - feat: 新增弦图(Chord) [#545](https://github.com/ant-design/ant-design-charts/pull/545)
@@ -14,27 +20,27 @@
   - measureTextWidth
   - adaptors
 
-### v: 1.0.1
+## 1.0.1
 
 - 新增瀑布图
 
-### v: 1.0.0
+## 1.0.0
 
 - 底层依赖架构全新升级
 - 新增全量 API
 - 持续迭代
 
-### v: 0.9.6
+## 0.9.6
 
 - 新增 onlyChangeData props 用于控制 changeData 。
 
-### v: 0.9.5
+## 0.9.5
 
 - tooltip 添加 ReactNode 支持。
 - 提供额外 API ： downloadImage()、toDataURL() 。
 - 新增 memoData props 用于控制 rerender 。
 
-### v: 0.9.4
+## 0.9.4
 
 新增图表
 
@@ -47,6 +53,6 @@
 
 - OverlappedComboPlot
 
-### v: 0.9.2
+## 0.9.2
 
 修改 props 属性名，chartStyle => style。
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/charts",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "React translate g2plot",
   "bugs": {
     "url": "https://github.com/ant-design/ant-design-charts/issues"

diff --git a/src/hooks/useChart.ts b/src/hooks/useChart.ts
@@ -143,7 +143,7 @@ export default function useInit<T extends Base, U extends Options>(ChartClass: a
         processConfig();
         chart.current.update(config);
       }
-      chartOptions.current = config;
+      chartOptions.current = { ...config };
     }
   }, [config]);
 
@@ -168,7 +168,7 @@ export default function useInit<T extends Base, U extends Options>(ChartClass: a
     };
     chartInstance.render();
     if (!chartOptions.current) {
-      chartOptions.current = config;
+      chartOptions.current = { ...config };
     }
     chart.current = utils.clone(chartInstance) as T;
     if (onReady) {

diff --git a/tests/plots/chord.test.js b/tests/plots/chord.test.js
@@ -0,0 +1,162 @@
+import React, { useRef, createRef } from 'react';
+import { create } from 'react-test-renderer';
+import { renderHook } from '@testing-library/react-hooks';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import Chord from '../../src/chord';
+import ChartLoading from '../../src/util/createLoading';
+import { ErrorBoundary } from '../../src/base';
+
+const refs = renderHook(() => useRef());
+
+describe('Chord render', () => {
+  let container;
+  const data = [
+    { source: '北京', target: '天津', value: 30 },
+    { source: '北京', target: '上海', value: 80 },
+    { source: '北京', target: '河北', value: 46 },
+    { source: '北京', target: '辽宁', value: 49 },
+    { source: '北京', target: '黑龙江', value: 69 },
+    { source: '北京', target: '吉林', value: 19 },
+    { source: '天津', target: '河北', value: 62 },
+    { source: '天津', target: '辽宁', value: 82 },
+    { source: '天津', target: '上海', value: 16 },
+    { source: '上海', target: '黑龙江', value: 16 },
+    { source: '河北', target: '黑龙江', value: 76 },
+    { source: '河北', target: '内蒙古', value: 24 },
+    { source: '内蒙古', target: '北京', value: 32 },
+  ];
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it('classname * loading * style', () => {
+    const props = {
+      style: {
+        height: '80%',
+      },
+      className: 'container',
+      loading: true,
+    };
+    const testRenderer = create(<Chord {...props} />);
+    const testInstance = testRenderer.root;
+    const renderTree = testRenderer.toTree();
+    expect(renderTree.rendered[0].nodeType).toBe('component');
+    expect(renderTree.rendered[1].props.className).toBe('container');
+    expect(renderTree.rendered[1].props.style).toEqual({
+      height: '80%',
+    });
+    expect(renderTree.rendered[1].nodeType).toBe('host');
+    expect(renderTree.rendered[1].type).toBe('div');
+    expect(testInstance.findAllByType(ChartLoading).length).toBe(1);
+  });
+
+  it('classname * loading * style with default', () => {
+    const props = {};
+    const testRenderer = create(<Chord {...props} />);
+    const testInstance = testRenderer.root;
+    const renderTree = testRenderer.toTree();
+    expect(renderTree.rendered.nodeType).toBe('host');
+    expect(renderTree.rendered.type).toBe('div');
+    expect(renderTree.rendered.props.className).toBeUndefined();
+    expect(testInstance.findAllByType(ChartLoading).length).toBe(0);
+    expect(renderTree.rendered.props.style).toEqual({
+      height: 'inherit',
+    });
+  });
+
+  it('error template', () => {
+    const props = {
+      loading: true,
+      // An object of type loadingTemplate is only used to trigger a boundary error
+      loadingTemplate: {
+        triggleError: true,
+      },
+      errorTemplate: () => <span id="error">custom error</span>,
+    };
+    const chartProps = {
+      data: [],
+      sourceField: 'source',
+      targetField: 'target',
+      weightField: 'value',
+      autoFit: false,
+      width: '200',
+      height: '160',
+    };
+    const testRenderer = create(<Chord {...props} {...chartProps} />);
+    const testInstance = testRenderer.root;
+    expect(testInstance.findByType(ErrorBoundary).children[0].children).toEqual(['custom error']);
+  });
+
+  it('chart render * chartRef with callback', () => {
+    let chartRef = undefined;
+    const props = {
+      className: 'container',
+      chartRef: (ref) => {
+        chartRef = ref;
+      },
+    };
+    const chartProps = {
+      data,
+      sourceField: 'source',
+      targetField: 'target',
+      weightField: 'value',
+      autoFit: false,
+      width: 200,
+      height: 160,
+    };
+    act(() => {
+      ReactDOM.render(<Chord {...props} {...chartProps} />, container);
+    });
+    expect(chartRef).not.toBeUndefined();
+    const canvas = container.querySelector('canvas');
+    expect(canvas.width).toBe(200);
+    expect(canvas.height).toBe(160);
+    expect(chartRef.chart.views[0].getData().length).toBe(data.length);
+  });
+
+  it('chartRef with createRef', () => {
+    const chartRef = createRef();
+    const props = {
+      className: 'container',
+      chartRef,
+    };
+    const chartProps = {
+      data,
+      sourceField: 'source',
+      targetField: 'target',
+      weightField: 'value',
+      autoFit: false,
+      width: 200,
+      height: 160,
+    };
+    act(() => {
+      ReactDOM.render(<Chord {...props} {...chartProps} />, container);
+    });
+    expect(chartRef.current.chart.views[0].getData().length).toBe(data.length);
+  });
+
+  it('chartRef with useRef', () => {
+    const props = {
+      className: 'container',
+    };
+    const chartProps = {
+      data,
+      sourceField: 'source',
+      targetField: 'target',
+      weightField: 'value',
+      autoFit: false,
+      width: 200,
+      height: 160,
+    };
+    act(() => {
+      ReactDOM.render(<Chord {...props} {...chartProps} ref={refs} />, container);
+    });
+    expect(refs.current.getChart().chart.views[0].getData().length).toBe(data.length);
+  });
+});
diff --git a/tests/utils/use-chart.test.js b/tests/utils/use-chart.test.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { create } from 'react-test-renderer';
+import ReactDOM, { unmountComponentAtNode } from 'react-dom';
 import { isFunction } from 'lodash';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
@@ -35,6 +34,7 @@ describe('use chart', () => {
     document.body.appendChild(container);
   });
   afterEach(() => {
+    unmountComponentAtNode(container);
     document.body.removeChild(container);
     container = null;
   });
@@ -107,7 +107,7 @@ describe('use chart', () => {
   });
 
   it('chart change data with normal chart', () => {
-    let chartRef = undefined;
+    let chartRef;
     const props = {
       data: [],
       xField: 'date',
@@ -117,24 +117,16 @@ describe('use chart', () => {
       },
     };
     const wrapper = mount(<Area {...props} />);
-    const updateData = [
-      {
-        date: '2010-01',
-        scales: 1998,
-      },
-      {
-        date: '2010-02',
-        scales: 1850,
-      },
-    ];
+    chartRef.update = jest.fn();
     wrapper.setProps({
       data: areaData,
     });
+    expect(chartRef.update).not.toHaveBeenCalled();
     expect(chartRef.chart.getData()).toEqual(areaData);
   });
 
   it('update config with normal chart', () => {
-    let chartRef = undefined;
+    let chartRef;
     const props = {
       data: areaData,
       xField: 'date',
@@ -144,16 +136,18 @@ describe('use chart', () => {
       },
     };
     const wrapper = mount(<Area {...props} />);
+    chartRef.changeData = jest.fn();
     wrapper.setProps({
       point: {
         size: 5,
       },
     });
+    expect(chartRef.changeData).not.toHaveBeenCalled();
     expect(chartRef.options.point).toEqual({ size: 5 });
   });
 
   it('change data with special chart', () => {
-    let chartRef = undefined;
+    let chartRef;
     const props = {
       percent: 0.2,
       xField: 'date',
@@ -163,6 +157,7 @@ describe('use chart', () => {
       },
     };
     const wrapper = mount(<RingProgress {...props} />);
+    chartRef.update = jest.fn();
     wrapper.setProps({
       percent: 0.5,
     });