Jasmine 规范因 Velocity.js 动画而失败 $.Velocity.mock = true答案

【问题标题】：Jasmine specs fail with Velocity.js animations an $.Velocity.mock = trueJasmine 规范因 Velocity.js 动画而失败 $.Velocity.mock = true
【发布时间】：2015-04-21 05:20:00
【问题描述】：

我正在尝试在一些包含用 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，并有一个 shim，在任何测试之前添加 $.Velocity.mock = true，以便动画持续时间变为零（尽管实际上它更像是 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'.

velocity-animating 类已经存在，并且动画的 complete 回调从未被调用过。

【问题讨论】：

标签： javascript coffeescript jasmine sinon velocity.js

【解决方案1】：

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

另外，只是为了更好的衡量——尽管你可能已经知道：速度调用仍然与模拟异步（因为它在下一个 rAF 滴答声上）

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

附言我不使用茉莉花，而是使用 qunit

【讨论】：

可悲的是，这似乎没有帮助。我将console.log($.Velocity.mock) 放在代码库中每个速度调用的前面，并且每次都返回true（我使用requirejs shim 将$.Velocity.mock 设置为true）。另外，我的测试运行器使用 PhantomJS，它本身不支持 rAF，所以据我所知，它只是使用普通的旧 setTimeout
如果它使用 setTimeout 它仍然是异步的。