javascript - 如何对 DOM 上由 setter 组成的函数进行单元测试？

Question

使用 qUnit，我尝试对一个仅由 DOM setter 组成的函数(“awardDateFormatCheck”)进行单元测试。

单元测试的主要规则之一是隔离单元测试以确保它们不带有任何依赖项。考虑到这一点，为我有问题的函数编写单元测试的推荐策略是什么？我不确定测试我的函数的最佳方法，因为它的唯一目的是 setValueState() 和 setValueText()...

formatter.js(我想测试的函数的起源)

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(包含 setter 的 DOM 元素的 id)

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

    return {

        main: function () {

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

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

View.html(请参阅 DatePicker 元素，“change”属性是调用函数 get 的位置/时间)

<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(函数被调用的地方)

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(我设置的 qUnit 测试模板)

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

我要做的是将函数的真正智能与其“适配器”部分分开。即:

将当前函数更改为

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);
        }
    }

这个不需要进行单元测试，因为它根本不需要传递参数和设置值。然后是您可以轻松进行单元测试的第二个函数:

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