From 89589bdac9c1aefe24fd5eaf5672fb57dc6d75d6 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Tue, 23 Jul 2019 11:07:39 +0200 Subject: [PATCH] update tests readme --- js/tests/README.md | 76 ++++++++++++++++++++++++---------------------- 1 file changed, 39 insertions(+), 37 deletions(-) diff --git a/js/tests/README.md b/js/tests/README.md index 3b079d92cef8..3a01d33997d2 100644 --- a/js/tests/README.md +++ b/js/tests/README.md @@ -1,20 +1,16 @@ ## How does Bootstrap's test suite work? -Bootstrap uses [QUnit](https://qunitjs.com/) and [Sinon](https://sinonjs.org/). Each plugin has a file dedicated to its tests in `unit/.js`. +Bootstrap uses [Jasmine](https://jasmine.github.io/). Each plugin has a file dedicated to its tests in `src//.spec.js`. -* `unit/` contains the unit test files for each Bootstrap plugin. -* `vendor/` contains third-party testing-related code (QUnit, jQuery and Sinon). * `visual/` contains "visual" tests which are run interactively in real browsers and require manual verification by humans. To run the unit test suite via [Karma](https://karma-runner.github.io/), run `npm run js-test`. - -To run the unit test suite via a real web browser, open `index.html` in the browser. - +To run the unit test suite via [Karma](https://karma-runner.github.io/) and debug, run `npm run js-debug`. ## 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/.js`). -2. Review the [QUnit API Documentation](https://api.qunitjs.com/) and use the existing tests as references for how to structure your new tests. +1. Locate and open the file dedicated to the plugin which you need to add tests to (`src//.spec.js`). +2. Review the [Jasmine API Documentation](https://jasmine.github.io/pages/docs_home.html) 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). @@ -23,47 +19,53 @@ To run the unit test suite via a real web browser, open `index.html` in the brow ## What should a unit test look like? * Each test should have a unique name clearly stating what unit is being tested. +* Each test should be in the corresponding `describe`. * Each test should test only one unit per test, although one test can include several assertions. Create multiple tests for multiple units of functionality. -* Each test should begin with [`assert.expect`](https://api.qunitjs.com/assert/expect/) to ensure that the expected assertions are run. +* Each test should use [`expect`](https://jasmine.github.io/api/edge/matchers.html) to ensure something is expected. * Each test should follow the project's [JavaScript Code Guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#js) ## Code coverage -Currently we're aiming for at least 80% test coverage for our code. To ensure your changes meet or exceed this limit, run `npm run js-compile && npm run js-test` and open the file in `js/coverage/lcov-report/index.html` to see the code coverage for each plugin. See more details when you select a plugin and ensure your change is fully covered by unit tests. +Currently we're aiming for at least 90% test coverage for our code. To ensure your changes meet or exceed this limit, run `npm run js-compile && npm run js-test` and open the file in `js/coverage/lcov-report/index.html` to see the code coverage for each plugin. See more details when you select a plugin and ensure your change is fully covered by unit tests. ### Example tests ```js // Synchronous test -QUnit.test('should describe the unit being tested', function (assert) { - assert.expect(1) - var templateHTML = '
' + - '×' + - '

Template necessary for the test.

' + - '
' - 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') +describe('_getInstance', () => { + it('should return null if there is no instance', () => { + // Make assertion + expect(Tab._getInstance(fixtureEl)).toEqual(null) + }) + + it('should return this instance', () => { + fixtureEl.innerHTML = '
' + + const divEl = fixtureEl.querySelector('div') + const tab = new Tab(divEl) + + // Make assertion + expect(Tab._getInstance(divEl)).toEqual(tab) + }) }) // Asynchronous test -QUnit.test('should describe the unit being tested', function (assert) { - assert.expect(2) - var done = assert.async() - - var $tooltip = $('
').bootstrapTooltip() - var tooltipInstance = $tooltip.data('bs.tooltip') - var spyShow = sinon.spy(tooltipInstance, 'show') - - $tooltip.appendTo('#qunit-fixture') - .on('shown.bs.tooltip', function () { - assert.ok(true, '"shown" event was fired after calling "show"') - assert.ok(spyShow.called, 'show called') - done() - }) - .bootstrapTooltip('show') +it('should show a tooltip without the animation', done => { + fixtureEl.innerHTML = '' + + const tooltipEl = fixtureEl.querySelector('a') + const tooltip = new Tooltip(tooltipEl, { + animation: false + }) + + tooltipEl.addEventListener('shown.bs.tooltip', () => { + const tip = document.querySelector('.tooltip') + + expect(tip).toBeDefined() + expect(tip.classList.contains('fade')).toEqual(false) + done() + }) + + tooltip.show() }) ```