How to test drawing functions without rendering?

[spinnerbox]

I have utility functions and lot of them are just drawing to game.add.graphics object. Some of them have rather complex behavior, like calculating some values to see if something should be drawn or not. The problem is these function can accept large number of different values so I should be testing them.

An example function:

drawShelve: function (dataObject) {
            var halfHeight = this.roundNumber((dataObject.frameHeight / 2), frnConst.BETTER_PRECISION),
                halfRearHeight = this.roundNumber((dataObject.rearHeight / 2), frnConst.BETTER_PRECISION),
                grObject = null,
                shelve = {
                    graphicsObj: dataObject.graphicsObj,
                    borderSize: constGr.DEFAULT_GRAPHICS_BORDER_SIZE,
                    borderColor: dataObject.borderColor,
                    borderAlpha: 1,
                    areaColor: dataObject.areaColor,
                    frontColor: dataObject.frontColor,
                    thickness: dataObject.thickness,
                    polygon: {
                        pt1: {x: 0, y: 0},
                        cp1: {x: 0, y: 0},
                        pt2: {x: 0, y: 0},
                        pt3: {x: 0, y: 0},
                        cp2: {x: 0, y: 0},
                        pt4: {x: 0, y: 0},
                        pt5: {x: 0, y: 0}
                    }
                };

            // draw top corner shelves
            if (dataObject.shiftY >= this.roundNumber(dataObject.y + dataObject.halfCupboardDepth, frnConst.NUM_OF_FLOAT_DIGITS) &&
                    dataObject.shiftY < this.roundNumber(halfHeight + dataObject.y, frnConst.NUM_OF_FLOAT_DIGITS)) {

                shelve = {/* some code */};
                grObject = this.drawShelveWithArea(shelve);

            // draw rectangle instead of full shelve when exact half is hit with a Y coordinate
            } else if (dataObject.shiftY === this.roundNumber(halfHeight + dataObject.y, frnConst.NUM_OF_FLOAT_DIGITS)) {

                grObject = /* draw rect code here */;

            // draw bottom corner shelves
            } else if (dataObject.shiftY > this.roundNumber(halfHeight + dataObject.y, frnConst.NUM_OF_FLOAT_DIGITS) &&
                        dataObject.shiftY <= this.roundNumber(dataObject.y + halfHeight + halfRearHeight, frnConst.NUM_OF_FLOAT_DIGITS)) {

                shelve.polygon = {/* some code here */};
                grObject = this.drawShelveWithArea(shelve);

            }

            return grObject;
        }

As you can see, there is if block and then two else-if blocks. All conditions are calculated and I must test if the shelve is drawn or not for different values, i.e not null. 

I set QUnit and added game object where can i draw with HEADLESS mode, but from the following picture I still see canvas added to my test page.

How can i test without adding game object at all? Is it possible to utilize functions like:

shelveWithArea.beginFill(dataObject.areaColor, 1);
shelveWithArea.moveTo(polygon.pt3.x, polygon.pt3.y);
shelveWithArea.bezierCurveTo(polygon.pt3.x, polygon.pt3.y, polygon.cp2.x, polygon.cp2.y, polygon.pt4.x, polygon.pt4.y);
shelveWithArea.lineTo(polygon.pt5.x, polygon.pt5.y);
shelveWithArea.lineTo(polygon.pt3.x, polygon.pt3.y);
shelveWithArea.endFill();

Without a need of Phaser.Game object?

[drhayes]

I'm a believer in testing. I'm not sure how much value you get writing unit tests for graphics.

That said, I think you want to use mocks or stubs to verify functions are called with what you expect. The reason I say you don't get a lot of value out of it is that you end up writing code that draws the thing, then writing code that says, "I drew the thing that way", then running it and seeing it doesn't work quite right aesthetically, then updating code twice (drawing code and testing code) until it looks good.

Like, you'll probably stub out "this.drawShelveWithArea" and verify that it received the object you expected or didn't get called at all, whichever, when testing drawShelve. Then in your tests for drawShelveWithArea you can stub "shelveWithArea" to verify that it's called with what you expect.

Again, I don't think that kind of white-box testing is valuable vs. making progress on your game? ¯\_(ツ)_/¯

[spinnerbox]

Ok, sounds reasonable. The thing is I should be testing unit of work, so maybe i should separate the conditions in if-else as separate functions just to test whether the values are in right range instead of using graphics to draw. 

The problem I had, some of the shelves were not drawn because the condition wasn't met by a fraction, for example 0.001. Once I changed the precision to 5 digits after the colon it did draw the shelves

Thanks for the help.