Question

我有一个带OK按钮的对话框，一旦点击OK按钮，就会调用一个回调方法。

我正在为此编写单元测试，但是我似乎找不到如何单击“确定”按钮来调用此方法的方法。有人能告诉我这是怎么做到的吗？我是Jasmine＆amp;的新手。兴农。

编辑：
这是我用来创建对话框的通用方法。

function myDialogMethod(title, message, buttonLabel, buttonCallback) {
$("#DialogMessage").html(message);

$("#myDialog").dialog({
    modal : true,
    title : title,
    buttons : [ {
        text : buttonLabel,
        click : function() {
            $(this).dialog("close");
            buttonCallback();
        }
    } ]
  });
}

然后我用它来调用它：

myDialogMethod("Modal Title", "Modal Message", "OK", function(){
           alert("callback");
        });

我需要做的是在单元测试中单击“确定”按钮以确保调用按钮回调。

Answer 1

这是单元测试解决方案：

index.ts：

import $ from "jquery";

export function myDialogMethod(title, message, buttonLabel, buttonCallback) {
  $("#DialogMessage").html(message);

  ($("#myDialog") as any).dialog({
    modal: true,
    title: title,
    buttons: [
      {
        text: buttonLabel,
        click: function() {
          ($(this) as any).dialog("close");
          buttonCallback();
        }
      }
    ]
  });
}

index.spec.ts：

import sinon from "sinon";
import proxyquire from "proxyquire";

describe("31940184", () => {
  afterEach(() => {
    sinon.restore();
  });
  it("myDialogMethod", () => {
    let buttons;
    const dialogStub = sinon.stub().callsFake(options => {
      buttons = options.buttons;
    });
    const htmlStub = sinon.stub();
    const jquerySpy = sinon.stub().callsFake(() => {
      return {
        html: htmlStub,
        dialog: dialogStub
      };
    });
    const { myDialogMethod } = proxyquire("./", {
      jquery: jquerySpy
    });
    let alert = sinon.stub();
    const buttonCallback = function() {
      alert("callback");
    };
    const buttonCallbackSpy = sinon.spy(buttonCallback);
    myDialogMethod("Modal Title", "Modal Message", "OK", buttonCallbackSpy);
    sinon.assert.calledWith(jquerySpy.firstCall, "#DialogMessage");
    sinon.assert.calledWith(jquerySpy.secondCall, "#myDialog");
    sinon.assert.calledWith(dialogStub.firstCall, {
      modal: true,
      title: "Modal Title",
      buttons: [{ text: "OK", click: sinon.match.func }]
    });
    const button = buttons[0];
    button.click();
    sinon.assert.calledOnce(buttonCallbackSpy);
    sinon.assert.calledWith(alert, "callback");
    sinon.assert.calledWith(jquerySpy.thirdCall, button);
    sinon.assert.calledWith(dialogStub.secondCall, "close");
  });
});

覆盖率100％的单元测试结果：

31940184
    ✓ myDialogMethod (167ms)


  1 passing (174ms)

---------------|----------|----------|----------|----------|-------------------|
File           |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
---------------|----------|----------|----------|----------|-------------------|
All files      |      100 |      100 |      100 |      100 |                   |
 index.spec.ts |      100 |      100 |      100 |      100 |                   |
 index.ts      |      100 |      100 |      100 |      100 |                   |
---------------|----------|----------|----------|----------|-------------------|

源代码：https://github.com/mrdulin/mocha-chai-sinon-codelab/tree/master/src/stackoverflow/31940184

Jasmine / Sinon - 触发jQuery UI关闭按钮回调

1 个答案: