在客户端测试Javascript

Testing Javascript on Client end

本文关键字：Javascript 测试 客户端      更新时间：2023-09-26

我写了一个实时js应用程序，它有以下堆栈：

  1. 服务器的Node.js
  2. Socket.io作为通信层
  3. JQuery在前端操作dom等

对于#1，我的测试绝对没有问题。我目前正在使用nodeunit，它做得非常好。

对于#3，我在试图弄清楚我的测试方法时遇到了一些小麻烦。

我的浏览器端代码通常是这样的：

var user = {
  // Rendered by html
  id: null, 
  roomId: null,
  foo: null, 
  // Set by node server. 
  socket: null,
  clientId: null,
  ... 
}
$('button#ready').click(function() { 
  socket.emit('READY'); 
});
socket.on('INIT', function(clientId, userIds, serverName) { 
  user.clientId = clientId;
  user.foo = (serverName == 'bar') ? 'bar' : 'baz'; 
});

我想测试的主要部分包括检查浏览器端的js是否会在服务器触发带有指定参数的特定数据包时做出相应反应：

即。user.foo=（serverName=='bar'）？'bar'：'baz'

关于如何处理这一问题，有什么好的建议吗？

看看Mocha。它支持在节点和浏览器中运行。我发现它比其他选择（Jasmine，Vows）要好得多。

此外，我没有运行像Selenium这样的重量级集成设置，而是使用Zombie在一个进程中运行服务器测试和浏览器测试。它允许一些漂亮的集成工作流（比如在浏览器上触发一些东西，然后在服务器上验证效果）。

然而，YMMV作为僵尸依赖于JSDOM（在Javascript中重新实现DOM）。有粗糙的边缘，但修补/固定，东西断裂。如果这是一个问题，请使用真实的浏览器在浏览器中运行Mocha（可能是通过Selenium实现的）。

尽管Pivotal对jasmine的支持有点偶然（最少的新开发，github上有很多未回答的问题/拉取请求），但jasmine是一个非常好的测试客户端代码的工具，主要是因为jasmine jquery。

Jasmine的通用方法非常可靠，Jasmine Jquery有很多很棒的匹配器来测试DOM，以及很棒的DOM沙箱。

我发现客户端测试是一个挑战，主要是因为我必须停止在测试中过于死板和规范。

通常，您应该以一种"模糊"的方式进行客户端测试，过于具体地测试DOM层次结构是一条通往地狱的道路。测试诸如"页面是否包含这些单词"over"div id#mydiv是否包含一个包含3个li的ul，其内容与此regex匹配"

后者是我开始做测试的方式，但我发现它非常耗时和脆弱；如果设计者（我）想打乱结构，可能会不必要地破坏许多测试。解决这个问题的唯一方法是为每个组件创建"小部件"，这将是理想的，但正如我所说，非常耗时，这实际上成了我办公室里的一个笑话："蒂姆，你这周做了多少次测试？2？3？哇，3次测试。干得好。"

无论如何…

通过松散地进行测试，并专注于重要的内容，例如工作流和数据在页面层次结构中特定位置的特定内容上的"存在性"，可以获得客户端测试90%的好处。

edit：此外，请确保尽可能地将业务逻辑分解为独立于DOM的单元。这会让你的生活变得更轻松，通常会带来更好的架构，这是一个好处。

编辑2：您可能想了解一下Rails世界是如何使用Capybara/Cucumber或Selenium来实现这一点的。

相关文章：