Jasmine规格与Velocity.js动画失败$.Velocity.mock=true

Jasmine specs fail with Velocity.js animations an $.Velocity.mock = true

本文关键字:Velocity mock true 失败 js Jasmine 动画      更新时间:2024-02-06

我正试图在一些包含使用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,这样动画持续时间就会变为零(尽管实际上获得下一个动画帧更像是16ms)。

在动画运行之前,我已经验证了$.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回调。

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

此外,为了更好地衡量——尽管您可能已经知道:速度调用仍然与mock异步(因为它在下一个rAF周期)

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

附言:我用的不是茉莉花,而是qunit