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

【问题标题】：How can I unit test a function comprised of setters on the DOM?如何对 DOM 上由 setter 组成的函数进行单元测试？
【发布时间】：2016-12-15 04:47:48
【问题描述】：

使用 qUnit，我正在尝试对仅包含 DOM 设置器的函数（'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（包含设置器的 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    


        }); 
    }  
);

【问题讨论】：

所以在这种情况下你的单位是“awardDateFormatCheck”方法。而且您已经为自己提供了一种方法来为您的代码提供控制对象的“模拟”。你真正测试的是“if”条件和传递给你的模拟的值。因此，为“控制”对象创建一个模拟，并断言传递给您的替代方法的内容以获取不同的事件参数。

标签： javascript unit-testing sapui5 qunit

【解决方案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" 
            };
        };
}

【讨论】：