Grunt 中 PhantomJS 和 Qunit 测试之间的差异？答案

【问题标题】：Discrepancy between PhantomJS and Qunit test in Grunt?Grunt 中 PhantomJS 和 Qunit 测试之间的差异？
【发布时间】：2012-08-21 22:22:19
【问题描述】：

我正在用 Grunt 和 TDD 编写我的第一个 jQuery 插件，到目前为止它非常棒。我的所有测试都在浏览器中通过，除此之外的所有测试都在 phantomjs/qunit 中通过。

但我确定我只是在这里遗漏了一些东西。我有一个测试可以获取使用 jQuery 添加的边距的 css 值。

  test('adds appropriate styles to image', 1, function() {
    this.simpleString.adaminNumReplace();
    var newMargin = this.simpleString.find('> img:first').css('margin');
    strictEqual(newMargin, '0px', 'margin is equal to default');
  });

当我使用运行器在浏览器中进行测试时，测试通过了。当我目视检查检查员时。如果我 console.log 值。一切似乎都很好，并指向“0px”。

但在终端窗口中，测试失败：

$.fn.adaminNumReplace() - adds appropriate styles to image
Message: margin is equal to default
Actual: ""
Expected: "0px"
at file:///Applications/MAMP/htdocs/adamin_number_replace/libs/qunit/qunit.js:357

phantomjs 是否有任何原因无法获取 css 边距值？它说实际是“”。但绝对是'0px'。

任何见解或想法将不胜感激！

完整的 repo 在这里，如果有帮助的话：Github Repo

【问题讨论】：

标签： jquery-plugins tdd qunit phantomjs gruntjs

【解决方案1】：

好的。所以我能够弄清楚这一点。我不完全确定为什么。但是调用css快捷方式

.css('margin')

在终端中返回 nil。但在规范运行器中确实有效。

但是，调用具体：

.css('margin-top')

实际上返回 '0px' 这正是我想要的。

所以它看起来像答案，以防其他人可能遇到这个：

使用“margin”或“padding”等快捷方式时，我无法返回 css 值。

使用“margin-top”、“padding-left”等细节...

希望对其他人有所帮助...

【讨论】：