Mocha VS Qunit

Compare

Install

Mocha need to install but Qunit needn‘t.

Mocha:

• • install node.js(Download::https://nodejs.org/en/)
  • install mocha
  • global install: $ npm install --global mocha
  • Install in your development project
  • :Cd to your project directory :
  • $ npm install mocha

Qunit:
       Import qunit.js

Test Grammar 

　　Mocha has difference interfaces so it has more test style,BDD, TDD, QUnit, Export and Require-style.

1. BDD

   The BDD interface provides describe(), context(), it(), specify(), before(), after(), beforeEach(), and afterEach().
   context() is just an alias for describe(), and behaves the same way; it just provides a way to keep tests easier to read and organized. Similarly, specify() is an alias for it().

   describe(‘Array‘, function() {

          it(‘ ‘, function(){

   });

     });

2. TDD

   The TDD interface provides suite(), test(), suiteSetup(), suiteTeardown(), setup(), and teardown():

   suite(‘#indexOf()‘, function() {
   test(‘should return -1 when not present‘, function() {
              assert.equal(-1, [1,2,3].indexOf(4));
         });
     });

3. Qunit

   The QUnit-inspired interface matches the “flat” look of QUnit, where the test suite title is simply defined before the test-cases. Like TDD, it uses suite() and test(), but resembling BDD, it also contains before(), after(), beforeEach(), and afterEach().

   suite(‘Array‘);
   test(‘#length‘, function() {
               var arr = [1,2,3];
               ok(arr.length == 3);
         }

4. Exports

The Exports interface is much like Mocha’s predecessor expresso. The keys before, after, beforeEach, and afterEach are special-cased, object values are suites, and function values are test-cases:

module.exports = {
      ‘Array‘: {
           ‘#indexOf()‘: {
                 ‘should return -1 when not present‘: function() {
                       [1,2,3].indexOf(4).should.equal(-1);
                  }
            }
      };
    };

　　Qunit is not so flexible only use Qunit.module()  and Qunit.test()

Assertion

Mocha: According to different require mocha could install different assertion, like chai.js, shoud.js, expect.js, best-assert,…

Mocha allows you to use any assertion library you wish,  we’re using Node.js’ built-in it. you can use libraries such as:

1. should.js - BDD style shown throughout these docs

   Click here to expand...

   $ npm install should
   var should = require(‘should‘);
   (5).should.be.exactly(5).and.be.a.Number();
   var should = require(‘should/as-function‘);
   should(10).be.exactly(5).and.be.a.Number()

2. expect.js - expect() style assertions

   Click here to expand...

   $ npm install chai.js
   var expect = require(‘expect.js‘);
   ok
   expect().to.be.ok();
   expect().to.not.be.ok();
   be/equal
   expect().to.be();

3. chai - expect(), assert() and should-style assertions

   Click here to expand...

   $ npm install chai
   var chai = require(‘chai‘)
   , expect = chai.expect
   , should = chai.should();
   , assert = chai.assert;
   Var foo = ‘bar‘;
   assert.equal(foo, ‘bar‘, ‘foo equal bar‘);
   expect(foo).to.equal(‘bar‘);
   foo.should.equal(‘bar‘);

4. better-assert - C-style self-documenting assert()
5. unexpected - “the extensible BDD assertion toolkit”

Qunit use itself assert

- ok(state, message)

- equal(actual, expected, message)

- notEqual (actual, expected, message) 
          - deepEqual (actual, expected, message) 
          - notDeepEqual(actual, expected, message) 
          - strictEqual (actual, expected, message) 
          - notStrictEqual(actual, expected, message)

Report　　

Mocha: The browse report of mocha test is relative simple and not so beautiful.

Qunit test report is relative more beautiful and clear, we could through the select box run the test case which we want. Another, the report will list all the assert of each case.

Asynchronous code

Testing asynchronous code with Mocha could not be simpler! Simply invoke the callback when your test is complete. By adding a callback (usually named done) to it(), Mocha will know that it should wait for this function to be called to complete the test.

describe(‘User‘, function() {
  describe(‘#save()‘, function() {
    it(‘should save without error‘, function(done) {
      var user = new User(‘Luna‘);
      user.save(done);
    });
  });
});

