test(label): 修改及添加 label 相关测试用例

antvis · Mar 19, 2020 · 143e124 · 143e124
1 parent 681385d
commit 143e124
Show file tree

Hide file tree

Showing 6 changed files with 399 additions and 16 deletions.
diff --git a/tests/unit/geometry/label/base-spec.ts b/tests/unit/geometry/label/base-spec.ts
@@ -50,8 +50,14 @@ describe('GeometryLabel', () => {
     point.init();
 
     const geometryLabel = new GeometryLabel(point);
+    const labelsContainer = point.labelsContainer;
+
+    it('defaultLayout', () => {
+      expect(geometryLabel.defaultLayout).toBeUndefined();
+    });
 
     it('offset', () => {
+      // @ts-ignore
       const labelItems = geometryLabel.getLabelItems([
         { x: 100, y: 10, _origin: { x: 100, y: 10, z: '1' } },
         { x: 100, y: 20, _origin: { x: 100, y: 20, z: '2' } },
@@ -68,12 +74,15 @@ describe('GeometryLabel', () => {
         offsetX: 10,
         offsetY: 10,
       });
-      const labelItems = geometryLabel.getLabelItems([
+      geometryLabel.render([
         { x: 100, y: 10, _origin: { x: 100, y: 10, z: '1' } },
         { x: 100, y: 20, _origin: { x: 100, y: 20, z: '2' } },
-      ]);
-      expect(labelItems[0].x).toBe(110);
-      expect(labelItems[0].y).toBe(0);
+      ], false);
+
+      // @ts-ignore
+      const labelShape1 = labelsContainer.getChildren()[0].find(ele => ele.get('type') === 'text');
+      expect(labelShape1.attr('x')).toBe(110);
+      expect(labelShape1.attr('y')).toBe(0);
     });
 
     it('one point two labels', () => {
@@ -92,6 +101,7 @@ describe('GeometryLabel', () => {
         }
       );
 
+      // @ts-ignore
       const labelItems = geometryLabel.getLabelItems([
         { x: 100, y: [10, 20], _origin: { x: 100, y: [10, 20], z: ['1', '2'] } },
         { x: 100, y: [30, 40], _origin: { x: 100, y: [30, 40], z: ['3', '4'] } },
@@ -152,6 +162,7 @@ describe('GeometryLabel', () => {
         { x: 100, y: [30, 40], _origin: { x: 100, y: [30, 40], z: ['3', '4'] } },
       ]);
       expect(labelItems.length).toBe(4);
+      expect(labelItems[0].style.fill).toBe('#FFFFFF');
     });
 
     it('stack points', () => {

diff --git a/tests/unit/geometry/label/chart/funnel-spec.ts b/tests/unit/geometry/label/chart/funnel-spec.ts
@@ -0,0 +1,171 @@
+import { flatten } from '@antv/util';
+
+import { getCoordinate } from '@antv/coord';
+import { getScale } from '@antv/scale';
+import Interval from '../../../../../src/geometry/interval';
+import IntervalLabel from '../../../../../src/geometry/label/interval';
+import { getTheme } from '../../../../../src/theme/';
+import { createCanvas, createDiv } from '../../../../util/dom';
+import { createScale } from '../../../../util/scale';
+
+const Theme = getTheme('default');
+const CartesianCoordinate = getCoordinate('rect');
+const IdentityScale = getScale('identity');
+
+describe('Funnel chart label', () => {
+  const div = createDiv();
+  const canvas = createCanvas({
+    container: div,
+    width: 300,
+    height: 300,
+  });
+
+  const coord = new CartesianCoordinate({
+    start: { x: 0, y: 150 },
+    end: { x: 150, y: 0 },
+  });
+  coord.transpose().scale(1, -1);
+
+  const pyramidScale = new IdentityScale({
+    field: 'pyramid',
+    values: ['pyramid'],
+    range: [0, 1],
+  });
+  const funnelScale = new IdentityScale({
+    field: 'funnel',
+    values: ['funnel'],
+    range: [0, 1],
+  });
+
+  const data = [
+    { action: '浏览网站', pv: 50000 },
+    { action: '放入购物车', pv: 35000 },
+    { action: '生成订单', pv: 25000 },
+    { action: '支付订单', pv: 15000 },
+    { action: '完成交易', pv: 8000 },
+  ];
+
+  const scales = {
+    action: createScale('action', data),
+    pv: createScale('pv', data),
+    pyramid: pyramidScale,
+    funnel: funnelScale,
+  };
+
+  it('pyramid', () => {
+    const interval = new Interval({
+      data,
+      scales,
+      container: canvas.addGroup(),
+      labelsContainer: canvas.addGroup(),
+      theme: Theme,
+      coordinate: coord,
+    });
+    interval
+      .adjust('symmetric')
+      .position('action*pv')
+      .shape('pyramid')
+      .color('action', ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF'])
+      .label(
+        'action*pv',
+        (action, pv) => {
+          return {
+            content: `${action} ${pv}`,
+          };
+        },
+        {
+          offset: 35,
+          labelLine: {
+            style: {
+              lineWidth: 1,
+              stroke: 'rgba(0, 0, 0, 0.15)',
+            },
+          },
+        }
+      );
+    interval.init();
+    interval.paint();
+
+    // 生成映射数据
+    // @ts-ignore
+    const beforeMappingData = interval.beforeMappingData;
+    // @ts-ignore
+    const dataArray = interval.beforeMapping(beforeMappingData);
+
+    let mappingArray = [];
+    for (const eachGroup of dataArray) {
+      // @ts-ignore
+      const mappingData = interval.mapping(eachGroup);
+      mappingArray.push(mappingData);
+    }
+    mappingArray = flatten(mappingArray);
+
+    const gLabels = new IntervalLabel(interval);
+    const labelItems = gLabels.getLabelItems(mappingArray);
+
+    expect(labelItems[0].x).toBe(173.75);
+    expect(labelItems[0].y).toBe(3.75);
+    expect(labelItems[2].x).toBe(140);
+    expect(labelItems[2].y).toBe(78.75);
+    expect(labelItems[4].x).toBe(116);
+    expect(labelItems[4].y).toBe(150);
+  });
+
+  it('funnel', () => {
+    const interval = new Interval({
+      data,
+      scales,
+      container: canvas.addGroup(),
+      labelsContainer: canvas.addGroup(),
+      theme: Theme,
+      coordinate: coord,
+    });
+    interval
+      .adjust('symmetric')
+      .position('action*pv')
+      .shape('funnel')
+      .color('action', ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF'])
+      .label(
+        'action*pv',
+        (action, pv) => {
+          return {
+            content: `${action} ${pv}`,
+          };
+        },
+        {
+          offset: 35,
+          labelLine: {
+            style: {
+              lineWidth: 1,
+              stroke: 'rgba(0, 0, 0, 0.15)',
+            },
+          },
+        }
+      );
+    interval.init();
+    interval.paint();
+
+    // 生成映射数据
+    // @ts-ignore
+    const beforeMappingData = interval.beforeMappingData;
+    // @ts-ignore
+    const dataArray = interval.beforeMapping(beforeMappingData);
+
+    let mappingArray = [];
+    for (const eachGroup of dataArray) {
+      // @ts-ignore
+      const mappingData = interval.mapping(eachGroup);
+      mappingArray.push(mappingData);
+    }
+    mappingArray = flatten(mappingArray);
+
+    const gLabels = new IntervalLabel(interval);
+    const labelItems = gLabels.getLabelItems(mappingArray);
+    expect(labelItems[0].x).toBe(173.75);
+    expect(labelItems[0].y).toBe(3.75);
+    expect(labelItems[2].x).toBe(140);
+    expect(labelItems[2].y).toBe(78.75);
+    expect(labelItems[4].x).toBe(122);
+    expect(labelItems[4].y).toBe(150);
+  });
+});
diff --git a/tests/unit/geometry/label/chart/polar-interval-spec.ts b/tests/unit/geometry/label/chart/polar-interval-spec.ts
@@ -0,0 +1,88 @@
+import { flatten } from '@antv/util';
+
+import { getCoordinate } from '@antv/coord';
+import Interval from '../../../../../src/geometry/interval';
+import PolarLabel from '../../../../../src/geometry/label/polar';
+import { getTheme } from '../../../../../src/theme/';
+import { createCanvas, createDiv } from '../../../../util/dom';
+import { createScale } from '../../../../util/scale';
+
+const Theme = getTheme('default');
+const PolarCoord = getCoordinate('polar');
+
+describe('Interval label in Polar coordinate', () => {
+  const div = createDiv();
+  const canvas = createCanvas({
+    container: div,
+    width: 200,
+    height: 200,
+  });
+
+  const coord = new PolarCoord({
+    start: { x: 0, y: 100 },
+    end: { x: 100, y: 0 },
+  });
+
+  const data = [
+    { year: '1951 年', sales: 38 },
+    { year: '1952 年', sales: 52 },
+    { year: '1956 年', sales: 61 },
+    { year: '1957 年', sales: 145 },
+    { year: '1958 年', sales: 48 },
+    { year: '1959 年', sales: 38 },
+    { year: '1960 年', sales: 38 },
+    { year: '1962 年', sales: 38 },
+  ];
+  const scaleDefs = {
+    sales: {
+      nice: true,
+    },
+  };
+
+  const scales = {
+    year: createScale('year', data, scaleDefs),
+    sales: createScale('sales', data, scaleDefs),
+  };
+
+  const interval = new Interval({
+    data,
+    scales,
+    container: canvas.addGroup(),
+    labelsContainer: canvas.addGroup(),
+    theme: Theme,
+    coordinate: coord,
+    scaleDefs,
+  });
+  interval
+    .position('year*sales')
+    .label('sales', {
+      labelEmit: true,
+    });
+  interval.init();
+  interval.paint();
+
+  // 生成映射数据
+  // @ts-ignore
+  const beforeMappingData = interval.beforeMappingData;
+  // @ts-ignore
+  const dataArray = interval.beforeMapping(beforeMappingData);
+
+  let mappingArray = [];
+  for (const eachGroup of dataArray) {
+    // @ts-ignore
+    const mappingData = interval.mapping(eachGroup);
+    mappingArray.push(mappingData);
+  }
+  mappingArray = flatten(mappingArray);
+
+  it('labels', () => {
+    const gLabels = new PolarLabel(interval);
+    const labelItems = gLabels.getLabelItems(mappingArray);
+
+    expect(labelItems.length).toBe(data.length);
+    expect(labelItems[0].textAlign).toBe('left');
+    expect(labelItems[0].angle).toBeCloseTo(-1.5707963267948966);
+    expect(labelItems[3].angle).toBeCloseTo(1.1219973762820692);
+    expect(labelItems[5].angle).toBeCloseTo(2.9171931783333793);
+  });
+});