¿Cómo probar mi plugin jQuery con Gulp, Jasmine y NodeJS?

Creé un complemento simple de jQuery , que modifica el HTML de acuerdo con algunas reglas simples, utilizando jQuery. Ahora necesito probar que funciona. Yo uso Gulp para la automatización de la construcción. Decidí usar Jasmine para pruebas unitarias. Mi pregunta es ¿cómo ejecuto mi complemento desde el test.js y valido el resultado? Tengo node.js instalado en el servidor de comstackción.

Solución

Usa jsdom para emular un navegador dentro de tus pruebas de unidades Jasmine .

Detalles

jsdom es “una implementación de JavaScript puro de muchos estándares web … para usar con Node.js … para emular lo suficiente de un subconjunto de un navegador web para ser útil para probar y raspar aplicaciones web del mundo real”.

jsdom ha convertido en el estándar de facto para emular un navegador dentro de Node.js Cuenta con más de 2 millones de descargas semanales de npm y, entre otras cosas, se incluye automáticamente como el entorno de prueba predeterminado en Jest .

jsdom proporciona la window necesaria para inicializar jQuery, cargar un complemento de jQuery y realizar una prueba de unidad usando Jasmine desde Node.js como si se estuviera ejecutando en un navegador:


colorize-spec.js

 const { JSDOM } = require('jsdom'); const { window } = new JSDOM(); global.$ = require('jquery')(window); require('../src/colorize'); describe('colorize', () => { const 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 una solicitud de extracción que incluye jsdom como una dependencia de desarrollo, golpea el node a v8 en Travis CI e incluye esta prueba de unidad inicial. Pasa los controles de comstackción (incluida esta prueba de unidad) y está listo para fusionarse.

Lo mejor es usar el complemento npm de gulp-jasmine-browser . Esto le permitirá ejecutar sus pruebas en un navegador normal o en un navegador sin cabeza. La tarea de gulp que necesitas crear es algo como esto:

 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})); }); 

O, si desea ejecutar en un servidor sin cabeza, cambie la última línea a esto:

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

Probándolo con Gulp y Karma … Suponiendo que haya instalado todos los archivos Gulp y sus dependencias. Haga su tarea trilla

Genera tu archivo karma 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']); 

Editar archivo conf según su ruta de archivo

 files: [ '/*.js', '/jquery.js', '/.js', { pattern: '/*.html', watched: true, served: true, included: false } ] 

Escribe tu prueba 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'); }); }); 

Las pruebas en sí mismas también son una estructura simple y los usuarios de jasmine volverán a estar familiarizados:

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

Todo lo que necesitas hacer ahora es ejecutar:

  `gulp tests` 

puede consultar esta url https://earthware.co.uk/blog/using-gulp-and-karma-to-test-a-jquery-plugin/

    Intereting Posts