Add test cases to coverage all events cases

test/events.js

@@ -0,0 +1,156 @@
+export function testEvents(options, innerElement) {
+  const descr = innerElement ? options.type + '.' + innerElement : options.type;
+  const chartOptions = {
+    type: 'scatter',
+    options: {
+      animation: false,
+      scales: {
+        x: {
+          display: false,
+          min: 0,
+          max: 10
+        },
+        y: {
+          display: false,
+          min: 0,
+          max: 10
+        }
+      },
+      plugins: {
+        legend: false,
+        annotation: {
+        }
+      }
+    },
+  };
+
+  describe('events', function() {
+
+    it(`should detect enter and leave events on ${descr}`, function(done) {
+      const enterSpy = jasmine.createSpy('enter');
+      const leaveSpy = jasmine.createSpy('leave');
+
+      options.enter = enterSpy;
+      options.leave = leaveSpy;
+      chartOptions.options.plugins.annotation.annotations = [options];
+
+      const chart = window.acquireChart(chartOptions);
+      const eventPoint = getEventPoint(chart, innerElement);
+
+      window.triggerMouseEvent(chart, 'mousemove', eventPoint);
+      window.afterEvent(chart, 'mousemove', function() {
+        expect(enterSpy.calls.count()).toBe(1);
+
+        window.triggerMouseEvent(chart, 'mousemove', {
+          x: 0,
+          y: 0
+        });
+
+        window.afterEvent(chart, 'mousemove', function() {
+          expect(leaveSpy.calls.count()).toBe(1);
+          delete options.enter;
+          delete options.leave;
+          done();
+        });
+      });
+    });
+
+    it(`should detect click event on ${descr}`, function(done) {
+      const clickSpy = jasmine.createSpy('click');
+
+      options.click = clickSpy;
+      chartOptions.options.plugins.annotation.annotations = [options];
+
+      const chart = window.acquireChart(chartOptions);
+      const eventPoint = getEventPoint(chart, innerElement);
+
+      window.afterEvent(chart, 'click', function() {
+        expect(clickSpy.calls.count()).toBe(1);
+        delete options.click;
+        done();
+      });
+      window.triggerMouseEvent(chart, 'click', eventPoint);
+    });
+
+    it(`should detect dbl click event on ${descr}`, function(done) {
+      const dblClickSpy = jasmine.createSpy('dblclick');
+
+      options.dblclick = dblClickSpy;
+      chartOptions.options.plugins.annotation.dblClickSpeed = 1000;
+      chartOptions.options.plugins.annotation.annotations = [options];
+
+      const chart = window.acquireChart(chartOptions);
+      const eventPoint = getEventPoint(chart, innerElement);
+
+      let dblClick = false;
+      window.afterEvent(chart, 'click', function() {
+        if (!dblClick) {
+          dblClick = true;
+          window.triggerMouseEvent(chart, 'click', eventPoint);
+        } else {
+          expect(dblClickSpy.calls.count()).toBe(1);
+          delete options.dblclick;
+          done();
+        }
+      });
+      window.triggerMouseEvent(chart, 'click', eventPoint);
+    });
+
+    it(`should detect a click event even if 2 clicks are fired on ${descr}`, function(done) {
+      const dblClickSpy = jasmine.createSpy('dblclick');
+
+      options.dblclick = dblClickSpy;
+      chartOptions.options.plugins.annotation.dblClickSpeed = 1;
+      chartOptions.options.plugins.annotation.annotations = [options];
+
+      const chart = window.acquireChart(chartOptions);
+      const eventPoint = getEventPoint(chart, innerElement);
+
+      let dblClick = false;
+      window.afterEvent(chart, 'click', function() {
+        if (!dblClick) {
+          dblClick = true;
+          setTimeout(() => {
+            window.triggerMouseEvent(chart, 'click', eventPoint);
+          }, 500);
+        } else {
+          expect(dblClickSpy.calls.count()).toBe(0);
+          delete options.dblclick;
+          done();
+        }
+      });
+      window.triggerMouseEvent(chart, 'click', eventPoint);
+    });
+
+    if (!innerElement) {
+      it(`should center point in range on ${descr}`, function() {
+        chartOptions.options.plugins.annotation.annotations = [options];
+        const chart = window.acquireChart(chartOptions);
+        const element = getElement(chart);
+        const center = element.getCenterPoint();
+        expect(element.inRange(center.x, center.y)).toBe(true);
+      });
+
+      it(`shouldn't center point plus adjustment in range on ${descr}`, function() {
+        chartOptions.options.plugins.annotation.annotations = [options];
+        const chart = window.acquireChart(chartOptions);
+        const element = getElement(chart);
+        const center = element.getCenterPoint();
+        expect(element.inRange(center.x + center.width, center.y)).toBe(false);
+      });
+
+    }
+  });
+}
+
+function getElement(chart) {
+  const Annotation = window['chartjs-plugin-annotation'];
+  const state = Annotation._getState(chart);
+  return state.elements[0];
+}
+
+function getEventPoint(chart, innerElement) {
+  const annotation = getElement(chart);
+  const element = innerElement ? annotation[innerElement] : annotation;
+  return innerElement ? element : element.getCenterPoint();
+}

