From 964c88778fa7c52008b1fc5e85b4c251b2f8ee2c Mon Sep 17 00:00:00 2001 From: simaQ Date: Mon, 28 Oct 2019 16:45:22 +0800 Subject: [PATCH] test: add test case for point shapes --- tests/unit/geometry/shape/line-spec.ts | 5 +- tests/unit/geometry/shape/point-spec.ts | 116 ++++++++++++++++++++++++ 2 files changed, 120 insertions(+), 1 deletion(-) create mode 100644 tests/unit/geometry/shape/point-spec.ts diff --git a/tests/unit/geometry/shape/line-spec.ts b/tests/unit/geometry/shape/line-spec.ts index 0f3099957d..6a44f812f1 100644 --- a/tests/unit/geometry/shape/line-spec.ts +++ b/tests/unit/geometry/shape/line-spec.ts @@ -345,5 +345,8 @@ describe('Line shapes', () => { }); }); - afterAll(() => {}); + afterAll(() => { + canvas.destroy(); + removeDom(div); + }); }); diff --git a/tests/unit/geometry/shape/point-spec.ts b/tests/unit/geometry/shape/point-spec.ts new file mode 100644 index 0000000000..98b85be926 --- /dev/null +++ b/tests/unit/geometry/shape/point-spec.ts @@ -0,0 +1,116 @@ +import { getCoordinate } from '../../../../src/dependents'; +import Element from '../../../../src/geometry/element/index'; +import PointShapeFactory from '../../../../src/geometry/shape/point'; +import Theme from '../../../../src/theme/antv'; +import { createCanvas, createDiv, removeDom } from '../../../util/dom'; + +const Rect = getCoordinate('rect'); +const Polar = getCoordinate('polar'); + +const SHAPES = ['circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangleDown']; +const HOLLOW_SHAPES = ['cross', 'tick', 'plus', 'hyphen', 'line']; + +describe('Point shapes', () => { + const div = createDiv(); + const canvas = createCanvas({ + container: div, + width: 500, + height: 500, + }); + const rectCoord = new Rect({ + start: { x: 0, y: 500 }, + end: { x: 500, y: 0 }, + }); + PointShapeFactory.setCoordinate(rectCoord); + + const element = new Element({ + shapeType: 'point', + shapeFactory: PointShapeFactory, + container: canvas.addGroup(), + theme: Theme.point, + }); + + it('defaultShapeType', () => { + expect(PointShapeFactory.defaultShapeType).toBe('circle'); + }); + + it('getShapes', () => { + SHAPES.forEach((shape) => { + expect(PointShapeFactory.getShape(shape)).not.toBe(undefined); + }); + + HOLLOW_SHAPES.forEach((shape) => { + expect(PointShapeFactory.getShape(shape)).not.toBe(undefined); + }); + }); + + it('getShapePoints', () => { + const point = PointShapeFactory.getShapePoints('tick', { + x: 0.4, + y: 0.8, + }); + expect(point[0].x).toBe(0.4); + expect(point[0].y).toBe(0.8); + }); + + it('draw shapes', () => { + const shape = PointShapeFactory.drawShape( + 'circle', + { + x: 100, + y: 100, + points: [{ x: 100, y: 100 }], + color: 'red', + style: { + ...Theme.point.circle.default, + }, + }, + element + ); + expect(shape.attr('symbol')).toBe('circle'); + expect(shape.attr('fill')).toBe('red'); + }); + + it('draw hollow shapes', () => { + const shape = PointShapeFactory.drawShape( + 'hyphen', + { + x: 100, + y: 100, + points: [{ x: 100, y: 100 }], + color: 'red', + style: { + ...Theme.point.hyphen.default, + }, + }, + element + ); + // for test + element.shape = shape; + expect(shape.attr('symbol')).toBe('hyphen'); + expect(shape.attr('stroke')).toBe('red'); + }); + + it('update shape', () => { + PointShapeFactory.updateShape( + 'hyphen', + { + x: 100, + y: 100, + color: 'blue', + style: { + ...Theme.point.hyphen.default, + }, + }, + element + ); + + const shape = element.shape; + expect(shape.attr('stroke')).toBe('blue'); + }); + + afterAll(() => { + canvas.destroy(); + removeDom(div); + }); +});