Throttle all events (to 1 / frame each) (#6953)

* Throttle all events
* Asynchronize event tests

src/platforms/platform.dom.js

@@ -422,9 +422,9 @@ export default {
 
 		var expando = listener[EXPANDO_KEY] || (listener[EXPANDO_KEY] = {});
 		var proxies = expando.proxies || (expando.proxies = {});
-		var proxy = proxies[chart.id + '_' + type] = function(event) {
+		var proxy = proxies[chart.id + '_' + type] = throttled(function(event) {
 			listener(fromNativeEvent(event, chart));
-		};
+		}, chart);
 
 		addListener(canvas, type, proxy);
 	},

test/.eslintrc.yml

@@ -7,6 +7,7 @@ env:
 
 globals:
   acquireChart: true
+  afterEvent: true
   Chart: true
   moment: true
   waitForResize: true

test/index.js

@@ -30,6 +30,7 @@ var utils = require('./utils');
 	window.devicePixelRatio = 1;
 
 	window.acquireChart = acquireChart;
+	window.afterEvent = utils.afterEvent;
 	window.releaseChart = releaseChart;
 	window.waitForResize = utils.waitForResize;
 	window.createMockContext = createMockContext;

test/specs/controller.bubble.tests.js

@@ -288,24 +288,30 @@ describe('Chart.controllers.bubble', function() {
 			});
 		});
 
