src/scss/bootstrap-4.0.0-alpha.6/js/tests/README.md

   1 ## How does Bootstrap's test suite work?
   2
   3 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`.
   4
   5 * `unit/` contains the unit test files for each Bootstrap plugin.
   6 * `vendor/` contains third-party testing-related code (QUnit and jQuery).
   7 * `visual/` contains "visual" tests which are run interactively in real browsers and require manual verification by humans.
   8
   9 To run the unit test suite via [PhantomJS](http://phantomjs.org/), run `grunt test-js`.
  10
  11 To run the unit test suite via a real web browser, open `index.html` in the browser.
  12
  13
  14 ## How do I add a new unit test?
  15
  16 1. Locate and open the file dedicated to the plugin which you need to add tests to (`unit/<plugin-name>.js`).
  17 2. Review the [QUnit API Documentation](https://api.qunitjs.com/) and use the existing tests as references for how to structure your new tests.
  18 3. Write the necessary unit test(s) for the new or revised functionality.
  19 4. Run `grunt test-js` to see the results of your newly-added test(s).
  20
  21 **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.
  22
  23 ## What should a unit test look like?
  24
  25 * Each test should have a unique name clearly stating what unit is being tested.
  26 * Each test should test only one unit per test, although one test can include several assertions. Create multiple tests for multiple units of functionality.
  27 * Each test should begin with [`assert.expect`](https://api.qunitjs.com/expect/) to ensure that the expected assertions are run.
  28 * Each test should follow the project's [JavaScript Code Guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#js)
  29
  30 ### Example tests
  31
  32 ```javascript
  33 // Synchronous test
  34 QUnit.test('should describe the unit being tested', function (assert) {
  35   assert.expect(1)
  36   var templateHTML = '<div class="alert alert-danger fade in">'
  37       + '<a class="close" href="#" data-dismiss="alert">×</a>'
  38       + '<p><strong>Template necessary for the test.</p>'
  39       + '</div>'
  40   var $alert = $(templateHTML).appendTo('#qunit-fixture').bootstrapAlert()
  41
  42   $alert.find('.close').click()
  43
  44   // Make assertion
  45   assert.strictEqual($alert.hasClass('in'), false, 'remove .in class on .close click')
  46 })
  47
  48 // Asynchronous test
  49 QUnit.test('should describe the unit being tested', function (assert) {
  50   assert.expect(1)
  51   var done = assert.async()
  52
  53   $('<div title="tooltip title"></div>')
  54     .appendTo('#qunit-fixture')
  55     .on('shown.bs.tooltip', function () {
  56       assert.ok(true, '"shown" event was fired after calling "show"')
  57       done()
  58     })
  59     .bootstrapTooltip('show')
  60 })
  61 ```