From: Evert Timberg Date: Sat, 29 Aug 2015 12:53:42 +0000 (-0400) Subject: Rectangle element tests X-Git-Tag: 2.0.0-alpha4~36^2~2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=26684b6371cca9db250edc9e7c0a056fb8081d4d;p=thirdparty%2FChart.js.git Rectangle element tests --- diff --git a/src/elements/element.rectangle.js b/src/elements/element.rectangle.js index 10682b1c0..3d9539eb9 100644 --- a/src/elements/element.rectangle.js +++ b/src/elements/element.rectangle.js @@ -55,15 +55,26 @@ }, inRange: function(mouseX, mouseY) { var vm = this._view; - if (vm.y < vm.base) { - return (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) && (mouseY >= vm.y && mouseY <= vm.base); - } else { - return (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) && (mouseY >= vm.base && mouseY <= vm.y); - } + var inRange = false; + + if (vm) { + if (vm.y < vm.base) { + inRange = (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) && (mouseY >= vm.y && mouseY <= vm.base); + } else { + inRange = (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) && (mouseY >= vm.base && mouseY <= vm.y); + } + } + + return inRange; }, inLabelRange: function(mouseX) { var vm = this._view; - return (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2); + + if (vm) { + return (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2); + } else { + return false; + } }, tooltipPosition: function() { var vm = this._view; diff --git a/test/element.rectangle.tests.js b/test/element.rectangle.tests.js new file mode 100644 index 000000000..f8bd51efd --- /dev/null +++ b/test/element.rectangle.tests.js @@ -0,0 +1,246 @@ +// Test the rectangle element + +describe('Rectangle element tests', function() { + it ('Should be constructed', function() { + var rectangle = new Chart.elements.Rectangle({ + _datasetIndex: 2, + _index: 1 + }); + + expect(rectangle).not.toBe(undefined); + expect(rectangle._datasetIndex).toBe(2); + expect(rectangle._index).toBe(1); + }); + + it ('Should correctly identify as in range', function() { + var rectangle = new Chart.elements.Rectangle({ + _datasetIndex: 2, + _index: 1 + }); + + // Safely handles if these are called before the viewmodel is instantiated + expect(rectangle.inRange(5)).toBe(false); + expect(rectangle.inLabelRange(5)).toBe(false); + + // Attach a view object as if we were the controller + rectangle._view = { + base: 0, + width: 4, + x: 10, + y: 15 + }; + + expect(rectangle.inRange(10, 15)).toBe(true); + expect(rectangle.inRange(10, 10)).toBe(true); + expect(rectangle.inRange(10, 16)).toBe(false); + expect(rectangle.inRange(5, 5)).toBe(false); + + expect(rectangle.inLabelRange(5)).toBe(false); + expect(rectangle.inLabelRange(7)).toBe(false); + expect(rectangle.inLabelRange(10)).toBe(true); + expect(rectangle.inLabelRange(12)).toBe(true); + expect(rectangle.inLabelRange(15)).toBe(false); + expect(rectangle.inLabelRange(20)).toBe(false); + + // Test when the y is below the base (negative bar) + var negativeRectangle = new Chart.elements.Rectangle({ + _datasetIndex: 2, + _index: 1 + }); + + // Attach a view object as if we were the controller + negativeRectangle._view = { + base: 0, + width: 4, + x: 10, + y: -15 + }; + + expect(negativeRectangle.inRange(10, -16)).toBe(false); + expect(negativeRectangle.inRange(10, 1)).toBe(false); + expect(negativeRectangle.inRange(10, -5)).toBe(true); + }); + + it ('should get the correct height', function() { + var rectangle = new Chart.elements.Rectangle({ + _datasetIndex: 2, + _index: 1 + }); + + // Attach a view object as if we were the controller + rectangle._view = { + base: 0, + width: 4, + x: 10, + y: 15 + }; + + expect(rectangle.height()).toBe(-15); + + // Test when the y is below the base (negative bar) + var negativeRectangle = new Chart.elements.Rectangle({ + _datasetIndex: 2, + _index: 1 + }); + + // Attach a view object as if we were the controller + negativeRectangle._view = { + base: -10, + width: 4, + x: 10, + y: -15 + }; + expect(negativeRectangle.height()).toBe(5); + }); + + it ('should get the correct tooltip position', function() { + var rectangle = new Chart.elements.Rectangle({ + _datasetIndex: 2, + _index: 1 + }); + + // Attach a view object as if we were the controller + rectangle._view = { + base: 0, + width: 4, + x: 10, + y: 15 + }; + + expect(rectangle.tooltipPosition()).toEqual({ + x: 10, + y: 0, + }); + + // Test when the y is below the base (negative bar) + var negativeRectangle = new Chart.elements.Rectangle({ + _datasetIndex: 2, + _index: 1 + }); + + // Attach a view object as if we were the controller + negativeRectangle._view = { + base: -10, + width: 4, + x: 10, + y: -15 + }; + + expect(negativeRectangle.tooltipPosition()).toEqual({ + x: 10, + y: -15, + }); + }); + + it ('should draw correctly', function() { + var mockContext = window.createMockContext(); + var rectangle = new Chart.elements.Rectangle({ + _datasetIndex: 2, + _index: 1, + _chart: { + ctx: mockContext, + } + }); + + // Attach a view object as if we were the controller + rectangle._view = { + backgroundColor: 'rgb(255, 0, 0)', + base: 0, + borderColor: 'rgb(0, 0, 255)', + borderWidth: 1, + ctx: mockContext, + width: 4, + x: 10, + y: 15, + }; + + rectangle.draw(); + + expect(mockContext.getCalls()).toEqual([{ + name: 'beginPath', + args: [], + }, { + name: 'setFillStyle', + args: ['rgb(255, 0, 0)'] + }, { + name: 'setStrokeStyle', + args: ['rgb(0, 0, 255)'], + }, { + name: 'setLineWidth', + args: [1] + }, { + name: 'moveTo', + args: [8.5, 0] + }, { + name: 'lineTo', + args: [8.5, 15.5] + }, { + name: 'lineTo', + args: [11.5, 15.5] + }, { + name: 'lineTo', + args: [11.5, 0] + }, { + name: 'fill', + args: [], + }, { + name: 'stroke', + args: [] + }]); + }); + + it ('should draw correctly with no stroke', function() { + var mockContext = window.createMockContext(); + var rectangle = new Chart.elements.Rectangle({ + _datasetIndex: 2, + _index: 1, + _chart: { + ctx: mockContext, + } + }); + + // Attach a view object as if we were the controller + rectangle._view = { + backgroundColor: 'rgb(255, 0, 0)', + base: 0, + borderColor: 'rgb(0, 0, 255)', + ctx: mockContext, + width: 4, + x: 10, + y: 15, + }; + + rectangle.draw(); + + expect(mockContext.getCalls()).toEqual([{ + name: 'beginPath', + args: [], + }, { + name: 'setFillStyle', + args: ['rgb(255, 0, 0)'] + }, { + name: 'setStrokeStyle', + args: ['rgb(0, 0, 255)'], + }, { + name: 'setLineWidth', + args: [undefined] + }, { + name: 'moveTo', + args: [8, 0] + }, { + name: 'lineTo', + args: [8, 15] + }, { + name: 'lineTo', + args: [12, 15] + }, { + name: 'lineTo', + args: [12, 0] + }, { + name: 'fill', + args: [], + }]); + }); + + +}); \ No newline at end of file