Как проверить мой плагин jQuery с Gulp, Jasmine и NodeJS?

Я создал простой плагин jQuery, который изменяет HTML в соответствии с некоторыми простыми правилами, используя jQuery. Теперь мне нужно проверить, что это работает. Я использую Gulp для автоматизации сборки. Я решил использовать Жасмин для модульного тестирования. Мой вопрос, как мне запустить мой плагин из test.js и подтвердить результат? У меня есть node.js, установленный на сервере сборки.

Источник

3 ответа

Решение

Решение

использование jsdom эмулировать браузер в вашем Jasmine модульные тесты.

подробности

jsdomэто "реализация многих веб-стандартов на чистом JavaScript... для использования с Node.js... для эмуляции достаточного количества подмножеств веб-браузера, чтобы быть полезной для тестирования и просмотра реальных веб-приложений".

jsdomстал стандартом де-факто для эмуляции браузера вNode.js, Он имеет более 2 миллионов еженедельных загрузок по npm и, помимо прочего, автоматически включается в качестве тестовой среды по умолчанию в Jest,

jsdomобеспечиваетwindowнеобходимо инициализировать jQuery, загрузить плагин jQuery и протестировать его с помощьюJasmine изнутри Node.js как будто он работает в браузере:

раскрасить-spec.js

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 в Travis CIи включает в себя этот начальный модульный тест. Он проходит проверки сборки (включая этот модульный тест) и готов к слиянию.

Источник

Тестирование с помощью gulp и Karma. Предполагается, что вы установили все файлы gulp и их зависимости. Выполни задание

Создайте свой файл конфигурации кармы..

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`

Вы можете сослаться на этот URL https://earthware.co.uk/blog/using-gulp-and-karma-to-test-a-jquery-plugin/

Источник

Лучше всего использовать gulp-jasmine-browser ппм плагин. Это позволит вам запускать свои тесты в обычном браузере или безголовом браузере. Задание 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'}));
Источник
Другие вопросы по тегам