test(geometry): add test case for geometry life circle

src/chart/controller/annotation.ts

@@ -230,7 +230,7 @@ export default class Annotation extends Controller<BaseOption[]> {
         }
       })
     } else {
-      this.view.once(VIEW_LIFE_CIRCLE.AFTER_RENDER, () => {
+      this.view.getRootView().once(VIEW_LIFE_CIRCLE.AFTER_RENDER, () => {
         doWhat();
       });
     }

src/geometry/element/index.ts

@@ -369,10 +369,11 @@ export default class Element extends Base {
           ...cfg,
           callback: () => {
             isFunction(cfg.callback) && cfg.callback();
-            this.geometry.emit(GEOMETRY_LIFE_CIRCLE.AFTER_DRAW_ANIMATE);
+            this.geometry?.emit(GEOMETRY_LIFE_CIRCLE.AFTER_DRAW_ANIMATE);
           },
         }
       }
+      return cfg;
     }
 
     return null;
@@ -403,7 +404,7 @@ export default class Element extends Base {
       const animateCfg = this.getAnimateCfg(animateType);
       if (animateCfg) {
         // 开始执行动画的生命周期
-        this.geometry.emit(GEOMETRY_LIFE_CIRCLE.BEFORE_DRAW_ANIMATE);
+        this.geometry?.emit(GEOMETRY_LIFE_CIRCLE.BEFORE_DRAW_ANIMATE);
 
         doAnimate(this.shape, animateCfg, {
           coordinate: shapeFactory.coordinate,
@@ -475,6 +476,7 @@ export default class Element extends Base {
 
       if (this.animate) {
         if (animateCfg) {
+          this.geometry?.emit(GEOMETRY_LIFE_CIRCLE.BEFORE_DRAW_ANIMATE);
           // 需要进行动画
           doAnimate(sourceShape, animateCfg, {
             coordinate: this.shapeFactory.coordinate,

tests/bugs/sub-view-region-filter-spec.ts

@@ -32,6 +32,8 @@ describe('#0000', () => {
     padding: [20, 40, 0, 30],
   });
 
+  view.animate(false);
+
   // Step 2: 载入数据源
   view.data(data);
   view.scale({

tests/unit/component/annotation-spec.ts

@@ -2,6 +2,7 @@ import 'jest-extended';
 import { Chart } from '../../../src/';
 import { COMPONENT_TYPE } from '../../../src/constant';
 import { createDiv, removeDom } from '../../util/dom';
+import { delay } from '../../util/delay';
 
 const IMAGE = 'https://img.alicdn.com/tfs/TB1M.wKkND1gK0jSZFyXXciOVXa-120-120.png';
 
@@ -297,7 +298,7 @@ describe('annotation', () => {
     expect(dataRegion.getElementById('-annotation-text-bg')).toBeDefined();
   });
 
-  it('regionFilter', () => {
+  it('regionFilter', async () => {
     chart.line().position('city*sale');
     chart.annotation().regionFilter({
       start: { city: '广州', sale: 30 },
@@ -307,6 +308,8 @@ describe('annotation', () => {
     });
     chart.render();
 
+    await delay(700);
+
     const regionFilter = chart.getComponents().filter((co) => co.type === COMPONENT_TYPE.ANNOTATION)[9].component;
     expect(regionFilter.get('type')).toEqual('regionFilter');
     expect(regionFilter.get('shapes')).toHaveLength(1);

tests/unit/geometry/base-spec.ts

@@ -1,12 +1,14 @@
 import { flatten } from '@antv/util';
 import 'jest-extended';
 import { Chart, getEngine } from '../../../src';
+import { GEOMETRY_LIFE_CIRCLE } from '../../../src/constant';
 import { getCoordinate } from '../../../src/dependents';
 import Geometry from '../../../src/geometry/base';
 import * as Shape from '../../../src/geometry/shape/base';
 import { LooseObject, ShapeInfo } from '../../../src/interface';
 import { getTheme } from '../../../src/theme/';
 import { createScaleByField, syncScale } from '../../../src/util/scale';
+import { delay } from '../../util/delay';
 import { createCanvas, createDiv, removeDom } from '../../util/dom';
 import { createScale, updateScales } from '../../util/scale';
 
@@ -825,4 +827,66 @@ describe('Geometry', () => {
 
     expect(customInfo).toEqual({ hello: 'g2' });
   });
+
+  it('geometry life circle', async () => {
+    const data = [
+      { year: '1991', value: 15468 },
+      { year: '1992', value: 16100 },
+      { year: '1993', value: 15900 },
+      { year: '1998', value: 32040 },
+    ];
+
+    const chart = new Chart({
+      container: createDiv(),
+      width: 500,
+      height: 400,
+    });
+
+    chart.data(data);
+    const geometry = chart.interval().position('year*valye');
+
+    const beforFn = jest.fn();
+    const afterFn = jest.fn();
+
+    // 无动画
+    geometry.animate(false);
+    geometry.once(GEOMETRY_LIFE_CIRCLE.BEFORE_DRAW_ANIMATE, () => beforFn(1));
+    geometry.once(GEOMETRY_LIFE_CIRCLE.AFTER_DRAW_ANIMATE, () => afterFn(1));
+    chart.render();
+
+    await delay(500);
+
+    expect(beforFn).not.toBeCalled();
+    expect(afterFn).not.toBeCalled();
+
+    // 有动画
+    geometry.animate(true);
+    geometry.once(GEOMETRY_LIFE_CIRCLE.BEFORE_DRAW_ANIMATE, () => beforFn(2));
+    geometry.once(GEOMETRY_LIFE_CIRCLE.AFTER_DRAW_ANIMATE, () => afterFn(2));
+    chart.changeSize(300, 300);
+
+    await delay(500);
+
+    expect(beforFn).toBeCalledWith(2);
+    expect(afterFn).toBeCalledWith(2);
+
+    const fn = jest.fn();
+    // 设置自定义动画
+    geometry.animate({
+      update: {
+        callback: fn,
+      }
+    });
+    geometry.once(GEOMETRY_LIFE_CIRCLE.BEFORE_DRAW_ANIMATE, () => beforFn(3));
+    geometry.once(GEOMETRY_LIFE_CIRCLE.AFTER_DRAW_ANIMATE, () => afterFn(3));
+    chart.changeSize(400, 400);
+
+    await delay(500);
+
+    // 自定义的 animate callback 也需要调用
+    expect(fn).toBeCalled();
+    expect(beforFn).toBeCalledWith(3);
+    expect(afterFn).toBeCalledWith(3);
+    expect(fn).toBeCalled();
+  });
 });

tests/unit/geometry/element/index-spec.ts

@@ -4,6 +4,7 @@ import Element from '../../../../src/geometry/element';
 import * as Shape from '../../../../src/geometry/shape/base';
 import '../../../../src/geometry/shape/interval';
 import { getTheme } from '../../../../src/theme/';
+import { omit } from '../../../util/omit';
 
 const Rect = getCoordinate('rect');
 const G = getEngine('canvas');
@@ -296,7 +297,7 @@ describe('Element', () => {
       };
 
       // @ts-ignore
-      expect(element.getAnimateCfg('update')).toEqual({
+      expect(omit(element.getAnimateCfg('update'), 'callback')).toEqual({
         delay: 1000,
       });
       // @ts-ignore

tests/util/omit.ts

@@ -0,0 +1,11 @@
+import { reduce } from '@antv/util';
+
+export function omit(obj: any, keys: string[]): object {
+  // @ts-ignore
+  return reduce(obj, (r: any, curr: any, key: string) => {
+    if (!keys.includes(key)) {
+      r[key] = curr;
+    }
+    return r;
+  }, {});
+}