diff --git a/package-lock.json b/package-lock.json index 9c250497fa0..3695e0962b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -700,6 +700,24 @@ "picomatch": "^2.2.2" } }, + "@types/component-emitter": { + "version": "1.2.10", + "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz", + "integrity": "sha512-bsjleuRKWmGqajMerkzox19aGbscQX5rmmvvXl3wlIp5gMG1HgkiwPxsN5p070fBDKTNSPgojVbuY1+HWMbFhg==", + "dev": true + }, + "@types/cookie": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.0.tgz", + "integrity": "sha512-y7mImlc/rNkvCRmg8gC3/lj87S7pTUIJ6QGjwHR9WQJcFs+ZMTOaoPrkdFA/YdbuqVEmEbb5RdhVxMkAcgOnpg==", + "dev": true + }, + "@types/cors": { + "version": "2.8.9", + "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.9.tgz", + "integrity": "sha512-zurD1ibz21BRlAOIKP8yhrxlqKx6L9VCwkB5kMiP6nZAhoF5MvC7qS1qPA7nRcr1GJolfkQC7/EAL4hdYejLtg==", + "dev": true + }, "@types/estree": { "version": "0.0.39", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", @@ -1308,15 +1326,157 @@ "dev": true }, "chartjs-test-utils": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/chartjs-test-utils/-/chartjs-test-utils-0.1.2.tgz", - "integrity": "sha512-l56FYfquEbUfy8qV+IvPq2Z0jeG6bYmCvKvpAXMNY8c49L3e2uvJ5H3nMaDfkwBHMTwqE+Gt9Uy7TRVzqxJp8w==", + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/chartjs-test-utils/-/chartjs-test-utils-0.2.1.tgz", + "integrity": "sha512-8UIembPlq91WBtwWhYeJ9enA+3iEPq8+YSiXwc8Li2OncjdyeXUzM4AMQfPBymjcgL4GdZNAx+qmsHHlAPN1sg==", "dev": true, "requires": { - "jasmine": "^3.6.3", - "karma": "^5.2.3", + "jasmine": "^3.6.4", + "karma": "^6.1.0", "karma-jasmine": "^4.0.1", "pixelmatch": "^5.2.1" + }, + "dependencies": { + "@types/node": { + "version": "14.14.25", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.25.tgz", + "integrity": "sha512-EPpXLOVqDvisVxtlbvzfyqSsFeQxltFbluZNRndIb8tr9KiBnYNLzrc1N3pyKUCww2RNrfHDViqDWWE1LCJQtQ==", + "dev": true + }, + "chokidar": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz", + "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==", + "dev": true, + "requires": { + "anymatch": "~3.1.1", + "braces": "~3.0.2", + "fsevents": "~2.3.1", + "glob-parent": "~5.1.0", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.5.0" + } + }, + "component-emitter": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", + "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==", + "dev": true + }, + "debug": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", + "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", + "dev": true, + "requires": { + "ms": "2.1.2" + } + }, + "fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "optional": true + }, + "jasmine": { + "version": "3.6.4", + "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-3.6.4.tgz", + "integrity": "sha512-hIeOou6y0BgCOKYgXYveQvlY+PTHgDPajFf+vLCYbMTQ+VjAP9+EQv0nuC9+gyCAAWISRFauB1XUb9kFuOKtcQ==", + "dev": true, + "requires": { + "glob": "^7.1.6", + "jasmine-core": "~3.6.0" + } + }, + "karma": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/karma/-/karma-6.1.0.tgz", + "integrity": "sha512-QmRZ6HdKe6mHd89Az6yb85URRyDbXmn2IBo3lic7cwkkLjDWpjrMJxPAKlwNa5dFM1iHdT+kjtNJM0J5YAH90A==", + "dev": true, + "requires": { + "body-parser": "^1.19.0", + "braces": "^3.0.2", + "chokidar": "^3.4.2", + "colors": "^1.4.0", + "connect": "^3.7.0", + "di": "^0.0.1", + "dom-serialize": "^2.2.1", + "glob": "^7.1.6", + "graceful-fs": "^4.2.4", + "http-proxy": "^1.18.1", + "isbinaryfile": "^4.0.6", + "lodash": "^4.17.19", + "log4js": "^6.2.1", + "mime": "^2.4.5", + "minimatch": "^3.0.4", + "qjobs": "^1.2.0", + "range-parser": "^1.2.1", + "rimraf": "^3.0.2", + "socket.io": "^3.1.0", + "source-map": "^0.6.1", + "tmp": "0.2.1", + "ua-parser-js": "^0.7.23", + "yargs": "^16.1.1" + } + }, + "readdirp": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz", + "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==", + "dev": true, + "requires": { + "picomatch": "^2.2.1" + } + }, + "socket.io": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-3.1.1.tgz", + "integrity": "sha512-7cBWdsDC7bbyEF6WbBqffjizc/H4YF1wLdZoOzuYfo2uMNSFjJKuQ36t0H40o9B20DO6p+mSytEd92oP4S15bA==", + "dev": true, + "requires": { + "@types/cookie": "^0.4.0", + "@types/cors": "^2.8.8", + "@types/node": "^14.14.10", + "accepts": "~1.3.4", + "base64id": "~2.0.0", + "debug": "~4.3.1", + "engine.io": "~4.1.0", + "socket.io-adapter": "~2.1.0", + "socket.io-parser": "~4.0.3" + } + }, + "socket.io-adapter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.1.0.tgz", + "integrity": "sha512-+vDov/aTsLjViYTwS9fPy5pEtTkrbEKsw2M+oVSoFGw6OD1IpvlV1VPhUzNbofCQ8oyMbdYJqDtGdmHQK6TdPg==", + "dev": true + }, + "socket.io-parser": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz", + "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==", + "dev": true, + "requires": { + "@types/component-emitter": "^1.2.10", + "component-emitter": "~1.3.0", + "debug": "~4.3.1" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "ua-parser-js": { + "version": "0.7.23", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.23.tgz", + "integrity": "sha512-m4hvMLxgGHXG3O3fQVAyyAQpZzDOvwnhOTjYz5Xmr7r/+LpkNy3vJXdVRWgd1TkAb7NGROZuSy96CrlNVjA7KA==", + "dev": true + } } }, "chokidar": { @@ -1562,6 +1722,12 @@ "safe-buffer": "~5.1.1" } }, + "cookie": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz", + "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==", + "dev": true + }, "core-js": { "version": "2.6.11", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz", @@ -1574,6 +1740,16 @@ "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true }, + "cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dev": true, + "requires": { + "object-assign": "^4", + "vary": "^1" + } + }, "coveralls": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/coveralls/-/coveralls-3.1.0.tgz", @@ -1817,6 +1993,41 @@ "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=", "dev": true }, + "engine.io": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-4.1.1.tgz", + "integrity": "sha512-t2E9wLlssQjGw0nluF6aYyfX8LwYU8Jj0xct+pAhfWfv/YrBn6TSNtEYsgxHIfaMqfrLx07czcMg9bMN6di+3w==", + "dev": true, + "requires": { + "accepts": "~1.3.4", + "base64id": "2.0.0", + "cookie": "~0.4.1", + "cors": "~2.8.5", + "debug": "~4.3.1", + "engine.io-parser": "~4.0.0", + "ws": "~7.4.2" + }, + "dependencies": { + "debug": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", + "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", + "dev": true, + "requires": { + "ms": "2.1.2" + } + }, + "engine.io-parser": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-4.0.2.tgz", + "integrity": "sha512-sHfEQv6nmtJrq6TKuIz5kyEKH/qSdK56H/A+7DnAuUPWosnIZAS2NHNcPLmyjtY3cGS/MqJdZbUjW97JU72iYg==", + "dev": true, + "requires": { + "base64-arraybuffer": "0.1.4" + } + } + } + }, "engine.io-parser": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.2.1.tgz", @@ -3518,6 +3729,12 @@ "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==", "dev": true }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true + }, "on-finished": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", @@ -4575,6 +4792,15 @@ "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", "dev": true }, + "tmp": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz", + "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==", + "dev": true, + "requires": { + "rimraf": "^3.0.0" + } + }, "to-array": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz", @@ -4816,6 +5042,12 @@ "spdx-expression-parse": "^3.0.0" } }, + "vary": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", + "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=", + "dev": true + }, "verror": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz", @@ -4900,6 +5132,12 @@ "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "dev": true }, + "ws": { + "version": "7.4.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.3.tgz", + "integrity": "sha512-hr6vCR76GsossIRsr8OLR9acVVm1jyfEWvhbNjtgPOrfvAlKzvyeg/P6r8RuDjRyrcQoPQT7K0DGEPc7Ae6jzA==", + "dev": true + }, "xmlhttprequest-ssl": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz", diff --git a/package.json b/package.json index b3a560cadbf..3a21cd2f687 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "@typescript-eslint/eslint-plugin": "^4.11.1", "@typescript-eslint/parser": "^4.11.1", "chartjs-adapter-moment": "^0.1.2", - "chartjs-test-utils": "^0.1.2", + "chartjs-test-utils": "^0.2.1", "concurrently": "^5.3.0", "coveralls": "^3.1.0", "cross-env": "^7.0.3", diff --git a/test/.eslintrc.yml b/test/.eslintrc.yml index fee370d135d..5924dd3b5d1 100644 --- a/test/.eslintrc.yml +++ b/test/.eslintrc.yml @@ -1,12 +1,5 @@ -parserOptions: - ecmaVersion: 6 - env: - es6: true jasmine: true - commonjs: true - es2017: false - es2020: false globals: acquireChart: true @@ -15,23 +8,4 @@ globals: moment: true waitForResize: true -# https://eslint.org/docs/rules/ -rules: - # Best Practices - complexity: 0 - max-statements: [0, 100] - # Loosen up for tests - no-var: 0 - prefer-arrow-callback: 0 - prefer-spread: 0 - prefer-const: 0 - object-shorthand: 0 - import/no-commonjs: 0 - no-invalid-this: 0 - array-callback-return: 0 - operator-assignment: 0 - no-empty-function: 0 - import/no-namespace: 0 - prefer-rest-params: 0 - no-unneeded-ternary: 0 diff --git a/test/specs/controller.bubble.tests.js b/test/specs/controller.bubble.tests.js index 0a498bce665..57a1248417c 100644 --- a/test/specs/controller.bubble.tests.js +++ b/test/specs/controller.bubble.tests.js @@ -290,30 +290,24 @@ describe('Chart.controllers.bubble', function() { }); }); - it ('should handle default hover styles', function(done) { + it ('should handle default hover styles', async function() { var chart = this.chart; var point = chart.getDatasetMeta(0).data[0]; - afterEvent(chart, 'mousemove', function() { - expect(point.options.backgroundColor).toBe('#3187DD'); - expect(point.options.borderColor).toBe('#175A9D'); - expect(point.options.borderWidth).toBe(1); - expect(point.options.radius).toBe(20 + 4); - - 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); + await jasmine.triggerMouseEvent(chart, 'mousemove', point); + expect(point.options.backgroundColor).toBe('#3187DD'); + expect(point.options.borderColor).toBe('#175A9D'); + expect(point.options.borderWidth).toBe(1); + expect(point.options.radius).toBe(20 + 4); + + await 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); }); - it ('should handle hover styles defined via dataset properties', function(done) { + it ('should handle hover styles defined via dataset properties', async function() { var chart = this.chart; var point = chart.getDatasetMeta(0).data[0]; @@ -326,27 +320,20 @@ describe('Chart.controllers.bubble', function() { chart.update(); - 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); - - 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); + await 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); + + await 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); }); - it ('should handle hover styles defined via element options', function(done) { + it ('should handle hover styles defined via element options', async function() { var chart = this.chart; var point = chart.getDatasetMeta(0).data[0]; @@ -359,23 +346,17 @@ describe('Chart.controllers.bubble', function() { chart.update(); - 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); - - 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); + await 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); + + await 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); }); }); }); diff --git a/test/specs/controller.doughnut.tests.js b/test/specs/controller.doughnut.tests.js index 16f0b740137..9be7c86f20a 100644 --- a/test/specs/controller.doughnut.tests.js +++ b/test/specs/controller.doughnut.tests.js @@ -337,28 +337,22 @@ describe('Chart.controllers.doughnut', function() { }); }); - it ('should handle default hover styles', function(done) { + it ('should handle default hover styles', async function() { var chart = this.chart; var arc = chart.getDatasetMeta(0).data[0]; - afterEvent(chart, 'mousemove', function() { - expect(arc.options.backgroundColor).toBe('#3187DD'); - expect(arc.options.borderColor).toBe('#175A9D'); - expect(arc.options.borderWidth).toBe(2); + await jasmine.triggerMouseEvent(chart, 'mousemove', arc); + expect(arc.options.backgroundColor).toBe('#3187DD'); + expect(arc.options.borderColor).toBe('#175A9D'); + 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); + await 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); }); - it ('should handle hover styles defined via dataset properties', function(done) { + it ('should handle hover styles defined via dataset properties', async function() { var chart = this.chart; var arc = chart.getDatasetMeta(0).data[0]; @@ -370,24 +364,18 @@ describe('Chart.controllers.doughnut', function() { chart.update(); - 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); - - 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); + await 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); - done(); - }); - jasmine.triggerMouseEvent(chart, 'mouseout', arc); - }); - jasmine.triggerMouseEvent(chart, 'mousemove', arc); + await 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); }); - it ('should handle hover styles defined via element options', function(done) { + it ('should handle hover styles defined via element options', async function() { var chart = this.chart; var arc = chart.getDatasetMeta(0).data[0]; @@ -399,21 +387,15 @@ describe('Chart.controllers.doughnut', function() { chart.update(); - 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); - - 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); + await 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); - done(); - }); - jasmine.triggerMouseEvent(chart, 'mouseout', arc); - }); - jasmine.triggerMouseEvent(chart, 'mousemove', arc); + await 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); }); }); }); diff --git a/test/specs/controller.line.tests.js b/test/specs/controller.line.tests.js index e7bccf71e7c..187d4d1d654 100644 --- a/test/specs/controller.line.tests.js +++ b/test/specs/controller.line.tests.js @@ -742,31 +742,24 @@ describe('Chart.controllers.line', function() { }); }); - it ('should handle default hover styles', function(done) { + it ('should handle default hover styles', async function() { var chart = this.chart; var point = chart.getDatasetMeta(0).data[0]; - afterEvent(chart, 'mousemove', function() { - expect(point.options.backgroundColor).toBe('#3187DD'); - expect(point.options.borderColor).toBe('#175A9D'); - expect(point.options.borderWidth).toBe(1); - expect(point.options.radius).toBe(4); - - 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); - }); + await jasmine.triggerMouseEvent(chart, 'mousemove', point); + expect(point.options.backgroundColor).toBe('#3187DD'); + expect(point.options.borderColor).toBe('#175A9D'); + expect(point.options.borderWidth).toBe(1); + expect(point.options.radius).toBe(4); - jasmine.triggerMouseEvent(chart, 'mousemove', point); + await 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); }); - it ('should handle hover styles defined via dataset properties', function(done) { + it ('should handle hover styles defined via dataset properties', async function() { var chart = this.chart; var point = chart.getDatasetMeta(0).data[0]; @@ -779,26 +772,20 @@ describe('Chart.controllers.line', function() { chart.update(); - 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); - - 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); - }); + await 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); - jasmine.triggerMouseEvent(chart, 'mousemove', point); + await 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); }); - it ('should handle hover styles defined via element options', function(done) { + it('should handle hover styles defined via element options', async function() { var chart = this.chart; var point = chart.getDatasetMeta(0).data[0]; @@ -811,28 +798,20 @@ describe('Chart.controllers.line', function() { chart.update(); - 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); - - 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); - }); + await 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); - jasmine.triggerMouseEvent(chart, 'mousemove', point); + await 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); }); - it ('should handle dataset hover styles defined via dataset properties', function(done) { + it('should handle dataset hover styles defined via dataset properties', async function() { var chart = this.chart; var point = chart.getDatasetMeta(0).data[0]; var dataset = chart.getDatasetMeta(0).dataset; @@ -849,23 +828,15 @@ describe('Chart.controllers.line', function() { chart.options.hover = {mode: 'dataset'}; chart.update(); - afterEvent(chart, 'mousemove', function() { - expect(dataset.options.backgroundColor).toBe('#000'); - expect(dataset.options.borderColor).toBe('#111'); - expect(dataset.options.borderWidth).toBe(12); - - 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); - }); + await jasmine.triggerMouseEvent(chart, 'mousemove', point); + expect(dataset.options.backgroundColor).toBe('#000'); + expect(dataset.options.borderColor).toBe('#111'); + expect(dataset.options.borderWidth).toBe(12); - jasmine.triggerMouseEvent(chart, 'mousemove', point); + await jasmine.triggerMouseEvent(chart, 'mouseout', point); + expect(dataset.options.backgroundColor).toBe('#AAA'); + expect(dataset.options.borderColor).toBe('#BBB'); + expect(dataset.options.borderWidth).toBe(6); }); }); diff --git a/test/specs/controller.polarArea.tests.js b/test/specs/controller.polarArea.tests.js index b5895a1b335..46c9eb612b7 100644 --- a/test/specs/controller.polarArea.tests.js +++ b/test/specs/controller.polarArea.tests.js @@ -264,28 +264,22 @@ describe('Chart.controllers.polarArea', function() { }); }); - it ('should handle default hover styles', function(done) { + it('should handle default hover styles', async function() { var chart = this.chart; var arc = chart.getDatasetMeta(0).data[0]; - afterEvent(chart, 'mousemove', function() { - expect(arc.options.backgroundColor).toBe('#3187DD'); - expect(arc.options.borderColor).toBe('#175A9D'); - expect(arc.options.borderWidth).toBe(2); + await jasmine.triggerMouseEvent(chart, 'mousemove', arc); + expect(arc.options.backgroundColor).toBe('#3187DD'); + expect(arc.options.borderColor).toBe('#175A9D'); + 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); + await 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); }); - it ('should handle hover styles defined via dataset properties', function(done) { + it('should handle hover styles defined via dataset properties', async function() { var chart = this.chart; var arc = chart.getDatasetMeta(0).data[0]; @@ -297,24 +291,18 @@ describe('Chart.controllers.polarArea', function() { chart.update(); - 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); - - 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); + await 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); - done(); - }); - jasmine.triggerMouseEvent(chart, 'mouseout', arc); - }); - jasmine.triggerMouseEvent(chart, 'mousemove', arc); + await 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); }); - it ('should handle hover styles defined via element options', function(done) { + it('should handle hover styles defined via element options', async function() { var chart = this.chart; var arc = chart.getDatasetMeta(0).data[0]; @@ -326,21 +314,15 @@ describe('Chart.controllers.polarArea', function() { chart.update(); - 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); - - 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); + await 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); - done(); - }); - jasmine.triggerMouseEvent(chart, 'mouseout', arc); - }); - jasmine.triggerMouseEvent(chart, 'mousemove', arc); + await 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); }); }); }); diff --git a/test/specs/controller.radar.tests.js b/test/specs/controller.radar.tests.js index c2fc1f2cdf1..86e55632271 100644 --- a/test/specs/controller.radar.tests.js +++ b/test/specs/controller.radar.tests.js @@ -250,30 +250,24 @@ describe('Chart.controllers.radar', function() { }); }); - it ('should handle default hover styles', function(done) { + it('should handle default hover styles', async function() { var chart = this.chart; var point = chart.getDatasetMeta(0).data[0]; - afterEvent(chart, 'mousemove', function() { - expect(point.options.backgroundColor).toBe('#3187DD'); - expect(point.options.borderColor).toBe('#175A9D'); - expect(point.options.borderWidth).toBe(1); - expect(point.options.radius).toBe(4); - - 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); + await jasmine.triggerMouseEvent(chart, 'mousemove', point); + expect(point.options.backgroundColor).toBe('#3187DD'); + expect(point.options.borderColor).toBe('#175A9D'); + expect(point.options.borderWidth).toBe(1); + expect(point.options.radius).toBe(4); + + await 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); }); - it ('should handle hover styles defined via dataset properties', function(done) { + it('should handle hover styles defined via dataset properties', async function() { var chart = this.chart; var point = chart.getDatasetMeta(0).data[0]; @@ -286,26 +280,20 @@ describe('Chart.controllers.radar', function() { chart.update(); - 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); - - 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); + await 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); + + await 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); }); - it ('should handle hover styles defined via element options', function(done) { + it('should handle hover styles defined via element options', async function() { var chart = this.chart; var point = chart.getDatasetMeta(0).data[0]; @@ -318,24 +306,17 @@ describe('Chart.controllers.radar', function() { chart.update(); - 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); - - 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); + await 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); + + await 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); }); }); diff --git a/test/specs/controller.scatter.tests.js b/test/specs/controller.scatter.tests.js index 5f3aa27c3dd..3f0b17594d5 100644 --- a/test/specs/controller.scatter.tests.js +++ b/test/specs/controller.scatter.tests.js @@ -5,7 +5,7 @@ describe('Chart.controllers.scatter', function() { expect(typeof Chart.controllers.scatter).toBe('function'); }); - it('should test default tooltip callbacks', function(done) { + it('should test default tooltip callbacks', async function() { var chart = window.acquireChart({ type: 'scatter', data: { @@ -21,18 +21,13 @@ describe('Chart.controllers.scatter', function() { }); var point = chart.getDatasetMeta(0).data[0]; - 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); + await 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)']); }); - it('should only show a single point in the tooltip on multiple datasets', function(done) { + it('should only show a single point in the tooltip on multiple datasets', async function() { var chart = window.acquireChart({ type: 'scatter', data: { @@ -63,12 +58,7 @@ describe('Chart.controllers.scatter', function() { }); var point = chart.getDatasetMeta(0).data[1]; - afterEvent(chart, 'mousemove', function() { - expect(chart.tooltip.body.length).toEqual(1); - - done(); - }); - - jasmine.triggerMouseEvent(chart, 'mousemove', point); + await jasmine.triggerMouseEvent(chart, 'mousemove', point); + expect(chart.tooltip.body.length).toEqual(1); }); }); diff --git a/test/specs/core.controller.tests.js b/test/specs/core.controller.tests.js index 43a161c94d1..6d67b9c2cf0 100644 --- a/test/specs/core.controller.tests.js +++ b/test/specs/core.controller.tests.js @@ -253,7 +253,7 @@ describe('Chart', function() { }); }); - it('should activate element on hover', function(done) { + it('should activate element on hover', async function() { var chart = acquireChart({ type: 'line', data: { @@ -266,14 +266,11 @@ describe('Chart', function() { var point = chart.getDatasetMeta(0).data[1]; - afterEvent(chart, 'mousemove', function() { - expect(chart.getActiveElements()).toEqual([{datasetIndex: 0, index: 1, element: point}]); - done(); - }); - jasmine.triggerMouseEvent(chart, 'mousemove', point); + await jasmine.triggerMouseEvent(chart, 'mousemove', point); + expect(chart.getActiveElements()).toEqual([{datasetIndex: 0, index: 1, element: point}]); }); - it('should not activate elements when hover is disabled', function(done) { + it('should not activate elements when hover is disabled', async function() { var chart = acquireChart({ type: 'line', data: { @@ -289,11 +286,8 @@ describe('Chart', function() { var point = chart.getDatasetMeta(0).data[1]; - afterEvent(chart, 'mousemove', function() { - expect(chart.getActiveElements()).toEqual([]); - done(); - }); - jasmine.triggerMouseEvent(chart, 'mousemove', point); + await jasmine.triggerMouseEvent(chart, 'mousemove', point); + expect(chart.getActiveElements()).toEqual([]); }); }); @@ -1307,7 +1301,7 @@ describe('Chart', function() { expect(chart.tooltip.options).toEqual(jasmine.objectContaining(newTooltipConfig)); }); - it ('should update the tooltip on update', function(done) { + it ('should update the tooltip on update', async function() { var chart = acquireChart({ type: 'line', data: { @@ -1329,21 +1323,17 @@ 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; + await jasmine.triggerMouseEvent(chart, 'mousemove', point); + // Check and see if tooltip was displayed + var tooltip = chart.tooltip; - expect(chart._active[0].element).toEqual(point); - expect(tooltip._active[0].element).toEqual(point); + expect(chart._active[0].element).toEqual(point); + expect(tooltip._active[0].element).toEqual(point); - // Update and confirm tooltip is updated - chart.update(); - expect(chart._active[0].element).toEqual(point); - expect(tooltip._active[0].element).toEqual(point); - - done(); - }); - jasmine.triggerMouseEvent(chart, 'mousemove', point); + // Update and confirm tooltip is updated + chart.update(); + expect(chart._active[0].element).toEqual(point); + expect(tooltip._active[0].element).toEqual(point); }); it ('should update the metadata', function() { diff --git a/test/specs/platform.dom.tests.js b/test/specs/platform.dom.tests.js index fe65095236d..683f3712fe5 100644 --- a/test/specs/platform.dom.tests.js +++ b/test/specs/platform.dom.tests.js @@ -366,7 +366,7 @@ describe('Platform.dom', function() { }); describe('event handling', function() { - it('should notify plugins about events', function(done) { + it('should notify plugins about events', async function() { var notifiedEvent; var plugin = { afterEvent: function(chart, args) { @@ -387,24 +387,19 @@ describe('Platform.dom', function() { plugins: [plugin] }); - afterEvent(chart, 'click', function() { - // Check that notifiedEvent is correct - expect(notifiedEvent).not.toBe(undefined); - - // 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(); - }); - - jasmine.triggerMouseEvent(chart, 'click', { + await jasmine.triggerMouseEvent(chart, 'click', { x: chart.width / 2, y: chart.height / 2 }); + // Check that notifiedEvent is correct + expect(notifiedEvent).not.toBe(undefined); + + // 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); }); }); diff --git a/test/specs/plugin.legend.tests.js b/test/specs/plugin.legend.tests.js index f39d947d424..92bf482a07d 100644 --- a/test/specs/plugin.legend.tests.js +++ b/test/specs/plugin.legend.tests.js @@ -832,7 +832,7 @@ describe('Legend block tests', function() { }); describe('callbacks', function() { - it('should call onClick, onHover and onLeave at the correct times', function(done) { + it('should call onClick, onHover and onLeave at the correct times', async function() { var clickItem = null; var hoverItem = null; var leaveItem = null; @@ -868,22 +868,14 @@ describe('Legend block tests', function() { y: hb.top + (hb.height / 2) }; - afterEvent(chart, 'click', function() { - expect(clickItem).toBe(chart.legend.legendItems[0]); + await jasmine.triggerMouseEvent(chart, 'click', el); + expect(clickItem).toBe(chart.legend.legendItems[0]); - afterEvent(chart, 'mousemove', function() { - expect(hoverItem).toBe(chart.legend.legendItems[0]); + await jasmine.triggerMouseEvent(chart, 'mousemove', el); + 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); + await jasmine.triggerMouseEvent(chart, 'mousemove', chart.getDatasetMeta(0).data[0]); + expect(leaveItem).toBe(chart.legend.legendItems[0]); }); }); }); diff --git a/test/specs/plugin.tooltip.tests.js b/test/specs/plugin.tooltip.tests.js index 2166ee645f5..ba8f10fe068 100644 --- a/test/specs/plugin.tooltip.tests.js +++ b/test/specs/plugin.tooltip.tests.js @@ -33,7 +33,7 @@ describe('Plugin.Tooltip', function() { }); describe('index mode', function() { - it('Should only use x distance when intersect is false', function(done) { + it('Should only use x distance when intersect is false', async function() { var chart = window.acquireChart({ type: 'line', data: { @@ -68,99 +68,96 @@ describe('Plugin.Tooltip', 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; - var defaults = Chart.defaults; - - expect(tooltip.options.xPadding).toEqual(6); - expect(tooltip.options.yPadding).toEqual(6); - expect(tooltip.xAlign).toEqual('left'); - expect(tooltip.yAlign).toEqual('center'); - expect(tooltip.options.bodyColor).toEqual('#fff'); - - expect(tooltip.options.bodyFont).toEqual(jasmine.objectContaining({ - family: defaults.font.family, - style: defaults.font.style, - size: defaults.font.size, - })); - - expect(tooltip.options).toEqual(jasmine.objectContaining({ - bodyAlign: 'left', - bodySpacing: 2, - })); + // Check and see if tooltip was displayed + var tooltip = chart.tooltip; + var defaults = Chart.defaults; - expect(tooltip.options.titleColor).toEqual('#fff'); - expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({ - family: defaults.font.family, - style: 'bold', - size: defaults.font.size, - })); + await jasmine.triggerMouseEvent(chart, 'mousemove', {x: point.x, y: chart.chartArea.top + 10}); - expect(tooltip.options).toEqual(jasmine.objectContaining({ - titleAlign: 'left', - titleSpacing: 2, - titleMarginBottom: 6, - })); + expect(tooltip.options.xPadding).toEqual(6); + expect(tooltip.options.yPadding).toEqual(6); + expect(tooltip.xAlign).toEqual('left'); + expect(tooltip.yAlign).toEqual('center'); + expect(tooltip.options.bodyColor).toEqual('#fff'); - expect(tooltip.options.footerColor).toEqual('#fff'); - expect(tooltip.options.footerFont).toEqual(jasmine.objectContaining({ - family: defaults.font.family, - style: 'bold', - size: defaults.font.size, - })); + expect(tooltip.options.bodyFont).toEqual(jasmine.objectContaining({ + family: defaults.font.family, + style: defaults.font.style, + size: defaults.font.size, + })); - expect(tooltip.options).toEqual(jasmine.objectContaining({ - footerAlign: 'left', - footerSpacing: 2, - footerMarginTop: 6, - })); + expect(tooltip.options).toEqual(jasmine.objectContaining({ + bodyAlign: 'left', + bodySpacing: 2, + })); - expect(tooltip.options).toEqual(jasmine.objectContaining({ - // Appearance - caretSize: 5, - caretPadding: 2, - cornerRadius: 6, - backgroundColor: 'rgba(0,0,0,0.8)', - multiKeyBackground: '#fff', - displayColors: true - })); - - expect(tooltip).toEqual(jasmine.objectContaining({ - opacity: 1, - - // Text - title: ['Point 2'], - beforeBody: [], - body: [{ - before: [], - lines: ['Dataset 1: 20'], - after: [] - }, { - before: [], - lines: ['Dataset 2: 40'], - after: [] - }], - afterBody: [], - footer: [], - labelColors: [{ - borderColor: defaults.borderColor, - backgroundColor: defaults.backgroundColor - }, { - borderColor: defaults.borderColor, - backgroundColor: defaults.backgroundColor - }] - })); + expect(tooltip.options.titleColor).toEqual('#fff'); + expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({ + family: defaults.font.family, + style: 'bold', + size: defaults.font.size, + })); - expect(tooltip.x).toBeCloseToPixel(267); - expect(tooltip.y).toBeCloseToPixel(155); + expect(tooltip.options).toEqual(jasmine.objectContaining({ + titleAlign: 'left', + titleSpacing: 2, + titleMarginBottom: 6, + })); - done(); - }); - jasmine.triggerMouseEvent(chart, 'mousemove', {x: point.x, y: chart.chartArea.top + 10}); + expect(tooltip.options.footerColor).toEqual('#fff'); + expect(tooltip.options.footerFont).toEqual(jasmine.objectContaining({ + family: defaults.font.family, + style: 'bold', + size: defaults.font.size, + })); + + expect(tooltip.options).toEqual(jasmine.objectContaining({ + footerAlign: 'left', + footerSpacing: 2, + footerMarginTop: 6, + })); + + expect(tooltip.options).toEqual(jasmine.objectContaining({ + // Appearance + caretSize: 5, + caretPadding: 2, + cornerRadius: 6, + backgroundColor: 'rgba(0,0,0,0.8)', + multiKeyBackground: '#fff', + displayColors: true + })); + + expect(tooltip).toEqual(jasmine.objectContaining({ + opacity: 1, + + // Text + title: ['Point 2'], + beforeBody: [], + body: [{ + before: [], + lines: ['Dataset 1: 20'], + after: [] + }, { + before: [], + lines: ['Dataset 2: 40'], + after: [] + }], + afterBody: [], + footer: [], + labelColors: [{ + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor + }, { + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor + }] + })); + + expect(tooltip.x).toBeCloseToPixel(267); + expect(tooltip.y).toBeCloseToPixel(155); }); - it('Should only display if intersecting if intersect is set', function(done) { + it('Should only display if intersecting if intersect is set', async function() { var chart = window.acquireChart({ type: 'line', data: { @@ -191,21 +188,17 @@ describe('Plugin.Tooltip', 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(tooltip).toEqual(jasmine.objectContaining({ - opacity: 0, - })); + await jasmine.triggerMouseEvent(chart, 'mousemove', {x: point.x, y: 0}); + // Check and see if tooltip was displayed + var tooltip = chart.tooltip; - done(); - }); - jasmine.triggerMouseEvent(chart, 'mousemove', {x: point.x, y: 0}); + expect(tooltip).toEqual(jasmine.objectContaining({ + opacity: 0, + })); }); }); - it('Should display in single mode', function(done) { + it('Should display in single mode', async function() { var chart = window.acquireChart({ type: 'line', data: { @@ -236,87 +229,83 @@ describe('Plugin.Tooltip', 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; - var defaults = Chart.defaults; - - expect(tooltip.options.xPadding).toEqual(6); - expect(tooltip.options.yPadding).toEqual(6); - expect(tooltip.xAlign).toEqual('left'); - expect(tooltip.yAlign).toEqual('center'); - - expect(tooltip.options.bodyFont).toEqual(jasmine.objectContaining({ - family: defaults.font.family, - style: defaults.font.style, - size: defaults.font.size, - })); - - expect(tooltip.options).toEqual(jasmine.objectContaining({ - bodyAlign: 'left', - bodySpacing: 2, - })); - - expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({ - family: defaults.font.family, - style: 'bold', - size: defaults.font.size, - })); - - expect(tooltip.options).toEqual(jasmine.objectContaining({ - titleAlign: 'left', - titleSpacing: 2, - titleMarginBottom: 6, - })); - - expect(tooltip.options.footerFont).toEqual(jasmine.objectContaining({ - family: defaults.font.family, - style: 'bold', - size: defaults.font.size, - })); - - expect(tooltip.options).toEqual(jasmine.objectContaining({ - footerAlign: 'left', - footerSpacing: 2, - footerMarginTop: 6, - })); - - expect(tooltip.options).toEqual(jasmine.objectContaining({ - // Appearance - caretSize: 5, - caretPadding: 2, - cornerRadius: 6, - backgroundColor: 'rgba(0,0,0,0.8)', - multiKeyBackground: '#fff', - displayColors: true - })); - - expect(tooltip.opacity).toEqual(1); - expect(tooltip.title).toEqual(['Point 2']); - expect(tooltip.beforeBody).toEqual([]); - expect(tooltip.body).toEqual([{ - before: [], - lines: ['Dataset 1: 20'], - after: [] - }]); - expect(tooltip.afterBody).toEqual([]); - expect(tooltip.footer).toEqual([]); - expect(tooltip.labelTextColors).toEqual(['#fff']); - - expect(tooltip.labelColors).toEqual([{ - borderColor: defaults.borderColor, - backgroundColor: defaults.backgroundColor - }]); - - expect(tooltip.x).toBeCloseToPixel(267); - expect(tooltip.y).toBeCloseToPixel(312); + await jasmine.triggerMouseEvent(chart, 'mousemove', point); + // Check and see if tooltip was displayed + var tooltip = chart.tooltip; + var defaults = Chart.defaults; - done(); - }); - jasmine.triggerMouseEvent(chart, 'mousemove', point); + expect(tooltip.options.xPadding).toEqual(6); + expect(tooltip.options.yPadding).toEqual(6); + expect(tooltip.xAlign).toEqual('left'); + expect(tooltip.yAlign).toEqual('center'); + + expect(tooltip.options.bodyFont).toEqual(jasmine.objectContaining({ + family: defaults.font.family, + style: defaults.font.style, + size: defaults.font.size, + })); + + expect(tooltip.options).toEqual(jasmine.objectContaining({ + bodyAlign: 'left', + bodySpacing: 2, + })); + + expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({ + family: defaults.font.family, + style: 'bold', + size: defaults.font.size, + })); + + expect(tooltip.options).toEqual(jasmine.objectContaining({ + titleAlign: 'left', + titleSpacing: 2, + titleMarginBottom: 6, + })); + + expect(tooltip.options.footerFont).toEqual(jasmine.objectContaining({ + family: defaults.font.family, + style: 'bold', + size: defaults.font.size, + })); + + expect(tooltip.options).toEqual(jasmine.objectContaining({ + footerAlign: 'left', + footerSpacing: 2, + footerMarginTop: 6, + })); + + expect(tooltip.options).toEqual(jasmine.objectContaining({ + // Appearance + caretSize: 5, + caretPadding: 2, + cornerRadius: 6, + backgroundColor: 'rgba(0,0,0,0.8)', + multiKeyBackground: '#fff', + displayColors: true + })); + + expect(tooltip.opacity).toEqual(1); + expect(tooltip.title).toEqual(['Point 2']); + expect(tooltip.beforeBody).toEqual([]); + expect(tooltip.body).toEqual([{ + before: [], + lines: ['Dataset 1: 20'], + after: [] + }]); + expect(tooltip.afterBody).toEqual([]); + expect(tooltip.footer).toEqual([]); + expect(tooltip.labelTextColors).toEqual(['#fff']); + + expect(tooltip.labelColors).toEqual([{ + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor + }]); + + expect(tooltip.x).toBeCloseToPixel(267); + expect(tooltip.y).toBeCloseToPixel(312); }); - it('Should display information from user callbacks', function(done) { + it('Should display information from user callbacks', async function() { var chart = window.acquireChart({ type: 'line', data: { @@ -390,103 +379,99 @@ describe('Plugin.Tooltip', 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; - var defaults = Chart.defaults; - - expect(tooltip.options.xPadding).toEqual(6); - expect(tooltip.options.yPadding).toEqual(6); - expect(tooltip.xAlign).toEqual('left'); - expect(tooltip.yAlign).toEqual('center'); - - expect(tooltip.options.bodyFont).toEqual(jasmine.objectContaining({ - family: defaults.font.family, - style: defaults.font.style, - size: defaults.font.size, - })); - - expect(tooltip.options).toEqual(jasmine.objectContaining({ - bodyAlign: 'left', - bodySpacing: 2, - })); - - expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({ - family: defaults.font.family, - style: 'bold', - size: defaults.font.size, - })); - - expect(tooltip.options).toEqual(jasmine.objectContaining({ - titleSpacing: 2, - titleMarginBottom: 6, - })); - - expect(tooltip.options.footerFont).toEqual(jasmine.objectContaining({ - family: defaults.font.family, - style: 'bold', - size: defaults.font.size, - })); - - expect(tooltip.options).toEqual(jasmine.objectContaining({ - footerAlign: 'left', - footerSpacing: 2, - footerMarginTop: 6, - })); - - expect(tooltip.options).toEqual(jasmine.objectContaining({ - // Appearance - caretSize: 5, - caretPadding: 2, - cornerRadius: 6, - backgroundColor: 'rgba(0,0,0,0.8)', - multiKeyBackground: '#fff', - })); - - expect(tooltip).toEqual(jasmine.objectContaining({ - opacity: 1, - - // Text - title: ['beforeTitle', 'title', 'afterTitle'], - beforeBody: ['beforeBody'], - body: [{ - before: ['beforeLabel'], - lines: ['label'], - after: ['afterLabel'] - }, { - before: ['beforeLabel'], - lines: ['label'], - after: ['afterLabel'] - }], - afterBody: ['afterBody'], - footer: ['beforeFooter', 'footer', 'afterFooter'], - labelTextColors: ['labelTextColor', 'labelTextColor'], - labelColors: [{ - borderColor: defaults.borderColor, - backgroundColor: defaults.backgroundColor - }, { - borderColor: defaults.borderColor, - backgroundColor: defaults.backgroundColor - }], - labelPointStyles: [{ - pointStyle: 'labelPointStyle', - rotation: 42 - }, { - pointStyle: 'labelPointStyle', - rotation: 42 - }] - })); - - expect(tooltip.x).toBeCloseToPixel(267); - expect(tooltip.y).toBeCloseToPixel(75); + await jasmine.triggerMouseEvent(chart, 'mousemove', point); + // Check and see if tooltip was displayed + var tooltip = chart.tooltip; + var defaults = Chart.defaults; - done(); - }); - jasmine.triggerMouseEvent(chart, 'mousemove', point); + expect(tooltip.options.xPadding).toEqual(6); + expect(tooltip.options.yPadding).toEqual(6); + expect(tooltip.xAlign).toEqual('left'); + expect(tooltip.yAlign).toEqual('center'); + + expect(tooltip.options.bodyFont).toEqual(jasmine.objectContaining({ + family: defaults.font.family, + style: defaults.font.style, + size: defaults.font.size, + })); + + expect(tooltip.options).toEqual(jasmine.objectContaining({ + bodyAlign: 'left', + bodySpacing: 2, + })); + + expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({ + family: defaults.font.family, + style: 'bold', + size: defaults.font.size, + })); + + expect(tooltip.options).toEqual(jasmine.objectContaining({ + titleSpacing: 2, + titleMarginBottom: 6, + })); + + expect(tooltip.options.footerFont).toEqual(jasmine.objectContaining({ + family: defaults.font.family, + style: 'bold', + size: defaults.font.size, + })); + + expect(tooltip.options).toEqual(jasmine.objectContaining({ + footerAlign: 'left', + footerSpacing: 2, + footerMarginTop: 6, + })); + + expect(tooltip.options).toEqual(jasmine.objectContaining({ + // Appearance + caretSize: 5, + caretPadding: 2, + cornerRadius: 6, + backgroundColor: 'rgba(0,0,0,0.8)', + multiKeyBackground: '#fff', + })); + + expect(tooltip).toEqual(jasmine.objectContaining({ + opacity: 1, + + // Text + title: ['beforeTitle', 'title', 'afterTitle'], + beforeBody: ['beforeBody'], + body: [{ + before: ['beforeLabel'], + lines: ['label'], + after: ['afterLabel'] + }, { + before: ['beforeLabel'], + lines: ['label'], + after: ['afterLabel'] + }], + afterBody: ['afterBody'], + footer: ['beforeFooter', 'footer', 'afterFooter'], + labelTextColors: ['labelTextColor', 'labelTextColor'], + labelColors: [{ + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor + }, { + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor + }], + labelPointStyles: [{ + pointStyle: 'labelPointStyle', + rotation: 42 + }, { + pointStyle: 'labelPointStyle', + rotation: 42 + }] + })); + + expect(tooltip.x).toBeCloseToPixel(267); + expect(tooltip.y).toBeCloseToPixel(75); }); - it('Should provide context object to user callbacks', function(done) { + it('Should provide context object to user callbacks', async function() { const chart = window.acquireChart({ type: 'line', data: { @@ -518,17 +503,11 @@ describe('Plugin.Tooltip', function() { const meta = chart.getDatasetMeta(0); const point = meta.data[1]; - afterEvent(chart, 'mousemove', function() { - const tooltip = chart.tooltip; - - expect(tooltip.body[0].before).toEqual(['2,20']); - - done(); - }); - jasmine.triggerMouseEvent(chart, 'mousemove', point); + await jasmine.triggerMouseEvent(chart, 'mousemove', point); + expect(chart.tooltip.body[0].before).toEqual(['2,20']); }); - it('Should allow sorting items', function(done) { + it('Should allow sorting items', async function() { var chart = window.acquireChart({ type: 'line', data: { @@ -548,62 +527,57 @@ describe('Plugin.Tooltip', function() { options: { plugins: { tooltip: { - mode: 'index', - itemSort: function(a, b) { - return a.datasetIndex > b.datasetIndex ? -1 : 1; - } - } - } - } - }); - - // Trigger an event over top of the - var meta0 = chart.getDatasetMeta(0); - var point0 = meta0.data[1]; - - afterEvent(chart, 'mousemove', function() { - // Check and see if tooltip was displayed - var tooltip = chart.tooltip; - var defaults = Chart.defaults; - - expect(tooltip).toEqual(jasmine.objectContaining({ - // Positioning - xAlign: 'left', - yAlign: 'center', - - // Text - title: ['Point 2'], - beforeBody: [], - body: [{ - before: [], - lines: ['Dataset 2: 40'], - after: [] - }, { - before: [], - lines: ['Dataset 1: 20'], - after: [] - }], - afterBody: [], - footer: [], - labelColors: [{ - borderColor: defaults.borderColor, - backgroundColor: defaults.backgroundColor - }, { - borderColor: defaults.borderColor, - backgroundColor: defaults.backgroundColor - }] - })); + mode: 'index', + itemSort: function(a, b) { + return a.datasetIndex > b.datasetIndex ? -1 : 1; + } + } + } + } + }); - expect(tooltip.x).toBeCloseToPixel(267); - expect(tooltip.y).toBeCloseToPixel(155); + // Trigger an event over top of the + var meta0 = chart.getDatasetMeta(0); + var point0 = meta0.data[1]; - done(); - }); - jasmine.triggerMouseEvent(chart, 'mousemove', point0); + await jasmine.triggerMouseEvent(chart, 'mousemove', point0); + // Check and see if tooltip was displayed + var tooltip = chart.tooltip; + var defaults = Chart.defaults; + expect(tooltip).toEqual(jasmine.objectContaining({ + // Positioning + xAlign: 'left', + yAlign: 'center', + + // Text + title: ['Point 2'], + beforeBody: [], + body: [{ + before: [], + lines: ['Dataset 2: 40'], + after: [] + }, { + before: [], + lines: ['Dataset 1: 20'], + after: [] + }], + afterBody: [], + footer: [], + labelColors: [{ + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor + }, { + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor + }] + })); + + expect(tooltip.x).toBeCloseToPixel(267); + expect(tooltip.y).toBeCloseToPixel(155); }); - it('Should allow reversing items', function(done) { + it('Should allow reversing items', async function() { var chart = window.acquireChart({ type: 'line', data: { @@ -634,49 +608,44 @@ describe('Plugin.Tooltip', function() { var meta0 = chart.getDatasetMeta(0); var point0 = meta0.data[1]; - afterEvent(chart, 'mousemove', function() { - // Check and see if tooltip was displayed - var tooltip = chart.tooltip; - var defaults = Chart.defaults; - - expect(tooltip).toEqual(jasmine.objectContaining({ - // Positioning - xAlign: 'left', - yAlign: 'center', - - // Text - title: ['Point 2'], - beforeBody: [], - body: [{ - before: [], - lines: ['Dataset 2: 40'], - after: [] - }, { - before: [], - lines: ['Dataset 1: 20'], - after: [] - }], - afterBody: [], - footer: [], - labelColors: [{ - borderColor: defaults.borderColor, - backgroundColor: defaults.backgroundColor - }, { - borderColor: defaults.borderColor, - backgroundColor: defaults.backgroundColor - }] - })); + await jasmine.triggerMouseEvent(chart, 'mousemove', point0); + // Check and see if tooltip was displayed + var tooltip = chart.tooltip; + var defaults = Chart.defaults; - expect(tooltip.x).toBeCloseToPixel(267); - expect(tooltip.y).toBeCloseToPixel(155); + expect(tooltip).toEqual(jasmine.objectContaining({ + // Positioning + xAlign: 'left', + yAlign: 'center', - done(); - }); + // Text + title: ['Point 2'], + beforeBody: [], + body: [{ + before: [], + lines: ['Dataset 2: 40'], + after: [] + }, { + before: [], + lines: ['Dataset 1: 20'], + after: [] + }], + afterBody: [], + footer: [], + labelColors: [{ + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor + }, { + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor + }] + })); - jasmine.triggerMouseEvent(chart, 'mousemove', point0); + expect(tooltip.x).toBeCloseToPixel(267); + expect(tooltip.y).toBeCloseToPixel(155); }); - it('Should follow dataset order', function(done) { + it('Should follow dataset order', async function() { var chart = window.acquireChart({ type: 'line', data: { @@ -708,49 +677,44 @@ describe('Plugin.Tooltip', function() { var meta0 = chart.getDatasetMeta(0); var point0 = meta0.data[1]; - afterEvent(chart, 'mousemove', function() { - // Check and see if tooltip was displayed - var tooltip = chart.tooltip; - var defaults = Chart.defaults; - - expect(tooltip).toEqual(jasmine.objectContaining({ - // Positioning - xAlign: 'left', - yAlign: 'center', - - // Text - title: ['Point 2'], - beforeBody: [], - body: [{ - before: [], - lines: ['Dataset 2: 40'], - after: [] - }, { - before: [], - lines: ['Dataset 1: 20'], - after: [] - }], - afterBody: [], - footer: [], - labelColors: [{ - borderColor: defaults.borderColor, - backgroundColor: defaults.backgroundColor - }, { - borderColor: defaults.borderColor, - backgroundColor: defaults.backgroundColor - }] - })); + await jasmine.triggerMouseEvent(chart, 'mousemove', point0); + // Check and see if tooltip was displayed + var tooltip = chart.tooltip; + var defaults = Chart.defaults; - expect(tooltip.x).toBeCloseToPixel(267); - expect(tooltip.y).toBeCloseToPixel(155); + expect(tooltip).toEqual(jasmine.objectContaining({ + // Positioning + xAlign: 'left', + yAlign: 'center', - done(); - }); + // Text + title: ['Point 2'], + beforeBody: [], + body: [{ + before: [], + lines: ['Dataset 2: 40'], + after: [] + }, { + before: [], + lines: ['Dataset 1: 20'], + after: [] + }], + afterBody: [], + footer: [], + labelColors: [{ + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor + }, { + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor + }] + })); - jasmine.triggerMouseEvent(chart, 'mousemove', point0); + expect(tooltip.x).toBeCloseToPixel(267); + expect(tooltip.y).toBeCloseToPixel(155); }); - it('should filter items from the tooltip using the callback', function(done) { + it('should filter items from the tooltip using the callback', async function() { var chart = window.acquireChart({ type: 'line', data: { @@ -785,39 +749,34 @@ describe('Plugin.Tooltip', function() { var meta0 = chart.getDatasetMeta(0); var point0 = meta0.data[1]; - afterEvent(chart, 'mousemove', function() { - // Check and see if tooltip was displayed - var tooltip = chart.tooltip; - var defaults = Chart.defaults; - - expect(tooltip).toEqual(jasmine.objectContaining({ - // Positioning - xAlign: 'left', - yAlign: 'center', - - // Text - title: ['Point 2'], - beforeBody: [], - body: [{ - before: [], - lines: ['Dataset 2: 40'], - after: [] - }], - afterBody: [], - footer: [], - labelColors: [{ - borderColor: defaults.borderColor, - backgroundColor: defaults.backgroundColor - }] - })); + await jasmine.triggerMouseEvent(chart, 'mousemove', point0); + // Check and see if tooltip was displayed + var tooltip = chart.tooltip; + var defaults = Chart.defaults; - done(); - }); + expect(tooltip).toEqual(jasmine.objectContaining({ + // Positioning + xAlign: 'left', + yAlign: 'center', - jasmine.triggerMouseEvent(chart, 'mousemove', point0); + // Text + title: ['Point 2'], + beforeBody: [], + body: [{ + before: [], + lines: ['Dataset 2: 40'], + after: [] + }], + afterBody: [], + footer: [], + labelColors: [{ + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor + }] + })); }); - it('should set the caretPadding based on a config setting', function(done) { + it('should set the caretPadding based on a config setting', async function() { var chart = window.acquireChart({ type: 'line', data: { @@ -848,23 +807,18 @@ describe('Plugin.Tooltip', function() { var meta0 = chart.getDatasetMeta(0); var point0 = meta0.data[1]; - afterEvent(chart, 'mousemove', function() { - // Check and see if tooltip was displayed - var tooltip = chart.tooltip; - - expect(tooltip.options).toEqual(jasmine.objectContaining({ - // Positioning - caretPadding: 10, - })); - - done(); - }); + await jasmine.triggerMouseEvent(chart, 'mousemove', point0); + // Check and see if tooltip was displayed + var tooltip = chart.tooltip; - jasmine.triggerMouseEvent(chart, 'mousemove', point0); + expect(tooltip.options).toEqual(jasmine.objectContaining({ + // Positioning + caretPadding: 10, + })); }); ['line', 'bar'].forEach(function(type) { - it('Should have dataPoints in a ' + type + ' chart', function(done) { + it('Should have dataPoints in a ' + type + ' chart', async function() { var chart = window.acquireChart({ type: type, data: { @@ -896,31 +850,26 @@ describe('Plugin.Tooltip', function() { var datasetIndex = 0; var point = chart.getDatasetMeta(datasetIndex).data[pointIndex]; - afterEvent(chart, 'mousemove', function() { - // Check and see if tooltip was displayed - var tooltip = chart.tooltip; - - expect(tooltip instanceof Object).toBe(true); - expect(tooltip.dataPoints instanceof Array).toBe(true); - expect(tooltip.dataPoints.length).toBe(1); - - var tooltipItem = tooltip.dataPoints[0]; + await jasmine.triggerMouseEvent(chart, 'mousemove', point); + // Check and see if tooltip was displayed + var tooltip = chart.tooltip; - expect(tooltipItem.dataIndex).toBe(pointIndex); - expect(tooltipItem.datasetIndex).toBe(datasetIndex); - expect(typeof tooltipItem.label).toBe('string'); - expect(tooltipItem.label).toBe(chart.data.labels[pointIndex]); - expect(typeof tooltipItem.formattedValue).toBe('string'); - expect(tooltipItem.formattedValue).toBe('' + chart.data.datasets[datasetIndex].data[pointIndex]); + expect(tooltip instanceof Object).toBe(true); + expect(tooltip.dataPoints instanceof Array).toBe(true); + expect(tooltip.dataPoints.length).toBe(1); - done(); - }); + var tooltipItem = tooltip.dataPoints[0]; - jasmine.triggerMouseEvent(chart, 'mousemove', point); + expect(tooltipItem.dataIndex).toBe(pointIndex); + expect(tooltipItem.datasetIndex).toBe(datasetIndex); + expect(typeof tooltipItem.label).toBe('string'); + expect(tooltipItem.label).toBe(chart.data.labels[pointIndex]); + expect(typeof tooltipItem.formattedValue).toBe('string'); + expect(tooltipItem.formattedValue).toBe('' + chart.data.datasets[datasetIndex].data[pointIndex]); }); }); - it('Should not update if active element has not changed', function(done) { + it('Should not update if active element has not changed', async function() { var chart = window.acquireChart({ type: 'line', data: { @@ -959,25 +908,19 @@ describe('Plugin.Tooltip', function() { var tooltip = chart.tooltip; spyOn(tooltip, 'update').and.callThrough(); - afterEvent(chart, 'mousemove', function() { - expect(tooltip.update).toHaveBeenCalledWith(true); - - // Reset calls - tooltip.update.calls.reset(); + // First dispatch change event, should update tooltip + await jasmine.triggerMouseEvent(chart, 'mousemove', firstPoint); + expect(tooltip.update).toHaveBeenCalledWith(true); - afterEvent(chart, 'mousemove', function() { - expect(tooltip.update).not.toHaveBeenCalled(); + // Reset calls + tooltip.update.calls.reset(); - done(); - }); - // Second dispatch change event (same event), should not update tooltip - jasmine.triggerMouseEvent(chart, 'mousemove', firstPoint); - }); - // First dispatch change event, should update tooltip - jasmine.triggerMouseEvent(chart, 'mousemove', firstPoint); + // Second dispatch change event (same event), should not update tooltip + await jasmine.triggerMouseEvent(chart, 'mousemove', firstPoint); + expect(tooltip.update).not.toHaveBeenCalled(); }); - it('Should update if active elements are the same, but the position has changed', function(done) { + it('Should update if active elements are the same, but the position has changed', async function() { const chart = window.acquireChart({ type: 'line', data: { @@ -1028,27 +971,21 @@ describe('Plugin.Tooltip', function() { const tooltip = chart.tooltip; spyOn(tooltip, 'update'); - afterEvent(chart, 'mousemove', function() { - expect(tooltip.update).toHaveBeenCalledWith(true); - - // Reset calls - tooltip.update.calls.reset(); + // First dispatch change event, should update tooltip + await jasmine.triggerMouseEvent(chart, 'mousemove', firstPoint); + expect(tooltip.update).toHaveBeenCalledWith(true); - afterEvent(chart, 'mousemove', function() { - expect(tooltip.update).toHaveBeenCalledWith(true); + // Reset calls + tooltip.update.calls.reset(); - done(); - }); - // Second dispatch change event (same event), should update tooltip - // because position mode is 'nearest' - jasmine.triggerMouseEvent(chart, 'mousemove', secondPoint); - }); - // First dispatch change event, should update tooltip - jasmine.triggerMouseEvent(chart, 'mousemove', firstPoint); + // Second dispatch change event (same event), should update tooltip + // because position mode is 'nearest' + await jasmine.triggerMouseEvent(chart, 'mousemove', secondPoint); + expect(tooltip.update).toHaveBeenCalledWith(true); }); describe('positioners', function() { - it('Should call custom positioner with correct parameters and scope', function(done) { + it('Should call custom positioner with correct parameters and scope', async function() { tooltipPlugin.positioners.test = function() { return {x: 0, y: 0}; @@ -1089,20 +1026,16 @@ describe('Plugin.Tooltip', function() { var point = meta.data[pointIndex]; var fn = tooltipPlugin.positioners.test; - afterEvent(chart, 'mousemove', function() { - expect(fn.calls.count()).toBe(2); - expect(fn.calls.first().args[0] instanceof Array).toBe(true); - expect(Object.prototype.hasOwnProperty.call(fn.calls.first().args[1], 'x')).toBe(true); - expect(Object.prototype.hasOwnProperty.call(fn.calls.first().args[1], 'y')).toBe(true); - expect(fn.calls.first().object instanceof Tooltip).toBe(true); - - done(); - }); - jasmine.triggerMouseEvent(chart, 'mousemove', point); + await jasmine.triggerMouseEvent(chart, 'mousemove', point); + expect(fn.calls.count()).toBe(2); + expect(fn.calls.first().args[0] instanceof Array).toBe(true); + expect(Object.prototype.hasOwnProperty.call(fn.calls.first().args[1], 'x')).toBe(true); + expect(Object.prototype.hasOwnProperty.call(fn.calls.first().args[1], 'y')).toBe(true); + expect(fn.calls.first().object instanceof Tooltip).toBe(true); }); }); - it('Should avoid tooltip truncation in x axis if there is enough space to show tooltip without truncation', function(done) { + it('Should avoid tooltip truncation in x axis if there is enough space to show tooltip without truncation', async function() { var chart = window.acquireChart({ type: 'pie', data: { @@ -1136,47 +1069,43 @@ describe('Plugin.Tooltip', function() { } }); - function testSlice(slice, count) { + async function testSlice(slice, count) { var meta = chart.getDatasetMeta(0); var point = meta.data[slice].getCenterPoint(); var tooltipPosition = meta.data[slice].tooltipPosition(); - function recursive(left) { + async function recursive(left) { chart.config.data.labels[slice] = chart.config.data.labels[slice] + 'XX'; chart.update(); - afterEvent(chart, 'mouseout', function() { - afterEvent(chart, 'mousemove', function() { - var tooltip = chart.tooltip; - expect(tooltip.dataPoints.length).toBe(1); - expect(tooltip.x).toBeGreaterThanOrEqual(0); - if (tooltip.width <= chart.width) { - expect(tooltip.x + tooltip.width).toBeLessThanOrEqual(chart.width); - } - expect(tooltip.caretX).toBeCloseToPixel(tooltipPosition.x); - // if tooltip is longer than chart area then all tests done - if (tooltip.width > chart.width || left === 0) { - done(left === 0 && new Error('max iterations reached')); - } else { - recursive(left - 1); - } - }); - jasmine.triggerMouseEvent(chart, 'mousemove', point); - }); - - jasmine.triggerMouseEvent(chart, 'mouseout', point); + await jasmine.triggerMouseEvent(chart, 'mouseout', point); + await jasmine.triggerMouseEvent(chart, 'mousemove', point); + var tooltip = chart.tooltip; + expect(tooltip.dataPoints.length).toBe(1); + expect(tooltip.x).toBeGreaterThanOrEqual(0); + if (tooltip.width <= chart.width) { + expect(tooltip.x + tooltip.width).toBeLessThanOrEqual(chart.width); + } + expect(tooltip.caretX).toBeCloseToPixel(tooltipPosition.x); + // if tooltip is longer than chart area then all tests done + if (left === 0) { + throw new Error('max iterations reached'); + } + if (tooltip.width < chart.width) { + await recursive(left - 1); + } } - recursive(count); + await recursive(count); } // Trigger an event over top of the slice for (var slice = 0; slice < 2; slice++) { - testSlice(slice, 20); + await testSlice(slice, 20); } }); - it('Should split newlines into separate lines in user callbacks', function(done) { + it('Should split newlines into separate lines in user callbacks', async function() { var chart = window.acquireChart({ type: 'line', data: { @@ -1244,91 +1173,87 @@ describe('Plugin.Tooltip', 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; - var defaults = Chart.defaults; - - expect(tooltip.options.xPadding).toEqual(6); - expect(tooltip.options.yPadding).toEqual(6); - expect(tooltip.xAlign).toEqual('center'); - expect(tooltip.yAlign).toEqual('top'); - - expect(tooltip.options.bodyFont).toEqual(jasmine.objectContaining({ - family: defaults.font.family, - style: defaults.font.style, - size: defaults.font.size, - })); - - expect(tooltip.options).toEqual(jasmine.objectContaining({ - bodyAlign: 'left', - bodySpacing: 2, - })); - - expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({ - family: defaults.font.family, - style: 'bold', - size: defaults.font.size, - })); - - expect(tooltip.options).toEqual(jasmine.objectContaining({ - titleAlign: 'left', - titleSpacing: 2, - titleMarginBottom: 6, - })); - - expect(tooltip.options.footerFont).toEqual(jasmine.objectContaining({ - family: defaults.font.family, - style: 'bold', - size: defaults.font.size, - })); - - expect(tooltip.options).toEqual(jasmine.objectContaining({ - footerAlign: 'left', - footerSpacing: 2, - footerMarginTop: 6, - })); - - expect(tooltip.options).toEqual(jasmine.objectContaining({ - // Appearance - caretSize: 5, - caretPadding: 2, - cornerRadius: 6, - backgroundColor: 'rgba(0,0,0,0.8)', - multiKeyBackground: '#fff', - })); - - expect(tooltip).toEqual(jasmine.objectContaining({ - opacity: 1, - - // Text - title: ['beforeTitle', 'newline', 'title', 'newline', 'afterTitle', 'newline'], - beforeBody: ['beforeBody', 'newline'], - body: [{ - before: ['beforeLabel', 'newline'], - lines: ['label'], - after: ['afterLabel', 'newline'] - }, { - before: ['beforeLabel', 'newline'], - lines: ['label'], - after: ['afterLabel', 'newline'] - }], - afterBody: ['afterBody', 'newline'], - footer: ['beforeFooter', 'newline', 'footer', 'newline', 'afterFooter', 'newline'], - labelTextColors: ['labelTextColor', 'labelTextColor'], - labelColors: [{ - borderColor: defaults.borderColor, - backgroundColor: defaults.backgroundColor - }, { - borderColor: defaults.borderColor, - backgroundColor: defaults.backgroundColor - }] - })); + await jasmine.triggerMouseEvent(chart, 'mousemove', point); - done(); - }); + // Check and see if tooltip was displayed + var tooltip = chart.tooltip; + var defaults = Chart.defaults; - jasmine.triggerMouseEvent(chart, 'mousemove', point); + expect(tooltip.options.xPadding).toEqual(6); + expect(tooltip.options.yPadding).toEqual(6); + expect(tooltip.xAlign).toEqual('center'); + expect(tooltip.yAlign).toEqual('top'); + + expect(tooltip.options.bodyFont).toEqual(jasmine.objectContaining({ + family: defaults.font.family, + style: defaults.font.style, + size: defaults.font.size, + })); + + expect(tooltip.options).toEqual(jasmine.objectContaining({ + bodyAlign: 'left', + bodySpacing: 2, + })); + + expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({ + family: defaults.font.family, + style: 'bold', + size: defaults.font.size, + })); + + expect(tooltip.options).toEqual(jasmine.objectContaining({ + titleAlign: 'left', + titleSpacing: 2, + titleMarginBottom: 6, + })); + + expect(tooltip.options.footerFont).toEqual(jasmine.objectContaining({ + family: defaults.font.family, + style: 'bold', + size: defaults.font.size, + })); + + expect(tooltip.options).toEqual(jasmine.objectContaining({ + footerAlign: 'left', + footerSpacing: 2, + footerMarginTop: 6, + })); + + expect(tooltip.options).toEqual(jasmine.objectContaining({ + // Appearance + caretSize: 5, + caretPadding: 2, + cornerRadius: 6, + backgroundColor: 'rgba(0,0,0,0.8)', + multiKeyBackground: '#fff', + })); + + expect(tooltip).toEqual(jasmine.objectContaining({ + opacity: 1, + + // Text + title: ['beforeTitle', 'newline', 'title', 'newline', 'afterTitle', 'newline'], + beforeBody: ['beforeBody', 'newline'], + body: [{ + before: ['beforeLabel', 'newline'], + lines: ['label'], + after: ['afterLabel', 'newline'] + }, { + before: ['beforeLabel', 'newline'], + lines: ['label'], + after: ['afterLabel', 'newline'] + }], + afterBody: ['afterBody', 'newline'], + footer: ['beforeFooter', 'newline', 'footer', 'newline', 'afterFooter', 'newline'], + labelTextColors: ['labelTextColor', 'labelTextColor'], + labelColors: [{ + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor + }, { + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor + }] + })); }); describe('text align', function() {