How does Bootstrap’s test suite work?

Bootstrap uses QUnit, a powerful, easy-to-use JavaScript unit test framework. Each plugin has a file dedicated to its tests in unit/<plugin-name>.js.

To run the unit test suite via PhantomJS, run npm run js-test.

To run the unit test suite via a real web browser, open index.html in the browser.

How do I add a new unit test?

  1. Locate and open the file dedicated to the plugin which you need to add tests to (unit/<plugin-name>.js).
  2. Review the QUnit API Documentation and use the existing tests as references for how to structure your new tests.
  3. Write the necessary unit test(s) for the new or revised functionality.
  4. Run npm run js-test to see the results of your newly-added test(s).

Note: Your new unit tests should fail before your changes are applied to the plugin, and should pass after your changes are applied to the plugin.

What should a unit test look like?

Example tests

// Synchronous test
QUnit.test('should describe the unit being tested', function (assert) {
  assert.expect(1)
  var templateHTML = '<div class="alert alert-danger fade show">'
      + '<a class="close" href="#" data-dismiss="alert">×</a>'
      + '<p><strong>Template necessary for the test.</p>'
      + '</div>'
  var $alert = $(templateHTML).appendTo('#qunit-fixture').bootstrapAlert()

  $alert.find('.close').trigger('click')

  // Make assertion
  assert.strictEqual($alert.hasClass('show'), false, 'remove .show class on .close click')
})

// Asynchronous test
QUnit.test('should describe the unit being tested', function (assert) {
  assert.expect(1)
  var done = assert.async()

  $('<div title="tooltip title"></div>')
    .appendTo('#qunit-fixture')
    .on('shown.bs.tooltip', function () {
      assert.ok(true, '"shown" event was fired after calling "show"')
      done()
    })
    .bootstrapTooltip('show')
})