测试JQuery的“ on”方法将触发回调函数

Question

我正在尝试使用Jasmine测试以下代码：

import $ from 'jquery';

export function createCheckIcon (handleClick) {
  return $('<span>').attr('data-element', 'check').addClass('icon--check').on('click', handleClick);
}

export function createCrossIcon (handleClick) {
  return $('<span>').attr('data-element', 'cross').addClass('icon--cross').on('click', handleClick);
}

我的测试看起来像这样：

import $ from 'jquery';

import { createCrossIcon, createCheckIcon } from './input-icons';

describe('input icons', () => {

  let handleMock = { handleClick: () => true };

  it('can create a cross icon', () => {
    let $crossIcon = createCrossIcon();
    expect($crossIcon).toHaveAttr('data-element', 'cross');
    expect($crossIcon).toHaveClass('icon--cross');
  });

  it('cross icon handles click event', () => {
    let $crossIcon = createCrossIcon(handleMock.handleClick);
    spyOn(handleMock, 'handleClick');
    $crossIcon.trigger('click');
    expect(handleMock.handleClick).toHaveBeenCalled();
  });

  it('can create a check icon', () => {
    let $checkIcon = createCheckIcon();
    expect($checkIcon).toHaveAttr('data-element', 'check');
    expect($checkIcon).toHaveClass('icon--check');
  });
});

不幸的是，我的测试将因以下原因而失败：

Expected spy handleClick to have been called.

也许我还是有一个基本的误解，即如何测试点击手柄是否被触发。 有人看到我的问题在哪里吗？ 我还尝试了茉莉花jQuery使此工作，但仍然没有运气。

Answer 1

问题

您对变量在JavaScript中的工作方式有误解。

您会看到，当在createCrossIcon(handleMock.handleClick)传递handleClick ，实际上是传递的是函数的链接，而不是函数本身。 然后将此链接传递给.on方法。

然后，您设置一个Jasmine间谍spyOn(handleMock, 'handleClick')然后Jasmine用实用程序函数替换handleMock对象的handleClick属性，该函数会记住调用的所有时间。

但是jQuery永远不会知道您的意图，因为它已经决定在单击时调用原始函数。

解决方案

您需要做的就是简单地更改行的顺序，以便spyOn 在创建图标之前出现：

spyOn(handleMock, 'handleClick');
let $crossIcon = createCrossIcon(handleMock.handleClick);

这样，您将把间谍传递为回调，而不是实际的回调函数。