test: 添加雷达图动态变化的case (#1368)

antvis · Feb 15, 2022 · 1169d11 · 1169d11
1 parent fee176b
commit 1169d11
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 6 deletions.
diff --git a/packages/f2/test/components/legend/legend.test.tsx b/packages/f2/test/components/legend/legend.test.tsx
@@ -28,7 +28,7 @@ describe('图例', () => {
       const canvas = new Canvas(props);
       canvas.render();
 
-      await delay(100);
+      await delay(1000);
       expect(context).toMatchImageSnapshot();
     });
 
@@ -51,7 +51,7 @@ describe('图例', () => {
       const canvas = new Canvas(props);
       canvas.render();
 
-      await delay(100);
+      await delay(1000);
       expect(context).toMatchImageSnapshot();
     });
 
@@ -78,7 +78,7 @@ describe('图例', () => {
       const canvas = new Canvas(props);
       canvas.render();
 
-      await delay(100);
+      await delay(1000);
       expect(context).toMatchImageSnapshot();
     });
 
@@ -102,7 +102,7 @@ describe('图例', () => {
       const canvas = new Canvas(props);
       canvas.render();
 
-      await delay(100);
+      await delay(1000);
       expect(context).toMatchImageSnapshot();
     });
 
@@ -126,7 +126,7 @@ describe('图例', () => {
       const canvas = new Canvas(props);
       canvas.render();
 
-      await delay(100);
+      await delay(1000);
       expect(context).toMatchImageSnapshot();
     });
 
@@ -150,7 +150,7 @@ describe('图例', () => {
       const canvas = new Canvas(props);
       canvas.render();
 
-      await delay(100);
+      await delay(1000);
       expect(context).toMatchImageSnapshot();
     });
   });

diff --git a/...2/test/timeline/__image_snapshots__/radar-change-test-tsx-雷达图-面积雷达图图-1-snap.png b/...2/test/timeline/__image_snapshots__/radar-change-test-tsx-雷达图-面积雷达图图-1-snap.png
diff --git a/packages/f2/test/timeline/radar-change.test.tsx b/packages/f2/test/timeline/radar-change.test.tsx
@@ -0,0 +1,149 @@
+import { jsx, Canvas, Timeline, Chart, Line, Axis, Area, Point } from '../../src';
+import { createContext, delay } from '../util';
+
+const data = [
+  [
+    { item: 'Design', score: 0 },
+    { item: 'Development', score: 0 },
+    { item: 'Marketing', score: 0 },
+    { item: 'Users', score: 0 },
+    { item: 'Test', score: 0 },
+  ],
+  [
+    { item: 'Design', score: 70 },
+    { item: 'Development', score: 0 },
+    { item: 'Marketing', score: 0 },
+    { item: 'Users', score: 0 },
+    { item: 'Test', score: 0 },
+  ],
+  [
+    { item: 'Design', score: 70 },
+    { item: 'Development', score: 60 },
+    { item: 'Marketing', score: 0 },
+    { item: 'Users', score: 0 },
+    { item: 'Test', score: 0 },
+  ],
+  [
+    { item: 'Design', score: 70 },
+    { item: 'Development', score: 60 },
+    { item: 'Marketing', score: 50 },
+    { item: 'Users', score: 0 },
+    { item: 'Test', score: 0 },
+  ],
+  [
+    { item: 'Design', score: 70 },
+    { item: 'Development', score: 60 },
+    { item: 'Marketing', score: 50 },
+    { item: 'Users', score: 40 },
+    { item: 'Test', score: 0 },
+  ],
+  [
+    { item: 'Design', score: 70 },
+    { item: 'Development', score: 60 },
+    { item: 'Marketing', score: 50 },
+    { item: 'Users', score: 40 },
+    { item: 'Test', score: 60 },
+  ],
+];
+
+const data1 = [
+  [
+    { item: 'Design', score: 0 },
+    { item: 'Development', score: 0 },
+    { item: 'Marketing', score: 0 },
+    { item: 'Users', score: 0 },
+    { item: 'Test', score: 0 },
+  ],
+  [
+    { item: 'Design', score: 70 },
+    { item: 'Development', score: 0 },
+    { item: 'Marketing', score: 0 },
+    { item: 'Users', score: 0 },
+    { item: 'Test', score: 0 },
+  ],
+  [
+    { item: 'Design', score: 70 },
+    { item: 'Development', score: 60 },
+    { item: 'Marketing', score: 0 },
+    { item: 'Users', score: 0 },
+    { item: 'Test', score: 60 },
+  ],
+  [
+    { item: 'Design', score: 70 },
+    { item: 'Development', score: 60 },
+    { item: 'Marketing', score: 50 },
+    { item: 'Users', score: 40 },
+    { item: 'Test', score: 60 },
+  ],
+];
+
+describe('雷达图', () => {
+  it('面积雷达图图', async () => {
+    const context = createContext('排名折线图', {
+      width: '350px',
+      height: '400px',
+    });
+    const values = data[0].map((item) => {
+      return item.item;
+    });
+    const count = data[0].length;
+    const { props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Timeline>
+          {data1.map((item) => {
+            return (
+              <Chart
+                data={item}
+                coord="polar"
+                scale={{
+                  item: {
+                    values,
+                    range: [0, 1 - 1 / count],
+                  },
+                }}
+              >
+                <Axis field="item" />
+                <Axis field="score" />
+                <Line
+                  x="item"
+                  y="score"
+                  animation={{
+                    update: {
+                      easing: 'linear',
+                      duration: 30,
+                    },
+                  }}
+                />
+                <Area
+                  x="item"
+                  y="score"
+                  animation={{
+                    update: {
+                      easing: 'linear',
+                      duration: 30,
+                    },
+                  }}
+                />
+                <Point
+                  x="item"
+                  y="score"
+                  animation={{
+                    update: {
+                      easing: 'linear',
+                      duration: 30,
+                    },
+                  }}
+                />
+              </Chart>
+            );
+          })}
+        </Timeline>
+      </Canvas>
+    );
+    const canvas = new Canvas(props);
+    canvas.render();
+
+    await delay(2000);
+    expect(context).toMatchImageSnapshot();
+  });
+});