Unit testing Phaser application with html form data?

[spinnerbox]

I checked this topic here: http://www.html5gamedevs.com/topic/3242-unit-testing-a-phaser-application/#comment-21011

It doesn't seem there are some updates.

I have html form with data and I would like to test reset function i.e it restores default values for the form input elements.

I am using jQuery and QUnit, both related to each other. But the problem is, this form has some dependencies which are inside my main JS object holding the game object which renders to canvas. I can include my main JS object but I don't want it rendering visual output. I tried using HEADLESS mode but it still shows visual output as if there is a bug. I will check again for Phaser 2.6.1 in a plain game set-up to see if it has really a bug. 

But the main question is, are there some tutorials or libraries adapted for testing Phaser game including html forms or other html elements?

[spinnerbox]

Whatever, will try my luck with QUnit and will share experiences

[spinnerbox]

QUnit is fantastic. The only drawback i found, is the plugins are sort of deprecated so I had to update them just so i can use them:

/*
 * Parameterize v 0.4
 * A QUnit Addon For Running Parameterized Tests
 * https://github.com/AStepaniuk/qunit-parameterize
 * Released under the MIT license.
 */
QUnit.extend(QUnit, {
    cases: (function() {
        'use strict';
        var currentCases = null,
            clone = function(testCase) {
                var result = {},
                    p = null;

                for (p in testCase) {
                    if (testCase.hasOwnProperty(p)) {
                        result[p] = testCase[p];
                    }
                }

                return result;
            },
            createTest = function(methodName, title, expected, callback, parameters) {

                QUnit[methodName](title + ", test params: " + JSON.stringify(parameters), function(assert) {
                    return callback.call(this, parameters, assert);
                });
            },

            iterateTestCases = function(methodName, title, expected, callback) {
                var i = 0,
                    parameters = null,
                    testCaseTitle = null;

                if (!currentCases || currentCases.length === 0) {
                    // setup test which will always fail
                    QUnit.test(title, function(assert) {
                        assert.ok(false, "No test cases are provided");
                    });
                    return;
                }

                if (!callback) {
                    callback = expected;
                    expected = null;
                }

                for (i = 0; i < currentCases.length; i += 1) {
                    parameters = currentCases[i];

                    testCaseTitle = title;
                    if (parameters.title) {
                        testCaseTitle += "[" + parameters.title + "]";
                    }

                    createTest(methodName, testCaseTitle, expected, callback, parameters);
                }
            },

            getLength = function(arr) {
                return arr ? arr.length : 0;
            },

            getItem = function(arr, idx) {
                return arr ? arr[idx] : undefined;
            },

            mix = function(testCase, mixData) {
                var result = null,
                    p = null;

                if (testCase && mixData) {
                    result = clone(testCase);

                    for (p in mixData) {
                        if (mixData.hasOwnProperty(p)) {
                            if (p !== "title") {
                                if (!(result.hasOwnProperty(p))) {
                                    result[p] = mixData[p];
                                }
                            } else {
                                result[p] = [result[p], mixData[p]].join("");
                            }
                        }
                    }

                } else if (testCase) {
                    result = testCase;
                } else if (mixData) {
                    result = mixData;
                } else {
                    // return null or undefined whatever testCase is
                    result = testCase;
                }

                return result;
            };

        return {

            init: function(testCasesList) {
                currentCases = testCasesList;
                return this;
            },

            sequential: function(addData) {
                var casesLength = getLength(currentCases),
                    addDataLength = getLength(addData),
                    length = casesLength > addDataLength ? casesLength : addDataLength,
                    newCases = [],
                    i = 0,
                    currentCaseI = null,
                    dataI = null,
                    newCase = null;

                for (i = 0; i < length; i += 1) {
                    currentCaseI = getItem(currentCases, i);
                    dataI = getItem(addData, i);
                    newCase = mix(currentCaseI, dataI);

                    if (newCase) {
                        newCases.push(newCase);
                    }
                }

                currentCases = newCases;

                return this;
            },

            combinatorial: function(mixData) {
                var current = (currentCases && currentCases.length > 0) ? currentCases : [null],
                    currentLength = current.length,
                    mixDataLength = 0,
                    newCases = [],
                    i = 0,
                    j = 0,
                    currentCaseI = null,
                    dataJ = null,
                    newCase = null;

                mixData = (mixData && mixData.length > 0) ? mixData : [null];
                mixDataLength = mixData.length;

                for (i = 0; i < currentLength; i += 1) {
                    for (j = 0; j < mixDataLength; j += 1) {
                        currentCaseI = current[i];
                        dataJ = mixData[j];
                        newCase = mix(currentCaseI, dataJ);

                        if (newCase) {
                            newCases.push(newCase);
                        }
                    }
                }

                currentCases = newCases;

                return this;
            },

            test: function(title, expected, callback) {
                iterateTestCases("test", title, expected, callback);
                return this;
            },

            getCurrentTestCases: function () {
                return currentCases;
            }
        };
    }())
});

This is QUnit Parameterize plugin which enables you to create parametric tests instead of doing each one separately. Takes lot of space

Consult https://qunitjs.com/upgrade-guide-2.x/ 

for more info.

I kind of wasn't able to enable the HEADLESS mode of Phaser so i had to create testing stubs that mimic the game code without the visual canvas.