针对不同浏览器的 JavaScript 通用单元测试概念/实践？

发布于 2024-08-02 22:25:58 字数 825 浏览 5 评论 0原文

我一直在用强类型语言编写单元测试，并且对此有很好的理解。当用 JavaScript 编写单元测试来验证某些功能是否在某些浏览器中正常工作时，我又回到了手动测试。我不明白它是如何工作的。 因为 JavaScript 旨在缩小数据和表示之间的差距，并使其更具交互性。一切都发生在浏览器内，并且更多地与 UI 有关。 因此，我假设如果我要编写一个单元测试，我会编写类似的内容（用伪代码）：

run function A
check DOM if certain element has been created
  if not then fail
check if element is visible
  if not then fail
check for the content of that element
  if null then fail
etc…

编写这些测试看起来“很难”对我来说“编码”，缺少的是测试无法判断它是否已正确呈现，它只是进行纯功能测试。所以我想知道是否有人可以向我解释 JavaScript 中正确的测试程序是什么、如何进行构建自动化以及执行此操作的一些一般概念。我只是在查看John Resig 的项目testswarm，但尚未弄清楚它的含义。我目前也在阅读有关 QUnit 的内容。

我正在寻找一些关于我可以开始的概念/实践的介绍性材料。我并不是在寻找特定的库或工具，除非它们对概念有很好的介绍。

谢谢。

原文

I’ve been writing unit tests in strongly typed languages and I have a fair good understanding about it. When writing unit tests in JavaScript to verify if certain functions are working properly in certain browsers I am back to the manual testing. I have no understanding of how it works. Because JavaScript is meant to close the gap between data and presentation and make it more interactive. And everything is happening within browsers and it's more to do with UI. So I am assuming that if I were going to write a unit test I would write something like (in pseudo code):

run function A
check DOM if certain element has been created
  if not then fail
check if element is visible
  if not then fail
check for the content of that element
  if null then fail
etc…

Writing these tests seem like “hard coding” to me and what’s missing is that the tests wouldn’t be able to tell if it’s been rendered properly, it's only doing the pure functional tests. So I am wondering if someone can explain to me what are the proper test procedures in JavaScript, how to do build automations and some general concepts in doing it. I was just looking at John Resig's project testswarm but yet to figure out what it’s about. I am also reading about QUnit at the moment.

I am looking for some introductory materials on the concepts/practices that can me started. I am not looking for specific libraries or tools unless they have good introduction on the concepts.

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

×眷恋的温暖 2024-08-09 22:25:58

这绝对是目前 Web 开发中一个令人困惑且充满活力的领域。在我看来，JS 测试有一些重要的特性区别：

纯单元测试，测试纯 Javascript 代码。您可以断言 a+b=3 或其他任何断言。我们只有少数问题属于这一类。在讨论选项时，有很多 JSUnit（JUnit 端口）的替代品。它们分为 TDD 与 BDD 以及这些类别中的命名选择。
JavaScript + DOM 测试。现在编写的大部分代码都是关于操作 DOM 的。例如。 assertEqual('
>', $('div').wrap('a')); 对于基于 DOM 的 JS 测试，您要么需要转向浏览器内测试，要么使用像 env.js 这样的库。
还有mocking&存根（冒烟）、异步和其他帮助程序

有两个地方可以运行测试：

浏览器外测试（通常运行速度更快，因此可以在 TDD 环境中使用）
浏览器内测试（速度较慢、更复杂，但提供更准确的跨浏览器测试结果）

Selenium 在浏览器中运行，因此非常适合集成测试。如果您没有其他工作，这是一个很好的起点。它已经存在几年了，支持最流行的浏览器和语言。观看这样的截屏视频可能会有所帮助。此文档可能会让您大致了解测试的样子。还有很多其他教程和截屏视频，但其中许多都陷入了您不关心的技术困境中，因此您必须有所选择。

最后，这是 blue ridge，这是一个用于 Rails 浏览器外测试（以及手动浏览器内测试）的工具集合：

Screw.Unit(function() {
    describe("Your application javascript", function() {
        it("accesses the DOM from fixtures/application.html", function() {
            expect($('.select_me').length).to(equal, 2);
        });
    });
});

这是一个使用类似 rspec 的语法测试的单一测试，那里有几个要素。希望这有帮助！

This is definitely a confusing and dynamic area of web development right now. In my mind, there are a few important feature distinctions of JS testing:

pure unit tests, that test plain Javascript code. You can assert that a+b=3, or whatever. We've had only a few problem that fit into this category. When discussion options, there are lots of alternatives to the JSUnit (a JUnit port). They break down into TDD vs. BDD and naming choices within those categories.
Javascript + DOM tests. So much of the code written these days is about manipulating the DOM. eg. assertEqual('<a><div /></a>', $('div').wrap('a')); For DOM-based JS testing, you either need to move to in-browser testing, or use a library like env.js.
There are also mocking & stubbing (smoke), async and other helpers

There are two places tests can run:

out-of-browser testing (generally faster to run, so they can be used in a TDD enviroment)
in-browser testing (slower, more complicated, but provide more accurate cross-browser test results)

Selenium runs in-browser, so it is great for integration tests. If you have nothing else working, this is a good starting point. It's been around for a few years and supports most popular browsers and languages. Watching a screencast like this might be helpful. And this documentation might give you a flavor of what the tests would look like. There are also quite a few other tutorials and screencasts around, but many of them get bogged down in the technical doodoo you don't care about, so you have to be selective.

Finally, here's an example from blue ridge, which is a collection of tools pulled together for out-of-browser testing (and manual in-browser test) for Rails:

Screw.Unit(function() {
    describe("Your application javascript", function() {
        it("accesses the DOM from fixtures/application.html", function() {
            expect($('.select_me').length).to(equal, 2);
        });
    });
});

This is a single test using an rspec-like syntax test test that a couple elements are there. Hope this helps!

回复收藏 0 原文