2015-03-01 04:54:58 +01:00
## How does Bootstrap's test suite work?
2016-10-03 18:55:59 +02:00
Bootstrap uses [QUnit ](https://qunitjs.com/ ), a powerful, easy-to-use JavaScript unit test framework. Each plugin has a file dedicated to its tests in `unit/<plugin-name>.js` .
2015-03-01 04:54:58 +01:00
* `unit/` contains the unit test files for each Bootstrap plugin.
* `vendor/` contains third-party testing-related code (QUnit and jQuery).
* `visual/` contains "visual" tests which are run interactively in real browsers and require manual verification by humans.
2017-11-29 17:42:09 +01:00
To run the unit test suite via [Karma ](http://karma-runner.github.io/ ), run `npm run js-test` .
2015-03-01 04:54:58 +01:00
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`).
2016-10-03 18:55:59 +02:00
2. Review the [QUnit API Documentation ](https://api.qunitjs.com/ ) and use the existing tests as references for how to structure your new tests.
2015-03-01 04:54:58 +01:00
3. Write the necessary unit test(s) for the new or revised functionality.
2017-04-20 12:33:51 +02:00
4. Run `npm run js-test` to see the results of your newly-added test(s).
2015-03-01 04:54:58 +01:00
**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?
* Each test should have a unique name clearly stating what unit is being tested.
* Each test should test only one unit per test, although one test can include several assertions. Create multiple tests for multiple units of functionality.
2017-10-07 00:04:21 +02:00
* Each test should begin with [`assert.expect` ](https://api.qunitjs.com/assert/expect/ ) to ensure that the expected assertions are run.
2015-03-01 04:54:58 +01:00
* Each test should follow the project's [JavaScript Code Guidelines ](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#js )
### Example tests
```javascript
// Synchronous test
QUnit.test('should describe the unit being tested', function (assert) {
assert.expect(1)
2017-10-07 00:04:21 +02:00
var templateHTML = '< div class = "alert alert-danger fade show" > '
2015-03-01 04:54:58 +01:00
+ '< a class = "close" href = "#" data-dismiss = "alert" > × < / a > '
+ '< p > < strong > Template necessary for the test.< / p > '
+ '< / div > '
var $alert = $(templateHTML).appendTo('#qunit-fixture').bootstrapAlert()
2017-10-07 00:04:21 +02:00
$alert.find('.close').trigger('click')
2015-03-01 04:54:58 +01:00
// Make assertion
2017-10-07 00:04:21 +02:00
assert.strictEqual($alert.hasClass('show'), false, 'remove .show class on .close click')
2015-03-01 04:54:58 +01:00
})
// 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')
})
```