Qunit use async to wait for asynchronous operation and it often use with setTimeout function.

QUnit.test( "assert.async() test", function( assert ) {var done = assert.async();var input = $( "#test-input" ).focus();    setTimeout(function() {        assert.equal( document.activeElement, input[0], "Input was focused" ); done();    });});

Test jQuery‘s features

Mocha： Run mocha test in browse need set below

1. Create test folder

2. $ mocha init test

Will create four file:index.html, test.js, mocha.js and mocha.css

The index.html will include:
       
     3. Import the files which we needs like the tested js, the dependence,etc.

Qunit: Just need to import qunit.js, qunit.css, the tested js file and other dependence.

Test server-side JavaScript

Mocha: No need browse and could  run the test with command and run very fast, $ npm test

Qunit: Run test with browse, so need more time.

Test control

Mocha could use the Timeouts function to control a test case run time and if the time out of the time,it will failed.But qunit don‘t have this function.

describe(‘a suite of tests‘, function() {
      this.timeout(500);
      it(‘should take less than 500ms‘, function (done) {
            //if the case take more than 500ms it will fail
       });
});

Qunit don‘t have this function.

Integrate with Grunt

Mocha:grunt-mocha: To run mocha test in grunt; grunt-mocha-istanbul: To code coverage for JavaScript Code.

Gruntfile.js

　　grunt.initConfig({

     　　pkg: pkgJson,

　　mocha:{

            　　test:{               　　src:[‘<%= pkg.projectFiles.mochaTests %>‘]            　　}        　　},

    　　grunt.loadNpmTasks(‘grunt-mocha‘);

    　　grunt.registerTask(‘test‘, mocha);

　　}

Qunit: grunt-qunit-junit: To run qunit test in grunt; grunt-qunit-istanbul: To code coverage for JavaScript Code.

Gruntfile.js

grunt.initConfig({

        pkg: pkgJson,        qunit_junit: {            options: {                   dest: qunitJunitReportPath  }        },        qunit: {            options: {                 console: false,                 timeout: 10000,                 coverage: {                    disposeCollector: true,                    src: ‘<%= pkg.projectFiles.javascript %>‘,                    htmlReport: qunitHtmlReportPath,                    coberturaReport: qunitCoberturaReportPath,                    cloverReport: qunitCloverReportPath,                    jsonSummaryReport: qunitJsonSummaryReportPath,                    instrumentedFiles: tempPath,                    reportOnFail: true,                    coverageTempPath: coverageTempPath,                    linesThresholdPct: ‘<%= pkg.coverageThreshold %>‘,                    branchesThresholdPct: ‘<%= pkg.branchCoverageThreshold %>‘ }             },             all: ‘<%= pkg.projectFiles.qunitTests %>‘ }

grunt.loadNpmTasks(‘grunt-qunit-istanbul‘);

grunt.loadNpmTasks(‘grunt-qunit-junit‘);

}

Summary

Mocha test server-side common and run with command, so it faster

Qunit test ui more common and need less dependence and plug-in.

For reservation js is tendency ui and the two frame run broswer test has no obvious difference of speed, another our framework has complete configuration of Qunit,

so I support to use Qunit to test our javascript.　

What is mocha?

Mocha is a feature-rich JavaScript test framework running on Node.js(:https://nodejs.org/en/) and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. Detail:https://mochajs.org

Feature

- Open Source Framework 
- Started in Node 
- Supports both client-side and server-side testing 
- Supports both BDD and TDD style tests 
- Supports both command line and browser 
- Supports any JavaScript assertion library (YUI Port, expect.js, should.js, jshould.js, assert.js, chai.js) 
- Supports asynchronous testing 
- Requires an assertion library

What is QUnit?

A JavaScript Unit Testing framework. QUnit is a powerful, easy-to-use JavaScript unit testing framework. It‘s used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code.Detail:http://qunitjs.com/

Feature

- Similar to server-side frameworks(JUnit, Nunit)
- Built by the jQuery team
- Used to test jQuery‘s features
- No dependencies
- Can test server-side JavaScript