test/fixtures/label/borderDash.js

@@ -1,5 +1,5 @@
 module.exports = {
-  tolerance: 0.0075,
+  tolerance: 0.0099,
   config: {
     type: 'bar',
     options: {

test/index.js

@@ -1,9 +1,11 @@
 import {acquireChart, addMatchers, releaseCharts, specsFromFixtures, triggerMouseEvent, afterEvent} from 'chartjs-test-utils';
+import {testEvents} from './events';
 
 window.devicePixelRatio = 1;
 window.acquireChart = acquireChart;
 window.afterEvent = afterEvent;
 window.triggerMouseEvent = triggerMouseEvent;
+window.testEvents = testEvents;
 
 jasmine.fixtures = specsFromFixtures;
 

test/specs/box.spec.js

@@ -1,3 +1,16 @@
 describe('Box annotation', function() {
   describe('auto', jasmine.fixtures('box'));
+
+  window.testEvents({
+    type: 'box',
+    id: 'test',
+    xScaleID: 'x',
+    yScaleID: 'y',
+    xMin: 2,
+    yMin: 2,
+    xMax: 4,
+    yMax: 4,
+    borderWidth: 0
+  });
+
 });

test/specs/display.spec.js

@@ -1,61 +1,52 @@
 describe('Display options', function() {
 
-  it('should not throw any exception', function() {
-    function createAndUpdateChart() {
-      const config = {
-        type: 'line',
-        data: {
-          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
-          datasets: [
-            {
-              label: '# of Votes',
-              data: [12, 19, 3, 5, 2, 3]
-            }
-          ]
-        },
-        options: {
-          scales: {
-            y: {
-              beginAtZero: true
-            }
+  ['box', 'ellipse', 'label', 'line', 'point', 'polygon'].forEach(function(key) {
+    it(`should not throw any exception changing display for ${key}`, function() {
+      function createChart() {
+        const config = {
+          type: 'line',
+          data: {
+            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+            datasets: [
+              {
+                label: '# of Votes',
+                data: [12, 19, 3, 5, 2, 3]
+              }
+            ]
           },
-          plugins: {
-            annotation: {
-              drawTime: 'afterDatasetsDraw',
-              dblClickSpeed: 350,
-              annotations: {
-                my: {
-                  display: true,
-                  type: 'line',
-                  scaleID: 'y',
-                  value: 10,
-                  borderColor: 'red',
-                  borderWidth: 2
+          options: {
+            scales: {
+              y: {
+                beginAtZero: true
+              }
+            },
+            plugins: {
+              annotation: {
+                drawTime: 'afterDatasetsDraw',
+                dblClickSpeed: 350,
+                annotations: {
+                  my: {
+                    display: true,
+                    type: key,
+                    xScaleID: 'y'
+                  }
                 }
               }
             }
           }
-        }
-      };
-
-      var chart = acquireChart(config);
-
-      chart.update();
-      chart.options.plugins.annotation.annotations.my.display = false;
-      chart.update();
-      chart.options.plugins.annotation.annotations.my.display = function() {
-        return true;
-      };
-      chart.update();
-      chart.options.plugins.annotation.annotations.my.display = function() {
-        return false;
-      };
-      chart.update();
-      chart.options.plugins.annotation.annotations.my.display = function() {
-        return null;
-      };
-      chart.update();
-    }
-    expect(createAndUpdateChart).not.toThrow();
+        };
+        const chart = acquireChart(config);
+        chart.update();
+        chart.options.plugins.annotation.annotations.my.display = false;
+        chart.update();
+        chart.options.plugins.annotation.annotations.my.display = () => true;
+        chart.update();
+        chart.options.plugins.annotation.annotations.my.display = () => false;
+        chart.update();
+        chart.options.plugins.annotation.annotations.my.display = () => null;
+        chart.update();
+      }
+      expect(createChart).not.toThrow();
+    });
   });
 });

test/specs/ellipse.spec.js

@@ -1,3 +1,16 @@
 describe('Ellipse annotation', function() {
   describe('auto', jasmine.fixtures('ellipse'));
+
+  window.testEvents({
+    type: 'ellipse',
+    id: 'test',
+    xScaleID: 'x',
+    yScaleID: 'y',
+    xMin: 2,
+    yMin: 2,
+    xMax: 4,
+    yMax: 4,
+    borderWidth: 0
+  });
+
 });