test(vgrammar): add test case of glyph, to check use state

VisActor · Aug 3, 2023 · 82309a3 · 82309a3
1 parent 01051d9
commit 82309a3
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 5 deletions.
diff --git a/packages/vgrammar/__tests__/glyph/boxplot.test.ts b/packages/vgrammar/__tests__/glyph/boxplot.test.ts
@@ -82,7 +82,7 @@ test('barBoxplot encode', function () {
 });
 
 test('boxplot animation', function () {
-  const element = createSimpleBoxplotElement(getGlyph('boxplot'));
+  const element = createSimpleBoxplotElement(getGlyph('boxplot'), { transformType: 'rect' });
   element.updateData('key', [{ key: 0 }], 'key', {} as any);
   element.initGraphicItem();
   element.encodeItems(
@@ -149,7 +149,7 @@ test('boxplot animation', function () {
 });
 
 test('barBoxplot animation', function () {
-  const element = createSimpleBoxplotElement(getGlyph('barBoxplot'));
+  const element = createSimpleBoxplotElement(getGlyph('barBoxplot'), { transformType: 'rect' });
   element.updateData('key', [{ key: 0 }], 'key', {} as any);
   element.initGraphicItem();
   element.encodeItems(

diff --git a/packages/vgrammar/__tests__/glyph/link-path.test.ts b/packages/vgrammar/__tests__/glyph/link-path.test.ts
@@ -4,7 +4,7 @@ import { createSimpleBoxplotElement } from '../util';
 
 registerLinkPathGlyph();
 
-test('line path encode', function () {
+test('link path encode', function () {
   const element = createSimpleBoxplotElement(getGlyph('linkPath'));
   element.updateData('key', [{ key: 0 }], 'key', {} as any);
   element.initGraphicItem();
@@ -31,3 +31,44 @@ test('line path encode', function () {
     'M10,137C61,137,61,141,111,141\n  L111,160C61,160,61,156,10,156Z'
   );
 });
+
+test('add state to a link path', function () {
+  const element = createSimpleBoxplotElement(getGlyph('linkPath'));
+  element.updateData('key', [{ key: 0 }], 'key', {} as any);
+  element.initGraphicItem();
+  element.encodeItems(
+    element.items,
+    {
+      enter: {
+        x0: 10,
+        x1: 111,
+        y0: 146,
+        y1: 150,
+        thickness: 19,
+        round: true,
+        fill: 'pink',
+        fillOpacity: 0.5
+      }
+    } as any,
+    {}
+  );
+  element.encodeGraphic();
+
+  expect(element.getGraphicAttribute('fill')).toBe('pink');
+  expect(element.getGraphicAttribute('ratio')).toBeUndefined();
+  expect(element.getGraphicAttribute('path', undefined, 'back')).toEqual('');
+  expect(element.getGraphicAttribute('path', undefined, 'front')).toEqual(
+    'M10,137C61,137,61,141,111,141\n  L111,160C61,160,61,156,10,156Z'
+  );
+
+  element.addState('selected', { ratio: 0.5, fill: 'red' });
+  expect(element.getGraphicAttribute('path', undefined, 'back')).toEqual(
+    'M10,137C61,137,61,141,111,141\n  L111,160C61,160,61,156,10,156Z'
+  );
+  expect(element.getGraphicAttribute('path', undefined, 'front')).toEqual(
+    `M10,137C61,137,61,141,111,141
+  L111,151C61,151,61,147,10,147Z`
+  );
+  expect(element.getGraphicAttribute('fill')).toBe('red');
+  expect(element.getGraphicAttribute('ratio')).toBe(0.5);
+});
diff --git a/packages/vgrammar/__tests__/util.ts b/packages/vgrammar/__tests__/util.ts
@@ -70,7 +70,13 @@ export function createSimpleElement(
   return createElement(mark);
 }
 
-export function createSimpleBoxplotElement(glyphMeta: IGlyphMeta) {
+export function createSimpleBoxplotElement(
+  glyphMeta: IGlyphMeta,
+  options?: {
+    transformType?: string;
+    markSpec?: any;
+  }
+) {
   const mark = {
     markType: 'glyph',
     isLargeMode: () => false,
@@ -85,7 +91,7 @@ export function createSimpleBoxplotElement(glyphMeta: IGlyphMeta) {
     view: getMockedView(),
     isProgressive: () => false,
     getGlyphConfig: () => null as any,
-    getAttributeTransforms: () => transformsByType.rect
+    getAttributeTransforms: () => transformsByType[options?.transformType ?? 'glyph']
   } as any;
   mark.addGraphicItem = () => {
     return (createGlyphGraphicItem as any)(mark, glyphMeta, {});