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中的工作方式存在误解。

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

然后你设置一个Jasmine间谍 - spyOn(handleMock, 'handleClick')，发生的事情是Jasmine用一个实用函数替换handleClick对象的handleMock属性，该函数记住它被调用的所有时间。

但是jQuery永远不会知道你的意图，因为它已经决定在点击时调用原来的功能

解决方案

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

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

这样你就可以传递一个间谍作为回调，而不是实际的回调函数。

测试JQuery＆＃34;＆＃34; on＆＃34;方法触发回调函数

1 个答案:

问题

解决方案