如何对DOM上的setter组成的函数进行单元测试?

时间:2016-12-15 04:47:49

标签: javascript unit-testing sap sapui5 qunit

使用qUnit,我正在尝试对一个函数('awardDateFormatCheck')进行单元测试,该函数只包含对DOM的setter。

单元测试的主要规则之一是隔离单元测试以确保它们不带任何依赖性。考虑到这一点,为我所讨论的功能编写单元测试的推荐策略是什么?我不确定测试我的函数的最佳方法,它的唯一目的是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'属性是调用函数的位置/时间)

<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    


        }); 
    }  
);

1 个答案:

答案 0 :(得分:1)

我要做的是将你的功能的真实智能与其“适应者”部分分开。即:

将当前功能更改为

 const
   ImageType:array [0..6] of TGraphicClass=(TJpegimage, TBitmap, TWICImage,
                                            TGIFImage, TPNGImage, TMetafile,TIcon);

procedure tImageView.LoadFromStream(AStrm: TStream);
var
  Ext: string;
  NewGraphic: TGraphic;
  GraphicClass: TGraphicClass;

  i:integer;
  IsLoaded:boolean;
begin
   IsLoaded:=false;
   for i:=0 to Length(ImageType)-1 do begin
      try
         GraphicClass:=ImageType[i];
         NewGraphic := GraphicClass.Create;
         if Astrm.Size<>0 then begin
            NewGraphic.LoadFromStream(Astrm);
            IsLoaded:=true;
            Break;
            end;
      except
         try
            NewGraphic.Free;
         finally

            end;
         end;
      end;
   if Isloaded then begin
      fImg.Picture.Assign(NewGraphic);
      NewGraphic.Free;
      end
   else begin
      raise EInvalidGraphic.Create('Unknow format image!!!!!!!');
      end;
   end;

这个确实需要进行单元测试,因为它只是不会期望传递参数和设置值。 然后是第二个功能,您可以轻松地进行单元测试:

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