diff --git a/test/events.js b/test/events.js new file mode 100644 index 000000000..fae5769c7 --- /dev/null +++ b/test/events.js @@ -0,0 +1,156 @@ +export function testEvents(options, innerElement) { + const descr = innerElement ? options.type + '.' + innerElement : options.type; + const chartOptions = { + type: 'scatter', + options: { + animation: false, + scales: { + x: { + display: false, + min: 0, + max: 10 + }, + y: { + display: false, + min: 0, + max: 10 + } + }, + plugins: { + legend: false, + annotation: { + } + } + }, + }; + + describe('events', function() { + + it(`should detect enter and leave events on ${descr}`, function(done) { + const enterSpy = jasmine.createSpy('enter'); + const leaveSpy = jasmine.createSpy('leave'); + + options.enter = enterSpy; + options.leave = leaveSpy; + chartOptions.options.plugins.annotation.annotations = [options]; + + const chart = window.acquireChart(chartOptions); + const eventPoint = getEventPoint(chart, innerElement); + + window.triggerMouseEvent(chart, 'mousemove', eventPoint); + window.afterEvent(chart, 'mousemove', function() { + expect(enterSpy.calls.count()).toBe(1); + + window.triggerMouseEvent(chart, 'mousemove', { + x: 0, + y: 0 + }); + + window.afterEvent(chart, 'mousemove', function() { + expect(leaveSpy.calls.count()).toBe(1); + delete options.enter; + delete options.leave; + done(); + }); + }); + }); + + it(`should detect click event on ${descr}`, function(done) { + const clickSpy = jasmine.createSpy('click'); + + options.click = clickSpy; + chartOptions.options.plugins.annotation.annotations = [options]; + + const chart = window.acquireChart(chartOptions); + const eventPoint = getEventPoint(chart, innerElement); + + window.afterEvent(chart, 'click', function() { + expect(clickSpy.calls.count()).toBe(1); + delete options.click; + done(); + }); + window.triggerMouseEvent(chart, 'click', eventPoint); + }); + + it(`should detect dbl click event on ${descr}`, function(done) { + const dblClickSpy = jasmine.createSpy('dblclick'); + + options.dblclick = dblClickSpy; + chartOptions.options.plugins.annotation.dblClickSpeed = 1000; + chartOptions.options.plugins.annotation.annotations = [options]; + + const chart = window.acquireChart(chartOptions); + const eventPoint = getEventPoint(chart, innerElement); + + let dblClick = false; + window.afterEvent(chart, 'click', function() { + if (!dblClick) { + dblClick = true; + window.triggerMouseEvent(chart, 'click', eventPoint); + } else { + expect(dblClickSpy.calls.count()).toBe(1); + delete options.dblclick; + done(); + } + }); + window.triggerMouseEvent(chart, 'click', eventPoint); + }); + + it(`should detect a click event even if 2 clicks are fired on ${descr}`, function(done) { + const dblClickSpy = jasmine.createSpy('dblclick'); + + options.dblclick = dblClickSpy; + chartOptions.options.plugins.annotation.dblClickSpeed = 1; + chartOptions.options.plugins.annotation.annotations = [options]; + + const chart = window.acquireChart(chartOptions); + const eventPoint = getEventPoint(chart, innerElement); + + let dblClick = false; + window.afterEvent(chart, 'click', function() { + if (!dblClick) { + dblClick = true; + setTimeout(() => { + window.triggerMouseEvent(chart, 'click', eventPoint); + }, 500); + } else { + expect(dblClickSpy.calls.count()).toBe(0); + delete options.dblclick; + done(); + } + }); + window.triggerMouseEvent(chart, 'click', eventPoint); + }); + + if (!innerElement) { + it(`should center point in range on ${descr}`, function() { + chartOptions.options.plugins.annotation.annotations = [options]; + const chart = window.acquireChart(chartOptions); + const element = getElement(chart); + const center = element.getCenterPoint(); + expect(element.inRange(center.x, center.y)).toBe(true); + }); + + it(`shouldn't center point plus adjustment in range on ${descr}`, function() { + chartOptions.options.plugins.annotation.annotations = [options]; + const chart = window.acquireChart(chartOptions); + const element = getElement(chart); + const center = element.getCenterPoint(); + expect(element.inRange(center.x + center.width, center.y)).toBe(false); + }); + + } + }); +} + +function getElement(chart) { + const Annotation = window['chartjs-plugin-annotation']; + const state = Annotation._getState(chart); + return state.elements[0]; +} + +function getEventPoint(chart, innerElement) { + const annotation = getElement(chart); + const element = innerElement ? annotation[innerElement] : annotation; + return innerElement ? element : element.getCenterPoint(); +} diff --git a/test/fixtures/label/borderDash.js b/test/fixtures/label/borderDash.js index 3b28191ed..aaf35243e 100644 --- a/test/fixtures/label/borderDash.js +++ b/test/fixtures/label/borderDash.js @@ -1,5 +1,5 @@ module.exports = { - tolerance: 0.0075, + tolerance: 0.0099, config: { type: 'bar', options: { diff --git a/test/index.js b/test/index.js index 8855511fa..248639abd 100644 --- a/test/index.js +++ b/test/index.js @@ -1,9 +1,11 @@ import {acquireChart, addMatchers, releaseCharts, specsFromFixtures, triggerMouseEvent, afterEvent} from 'chartjs-test-utils'; +import {testEvents} from './events'; window.devicePixelRatio = 1; window.acquireChart = acquireChart; window.afterEvent = afterEvent; window.triggerMouseEvent = triggerMouseEvent; +window.testEvents = testEvents; jasmine.fixtures = specsFromFixtures; diff --git a/test/specs/box.spec.js b/test/specs/box.spec.js index 9c528fc5b..5c6ac5f72 100644 --- a/test/specs/box.spec.js +++ b/test/specs/box.spec.js @@ -1,3 +1,16 @@ describe('Box annotation', function() { describe('auto', jasmine.fixtures('box')); + + window.testEvents({ + type: 'box', + id: 'test', + xScaleID: 'x', + yScaleID: 'y', + xMin: 2, + yMin: 2, + xMax: 4, + yMax: 4, + borderWidth: 0 + }); + }); diff --git a/test/specs/display.spec.js b/test/specs/display.spec.js index 3e3b4c671..ce40bd6c7 100644 --- a/test/specs/display.spec.js +++ b/test/specs/display.spec.js @@ -1,61 +1,52 @@ describe('Display options', function() { - it('should not throw any exception', function() { - function createAndUpdateChart() { - const config = { - type: 'line', - data: { - labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], - datasets: [ - { - label: '# of Votes', - data: [12, 19, 3, 5, 2, 3] - } - ] - }, - options: { - scales: { - y: { - beginAtZero: true - } + ['box', 'ellipse', 'label', 'line', 'point', 'polygon'].forEach(function(key) { + it(`should not throw any exception changing display for ${key}`, function() { + function createChart() { + const config = { + type: 'line', + data: { + labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], + datasets: [ + { + label: '# of Votes', + data: [12, 19, 3, 5, 2, 3] + } + ] }, - plugins: { - annotation: { - drawTime: 'afterDatasetsDraw', - dblClickSpeed: 350, - annotations: { - my: { - display: true, - type: 'line', - scaleID: 'y', - value: 10, - borderColor: 'red', - borderWidth: 2 + options: { + scales: { + y: { + beginAtZero: true + } + }, + plugins: { + annotation: { + drawTime: 'afterDatasetsDraw', + dblClickSpeed: 350, + annotations: { + my: { + display: true, + type: key, + xScaleID: 'y' + } } } } } - } - }; - - var chart = acquireChart(config); - - chart.update(); - chart.options.plugins.annotation.annotations.my.display = false; - chart.update(); - chart.options.plugins.annotation.annotations.my.display = function() { - return true; - }; - chart.update(); - chart.options.plugins.annotation.annotations.my.display = function() { - return false; - }; - chart.update(); - chart.options.plugins.annotation.annotations.my.display = function() { - return null; - }; - chart.update(); - } - expect(createAndUpdateChart).not.toThrow(); + }; + const chart = acquireChart(config); + chart.update(); + chart.options.plugins.annotation.annotations.my.display = false; + chart.update(); + chart.options.plugins.annotation.annotations.my.display = () => true; + chart.update(); + chart.options.plugins.annotation.annotations.my.display = () => false; + chart.update(); + chart.options.plugins.annotation.annotations.my.display = () => null; + chart.update(); + } + expect(createChart).not.toThrow(); + }); }); }); diff --git a/test/specs/ellipse.spec.js b/test/specs/ellipse.spec.js index 9f112a3da..494685fb1 100644 --- a/test/specs/ellipse.spec.js +++ b/test/specs/ellipse.spec.js @@ -1,3 +1,16 @@ describe('Ellipse annotation', function() { describe('auto', jasmine.fixtures('ellipse')); + + window.testEvents({ + type: 'ellipse', + id: 'test', + xScaleID: 'x', + yScaleID: 'y', + xMin: 2, + yMin: 2, + xMax: 4, + yMax: 4, + borderWidth: 0 + }); + }); diff --git a/test/specs/events.spec.js b/test/specs/events.spec.js deleted file mode 100644 index 82d1eb505..000000000 --- a/test/specs/events.spec.js +++ /dev/null @@ -1,59 +0,0 @@ -describe('Event callbacks', function() { - - it('should not throw any exception', function() { - function createAndUpdateChart() { - const config = { - type: 'line', - data: { - labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], - datasets: [ - { - label: '# of Votes', - data: [12, 19, 3, 5, 2, 3] - } - ] - }, - options: { - scales: { - y: { - beginAtZero: true - } - }, - plugins: { - annotation: { - drawTime: 'afterDatasetsDraw', - dblClickSpeed: 350, - annotations: { - my: { - display: true, - type: 'line', - scaleID: 'y', - value: 10, - borderColor: 'red', - borderWidth: 2, - click() { - } - }, - mydisable: { - display: false, - type: 'line', - scaleID: 'y', - value: 20, - borderColor: 'red', - borderWidth: 2, - click() { - } - } - } - } - } - } - }; - - var chart = acquireChart(config); - - chart.update(); - } - expect(createAndUpdateChart).not.toThrow(); - }); -}); diff --git a/test/specs/label.spec.js b/test/specs/label.spec.js index e421a76c9..ba06b7265 100644 --- a/test/specs/label.spec.js +++ b/test/specs/label.spec.js @@ -1,283 +1,31 @@ describe('Label annotation', function() { describe('auto', jasmine.fixtures('label')); - describe('events', function() { - const Annotation = window['chartjs-plugin-annotation']; - - it('should detect enter and click events on label', function(done) { - const enterSpy = jasmine.createSpy('enter'); - const clickSpy = jasmine.createSpy('click'); - - const chart = window.acquireChart({ - type: 'scatter', - options: { - animation: false, - scales: { - x: { - display: false, - min: 0, - max: 10 - }, - y: { - display: false, - min: 0, - max: 10 - } - }, - plugins: { - legend: false, - annotation: { - annotations: { - label: { - type: 'label', - xScaleID: 'x', - yScaleID: 'y', - xValue: 5, - yValue: 5, - content: ['This is my text', 'This is my text, row 2, longer than other', 'This is my text, row 3'], - position: { - x: 'center', - y: 'center' - }, - borderWidth: 0, - enter: enterSpy, - click: clickSpy, - } - } - } - } - }, - }); - - const state = Annotation._getState(chart); - const label = state.elements[0]; - - window.triggerMouseEvent(chart, 'mousemove', label); - - window.afterEvent(chart, 'mousemove', function() { - expect(enterSpy.calls.count()).toBe(1); - - window.afterEvent(chart, 'click', function() { - expect(clickSpy.calls.count()).toBe(1); - - done(); - }); - - window.triggerMouseEvent(chart, 'click', label); - - }); - - }); - - it('should detect dbl click on label', function(done) { - const dblClickSpy = jasmine.createSpy('dblclick'); - - const chart = window.acquireChart({ - type: 'scatter', - options: { - animation: false, - scales: { - x: { - display: false, - min: 0, - max: 10 - }, - y: { - display: false, - min: 0, - max: 10 - } - }, - plugins: { - legend: false, - annotation: { - dblClickSpeed: 1000, - annotations: { - label: { - type: 'label', - xScaleID: 'x', - yScaleID: 'y', - xValue: 5, - yValue: 5, - content: ['This is my text', 'This is my text, row 2, longer than other', 'This is my text, row 3'], - position: { - x: 'center', - y: 'center' - }, - borderWidth: 0, - dblclick: dblClickSpy, - } - } - } - } - }, - }); - - const state = Annotation._getState(chart); - const label = state.elements[0]; - - let clicks = false; - window.afterEvent(chart, 'click', function() { - if (!clicks) { - clicks = true; - window.triggerMouseEvent(chart, 'click', label); - } else { - expect(dblClickSpy.calls.count()).toBe(1); - - done(); - } - }); - - window.triggerMouseEvent(chart, 'click', label); - - }); - - it('should detect enter and click events on point', function(done) { - const enterSpy = jasmine.createSpy('enter'); - const clickSpy = jasmine.createSpy('click'); - - const chart = window.acquireChart({ - type: 'scatter', - options: { - animation: false, - scales: { - x: { - display: false, - min: 0, - max: 10 - }, - y: { - display: false, - min: 0, - max: 10 - } - }, - plugins: { - legend: false, - annotation: { - annotations: { - label: { - type: 'label', - xScaleID: 'x', - yScaleID: 'y', - xValue: 5, - yValue: 5, - content: ['This is my text', 'This is my text, row 2, longer than other', 'This is my text, row 3'], - position: { - x: 'center', - y: 'center' - }, - borderWidth: 0, - xAdjust: 200, - yAdjust: -200, - callout: { - enabled: true, - }, - point: { - enabled: true, - radius: 30 - }, - enter: enterSpy, - click: clickSpy, - } - } - } - } - }, - }); - - const state = Annotation._getState(chart); - const point = state.elements[0].point; - - window.triggerMouseEvent(chart, 'mousemove', point); - - window.afterEvent(chart, 'mousemove', function() { - expect(enterSpy.calls.count()).toBe(1); - - window.afterEvent(chart, 'click', function() { - expect(clickSpy.calls.count()).toBe(1); - - done(); - }); - - window.triggerMouseEvent(chart, 'click', point); - - }); - - }); - - it('should detect dbl clik event on point', function(done) { - const dblClickSpy = jasmine.createSpy('dblclick'); - - const chart = window.acquireChart({ - type: 'scatter', - options: { - animation: false, - scales: { - x: { - display: false, - min: 0, - max: 10 - }, - y: { - display: false, - min: 0, - max: 10 - } - }, - plugins: { - legend: false, - annotation: { - dblClickSpeed: 1000, - annotations: { - label: { - type: 'label', - xScaleID: 'x', - yScaleID: 'y', - xValue: 5, - yValue: 5, - content: ['This is my text', 'This is my text, row 2, longer than other', 'This is my text, row 3'], - position: { - x: 'center', - y: 'center' - }, - borderWidth: 0, - xAdjust: 200, - yAdjust: -200, - callout: { - enabled: true, - }, - point: { - enabled: true, - radius: 30 - }, - dblclick: dblClickSpy, - } - } - } - } - }, - }); - - const state = Annotation._getState(chart); - const point = state.elements[0].point; - - let clicks = false; - window.afterEvent(chart, 'click', function() { - if (!clicks) { - clicks = true; - window.triggerMouseEvent(chart, 'click', point); - } else { - expect(dblClickSpy.calls.count()).toBe(1); - - done(); - } - }); - - window.triggerMouseEvent(chart, 'click', point); - - }); - - }); + const options = { + type: 'label', + id: 'test', + xScaleID: 'x', + yScaleID: 'y', + xValue: 5, + yValue: 5, + content: 'This is my text', + position: 'center', + borderWidth: 1, + padding: 6, + xAdjust: 0, + yAdjust: -100, + callout: { + enabled: false, + }, + point: { + enabled: true, + radius: 20 + }, + font: {} + }; + + window.testEvents(options); + + window.testEvents(options, 'point'); }); diff --git a/test/specs/line.spec.js b/test/specs/line.spec.js index caec9bd59..6a7d20c34 100644 --- a/test/specs/line.spec.js +++ b/test/specs/line.spec.js @@ -1,3 +1,42 @@ describe('Line annotation', function() { describe('auto', jasmine.fixtures('line')); + + const options = { + type: 'line', + id: 'test', + scaleID: 'x', + value: 2, + borderWidth: 6, + label: { + enabled: true, + content: 'This is my label', + rotation: 0 + } + }; + + window.testEvents(options); + + window.testEvents(options, 'labelRect'); + + const optionsLimit = { + type: 'line', + id: 'test', + xScaleID: 'x', + yScaleID: 'y', + xMin: 0, + yMin: 2, + xMax: 10, + yMax: 2, + borderWidth: 6, + label: { + enabled: true, + content: 'This is my label', + rotation: 0 + } + }; + + window.testEvents(optionsLimit); + + window.testEvents(optionsLimit, 'labelRect'); + }); diff --git a/test/specs/point.spec.js b/test/specs/point.spec.js index 8984f6ecd..fac61c4a1 100644 --- a/test/specs/point.spec.js +++ b/test/specs/point.spec.js @@ -1,100 +1,15 @@ describe('Point annotation', function() { describe('auto', jasmine.fixtures('point')); - describe('events', function() { - const Annotation = window['chartjs-plugin-annotation']; - - it('should detect events', function(done) { - const enterSpy = jasmine.createSpy('enter'); - const leaveSpy = jasmine.createSpy('leave'); - - const chart = window.acquireChart({ - type: 'scatter', - options: { - animation: false, - scales: { - x: { - display: false, - min: 0, - max: 10 - }, - y: { - display: false, - min: 0, - max: 10 - } - }, - plugins: { - legend: false, - annotation: { - annotations: { - point: { - type: 'point', - radius: 10, - borderWidth: 5, - enter: enterSpy, - leave: leaveSpy - }, - point2: { - type: 'point', - xScaleID: 'x', - yScaleID: 'y', - xValue: 8, - yValue: 8, - radius: 0, - borderWidth: 0, - enter: enterSpy - } - } - } - } - }, - }); - - const state = Annotation._getState(chart); - const point = state.elements[0]; - const point2 = state.elements[1]; - - // should be centered when there are no scales or values - expect(point.x).toEqual(256); - expect(point.y).toEqual(256); - - expect(enterSpy.calls.count()).toBe(0); - expect(leaveSpy.calls.count()).toBe(0); - - window.triggerMouseEvent(chart, 'mousemove', point); - - window.afterEvent(chart, 'mousemove', function() { - expect(enterSpy.calls.count()).toBe(1); - - window.triggerMouseEvent(chart, 'mousemove', { - x: point.x + 16, - y: point.y - }); - - window.afterEvent(chart, 'mousemove', function() { - expect(leaveSpy.calls.count()).toBe(1); - - window.triggerMouseEvent(chart, 'mousemove', { - x: point.x + 14.5, - y: point.y - }); - - window.afterEvent(chart, 'mousemove', function() { - expect(enterSpy.calls.count()).toBe(2); - - window.triggerMouseEvent(chart, 'mousemove', point2); - - window.afterEvent(chart, 'mousemove', function() { - expect(leaveSpy.calls.count()).toBe(2); - expect(enterSpy.calls.count()).toBe(2); - done(); - }); - }); - }); - }); - - }); + window.testEvents({ + type: 'point', + id: 'test', + xScaleID: 'x', + yScaleID: 'y', + xValue: 8, + yValue: 8, + radius: 30, + borderWidth: 5 }); describe('applying defaults', function() { diff --git a/test/specs/polygon.spec.js b/test/specs/polygon.spec.js index 94139029a..9b561e30a 100644 --- a/test/specs/polygon.spec.js +++ b/test/specs/polygon.spec.js @@ -1,69 +1,18 @@ describe('Polygon annotation', function() { describe('auto', jasmine.fixtures('polygon')); - describe('events', function() { - const Annotation = window['chartjs-plugin-annotation']; - - it('should detect events', function(done) { - const enterSpy = jasmine.createSpy('enter'); - const clickSpy = jasmine.createSpy('click'); - - const chart = window.acquireChart({ - type: 'scatter', - options: { - animation: false, - scales: { - x: { - display: false, - min: 0, - max: 10 - }, - y: { - display: false, - min: 0, - max: 10 - } - }, - plugins: { - legend: false, - annotation: { - annotations: { - square: { - type: 'polygon', - xScaleID: 'x', - yScaleID: 'y', - xValue: 8, - yValue: 8, - sides: 4, - rotation: 45, - radius: 50, - borderWidth: 0, - enter: enterSpy, - click: clickSpy - } - } - } - } - }, - }); - - const state = Annotation._getState(chart); - const square = state.elements[0]; - - window.triggerMouseEvent(chart, 'mousemove', square); - - window.afterEvent(chart, 'mousemove', function() { - expect(enterSpy.calls.count()).toBe(1); - - window.afterEvent(chart, 'click', function() { - expect(clickSpy.calls.count()).toBe(1); - done(); - }); - - window.triggerMouseEvent(chart, 'click', square); - - }); - + for (let i = 3; i <= 10; i++) { + window.testEvents({ + type: 'polygon', + id: 'test', + xScaleID: 'x', + yScaleID: 'y', + xValue: 8, + yValue: 8, + sides: i, + rotation: 45, + radius: 50, + borderWidth: 0, }); - }); + } });