Question

我创建了一个simple jQuery plugin，它使用jQuery根据一些简单规则修改了HTML。现在，我需要测试它是否有效。我使用Gulp进行构建自动化。我决定使用Jasmine进行单元测试。我的问题是如何从test.js运行插件并验证结果？我在构建服务器上安装了node.js。

Answer 1

解决方案

使用custId来模拟jsdom单元测试中的浏览器。

详细信息

jsdom是“许多Web标准的纯JavaScript实现...可与Node.js一起使用...可模拟Web浏览器的足够一部分，可用于测试和抓取真实的万维网应用程序”。

Jasmine已成为在jsdom中模拟浏览器的事实上的标准。它具有over 2 million weekly npm downloads，并且除其他外自动包含为default test environment in Jest。

Node.js提供初始化jQuery，加载jQuery插件并使用jsdom在window内部进行单元测试所需的Jasmine，就好像它在浏览器中运行一样：

colorize-spec.js

Node.js

我创建了一个pull request，其中包括const { JSDOM } = require('jsdom'); const { window } = new JSDOM(); global.$ = require('jquery')(window); require('../src/colorize'); describe('colorize', () => { const div = $('<div/>'); const settings = { 30: 'highest', 20: 'middle', 10: 'lowest' }; it('should set the applicable class', () => { div.text('35').colorize(settings); expect(div.attr('class')).toBe('highest'); div.text('25').colorize(settings); expect(div.attr('class')).toBe('middle'); div.text('15').colorize(settings); expect(div.attr('class')).toBe('lowest'); div.text('5').colorize(settings); expect(div.attr('class')).toBe(''); }); });作为开发依赖项，将jsdom提升到node中的v8，并包含此初始单元测试。它通过了构建检查（包括此单元测试），并准备好进行合并。

Answer 2

您最好的选择是使用gulp-jasmine-browser npm plugin。这将使您可以在普通浏览器或无头浏览器中运行测试。您需要创建的gulp任务是这样的：

let gulp = require('gulp');
let jasmineBrowser = require('gulp-jasmine-browser');

gulp.task('jasmine', () => {
  return gulp.src(['src/**/*.js', 'spec/**/*_spec.js'])
    .pipe(jasmineBrowser.specRunner())
    .pipe(jasmineBrowser.server({port: 8888}));
});

或者，如果要在无头服务器中运行，请将最后一行更改为此：

    .pipe(jasmineBrowser.headless({driver: 'chrome'}));

Answer 3

用gulp和Karma测试它。假设您已经安装了所有的gulp文件及其依赖项。做好您的任务

生成您的业力conf文件。

karma init karma.conf.js

gulp.task('tests', function (done) {
   return karma.start({
   configFile: __dirname + '/karma.conf.js',
   singleRun: false
  }, done);
});

gulp.task('default', ['tests']);

根据文件路径编辑conf文件

files: [
   '<PATH-TO-TESTS>/*.js', '<PATH-TO-JQUERY>/jquery.js', '<PATH-TO-PLUGIN>/<PLUGIN-NAME>.js',
 {
   pattern:  '<PATH-TO-TESTS>/*.html',
   watched:  true,
   served:   true,
   included: false
 }
]

编写测试js

describe('myPlugin Initialisation', function() {

var el, myPlugin;

beforeEach(function(){
    jasmine.getFixtures().fixturesPath = 'base/Tests';
    loadFixtures('Template.html');
    el = $('#myPlugin-Test');
    myPlugin = el.myPlugin().data('myPlugin');
});
});

测试本身也是一个简单的结构，茉莉花用户将再次熟悉：

 `it('Should add the class "myPlugin" to the element', function() {
     expect(el.hasClass('myPlugin')).toBe(true);
 });`

现在您需要做的就是运行：

 `gulp tests`

您可以引用此网址https://earthware.co.uk/blog/using-gulp-and-karma-to-test-a-jquery-plugin/

如何使用Gulp，Jasmine和NodeJS测试我的jQuery插件？

3 个答案: