I created a simple jQuery plugin, which modifies the HTML according to some simple rules, using jQuery. Now I need to test that it works. I use Gulp for build automation. I decided to use Jasmine for unit testing. My question is how do I run my plugin from the test.js and validate the result? I have node.js installed at the build server.
3 Answers
Answers 1
Your best bet is to use the gulp-jasmine-browser npm plugin. This will allow you to run your tests in a normal browser, or headless browser. The gulp task you need to create is something like this:
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})); }); Or, if you want to run in a headless server, change the last line to this:
.pipe(jasmineBrowser.headless({driver: 'chrome'})); Answers 2
Solution
Use jsdom to emulate a browser within your Jasmine unit tests.
Details
jsdom is "a pure-JavaScript implementation of many web standards...for use with Node.js...to emulate enough of a subset of a web browser to be useful for testing and scraping real-world web applications".
jsdom has become the de facto standard for emulating a browser within Node.js. It has over 2 million weekly npm downloads and, among other things, is included automatically as the default test environment in Jest.
jsdom provides the window needed to initialize jQuery, load a jQuery plugin, and unit test it using Jasmine from within Node.js as if it were running in a browser:
colorize-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(''); }); }); I created a pull request that includes jsdom as a dev dependency, bumps node to v8 in Travis CI, and includes this initial unit test. It passes the build checks (including this unit test) and is ready to merge.
Answers 3
Testing it with gulp and Karma.. Assuming you have install all the gulp files and their dependencies. Make your gulp task
Generate your karma conf file..
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']); Edit conf file as per your file path
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 } ] Write your test 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'); }); }); The tests themselves are also a simple structure and jasmine users will be familiar once again:
`it('Should add the class "myPlugin" to the element', function() { expect(el.hasClass('myPlugin')).toBe(true); });` All you need to do now is run:
`gulp tests` you can refer this url https://earthware.co.uk/blog/using-gulp-and-karma-to-test-a-jquery-plugin/
0 comments:
Post a Comment