2

我正在尝试在一些包含用 Velocity.js 构建的动画的函数上运行一些 Jasmine 规范

该方法如下所示：

@changeTitle = (e, data) ->
  newTitle = data.title
  $pageTitle = @select("pageTitleSelector")

  $pageTitle.velocity
    opacity: 0
  ,
    duration: 750
    complete: -> $pageTitle.text(newTitle)
  .velocity
    opacity: 1
    duration: 800

我正在尝试测试页面的标题是否更改为新标题。这是我的茉莉花规格：

describe 'submit uiTitleChange', ->
it 'changes the title', ->
  @clock = sinon.useFakeTimers()
  @component.trigger "uiTitleChange", {title: "New Title"}
  @clock.tick(16)
  expect(@component.select("pageTitleSelector")).toContainHtml "New Title"
  @clock.restore()

现在，我使用 requirejs，并$.Velocity.mock = true在任何测试之前添加一个 shim，以便动画持续时间变为零（尽管实际上它更像是 16 毫秒来获取下一个动画帧）。

我已经在动画运行之前验证了这$.Velocity.mock确实是真的，当单独运行规范文件时，这工作得很好，但是当运行我的整个套件时，它测试了几个不同的动画，其中一些总是失败。

我尝试使用setTimeout而不是 sinon 的假计时器，我尝试将时钟滴答设置为一个非常大的数字（例如 100000），并且我还在$.Velocity.mock相关动画之前添加了这些，但这些都不能解决问题。

失败看起来像这样：

Failure/Error: Expected '<div class="page-title velocity-animating">Old Title</div>' to contain html 'New Title'.

速度动画类在那里，动画的complete回调从未被调用过。

4

1 回答 1

1

mock 不仅必须true在动画运行之前，而且必须在任何动画调用开始之前。

另外，只是为了双重好措施-尽管您可能已经知道：速度调用仍然与模拟异步（因为它在下一个 rAF 滴答声上）

除此之外，我不确定。如果你给我看一个精简的 codepen.io 笔，我可能会有更多用处:)

ps 我不使用茉莉花，而是使用 qunit

于 2015-02-19T20:23:19.727 回答