From cd38c2364e7aef30a481e89b6e971b7a3a3e89f0 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Thu, 2 Dec 2021 13:53:26 +0100 Subject: [PATCH 1/8] changes test cases specs adding common events tests --- test/index.js | 88 ++++++++++++++++++++++++++++++++++++++ test/specs/box.spec.js | 13 ++++++ test/specs/ellipse.spec.js | 13 ++++++ test/specs/events.spec.js | 59 ------------------------- test/specs/line.spec.js | 38 ++++++++++++++++ test/specs/polygon.spec.js | 77 ++++++--------------------------- 6 files changed, 165 insertions(+), 123 deletions(-) delete mode 100644 test/specs/events.spec.js diff --git a/test/index.js b/test/index.js index 8855511fa..351cb9355 100644 --- a/test/index.js +++ b/test/index.js @@ -4,6 +4,7 @@ window.devicePixelRatio = 1; window.acquireChart = acquireChart; window.afterEvent = afterEvent; window.triggerMouseEvent = triggerMouseEvent; +window.testEvents = testEvents; jasmine.fixtures = specsFromFixtures; @@ -14,3 +15,90 @@ beforeEach(function() { afterEach(function() { releaseCharts(); }); + +function testEvents(options, innerNode) { + const descr = innerNode ? options.type + '.' + innerNode : 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 click events on ${descr}`, function(done) { + const enterSpy = jasmine.createSpy('enter'); + const clickSpy = jasmine.createSpy('click'); + + options.enter = enterSpy; + options.click = clickSpy; + chartOptions.options.plugins.annotation.annotations = [options]; + + const chart = window.acquireChart(chartOptions); + const eventPoint = getEventPoint(chart, innerNode); + + window.triggerMouseEvent(chart, 'mousemove', eventPoint); + window.afterEvent(chart, 'mousemove', function() { + expect(enterSpy.calls.count()).toBe(1); + window.afterEvent(chart, 'click', function() { + expect(clickSpy.calls.count()).toBe(1); + delete options.enter; + delete options.click; + done(); + }); + window.triggerMouseEvent(chart, 'click', eventPoint); + }); + }); + + it(`should detect dbl click 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, innerNode); + + 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); + }); + }); + +} + +function getEventPoint(chart, innerNode) { + const Annotation = window['chartjs-plugin-annotation']; + const state = Annotation._getState(chart); + const annotation = state.elements[0]; + const element = innerNode ? annotation[innerNode] : annotation; + return innerNode ? {x: element.x + element.width / 2, y: element.y} : element.getCenterPoint(); +} 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/ellipse.spec.js b/test/specs/ellipse.spec.js index 9f112a3da..822450387 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: 'ellispe', + 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/line.spec.js b/test/specs/line.spec.js index caec9bd59..a205b4283 100644 --- a/test/specs/line.spec.js +++ b/test/specs/line.spec.js @@ -1,3 +1,41 @@ 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/polygon.spec.js b/test/specs/polygon.spec.js index 94139029a..78620a6ba 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, }); - }); + } }); From b7545763f73895cd4b3ac9d2b32aef7e36df1c66 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Thu, 2 Dec 2021 15:39:43 +0100 Subject: [PATCH 2/8] Add test cases --- test/index.js | 6 +- test/specs/label.spec.js | 304 ++++--------------------------------- test/specs/line.spec.js | 1 + test/specs/point.spec.js | 103 ++----------- test/specs/polygon.spec.js | 2 +- 5 files changed, 40 insertions(+), 376 deletions(-) diff --git a/test/index.js b/test/index.js index 351cb9355..dbd167def 100644 --- a/test/index.js +++ b/test/index.js @@ -77,7 +77,7 @@ function testEvents(options, innerNode) { const chart = window.acquireChart(chartOptions); const eventPoint = getEventPoint(chart, innerNode); - + let dblClick = false; window.afterEvent(chart, 'click', function() { if (!dblClick) { @@ -91,8 +91,8 @@ function testEvents(options, innerNode) { }); window.triggerMouseEvent(chart, 'click', eventPoint); }); - }); + }); } function getEventPoint(chart, innerNode) { @@ -100,5 +100,5 @@ function getEventPoint(chart, innerNode) { const state = Annotation._getState(chart); const annotation = state.elements[0]; const element = innerNode ? annotation[innerNode] : annotation; - return innerNode ? {x: element.x + element.width / 2, y: element.y} : element.getCenterPoint(); + return innerNode ? {x: element.x, y: element.y} : element.getCenterPoint(); } 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 a205b4283..6a7d20c34 100644 --- a/test/specs/line.spec.js +++ b/test/specs/line.spec.js @@ -1,5 +1,6 @@ describe('Line annotation', function() { describe('auto', jasmine.fixtures('line')); + const options = { type: 'line', id: 'test', 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 78620a6ba..9b561e30a 100644 --- a/test/specs/polygon.spec.js +++ b/test/specs/polygon.spec.js @@ -1,7 +1,7 @@ describe('Polygon annotation', function() { describe('auto', jasmine.fixtures('polygon')); - for (let i=3; i<=10; i++){ + for (let i = 3; i <= 10; i++) { window.testEvents({ type: 'polygon', id: 'test', From 10beb3c6ce3da4a7211f0838b326bcca5ff475d9 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Thu, 2 Dec 2021 15:52:47 +0100 Subject: [PATCH 3/8] dedicated source file for common events tests --- test/events.js | 86 ++++++++++++++++++++++++++++++++++++++++++++++++ test/index.js | 88 +------------------------------------------------- 2 files changed, 87 insertions(+), 87 deletions(-) create mode 100644 test/events.js diff --git a/test/events.js b/test/events.js new file mode 100644 index 000000000..693831765 --- /dev/null +++ b/test/events.js @@ -0,0 +1,86 @@ +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 click events on ${descr}`, function(done) { + const enterSpy = jasmine.createSpy('enter'); + const clickSpy = jasmine.createSpy('click'); + + options.enter = enterSpy; + options.click = clickSpy; + 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.afterEvent(chart, 'click', function() { + expect(clickSpy.calls.count()).toBe(1); + delete options.enter; + delete options.click; + done(); + }); + window.triggerMouseEvent(chart, 'click', eventPoint); + }); + }); + + it(`should detect dbl click 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); + }); + + }); +} + +function getEventPoint(chart, innerElement) { + const Annotation = window['chartjs-plugin-annotation']; + const state = Annotation._getState(chart); + const annotation = state.elements[0]; + const element = innerElement ? annotation[innerElement] : annotation; + return innerElement ? element : element.getCenterPoint(); +} \ No newline at end of file diff --git a/test/index.js b/test/index.js index dbd167def..248639abd 100644 --- a/test/index.js +++ b/test/index.js @@ -1,4 +1,5 @@ import {acquireChart, addMatchers, releaseCharts, specsFromFixtures, triggerMouseEvent, afterEvent} from 'chartjs-test-utils'; +import {testEvents} from './events'; window.devicePixelRatio = 1; window.acquireChart = acquireChart; @@ -15,90 +16,3 @@ beforeEach(function() { afterEach(function() { releaseCharts(); }); - -function testEvents(options, innerNode) { - const descr = innerNode ? options.type + '.' + innerNode : 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 click events on ${descr}`, function(done) { - const enterSpy = jasmine.createSpy('enter'); - const clickSpy = jasmine.createSpy('click'); - - options.enter = enterSpy; - options.click = clickSpy; - chartOptions.options.plugins.annotation.annotations = [options]; - - const chart = window.acquireChart(chartOptions); - const eventPoint = getEventPoint(chart, innerNode); - - window.triggerMouseEvent(chart, 'mousemove', eventPoint); - window.afterEvent(chart, 'mousemove', function() { - expect(enterSpy.calls.count()).toBe(1); - window.afterEvent(chart, 'click', function() { - expect(clickSpy.calls.count()).toBe(1); - delete options.enter; - delete options.click; - done(); - }); - window.triggerMouseEvent(chart, 'click', eventPoint); - }); - }); - - it(`should detect dbl click 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, innerNode); - - 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); - }); - - }); -} - -function getEventPoint(chart, innerNode) { - const Annotation = window['chartjs-plugin-annotation']; - const state = Annotation._getState(chart); - const annotation = state.elements[0]; - const element = innerNode ? annotation[innerNode] : annotation; - return innerNode ? {x: element.x, y: element.y} : element.getCenterPoint(); -} From 83eaa629539e21e60bff5bf49411038c4c2db2a8 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Thu, 2 Dec 2021 16:16:36 +0100 Subject: [PATCH 4/8] improves objects use in events.js and test case difference percentage --- test/events.js | 2 +- test/fixtures/label/borderDash.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/test/events.js b/test/events.js index 693831765..260cd339b 100644 --- a/test/events.js +++ b/test/events.js @@ -83,4 +83,4 @@ function getEventPoint(chart, innerElement) { const annotation = state.elements[0]; const element = innerElement ? annotation[innerElement] : annotation; return innerElement ? element : element.getCenterPoint(); -} \ No newline at end of file +} 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: { From ba059dcdf8fa7f7ccab95b408fd4b3324ad2dc50 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Thu, 2 Dec 2021 17:23:04 +0100 Subject: [PATCH 5/8] adds additional event test cases and review the display spec --- test/events.js | 88 +++++++++++++++++++++++++++++++---- test/specs/display.spec.js | 95 +++++++++++++++++--------------------- 2 files changed, 121 insertions(+), 62 deletions(-) diff --git a/test/events.js b/test/events.js index 260cd339b..18472dd7e 100644 --- a/test/events.js +++ b/test/events.js @@ -26,12 +26,12 @@ export function testEvents(options, innerElement) { describe('events', function() { - it(`should detect enter and click events on ${descr}`, function(done) { + it(`should detect enter and leave events on ${descr}`, function(done) { const enterSpy = jasmine.createSpy('enter'); - const clickSpy = jasmine.createSpy('click'); + const leaveSpy = jasmine.createSpy('leave'); options.enter = enterSpy; - options.click = clickSpy; + options.leave = leaveSpy; chartOptions.options.plugins.annotation.annotations = [options]; const chart = window.acquireChart(chartOptions); @@ -40,17 +40,39 @@ export function testEvents(options, innerElement) { window.triggerMouseEvent(chart, 'mousemove', eventPoint); window.afterEvent(chart, 'mousemove', function() { expect(enterSpy.calls.count()).toBe(1); - window.afterEvent(chart, 'click', function() { - expect(clickSpy.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.click; + delete options.leave; done(); }); - window.triggerMouseEvent(chart, 'click', eventPoint); }); }); - it(`should detect dbl click on ${descr}`, function(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; @@ -74,13 +96,59 @@ export function testEvents(options, innerElement) { 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; + window.triggerMouseEvent(chart, 'click', eventPoint); + } 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 getEventPoint(chart, innerElement) { +function getElement(chart) { const Annotation = window['chartjs-plugin-annotation']; const state = Annotation._getState(chart); - const annotation = state.elements[0]; + 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/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(); + }); }); }); From e878c7811694862d6c49baf075b538300063d8b6 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Thu, 2 Dec 2021 17:23:50 +0100 Subject: [PATCH 6/8] fixes lint issue --- test/events.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/events.js b/test/events.js index 18472dd7e..38cac0b55 100644 --- a/test/events.js +++ b/test/events.js @@ -128,7 +128,7 @@ export function testEvents(options, innerElement) { 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); From 3387587a9c95a1c6656cc7ab882a36408d433595 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Thu, 2 Dec 2021 17:32:25 +0100 Subject: [PATCH 7/8] adds timeout to simulate 2 clicks instead of dblclick --- test/events.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/test/events.js b/test/events.js index 38cac0b55..fae5769c7 100644 --- a/test/events.js +++ b/test/events.js @@ -110,7 +110,9 @@ export function testEvents(options, innerElement) { window.afterEvent(chart, 'click', function() { if (!dblClick) { dblClick = true; - window.triggerMouseEvent(chart, 'click', eventPoint); + setTimeout(() => { + window.triggerMouseEvent(chart, 'click', eventPoint); + }, 500); } else { expect(dblClickSpy.calls.count()).toBe(0); delete options.dblclick; From ff246d30937b11b97595cc2a03605ba646b7d78a Mon Sep 17 00:00:00 2001 From: stockiNail Date: Sat, 4 Dec 2021 20:03:28 +0100 Subject: [PATCH 8/8] fixes typo on annotation type for ellipse --- test/specs/ellipse.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/specs/ellipse.spec.js b/test/specs/ellipse.spec.js index 822450387..494685fb1 100644 --- a/test/specs/ellipse.spec.js +++ b/test/specs/ellipse.spec.js @@ -2,7 +2,7 @@ describe('Ellipse annotation', function() { describe('auto', jasmine.fixtures('ellipse')); window.testEvents({ - type: 'ellispe', + type: 'ellipse', id: 'test', xScaleID: 'x', yScaleID: 'y',