Rectangle element tests

diff --git a/src/elements/element.rectangle.js b/src/elements/element.rectangle.js
index 10682b1c07d3746e8d00a147b91e53ad916cb8bf..3d9539eb9f203e4b2721bf7e998b06301867b768 100644 (file)
--- 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 (file)
index 0000000..f8bd51e
--- /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