测试图形用户界面

Question

所以我有一个jQuery中的花哨的GUI，它已变得相对复杂。我想为它编写测试，例如使用assert()。然而，编写这样的测试似乎很困难，因为GUI不会操纵数据或进行计算：它们只是表面的界面，以取悦用户。

那么，人们如何通常为GUI编写测试？

Answer 1

假设你的代码是相当干净（模块化和松散耦合的功能块，而不是一些超级功能），首先要做的是选择一个测试框架。我推荐jasmine，因为它符合我喜欢编写测试的方式，但是如果您正在寻找更多的xUnit克隆，qunit也是非常好的。

如果你的代码没有被拉开（就像野外JavaScript的99.99％），我会先看看如何制作jquery plugins，然后尽可能多地提取它们。测试执行大量事情的超级函数是一个可怕的命题，但是当你谈论一个单一事物的模块时，测试变得更容易。

最后，还有一点关于如何构建复杂的javascript，以及如何测试它的学习曲线。不要放弃！相反，有些人会相信，JavaScript是非常可靠的库现在非常可测试，有很多人这样做（我只是花了一整天的时间在复杂的功能上工作，整个时间都在练习TDD，它从来没有感觉到笨重或非自然）

祝你好运，并随时要求澄清，如果这里有任何不明白:)

编辑：

通过“拉开”我的意思是移动到一个更模块化的方式而不是巨大的功能。在jQuery中，第一步是使用插件，这会让你走得很远。如果你正在制作一个JavaScript“应用程序”，其中你的大部分逻辑都在前端，而后端主要是为了持久化，我会看看像Backbone.js这样的东西，这将有助于管理非常高的复杂性，但如果你不需要它，那完全是过度的。

回到提取插件，尝试找到包含的某些功能块。我今天写了一个快速插件来记住带分页的表格中复选框的状态，其中表格的内容以编程方式换出，但如果用户在第一页上检查一个框（但不保存），转到页面两个，然后回到第一个页面，他们仍然应该看到该框被选中。

如果该复选框代码内嵌在分页代码中，则会使分页代码更复杂。通过将它拉入插件，它只会使分页代码变得复杂一点（在页面卸载时调用$（table）.saveCheckState（），并在新页面加载时调用$（table）.loadCheckState（））。测试非常简单，我只需要一个带有几个复选框的div来测试复选框代码，而不需要在已经非常复杂的分页测试中添加更多内容。

不知道你的背景或经验水平我会犹豫地推荐阅读clean code如果你想了解更多关于这种东西。不幸的是，它是面向Java的，而不是JavaScript，但其中大部分都适用于任何面向对象的语言（其中javascript 可能是），并且可能是此主题的最佳入门级书籍。如果你进行完整的堆栈开发（而不仅仅是前端），至少掌握java的工作知识，是一个初级/中级开发人员想要改进他们的工艺，这是每个人都应该阅读的书籍之一。如果这些事情不是真的，它可能最终只会让你感到困惑，或者对你没有多大用处。所以采取一粒盐的建议:)

Answer 2

你的答案在GUI本身 - 用户接口。

图形用户界面的最佳测试与人。您应该查看完全致力于用户体验的http://ux.stackexchange.com。

我认为这很重要，因为我确定您的GUI已经到了坚实的地步，因为您已经完成了对非图形元素的单元测试。通过你自己的测试，你已经这样做了 - 现在，你应该看到其他人如何与它互动，他们如何破坏它，以及他们喜欢或不喜欢它。然后你做出改变并重新做一遍。

（好吧，我知道这是不是单元测试。但严重的是，对于jQuery的东西重测试选择那里是不是很好玩处理！）