-		it ('should handle default hover styles', function() {
+		it ('should handle default hover styles', function(done) {
 			var chart = this.chart;
 			var point = chart.getDatasetMeta(0).data[0];
 
-			jasmine.triggerMouseEvent(chart, 'mousemove', point);
-			expect(point.options.backgroundColor).toBe('rgb(49, 135, 221)');
-			expect(point.options.borderColor).toBe('rgb(22, 89, 156)');
-			expect(point.options.borderWidth).toBe(1);
-			expect(point.options.radius).toBe(20 + 4);
+			afterEvent(chart, 'mousemove', function() {
+				expect(point.options.backgroundColor).toBe('rgb(49, 135, 221)');
+				expect(point.options.borderColor).toBe('rgb(22, 89, 156)');
+				expect(point.options.borderWidth).toBe(1);
+				expect(point.options.radius).toBe(20 + 4);
 
-			jasmine.triggerMouseEvent(chart, 'mouseout', point);
-			expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
-			expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
-			expect(point.options.borderWidth).toBe(2);
-			expect(point.options.radius).toBe(20);
+				afterEvent(chart, 'mouseout', function() {
+					expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
+					expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
+					expect(point.options.borderWidth).toBe(2);
+					expect(point.options.radius).toBe(20);
+
+					done();
+				});
+				jasmine.triggerMouseEvent(chart, 'mouseout', point);
+			});
+			jasmine.triggerMouseEvent(chart, 'mousemove', point);
 		});
 
-		it ('should handle hover styles defined via dataset properties', function() {
+		it ('should handle hover styles defined via dataset properties', function(done) {
 			var chart = this.chart;
 			var point = chart.getDatasetMeta(0).data[0];
 
@@ -318,20 +324,27 @@ describe('Chart.controllers.bubble', function() {
 
 			chart.update();
 
-			jasmine.triggerMouseEvent(chart, 'mousemove', point);
-			expect(point.options.backgroundColor).toBe('rgb(200, 100, 150)');
-			expect(point.options.borderColor).toBe('rgb(150, 50, 100)');
-			expect(point.options.borderWidth).toBe(8.4);
-			expect(point.options.radius).toBe(20 + 4.2);
+			afterEvent(chart, 'mousemove', function() {
+				expect(point.options.backgroundColor).toBe('rgb(200, 100, 150)');
+				expect(point.options.borderColor).toBe('rgb(150, 50, 100)');
+				expect(point.options.borderWidth).toBe(8.4);
+				expect(point.options.radius).toBe(20 + 4.2);
 
-			jasmine.triggerMouseEvent(chart, 'mouseout', point);
-			expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
-			expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
-			expect(point.options.borderWidth).toBe(2);
-			expect(point.options.radius).toBe(20);
+				afterEvent(chart, 'mouseout', function() {
+					expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
+					expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
+					expect(point.options.borderWidth).toBe(2);
+					expect(point.options.radius).toBe(20);
+
+					done();
+				});
+				jasmine.triggerMouseEvent(chart, 'mouseout', point);
+
+			});
+			jasmine.triggerMouseEvent(chart, 'mousemove', point);
 		});
 
-		it ('should handle hover styles defined via element options', function() {
+		it ('should handle hover styles defined via element options', function(done) {
 			var chart = this.chart;
 			var point = chart.getDatasetMeta(0).data[0];
 
@@ -344,17 +357,23 @@ describe('Chart.controllers.bubble', function() {
 
 			chart.update();
 
-			jasmine.triggerMouseEvent(chart, 'mousemove', point);
-			expect(point.options.backgroundColor).toBe('rgb(200, 100, 150)');
-			expect(point.options.borderColor).toBe('rgb(150, 50, 100)');
-			expect(point.options.borderWidth).toBe(8.4);
-			expect(point.options.radius).toBe(20 + 4.2);
+			afterEvent(chart, 'mousemove', function() {
+				expect(point.options.backgroundColor).toBe('rgb(200, 100, 150)');
+				expect(point.options.borderColor).toBe('rgb(150, 50, 100)');
+				expect(point.options.borderWidth).toBe(8.4);
+				expect(point.options.radius).toBe(20 + 4.2);
 
-			jasmine.triggerMouseEvent(chart, 'mouseout', point);
-			expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
-			expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
-			expect(point.options.borderWidth).toBe(2);
-			expect(point.options.radius).toBe(20);
+				afterEvent(chart, 'mouseout', function() {
+					expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
+					expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
+					expect(point.options.borderWidth).toBe(2);
+					expect(point.options.radius).toBe(20);
+
+					done();
+				});
+				jasmine.triggerMouseEvent(chart, 'mouseout', point);
+			});
+			jasmine.triggerMouseEvent(chart, 'mousemove', point);
 		});
 	});
 });

test/specs/controller.doughnut.tests.js

@@ -347,22 +347,28 @@ describe('Chart.controllers.doughnut', function() {
 			});
 		});
 
-		it ('should handle default hover styles', function() {
+		it ('should handle default hover styles', function(done) {
 			var chart = this.chart;
 			var arc = chart.getDatasetMeta(0).data[0];
 
-			jasmine.triggerMouseEvent(chart, 'mousemove', arc);
-			expect(arc.options.backgroundColor).toBe('rgb(49, 135, 221)');
-			expect(arc.options.borderColor).toBe('rgb(22, 89, 156)');
-			expect(arc.options.borderWidth).toBe(2);
+			afterEvent(chart, 'mousemove', function() {
+				expect(arc.options.backgroundColor).toBe('rgb(49, 135, 221)');
+				expect(arc.options.borderColor).toBe('rgb(22, 89, 156)');
+				expect(arc.options.borderWidth).toBe(2);
 
-			jasmine.triggerMouseEvent(chart, 'mouseout', arc);
-			expect(arc.options.backgroundColor).toBe('rgb(100, 150, 200)');
-			expect(arc.options.borderColor).toBe('rgb(50, 100, 150)');
-			expect(arc.options.borderWidth).toBe(2);
+				afterEvent(chart, 'mouseout', function() {
+					expect(arc.options.backgroundColor).toBe('rgb(100, 150, 200)');
+					expect(arc.options.borderColor).toBe('rgb(50, 100, 150)');
+					expect(arc.options.borderWidth).toBe(2);
+
+					done();
+				});
+				jasmine.triggerMouseEvent(chart, 'mouseout', arc);
+			});
+			jasmine.triggerMouseEvent(chart, 'mousemove', arc);
 		});
 
-		it ('should handle hover styles defined via dataset properties', function() {
+		it ('should handle hover styles defined via dataset properties', function(done) {
 			var chart = this.chart;
 			var arc = chart.getDatasetMeta(0).data[0];
 
@@ -374,18 +380,24 @@ describe('Chart.controllers.doughnut', function() {
 
 			chart.update();
 
-			jasmine.triggerMouseEvent(chart, 'mousemove', arc);
-			expect(arc.options.backgroundColor).toBe('rgb(200, 100, 150)');
-			expect(arc.options.borderColor).toBe('rgb(150, 50, 100)');
-			expect(arc.options.borderWidth).toBe(8.4);
+			afterEvent(chart, 'mousemove', function() {
+				expect(arc.options.backgroundColor).toBe('rgb(200, 100, 150)');
+				expect(arc.options.borderColor).toBe('rgb(150, 50, 100)');
+				expect(arc.options.borderWidth).toBe(8.4);
 
-			jasmine.triggerMouseEvent(chart, 'mouseout', arc);
-			expect(arc.options.backgroundColor).toBe('rgb(100, 150, 200)');
-			expect(arc.options.borderColor).toBe('rgb(50, 100, 150)');
-			expect(arc.options.borderWidth).toBe(2);
+				afterEvent(chart, 'mouseout', function() {
+					expect(arc.options.backgroundColor).toBe('rgb(100, 150, 200)');
+					expect(arc.options.borderColor).toBe('rgb(50, 100, 150)');
+					expect(arc.options.borderWidth).toBe(2);
+
+					done();
+				});
+				jasmine.triggerMouseEvent(chart, 'mouseout', arc);
+			});
+			jasmine.triggerMouseEvent(chart, 'mousemove', arc);
 		});
 
-		it ('should handle hover styles defined via element options', function() {
+		it ('should handle hover styles defined via element options', function(done) {
 			var chart = this.chart;
 			var arc = chart.getDatasetMeta(0).data[0];
 
@@ -397,15 +409,21 @@ describe('Chart.controllers.doughnut', function() {
 
 			chart.update();
 
-			jasmine.triggerMouseEvent(chart, 'mousemove', arc);
-			expect(arc.options.backgroundColor).toBe('rgb(200, 100, 150)');
-			expect(arc.options.borderColor).toBe('rgb(150, 50, 100)');
-			expect(arc.options.borderWidth).toBe(8.4);
+			afterEvent(chart, 'mousemove', function() {
+				expect(arc.options.backgroundColor).toBe('rgb(200, 100, 150)');
+				expect(arc.options.borderColor).toBe('rgb(150, 50, 100)');
+				expect(arc.options.borderWidth).toBe(8.4);
 
-			jasmine.triggerMouseEvent(chart, 'mouseout', arc);
-			expect(arc.options.backgroundColor).toBe('rgb(100, 150, 200)');
-			expect(arc.options.borderColor).toBe('rgb(50, 100, 150)');
-			expect(arc.options.borderWidth).toBe(2);
+				afterEvent(chart, 'mouseout', function() {
+					expect(arc.options.backgroundColor).toBe('rgb(100, 150, 200)');
+					expect(arc.options.borderColor).toBe('rgb(50, 100, 150)');
+					expect(arc.options.borderWidth).toBe(2);
+
+					done();
+				});
+				jasmine.triggerMouseEvent(chart, 'mouseout', arc);
+			});
+			jasmine.triggerMouseEvent(chart, 'mousemove', arc);
 		});
 	});
 });

test/specs/controller.line.tests.js

@@ -790,24 +790,31 @@ describe('Chart.controllers.line', function() {
 			});
 		});
 
-		it ('should handle default hover styles', function() {
+		it ('should handle default hover styles', function(done) {
 			var chart = this.chart;
 			var point = chart.getDatasetMeta(0).data[0];
 
-			jasmine.triggerMouseEvent(chart, 'mousemove', point);
-			expect(point.options.backgroundColor).toBe('rgb(49, 135, 221)');
-			expect(point.options.borderColor).toBe('rgb(22, 89, 156)');
-			expect(point.options.borderWidth).toBe(1);
-			expect(point.options.radius).toBe(4);
+			afterEvent(chart, 'mousemove', function() {
+				expect(point.options.backgroundColor).toBe('rgb(49, 135, 221)');
+				expect(point.options.borderColor).toBe('rgb(22, 89, 156)');
+				expect(point.options.borderWidth).toBe(1);
+				expect(point.options.radius).toBe(4);
 
-			jasmine.triggerMouseEvent(chart, 'mouseout', point);
-			expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
-			expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
-			expect(point.options.borderWidth).toBe(2);
-			expect(point.options.radius).toBe(3);
+				afterEvent(chart, 'mouseout', function() {
+					expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
+					expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
+					expect(point.options.borderWidth).toBe(2);
+					expect(point.options.radius).toBe(3);
+					done();
+				});
+
+				jasmine.triggerMouseEvent(chart, 'mouseout', point);
+			});
+
+			jasmine.triggerMouseEvent(chart, 'mousemove', point);
 		});
 
-		it ('should handle hover styles defined via dataset properties', function() {
+		it ('should handle hover styles defined via dataset properties', function(done) {
 			var chart = this.chart;
 			var point = chart.getDatasetMeta(0).data[0];
 
@@ -820,20 +827,26 @@ describe('Chart.controllers.line', function() {
 
 			chart.update();
 
-			jasmine.triggerMouseEvent(chart, 'mousemove', point);
-			expect(point.options.backgroundColor).toBe('rgb(200, 100, 150)');
-			expect(point.options.borderColor).toBe('rgb(150, 50, 100)');
-			expect(point.options.borderWidth).toBe(8.4);
-			expect(point.options.radius).toBe(4.2);
+			afterEvent(chart, 'mousemove', function() {
+				expect(point.options.backgroundColor).toBe('rgb(200, 100, 150)');
+				expect(point.options.borderColor).toBe('rgb(150, 50, 100)');
+				expect(point.options.borderWidth).toBe(8.4);
+				expect(point.options.radius).toBe(4.2);
 
-			jasmine.triggerMouseEvent(chart, 'mouseout', point);
-			expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
-			expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
-			expect(point.options.borderWidth).toBe(2);
-			expect(point.options.radius).toBe(3);
+				afterEvent(chart, 'mouseout', function() {
+					expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
+					expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
+					expect(point.options.borderWidth).toBe(2);
+					expect(point.options.radius).toBe(3);
+					done();
+				});
+				jasmine.triggerMouseEvent(chart, 'mouseout', point);
+			});
+
+			jasmine.triggerMouseEvent(chart, 'mousemove', point);
 		});
 
-		it ('should handle hover styles defined via element options', function() {
+		it ('should handle hover styles defined via element options', function(done) {
 			var chart = this.chart;
 			var point = chart.getDatasetMeta(0).data[0];
 
@@ -846,20 +859,28 @@ describe('Chart.controllers.line', function() {
 
 			chart.update();
 
-			jasmine.triggerMouseEvent(chart, 'mousemove', point);
-			expect(point.options.backgroundColor).toBe('rgb(200, 100, 150)');
-			expect(point.options.borderColor).toBe('rgb(150, 50, 100)');
-			expect(point.options.borderWidth).toBe(8.4);
-			expect(point.options.radius).toBe(4.2);
+			afterEvent(chart, 'mousemove', function() {
+				expect(point.options.backgroundColor).toBe('rgb(200, 100, 150)');
+				expect(point.options.borderColor).toBe('rgb(150, 50, 100)');
+				expect(point.options.borderWidth).toBe(8.4);
+				expect(point.options.radius).toBe(4.2);
 
-			jasmine.triggerMouseEvent(chart, 'mouseout', point);
-			expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
-			expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
-			expect(point.options.borderWidth).toBe(2);
-			expect(point.options.radius).toBe(3);
+				afterEvent(chart, 'mouseout', function() {
+					expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
+					expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
+					expect(point.options.borderWidth).toBe(2);
+					expect(point.options.radius).toBe(3);
+
+					done();
+				});
+
+				jasmine.triggerMouseEvent(chart, 'mouseout', point);
+			});
+
+			jasmine.triggerMouseEvent(chart, 'mousemove', point);
 		});
 
-		it ('should handle dataset hover styles defined via dataset properties', function() {
+		it ('should handle dataset hover styles defined via dataset properties', function(done) {
 			var chart = this.chart;
 			var point = chart.getDatasetMeta(0).data[0];
 			var dataset = chart.getDatasetMeta(0).dataset;
@@ -876,15 +897,23 @@ describe('Chart.controllers.line', function() {
 			chart.options.hover = {mode: 'dataset'};
 			chart.update();
 
-			jasmine.triggerMouseEvent(chart, 'mousemove', point);
-			expect(dataset.options.backgroundColor).toBe('#000');
-			expect(dataset.options.borderColor).toBe('#111');
-			expect(dataset.options.borderWidth).toBe(12);
+			afterEvent(chart, 'mousemove', function() {
+				expect(dataset.options.backgroundColor).toBe('#000');
+				expect(dataset.options.borderColor).toBe('#111');
+				expect(dataset.options.borderWidth).toBe(12);
 
-			jasmine.triggerMouseEvent(chart, 'mouseout', point);
-			expect(dataset.options.backgroundColor).toBe('#AAA');
-			expect(dataset.options.borderColor).toBe('#BBB');
-			expect(dataset.options.borderWidth).toBe(6);
+				afterEvent(chart, 'mouseout', function() {
+					expect(dataset.options.backgroundColor).toBe('#AAA');
+					expect(dataset.options.borderColor).toBe('#BBB');
+					expect(dataset.options.borderWidth).toBe(6);
+
+					done();
+				});
+
+				jasmine.triggerMouseEvent(chart, 'mouseout', point);
+			});
+
+			jasmine.triggerMouseEvent(chart, 'mousemove', point);
 		});
 	});
 

test/specs/controller.polarArea.tests.js

@@ -260,22 +260,28 @@ describe('Chart.controllers.polarArea', function() {
 			});
 		});
 
-		it ('should handle default hover styles', function() {
+		it ('should handle default hover styles', function(done) {
 			var chart = this.chart;
 			var arc = chart.getDatasetMeta(0).data[0];
 
-			jasmine.triggerMouseEvent(chart, 'mousemove', arc);
-			expect(arc.options.backgroundColor).toBe('rgb(49, 135, 221)');
-			expect(arc.options.borderColor).toBe('rgb(22, 89, 156)');
-			expect(arc.options.borderWidth).toBe(2);
+			afterEvent(chart, 'mousemove', function() {
+				expect(arc.options.backgroundColor).toBe('rgb(49, 135, 221)');
+				expect(arc.options.borderColor).toBe('rgb(22, 89, 156)');
+				expect(arc.options.borderWidth).toBe(2);
 
-			jasmine.triggerMouseEvent(chart, 'mouseout', arc);
-			expect(arc.options.backgroundColor).toBe('rgb(100, 150, 200)');
-			expect(arc.options.borderColor).toBe('rgb(50, 100, 150)');
-			expect(arc.options.borderWidth).toBe(2);
+				afterEvent(chart, 'mouseout', function() {
+					expect(arc.options.backgroundColor).toBe('rgb(100, 150, 200)');
+					expect(arc.options.borderColor).toBe('rgb(50, 100, 150)');
+					expect(arc.options.borderWidth).toBe(2);
+
+					done();
+				});
+				jasmine.triggerMouseEvent(chart, 'mouseout', arc);
+			});
+			jasmine.triggerMouseEvent(chart, 'mousemove', arc);
 		});
 
-		it ('should handle hover styles defined via dataset properties', function() {
+		it ('should handle hover styles defined via dataset properties', function(done) {
 			var chart = this.chart;
 			var arc = chart.getDatasetMeta(0).data[0];
 
@@ -287,18 +293,24 @@ describe('Chart.controllers.polarArea', function() {
 
 			chart.update();
 
-			jasmine.triggerMouseEvent(chart, 'mousemove', arc);
-			expect(arc.options.backgroundColor).toBe('rgb(200, 100, 150)');
-			expect(arc.options.borderColor).toBe('rgb(150, 50, 100)');
-			expect(arc.options.borderWidth).toBe(8.4);
+			afterEvent(chart, 'mousemove', function() {
+				expect(arc.options.backgroundColor).toBe('rgb(200, 100, 150)');
+				expect(arc.options.borderColor).toBe('rgb(150, 50, 100)');
+				expect(arc.options.borderWidth).toBe(8.4);
 
-			jasmine.triggerMouseEvent(chart, 'mouseout', arc);
-			expect(arc.options.backgroundColor).toBe('rgb(100, 150, 200)');
-			expect(arc.options.borderColor).toBe('rgb(50, 100, 150)');
-			expect(arc.options.borderWidth).toBe(2);
+				afterEvent(chart, 'mouseout', function() {
+					expect(arc.options.backgroundColor).toBe('rgb(100, 150, 200)');
+					expect(arc.options.borderColor).toBe('rgb(50, 100, 150)');
+					expect(arc.options.borderWidth).toBe(2);
+
+					done();
+				});
+				jasmine.triggerMouseEvent(chart, 'mouseout', arc);
+			});
+			jasmine.triggerMouseEvent(chart, 'mousemove', arc);
 		});
 
-		it ('should handle hover styles defined via element options', function() {
+		it ('should handle hover styles defined via element options', function(done) {
 			var chart = this.chart;
 			var arc = chart.getDatasetMeta(0).data[0];
 
@@ -310,15 +322,21 @@ describe('Chart.controllers.polarArea', function() {
 
 			chart.update();
 
-			jasmine.triggerMouseEvent(chart, 'mousemove', arc);
-			expect(arc.options.backgroundColor).toBe('rgb(200, 100, 150)');
-			expect(arc.options.borderColor).toBe('rgb(150, 50, 100)');
-			expect(arc.options.borderWidth).toBe(8.4);
+			afterEvent(chart, 'mousemove', function() {
+				expect(arc.options.backgroundColor).toBe('rgb(200, 100, 150)');
+				expect(arc.options.borderColor).toBe('rgb(150, 50, 100)');
+				expect(arc.options.borderWidth).toBe(8.4);
 
-			jasmine.triggerMouseEvent(chart, 'mouseout', arc);
-			expect(arc.options.backgroundColor).toBe('rgb(100, 150, 200)');
-			expect(arc.options.borderColor).toBe('rgb(50, 100, 150)');
-			expect(arc.options.borderWidth).toBe(2);
+				afterEvent(chart, 'mouseout', function() {
+					expect(arc.options.backgroundColor).toBe('rgb(100, 150, 200)');
+					expect(arc.options.borderColor).toBe('rgb(50, 100, 150)');
+					expect(arc.options.borderWidth).toBe(2);
+
+					done();
+				});
+				jasmine.triggerMouseEvent(chart, 'mouseout', arc);
+			});
+			jasmine.triggerMouseEvent(chart, 'mousemove', arc);
 		});
 	});
 });

test/specs/controller.radar.tests.js

@@ -252,24 +252,30 @@ describe('Chart.controllers.radar', function() {
 			});
 		});
 
-		it ('should handle default hover styles', function() {
+		it ('should handle default hover styles', function(done) {
 			var chart = this.chart;
 			var point = chart.getDatasetMeta(0).data[0];
 
-			jasmine.triggerMouseEvent(chart, 'mousemove', point);
-			expect(point.options.backgroundColor).toBe('rgb(49, 135, 221)');
-			expect(point.options.borderColor).toBe('rgb(22, 89, 156)');
-			expect(point.options.borderWidth).toBe(1);
-			expect(point.options.radius).toBe(4);
+			afterEvent(chart, 'mousemove', function() {
+				expect(point.options.backgroundColor).toBe('rgb(49, 135, 221)');
+				expect(point.options.borderColor).toBe('rgb(22, 89, 156)');
+				expect(point.options.borderWidth).toBe(1);
+				expect(point.options.radius).toBe(4);
 
-			jasmine.triggerMouseEvent(chart, 'mouseout', point);
-			expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
-			expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
-			expect(point.options.borderWidth).toBe(2);
-			expect(point.options.radius).toBe(3);
+				afterEvent(chart, 'mouseout', function() {
+					expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
+					expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
+					expect(point.options.borderWidth).toBe(2);
+					expect(point.options.radius).toBe(3);
+
+					done();
+				});
+				jasmine.triggerMouseEvent(chart, 'mouseout', point);
+			});
+			jasmine.triggerMouseEvent(chart, 'mousemove', point);
 		});
 
-		it ('should handle hover styles defined via dataset properties', function() {
+		it ('should handle hover styles defined via dataset properties', function(done) {
 			var chart = this.chart;
 			var point = chart.getDatasetMeta(0).data[0];
 
@@ -282,20 +288,26 @@ describe('Chart.controllers.radar', function() {
 
 			chart.update();
 
-			jasmine.triggerMouseEvent(chart, 'mousemove', point);
-			expect(point.options.backgroundColor).toBe('rgb(200, 100, 150)');
-			expect(point.options.borderColor).toBe('rgb(150, 50, 100)');
-			expect(point.options.borderWidth).toBe(8.4);
-			expect(point.options.radius).toBe(4.2);
+			afterEvent(chart, 'mousemove', function() {
+				expect(point.options.backgroundColor).toBe('rgb(200, 100, 150)');
+				expect(point.options.borderColor).toBe('rgb(150, 50, 100)');
+				expect(point.options.borderWidth).toBe(8.4);
+				expect(point.options.radius).toBe(4.2);
 
-			jasmine.triggerMouseEvent(chart, 'mouseout', point);
-			expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
-			expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
-			expect(point.options.borderWidth).toBe(2);
-			expect(point.options.radius).toBe(3);
+				afterEvent(chart, 'mouseout', function() {
+					expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
+					expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
+					expect(point.options.borderWidth).toBe(2);
+					expect(point.options.radius).toBe(3);
+
+					done();
+				});
+				jasmine.triggerMouseEvent(chart, 'mouseout', point);
+			});
+			jasmine.triggerMouseEvent(chart, 'mousemove', point);
 		});
 
-		it ('should handle hover styles defined via element options', function() {
+		it ('should handle hover styles defined via element options', function(done) {
 			var chart = this.chart;
 			var point = chart.getDatasetMeta(0).data[0];
 
@@ -308,17 +320,24 @@ describe('Chart.controllers.radar', function() {
 
 			chart.update();
 
-			jasmine.triggerMouseEvent(chart, 'mousemove', point);
-			expect(point.options.backgroundColor).toBe('rgb(200, 100, 150)');
-			expect(point.options.borderColor).toBe('rgb(150, 50, 100)');
-			expect(point.options.borderWidth).toBe(8.4);
-			expect(point.options.radius).toBe(4.2);
+			afterEvent(chart, 'mousemove', function() {
+				expect(point.options.backgroundColor).toBe('rgb(200, 100, 150)');
+				expect(point.options.borderColor).toBe('rgb(150, 50, 100)');
+				expect(point.options.borderWidth).toBe(8.4);
+				expect(point.options.radius).toBe(4.2);
 
-			jasmine.triggerMouseEvent(chart, 'mouseout', point);
-			expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
-			expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
-			expect(point.options.borderWidth).toBe(2);
-			expect(point.options.radius).toBe(3);
+				afterEvent(chart, 'mouseout', function() {
+					expect(point.options.backgroundColor).toBe('rgb(100, 150, 200)');
+					expect(point.options.borderColor).toBe('rgb(50, 100, 150)');
+					expect(point.options.borderWidth).toBe(2);
+					expect(point.options.radius).toBe(3);
+
+					done();
+				});
+				jasmine.triggerMouseEvent(chart, 'mouseout', point);
+
+			});
+			jasmine.triggerMouseEvent(chart, 'mousemove', point);
 		});
 	});
 

test/specs/controller.scatter.tests.js

@@ -3,7 +3,7 @@ describe('Chart.controllers.scatter', function() {
 		expect(typeof Chart.controllers.scatter).toBe('function');
 	});
 
-	it('should test default tooltip callbacks', function() {
+	it('should test default tooltip callbacks', function(done) {
 		var chart = window.acquireChart({
 			type: 'scatter',
 			data: {
@@ -18,11 +18,16 @@ describe('Chart.controllers.scatter', function() {
 			options: {}
 		});
 		var point = chart.getDatasetMeta(0).data[0];
-		jasmine.triggerMouseEvent(chart, 'mousemove', point);
 
-		// Title should be empty
-		expect(chart.tooltip.title.length).toBe(0);
-		expect(chart.tooltip.body[0].lines).toEqual(['(10, 15)']);
+		afterEvent(chart, 'mousemove', function() {
+			// Title should be empty
+			expect(chart.tooltip.title.length).toBe(0);
+			expect(chart.tooltip.body[0].lines).toEqual(['(10, 15)']);
+
+			done();
+		});
+
+		jasmine.triggerMouseEvent(chart, 'mousemove', point);
 	});
 
 	describe('showLines option', function() {

test/specs/core.controller.tests.js

@@ -1104,7 +1104,7 @@ describe('Chart', function() {
 			expect(chart.tooltip.options).toEqual(jasmine.objectContaining(newTooltipConfig));
 		});
 
-		it ('should update the tooltip on update', function() {
+		it ('should update the tooltip on update', function(done) {
 			var chart = acquireChart({
 				type: 'line',
 				data: {
@@ -1126,18 +1126,21 @@ describe('Chart', function() {
 			var meta = chart.getDatasetMeta(0);
 			var point = meta.data[1];
 
+			afterEvent(chart, 'mousemove', function() {
+				// Check and see if tooltip was displayed
+				var tooltip = chart.tooltip;
+
+				expect(chart.lastActive[0].element).toEqual(point);
+				expect(tooltip._active[0].element).toEqual(point);
+
+				// Update and confirm tooltip is updated
+				chart.update();
+				expect(chart.lastActive[0].element).toEqual(point);
+				expect(tooltip._active[0].element).toEqual(point);
+
+				done();
+			});
 			jasmine.triggerMouseEvent(chart, 'mousemove', point);
-
-			// Check and see if tooltip was displayed
-			var tooltip = chart.tooltip;
-
-			expect(chart.lastActive[0].element).toEqual(point);
-			expect(tooltip._active[0].element).toEqual(point);
-
-			// Update and confirm tooltip is updated
-			chart.update();
-			expect(chart.lastActive[0].element).toEqual(point);
-			expect(tooltip._active[0].element).toEqual(point);
 		});
 
 		it ('should update the metadata', function() {

test/specs/platform.dom.tests.js

@@ -356,7 +356,7 @@ describe('Platform.dom', function() {
 	});
 
 	describe('event handling', function() {
-		it('should notify plugins about events', function() {
+		it('should notify plugins about events', function(done) {
 			var notifiedEvent;
 			var plugin = {
 				afterEvent: function(chart, e) {
@@ -377,32 +377,24 @@ describe('Platform.dom', function() {
 				plugins: [plugin]
 			});
 
-			var node = chart.canvas;
-			var rect = node.getBoundingClientRect();
-			var clientX = (rect.left + rect.right) / 2;
-			var clientY = (rect.top + rect.bottom) / 2;
+			afterEvent(chart, 'click', function() {
+				// Check that notifiedEvent is correct
+				expect(notifiedEvent).not.toBe(undefined);
 
-			var evt = new MouseEvent('click', {
-				view: window,
-				bubbles: true,
-				cancelable: true,
-				clientX: clientX,
-				clientY: clientY
+				// Is type correctly translated
+				expect(notifiedEvent.type).toBe('click');
+
+				// Relative Position
+				expect(notifiedEvent.x).toBeCloseToPixel(chart.width / 2);
+				expect(notifiedEvent.y).toBeCloseToPixel(chart.height / 2);
+
+				done();
 			});
 
-			// Manually trigger rather than having an async test
-			node.dispatchEvent(evt);
-
-			// Check that notifiedEvent is correct
-			expect(notifiedEvent).not.toBe(undefined);
-			expect(notifiedEvent.native).toBe(evt);
-
-			// Is type correctly translated
-			expect(notifiedEvent.type).toBe(evt.type);
-
-			// Relative Position
-			expect(notifiedEvent.x).toBeCloseToPixel(chart.width / 2);
-			expect(notifiedEvent.y).toBeCloseToPixel(chart.height / 2);
+			jasmine.triggerMouseEvent(chart, 'click', {
+				x: chart.width / 2,
+				y: chart.height / 2
+			});
 		});
 	});
 });

test/specs/plugin.legend.tests.js

@@ -602,7 +602,7 @@ describe('Legend block tests', function() {
 	});
 
 	describe('callbacks', function() {
-		it('should call onClick, onHover and onLeave at the correct times', function() {
+		it('should call onClick, onHover and onLeave at the correct times', function(done) {
 			var clickItem = null;
 			var hoverItem = null;
 			var leaveItem = null;
@@ -636,17 +636,22 @@ describe('Legend block tests', function() {
 				y: hb.top + (hb.height / 2)
 			};
 
+			afterEvent(chart, 'click', function() {
+				expect(clickItem).toBe(chart.legend.legendItems[0]);
+
+				afterEvent(chart, 'mousemove', function() {
+					expect(hoverItem).toBe(chart.legend.legendItems[0]);
+
+					afterEvent(chart, 'mousemove', function() {
+						expect(leaveItem).toBe(chart.legend.legendItems[0]);
+
+						done();
+					});
+					jasmine.triggerMouseEvent(chart, 'mousemove', chart.getDatasetMeta(0).data[0]);
+				});
+				jasmine.triggerMouseEvent(chart, 'mousemove', el);
+			});
 			jasmine.triggerMouseEvent(chart, 'click', el);
-
-			expect(clickItem).toBe(chart.legend.legendItems[0]);
-
-			jasmine.triggerMouseEvent(chart, 'mousemove', el);
-
-			expect(hoverItem).toBe(chart.legend.legendItems[0]);
-
-			jasmine.triggerMouseEvent(chart, 'mousemove', chart.getDatasetMeta(0).data[0]);
-
-			expect(leaveItem).toBe(chart.legend.legendItems[0]);
 		});
 	});
 });

test/utils.js

@@ -106,6 +106,18 @@ function waitForResize(chart, callback) {
 	};
 }
 
+function afterEvent(chart, type, callback) {
+	var override = chart.eventHandler;
+	chart.eventHandler = function(event) {
+		override.call(this, event);
+		if (event.type === type) {
+			chart.eventHandler = override;
+			// eslint-disable-next-line callback-return
+			callback();
+		}
+	};
+}
+
 function _resolveElementPoint(el) {
 	var point = {x: 0, y: 0};
 	if (el) {
@@ -140,5 +152,6 @@ module.exports = {
 	releaseChart: releaseChart,
 	readImageData: readImageData,
 	triggerMouseEvent: triggerMouseEvent,
-	waitForResize: waitForResize
+	waitForResize: waitForResize,
+	afterEvent: afterEvent
 };