fix: 修复canvas.destroy报错 (#1264)

antvis · Nov 13, 2021 · 23eec82 · 23eec82
1 parent 45a08d9
commit 23eec82
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/packages/f2/src/canvas/index.ts b/packages/f2/src/canvas/index.ts
@@ -166,6 +166,11 @@ class Canvas extends Component<ChartProps> implements IF2Canvas {
     this.draw();
     return null;
   }
+
+  destroy() {
+    const { canvas } = this;
+    canvas.destroy();
+  }
 }
 
 export default Canvas;
diff --git a/packages/react/test/chart.test.tsx b/packages/react/test/chart.test.tsx
@@ -3,8 +3,7 @@ import React from 'react';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import ReactCanvas from '../src';
-import { Chart, Line , Canvas } from '@antv/f2'
-
+import { Canvas, Chart, Line } from '@antv/f2';
 
 // @ts-ignore
 Enzyme.configure({ adapter: new Adapter() });
@@ -14,28 +13,30 @@ const data = [
   { genre: 'Strategy', sold: 115 },
   { genre: 'Action', sold: 120 },
   { genre: 'Shooter', sold: 350 },
-  { genre: 'Other', sold: 150 }
+  { genre: 'Other', sold: 150 },
 ];
 
 function App(props: any) {
   const { chartRef, lineRef, a } = props;
   return (
-    <ReactCanvas ref={ chartRef } width={ 100 } height={ 100 } className="newClass">
-      <Chart data={ data }>
-        <Line ref={ lineRef } x="genre" y="sold" a={ a } />
+    <ReactCanvas ref={chartRef} width={100} height={100} className="newClass">
+      <Chart data={data}>
+        <Line ref={lineRef} x="genre" y="sold" a={a} />
       </Chart>
     </ReactCanvas>
   );
 }
 
-describe.skip('<Canvas >', () => {
+describe('<Canvas >', () => {
   it('Chart render', () => {
     const chartRef = React.createRef<typeof ReactCanvas>();
     const lineRef = React.createRef<any>();
 
-    const wrapper = mount(<App chartRef={ chartRef } lineRef={ lineRef } />);
-    expect(wrapper.html()).toBe('<canvas class="f2-chart newClass" width="100" height="100" style="width: 100px; height: 100px; display: block; padding: 0px; margin: 0px;"></canvas>')
-
+    const wrapper = mount(<App chartRef={chartRef} lineRef={lineRef} />);
+    expect(wrapper.html()).toBe(
+      '<canvas class="f2-chart newClass" width="100" height="100" style="width: 100px; height: 100px; display: block; padding: 0px; margin: 0px;"></canvas>'
+    );
+
     const reactChart = chartRef.current;
     const line = lineRef.current;
     // 断言实例生成和ref正确性
@@ -48,9 +49,6 @@ describe.skip('<Canvas >', () => {
     expect(line.props.a).toBe(2);
 
     wrapper.unmount();
-    // 断言 F2 实例销毁
-    // @ts-ignore
-    // expect(reactChart.canva.chart.destroyed).toBe(true);
   });
 });