karma jasmine_使用Jasmine，Travis和Karma测试JavaScript

最新推荐文章于 2024-11-15 18:38:47 发布

dingshi7798

最新推荐文章于 2024-11-15 18:38:47 发布

阅读量82

点赞数

文章标签： java javascript python vue js ViewUI

原文链接：https://www.sitepoint.com/testing-javascript-jasmine-travis-karma/

版权

karma jasmine

有人说，遗留代码是任何未经测试编写的代码，而我就是其中之一。但是我也是前端开发人员，这意味着测试我的代码通常需要浏览器。这使测试稍微困难一些，或者至少我认为是这样。实际上，它实际上非常简单，在本文中，我将向您展示入门所需的条件！

GitHub和Travis CI

为了测试我们的代码，我们将使用GitHub和Travis CI 。 GitHub将托管我们的代码，Travis CI将作为测试平台。所有这些对于公共存储库都是完全免费的，并且有大量文档可以帮助您使用这两种产品。首先要做的是在GitHub上创建一个存储库。为了本教程的缘故，我创建了一个存储库，您可以在此处找到。

下一步是访问位于https://travis-ci.org/的页面并使用GitHub登录。完成后，您需要为Travis添加一个存储库，以针对其运行测试，如下图所示。

添加新的存储库

单击“加号”图标将带我们到控制台，在此我们可以与我们的GitHub帐户同步并选择存储库。

选择仓库

由于我们尚未设置任何测试，因此存储库的仪表板将为空白。现在让我们进入下一个阶段。

用Node.js做东西

就像线粒体是细胞的强大力量一样，Node.js将成为我们甜蜜测试设置的强大力量。如果尚未安装Node.js，请访问其网站并进行安装。完成后，克隆在上一节中创建的存储库，以便将所有文件保存在本地计算机中。至此，我们准备安装Karma！

Karma是最初由AngularJS团队创建的测试框架。我们将使用它来帮助我们在Firefox的Travis CI上运行Jasmine。我知道这听起来让人难以置信，但是请放心！不久，我们将运行一些非常酷的测试，这一切都是值得的。

如果您的存储库中还没有package.json文件和node_module文件夹，请运行npm init并完成设置。前面的命令将帮助您创建package.json文件。接下来，运行以下命令：

npm install karma --save-dev

我们还将安装一些必要的Karma插件：karma-jasmine和karma-firefox-launcher。因此，继续运行：

npm install karma-jasmine karma-firefox-launcher --save-dev

现在我们已经安装了所有必需的插件，我们想告诉Karma我们的项目，以便它可以针对它运行测试。运行命令：

karma init my.conf.js

这将引导您完成有指导的设置，并向您询问有关项目及其环境的问题。以下屏幕截图将显示简单的Karma设置所需的所有问题和答案：

业力初始化

我们尚未创建测试目录。因此，当被问到源文件和测试文件的位置时，我们会被警告说tests/*.js不存在。至于dist/*.js ，这就是我计划对其运行测试的文件，对于您的项目可能有所不同。

而已！业力很好！

配置Travis

到目前为止，Travis还不知道如何处理我们的存储库。让我们解决这个问题。我们需要使用以下代码创建一个.travis.yml文件：

language: node_js
node_js:
    - "0.10"
script: node_modules/karma/bin/karma start my.conf.js --single-run
before_install:
    - export DISPLAY=:99.0
    - sh -e /etc/init.d/xvfb start
before_script:
    - npm install

这告诉Travis，我们正在使用Node.js来测试JavaScript并使用Firefox作为浏览器。此外，我们指定在开始测试之前，它应该运行npm install来获取所有必需的插件。

用Jasmine编写测试

至此，我们已经正确配置了Karma和Travis。因此，我们准备为我们JavaScript代码编写一些测试。对于我的示例存储库，我有一个名为coolLibrary.js的文件，该文件将青色方块添加到body元素并为其提供了data属性。您可以在CodePen上看到它的运行情况。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

为了测试此代码，我创建了my.conf.js文件中提到的tests目录，然后从那里添加茉莉花测试文件。我的第一个测试将是一个简单的检查，以确保页面上有一个带box类的div 。 Jasmine通过易于理解的函数语法使此操作非常简单。这是第一个测试（ checkIfDivExists.js ）的样子：

describe('getDiv', function() {
    var d = document.querySelector('.box');

    it('Should exist', function() {
        expect(d.nodeName).toBe('DIV');
    });
});

这将创建一个Suite，该Suite搜索具有box类的元素，并期望其节点名称为DIV 。语法非常简单。

除了之前的测试，我还将创建另外两个测试，您可以在GitHub存储库中找到该项目，并在下面为您的商品复制这些测试：

describe('getDivBg', function() {
    var d = document.querySelector('.box');

    it('Should be teal', function() {
        expect(d.style.backgroundColor).toBe('teal');
    });
});

describe('getDivAttribute', function() {
    var d = document.querySelector('.box');

    it('Should be bar', function() {
        expect(d.getAttribute('foo')).toBe('bar');
    });
});

运行测试

在对我们的代码进行测试之后，我们的最后一步是提交代码。这将添加我们所有的测试逻辑，并在Travis上触发构建。不要忘记拥有一个.gitignore文件，以确保您的node_modules文件夹没有被推送到存储库中！提交并推送代码后，Travis将自动检测更改并运行测试。该过程可能需要几分钟，但是构建完成后会通过电子邮件通知您。

成功！

成功建立

您可以根据需要创建任意数量的测试，并且GitHub将确保也根据这些测试检查传入的请求请求。

结论

在本教程中，我们学习了如何使用Karma，Jasmine和Travis为JavaScript代码设置简单的测试环境。随时在https://github.com/sitepoint-editors/FEJStesting上查看最终结果，并在评论中提出任何疑问或担忧！您可以在以下网址查看有关Travis的最新测试： https：//travis-ci.org/tevko/FEJStesting