fix: tooltip clear (#3010)

* fix: tooltip clear * fix: issue name
antvis · Nov 17, 2020 · 1cc9354 · 1cc9354
1 parent 3b996b1
commit 1cc9354
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 4 deletions.
diff --git a/src/chart/controller/tooltip.ts b/src/chart/controller/tooltip.ts
@@ -223,6 +223,7 @@ export default class Tooltip extends Controller<TooltipOption> {
     if (tooltipMarkersGroup) {
       tooltipMarkersGroup.clear();
     }
+    this.reset();
   }
 
   public destroy() {
@@ -240,6 +241,10 @@ export default class Tooltip extends Controller<TooltipOption> {
       this.guideGroup.remove(true);
     }
 
+    this.reset();
+  }
+
+  public reset() { 
     this.items = null;
     this.title = null;
     this.tooltipMarkersGroup = null;

diff --git a/tests/bugs/1962-spec.ts b/tests/bugs/1962-spec.ts
@@ -0,0 +1,80 @@
+import { Chart } from '../../src';
+import { createDiv } from '../util/dom';
+
+// G2Plot 1881
+describe('#1881', () => {
+  it('tooltip clear', () => {
+    const chart = new Chart({
+      container: createDiv(),
+      width: 400,
+      height: 300,
+      autoFit: false,
+    });
+
+    chart.data([
+      { city: '杭州', sale: 100, category: '电脑' },
+      { city: '广州', sale: 30, category: '电脑' },
+      { city: '上海', sale: 110, category: '电脑' },
+      { city: '呼和浩特', sale: 40, category: '电脑' },
+      { city: '上海', sale: 200, category: '鼠标' },
+      { city: '呼和浩特', sale: 10, category: '鼠标' },
+      { city: '杭州', sale: 40, category: '鼠标' },
+      { city: '广州', sale: 90, category: '鼠标' },
+    ]);
+
+    chart.line().position('city*sale').color('category');
+    chart.render();
+    const elements = chart.geometries[0].elements
+    const bbox = elements[elements.length - 1].getBBox();
+    chart.showTooltip({ x: bbox.maxX, y: bbox.maxY })
+    const tooltipController = chart.getController('tooltip');
+    expect(tooltipController.visible).toBeTruthy();
+    // @ts-ignore
+    expect(tooltipController.items.length).toBe(1);
+    // @ts-ignore
+    expect(tooltipController.title).toBe('呼和浩特');
+    tooltipController.clear();
+    // @ts-ignore
+    expect(tooltipController.items).toBe(null);
+    // @ts-ignore
+    expect(tooltipController.title).toBe(null);
+  });
+  it('tooltip destroy', () => {
+    const chart = new Chart({
+      container: createDiv(),
+      width: 400,
+      height: 300,
+      autoFit: false,
+    });
+
+    chart.data([
+      { city: '杭州', sale: 100, category: '电脑' },
+      { city: '广州', sale: 30, category: '电脑' },
+      { city: '上海', sale: 110, category: '电脑' },
+      { city: '呼和浩特', sale: 40, category: '电脑' },
+      { city: '上海', sale: 200, category: '鼠标' },
+      { city: '呼和浩特', sale: 10, category: '鼠标' },
+      { city: '杭州', sale: 40, category: '鼠标' },
+      { city: '广州', sale: 90, category: '鼠标' },
+    ]);
+
+    chart.line().position('city*sale').color('category');
+    chart.render();
+    const elements = chart.geometries[0].elements
+    const bbox = elements[elements.length - 1].getBBox();
+    chart.showTooltip({ x: bbox.maxX, y: bbox.maxY })
+    const tooltipController = chart.getController('tooltip');
+    expect(tooltipController.visible).toBeTruthy();
+    // @ts-ignore
+    expect(tooltipController.items.length).toBe(1);
+    // @ts-ignore
+    expect(tooltipController.title).toBe('呼和浩特');
+    tooltipController.destroy();
+    // @ts-ignore
+    expect(tooltipController.items).toBe(null);
+    // @ts-ignore
+    expect(tooltipController.title).toBe(null);
+    // @ts-ignore
+    expect(tooltipController.yCrosshair).toBe(null);
+  });
+});
diff --git a/tests/unit/chart/controller/tooltip-spec.ts b/tests/unit/chart/controller/tooltip-spec.ts
@@ -434,7 +434,7 @@ describe('showContent', () => {
 
     const tooltip = chart.getController('tooltip');
     // @ts-ignore
-    expect(tooltip.tooltip).toBeUndefined();
+    expect(tooltip.tooltip).toBe(null);
     const tooltipDom = container.getElementsByClassName('g2-tooltip');
     expect(tooltipDom.length).toBe(0);
   });

diff --git a/tests/unit/component/tooltip-crosshairs-spec.ts b/tests/unit/component/tooltip-crosshairs-spec.ts
@@ -43,9 +43,9 @@ describe('TooltipCrosshairs', () => {
     // @ts-ignore
     expect(tooltipController.guideGroup.getCount()).toBe(1);
     // @ts-ignore
-    expect(tooltipController.yCrosshair).toBeUndefined();
+    expect(tooltipController.yCrosshair).toBe(null);
     // @ts-ignore
-    expect(tooltipController.xCrosshair).toBeUndefined();
+    expect(tooltipController.xCrosshair).toBe(null);
   });
 
   it('show x crosshairs, but without text', () => {
@@ -61,7 +61,7 @@ describe('TooltipCrosshairs', () => {
     // @ts-ignore
     expect(tooltipController.guideGroup.getCount()).toBe(2);
     // @ts-ignore
-    expect(tooltipController.yCrosshair).toBeUndefined();
+    expect(tooltipController.yCrosshair).toBe(null);
     // @ts-ignore
     const xCrosshair = tooltipController.xCrosshair;
     expect(xCrosshair).toBeDefined();