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 (file)
index 0000000..3c01b4c
--- /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 (file)
index 0000000..3d5f3b0
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 (file)
index 0000000..4e7c2aa
--- /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 (file)
index 0000000..308903c
Binary files /dev/null and b/test/fixtures/controller.polarArea/polar-area-animation-scale.png differ