How can I unit test a function comprised of setters on the DOM?

Question

Using qUnit, I'm trying to unit test a function ('awardDateFormatCheck') that simply consists of setters to the DOM.

One of the primary rules of unit testing is to isolate your unit tests to ensure they don't carry any dependencies. With that in mind, what is a recommended strategy to write a unit test for the function I have in question? I'm not sure the best way to test my function when it's sole purpose is to setValueState() and setValueText()...

formatter.js (origin of function i'd like to test)

awardDateFormatCheck: function (oEvent, control) {

            var inputVal = oEvent.getParameters().value;

            if (inputVal.match(/\//g) || inputVal === "") {
                control.awardDate.setValueState("None");
            } else {
                control.awardDate.setValueState("Warning");
                control.awardDate.setValueStateText("Invalid Entry. Use 'yyyyMMdd' format");
            };
        }

viewControls.js (contains the id of the DOM element for the setters)

sap.ui.define([],function () {

    return {

        main: function () {

            var awardDate = this.byId("priorAwardDateInput");

            return { 
                awardDate: awardDate
            };
        }
    }    
});

View.html (see the DatePicker element, the 'change' property is where/when the function get's called)

<mvc:View
        controllerName="pricingTool.controller.Main"
        xmlns:l="sap.ui.layout"
        xmlns:core="sap.ui.core"
        xmlns:f="sap.ui.layout.form"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns="sap.m">

    <l:Grid class="sapUiSmallMarginTop" hSpacing="1" vSpacing="1" defaultSpan="L4 M9 S9">
        <l:content>
            <l:HorizontalLayout allowWrapping="true">
                <l:VerticalLayout width="100%">
                    <Label id="priorAwardDateLabel" text="Prior Award Date" design="Bold" textAlign="Center" required="true" />
                    <DatePicker id="priorAwardDateInput" placeholder="Select Award Date.." displayFormat="yyyy-MM-dd" type="Date" change="awardDateFormatCheck" width="100%">
                    </DatePicker>
                </l:VerticalLayout>
            </l:HorizontalLayout>
        </l:content>
    </l:Grid>

</mvc:View>

Main.controller.js (where the function gets called from)

sap.ui.define([
        'jquery.sap.global',
        'sap/ui/core/mvc/Controller',
        'sap/ui/model/json/JSONModel',
        'path/to/formatter',
        'path/to/viewControls
    ],

    function (jQuery, Controller, JSONModel, formatter) {
        "use strict";


        var mainController = Controller.extend("pricingTool.controller.Main", {


            awardDateFormatCheck: function (oEvent) {
                formatter.awardDateFormatCheck(oEvent, controls);
            },

        });

        return mainController;
    });

formatter.test.js (the qUnit testing template I have setup)

sap.ui.require(
    [
        'path/to/formatter',
        'path/to/Main.controller'
    ],

    function (formatter, viewControls, Component, $, sinon, sinonqunit, Input) {

        "use strict";

        QUnit.test("'awardDateFormatCheck' Function Exists", function (assert) {

        // Arrange

        // Act   (How can I test a function with setters?)

        // Assert

        // Cleanup    


        }); 
    }  
);

Answer 1

What I would do is separate the real intelligence of your function from its 'adaptater' part. i.e. :

Change current function to

awardDateFormatCheck: function (oEvent, control) {
        var inputVal = oEvent.getParameters().value;

        var valueState = _awardDateFormatCheck(inputVal)

        control.awardDate.setValueState(valueState.state);
        if (valueState.text) {
            control.awardDate.setValueStateText(valueState.text);
        }
    }

This one does ont need to be unit tested since it simply does nothing expect passing arguments and setting values back. Then a second function which you can easily unit test:

_awardDateFormatCheck: function (inputVal) {
    if (inputVal.match(/\//g) || inputVal === "") {
            return { 
                state: "None" 
            };
        } else {
            return { 
                state: "Warning",
                text: "Invalid Entry. Use 'yyyyMMdd' format" 
            };
        };
}