javascript - 测试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.

也许我仍然对如何测试点击句柄是否被触发有一个基本的误解。有人看出我的问题出在哪里吗？我也尝试过 jasmine-jquery 来让它工作，但仍然没有运气。

Answer 1

问题

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

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

然后你设置了一个 Jasmine spy - spyOn(handleMock, 'handleClick') 并且 Jasmine 替换了 handleMock 的 handleClick 属性具有实用函数的对象，该函数会记住它被调用的所有时间。

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

解决方案

您需要做的只是更改行的顺序，以便 spyOn 出现在创建图标之前:

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

这样您将传递一个 spy 作为回调，而不是实际的回调函数。