Question

我正在尝试使用

来存根函数

import * as tooltip from './tooltip';

describe('tooltip', () => {
  it('should ...', () => {
    // arrange
    spyOn(tooltip, 'createTooltip');
    ...

    tooltip.tooltip.inserted(...); // calls createTooltip inside

    ...
    expect(tooltip.createTooltip).toHaveBeenCalledWith(...); // assert called with
  });
});

但是当调用inserted时，会调用createTooltip的实际实现，并且断言会抛出错误消息：

Expected spy createTooltip to have been called with ... but it was never called.

更新1： 完整的工具提示指令代码：

import $ from "jquery";
import classes from '../../css/directives/tooltip.scss';

const TOOLTIP_CLASS = classes.tooltip;
const TOOLTIP_ARROW_CLASS = classes.arrow;
const TOOLTIP_ARROW_BORDER_WIDTH = 5;
const TOOLTIP_DEFAULT_MARGIN = 2;
const TOOLTIP_DEFAULT_BACKGROUND_COLOR = 'rgba(0, 0, 0, .8)';
const TOOLTIP_DEFAULT_FADE_SPEED = 'slow';
const TOOLTIP_DEFAULT_POSITION = 'right';
const POSITION_FN = {
  top: positionTooltipToTop,
  left: positionTooltipToLeft,
  right: positionTooltipToRight,
  bottom: positionTooltipToBottom
};

export const tooltip = {
  inserted: (el, binding) => {
    const $body = $('body');
    const $el = $(el);
    const $tooltip = createTooltip($body, $el, binding);
    $el.mouseenter(() => {
      $tooltip
        .stop()
        .hide()
        .appendTo($body)
        .fadeIn(TOOLTIP_DEFAULT_FADE_SPEED || binding.value.fade);
    });
    $el.mouseleave(() => {
      $tooltip
        .stop()
        .fadeOut(TOOLTIP_DEFAULT_FADE_SPEED || binding.value.fade, () => {
          $tooltip.detach();
        });
    });
  }
};

export function createTooltip($body, $el, binding) {
  console.log('in function createTooltip');
  const $arrow = createTooltipArrow();
  const $tooltip = $(document.createElement('span'));
  $tooltip.html(binding.value.message);
  $tooltip.append($arrow);
  if (binding.value.color) {
    $tooltip.css('color', binding.value.color);
  }
  if (binding.value.backgroundColor) {
    $tooltip.css('background-color', binding.value.backgroundColor);
  }
  $tooltip.addClass(TOOLTIP_CLASS);
  $body.append($tooltip);
  POSITION_FN[binding.value.position || TOOLTIP_DEFAULT_POSITION]($el, $tooltip, $arrow, binding);
  $tooltip.detach();
  return $tooltip;
}

export function createTooltipArrow() {
  const $arrow = $(document.createElement('span'));
  $arrow.addClass(TOOLTIP_ARROW_CLASS);
  return $arrow;
}

export function positionTooltipToTop($el, $tooltip, $arrow, binding) {
  $tooltip.css({
    top: $el.offset().top - $tooltip.outerHeight() - (TOOLTIP_ARROW_BORDER_WIDTH + (binding.value.margin || TOOLTIP_DEFAULT_MARGIN)),
    left: $el.offset().left + ($el.outerWidth() / 2) - ($tooltip.outerWidth() / 2)
  });
  $arrow.css({
    top: '100%',
    left: '50%',
    marginLeft: -1 * TOOLTIP_ARROW_BORDER_WIDTH,
    borderTopColor: binding.value.backgroundColor || TOOLTIP_DEFAULT_BACKGROUND_COLOR
  });
}

export function positionTooltipToRight($el, $tooltip, $arrow, binding) {
  $tooltip.css({
    top: $el.offset().top + ($el.outerHeight() / 2) - ($tooltip.outerHeight() / 2),
    left: $el.offset().left + $el.outerWidth() + TOOLTIP_ARROW_BORDER_WIDTH + (binding.value.margin || TOOLTIP_DEFAULT_MARGIN)
  });
  $arrow.css({
    top: '50%',
    right: '100%',
    marginTop: -1 * TOOLTIP_ARROW_BORDER_WIDTH,
    borderRightColor: binding.value.backgroundColor || TOOLTIP_DEFAULT_BACKGROUND_COLOR
  });
}

export function positionTooltipToLeft($el, $tooltip, $arrow, binding) {
  $tooltip.css({
    top: $el.offset().top + ($el.outerHeight() / 2) - ($tooltip.outerHeight() / 2),
    left: $el.offset().left - $tooltip.outerWidth() - (TOOLTIP_ARROW_BORDER_WIDTH + (binding.value.margin || TOOLTIP_DEFAULT_MARGIN))
  });
  $arrow.css({
    top: '50%',
    left: '100%',
    marginTop: -1 * TOOLTIP_ARROW_BORDER_WIDTH,
    borderLeftColor: binding.value.backgroundColor || TOOLTIP_DEFAULT_BACKGROUND_COLOR
  });
}

export function positionTooltipToBottom($el, $tooltip, $arrow, binding) {
  $tooltip.css({
    top: $el.offset().top + $el.outerHeight() + TOOLTIP_ARROW_BORDER_WIDTH + (binding.value.margin || TOOLTIP_DEFAULT_MARGIN),
    left: $el.offset().left + ($el.outerWidth() / 2) - ($tooltip.outerWidth() / 2)
  });
  $arrow.css({
    bottom: '100%',
    left: '50%',
    marginLeft: -1 * TOOLTIP_ARROW_BORDER_WIDTH,
    borderBottomColor: binding.value.backgroundColor || TOOLTIP_DEFAULT_BACKGROUND_COLOR
  });
}

Answer 1

我的解决方案：

我使用babel-plugin-rewire作为构建过程的一部分，我能够测试没有di的指令，这对我来说没什么用。

测试代码：

import $ from 'jquery';

import { tooltip, __RewireAPI__ as TooltipRewireAPI } from './tooltip';

describe('tooltip', () => {
  const createTooltipSpy = jasmine.createSpy('createTooltipSpy');
  beforeEach(() => {
    TooltipRewireAPI.__Rewire__('createTooltip', createTooltipSpy);
  });
  afterEach(() => {
    TooltipRewireAPI.__ResetDependency__('createTooltip');
  });
  it('should have mouseenter and mouseleave event listeners', () => {
    const $body = $('body');
    const el = document.createElement('div');
    const binding = {};
    const $el = $(el);

    tooltip.inserted(el, binding);

    expect(createTooltipSpy).toHaveBeenCalledWith($body, $el, binding);
    expect($el.mouseenter).toEqual(jasmine.any(Function));
    expect($el.mouseleave).toEqual(jasmine.any(Function));
  });
});

Jasmine spyOn没有存根功能

1 个答案: