From: Evert Timberg <evert.timberg+github@gmail.com>
Date: Thu, 18 Feb 2021 22:29:15 +0000 (-0500)
Subject: Add tests for polarArea chart animations (#8455)
X-Git-Tag: v3.0.0-beta.11~10
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e6742e31acf71861920e4a932a99b11108031847;p=thirdparty%2FChart.js.git

Add tests for polarArea chart animations (#8455)

* Add tests for polarArea chart animations
* Remove commented code
---

diff --git a/test/fixtures/controller.polarArea/polar-area-animation-rotate.js b/test/fixtures/controller.polarArea/polar-area-animation-rotate.js
new file mode 100644
index 000000000..3c01b4c83
--- /dev/null
+++ b/test/fixtures/controller.polarArea/polar-area-animation-rotate.js
@@ -0,0 +1,75 @@
+const canvas = document.createElement('canvas');
+canvas.width = 512;
+canvas.height = 512;
+const ctx = canvas.getContext('2d');
+
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      labels: ['A', 'B', 'C', 'D', 'E'],
+      datasets: [{
+        data: [1, 5, 10, 2, 4],
+        backgroundColor: [
+          'rgba(255, 99, 132, 0.8)',
+          'rgba(54, 162, 235, 0.8)',
+          'rgba(255, 206, 86, 0.8)',
+          'rgba(75, 192, 192, 0.8)',
+          'rgba(153, 102, 255, 0.8)'
+        ],
+        borderWidth: 4,
+        borderColor: [
+          'rgb(255, 99, 132)',
+          'rgb(54, 162, 235)',
+          'rgb(255, 206, 86)',
+          'rgb(75, 192, 192)',
+          'rgb(153, 102, 255)'
+        ]
+      }]
+    },
+    options: {
+      animation: {
+        animateRotate: true,
+        animateScale: false,
+        duration: 800,
+        easing: 'linear'
+      },
+      responsive: false,
+      plugins: {
+        legend: false,
+        title: false,
+        tooltip: false,
+        filler: false
+      },
+      scales: {
+        r: {
+          ticks: {
+            display: false,
+          }
+        }
+      }
+    },
+  },
+  options: {
+    canvas: {
+      height: 512,
+      width: 512
+    },
+    run: function(chart) {
+      const animator = Chart.animator;
+      const start = animator._getAnims(chart).items[0]._start;
+      animator._running = false;
+      return new Promise((resolve) => setTimeout(() => {
+        for (let i = 0; i < 16; i++) {
+          animator._update(start + i * 50);
+          let x = i % 4 * 128;
+          let y = Math.floor(i / 4) * 128;
+          ctx.drawImage(chart.canvas, x, y, 128, 128);
+        }
+        Chart.helpers.clearCanvas(chart.canvas);
+        chart.ctx.drawImage(canvas, 0, 0);
+        resolve();
+      }, 100));
+    }
+  }
+};
diff --git a/test/fixtures/controller.polarArea/polar-area-animation-rotate.png b/test/fixtures/controller.polarArea/polar-area-animation-rotate.png
new file mode 100644
index 000000000..3d5f3b0ad
Binary files /dev/null and b/test/fixtures/controller.polarArea/polar-area-animation-rotate.png differ
diff --git a/test/fixtures/controller.polarArea/polar-area-animation-scale.js b/test/fixtures/controller.polarArea/polar-area-animation-scale.js
new file mode 100644
index 000000000..4e7c2aad7
--- /dev/null
+++ b/test/fixtures/controller.polarArea/polar-area-animation-scale.js
@@ -0,0 +1,75 @@
+const canvas = document.createElement('canvas');
+canvas.width = 512;
+canvas.height = 512;
+const ctx = canvas.getContext('2d');
+
+module.exports = {
+  config: {
+    type: 'polarArea',
+    data: {
+      labels: ['A', 'B', 'C', 'D', 'E'],
+      datasets: [{
+        data: [1, 5, 10, 2, 4],
+        backgroundColor: [
+          'rgba(255, 99, 132, 0.8)',
+          'rgba(54, 162, 235, 0.8)',
+          'rgba(255, 206, 86, 0.8)',
+          'rgba(75, 192, 192, 0.8)',
+          'rgba(153, 102, 255, 0.8)'
+        ],
+        borderWidth: 4,
+        borderColor: [
+          'rgb(255, 99, 132)',
+          'rgb(54, 162, 235)',
+          'rgb(255, 206, 86)',
+          'rgb(75, 192, 192)',
+          'rgb(153, 102, 255)'
+        ]
+      }]
+    },
+    options: {
+      animation: {
+        animateRotate: false,
+        animateScale: true,
+        duration: 800,
+        easing: 'linear'
+      },
+      responsive: false,
+      plugins: {
+        legend: false,
+        title: false,
+        tooltip: false,
+        filler: false
+      },
+      scales: {
+        r: {
+          ticks: {
+            display: false,
+          }
+        }
+      }
+    },
+  },
+  options: {
+    canvas: {
+      height: 512,
+      width: 512
+    },
+    run: function(chart) {
+      const animator = Chart.animator;
+      const start = animator._getAnims(chart).items[0]._start;
+      animator._running = false;
+      return new Promise((resolve) => setTimeout(() => {
+        for (let i = 0; i < 16; i++) {
+          animator._update(start + i * 50);
+          let x = i % 4 * 128;
+          let y = Math.floor(i / 4) * 128;
+          ctx.drawImage(chart.canvas, x, y, 128, 128);
+        }
+        Chart.helpers.clearCanvas(chart.canvas);
+        chart.ctx.drawImage(canvas, 0, 0);
+        resolve();
+      }, 100));
+    }
+  }
+};
diff --git a/test/fixtures/controller.polarArea/polar-area-animation-scale.png b/test/fixtures/controller.polarArea/polar-area-animation-scale.png
new file mode 100644
index 000000000..308903cba
Binary files /dev/null and b/test/fixtures/controller.polarArea/polar-area-animation-scale.png differ