BDD用于前端代码？

Question

目前，我正在与我公司的程序员和UX合作，创建一个用于我们软件的模式/组件库。可以把它想象成我们自己的Twitter Bootstrap，jQuery UI或Yahoo!设计模式库。

我将使用HTML5，CSS3和jQuery（可能使用CoffeeScript）创建此库。我应该使用像Jasmine这样的库来测试我的js吗？我问的原因是因为任何使用jQuery的组件都不会比花哨的效果做得更多。所以，我想，是否值得测试一下这样的事情：“这个按钮会在悬停时改变类吗？”或“我的手风琴菜单是否正常工作？”

我不熟悉简单前端代码的测试实践，所以我想要一些建议。

Answer 1

我说在那里得到浏览器测试，你可以使用Jasmine或Selenium（我尽量使用Selenium）。

除了基本的“这项工作应该像它应该”测试一样，当jQuery之类的内容发生重大更新时，您可以快速重新运行测试套件并查看失败的内容。这将为您节省大量时间，一旦您解决了问题（如果有的话），您就可以为接下来的事情做好准备。

Answer 2

如果你的javascript中有逻辑，那么单元测试是有意义的。保留一个测试套件。

此外，专注于测试端到端内容的系统测试。在您的情况下，使用像硒这样的工具进行浏览器测试也很重要。这有助于解决库更新时的回归问题，特别是对于JS经常更新库或有时彼此交换库的JS。

Answer 3

我发现将BDD与库和框架结合使用的最佳方法之一是创建一些实际使用框架的小应用程序。然后，这些文档还向需要知道如何使用它的任何其他人提供文档。这实际上是大多数BDD框架本身（JBehave，Cucumber等）的设计方式。您可以看到类似here的示例，我在其中使用宠物车间来驱动自动化工具，并在宠物店周围编写场景。

对于美学而言，无论如何你可能会手动测试它们，@ ashutosh-raina建议对这里的任何逻辑进行单元测试都很棒。当您为玩具应用编写场景时，请关注what they can do而不是他们如何做，并且您可能会发现您在全栈级别覆盖了大部分功能。不要担心强制它，因为单元测试将完成剩下的工作。我链接的例子是.NET，但应该让你知道我的意思。

玩具应用程序的另一个好处是，如果您收到新请求，通常可以找到添加内容或更改应用程序以演示该请求的方法，然后轻松添加并确保其有效。

如果您编写了太多场景，您的套件将很快变得无法维护，并且使您的代码更难以更改，这与您想要的完全相反。