如何使用 Jasmine 和 Karma 测试 DOM 和 CSS答案

【问题标题】：How to test DOM and CSS using Jasmine and Karma如何使用 Jasmine 和 Karma 测试 DOM 和 CSS
【发布时间】：2014-07-13 00:32:19
【问题描述】：

我正在尝试基于单个 HTML 页面使用 Jasmine 和 Karma 进行单元测试的纯前端项目的 TDD。

Jasmine 的文档没有说明 DOM 操作，这是我正在尝试测试的最重要的事情之一。

问题很简单，如何检查一个 HTML 页面的 DOM 变化和内容变化？例如，假设我有如下代码：

HTML 文件

<a href="#/say_hello">Say Hello</a>

JS 文件：

// Router
App.Router = Backbone.Router.extend({
  routes: {
    '': 'home',
    'say_hello': 'sayHello'
  }
});

var router = new App.Router();
router.on('route:sayHello', function(){
  $("body").append("Hello World");
});
Backbone.history.start();

如何测试这种行为：如果有人点击“Say Hello”链接，则 html 正文中的文本将包含“Hello World”

更重要的是，我如何检查 CSS 更改或模拟 HTML 事件（鼠标悬停、焦点、更改、加载等...）？ Jasmine 和 Karma 有可能吗？

谢谢

【问题讨论】：

标签： javascript backbone.js tdd jasmine karma-runner

【解决方案1】：

TDD 是单元测试 - 单元 - 带有模拟、存根和间谍的小方法。对 DOM 的操作应该通过方法来完成，并且您想测试这些方法。

而不是测试 jQuery 引擎选择器和方法 'append' 调用一些方法。在测试中创建 spy 期望您的方法被调用。

要检查 DOM 操作，您可以使用 Jasmine jQuery 匹配器 -https://github.com/velesin/jasmine-jquery

【讨论】：

我是否理解正确，DOM 操作的单元测试范围很广？所以这应该更适合像 Silienium 这样的行为驱动测试？
@NEXTLEVELSHIT Cucumber (with Selenium) 适用于 acceptance 级别的测试。一年后，我很难找到 TDD 和 BDD 之间的区别。 TDD 是关于测试小方法并检查某个方法是否被另一个方法调用以及使用什么参数。 BDD 证明整个功能有效，整个行为已实现。 ACCEPTANCE 测试证明我们的系统已为用户做好准备，方法与 UI 连接，UI 对模型的更改做出正确反应，并且模型的更改反映到 UI

【解决方案2】：

如果您需要测试小型 html sn-ps，您应该以编程方式将它们添加到您的测试中。

var fixture = '<h1>My HTML fragment</h1>';

document.body.insertAdjacentHTML(
  'afterbegin',
  fixture);

您还可以设法链接样式表

var fixture = '<link rel="stylesheet" media="all" \
href="https://www.npmjs.com/static/css/index.css?last-changed=10d466883fa405391313dc8294e783fd">\
<header><div class="header-item header-nav-menu-container">\
<h1 style="color:#FFF">My HTML fragment</h1></div></header>';

document.body.insertAdjacentHTML(
  'afterbegin',
  fixture);

另外，要为样式表提供业力，您应该将其添加到文件列表和link them like this

【讨论】：