2025-04-16 00:37:47 +08:00
## How does Bootstrap’ s test suite work?
2015-03-01 11:54:58 +08:00
2019-10-09 06:27:43 +08:00
Bootstrap uses [Jasmine ](https://jasmine.github.io/ ). Each plugin has a file dedicated to its tests in `tests/unit/<plugin-name>.spec.js` .
2015-03-01 11:54:58 +08:00
2020-05-14 13:33:49 +08:00
- `visual/` contains "visual" tests which are run interactively in real browsers and require manual verification by humans.
2015-03-01 11:54:58 +08:00
2018-04-01 15:35:51 +08:00
To run the unit test suite via [Karma ](https://karma-runner.github.io/ ), run `npm run js-test` .
2019-03-13 22:23:50 +08:00
To run the unit test suite via [Karma ](https://karma-runner.github.io/ ) and debug, run `npm run js-debug` .
2015-03-01 11:54:58 +08:00
## How do I add a new unit test?
2019-10-09 06:27:43 +08:00
1. Locate and open the file dedicated to the plugin which you need to add tests to (`tests/unit/< plugin-name > .spec.js`).
2019-03-13 22:23:50 +08:00
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.
2015-03-01 11:54:58 +08:00
3. Write the necessary unit test(s) for the new or revised functionality.
2017-04-20 18:33:51 +08:00
4. Run `npm run js-test` to see the results of your newly-added test(s).
2015-03-01 11:54:58 +08: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?
2020-05-14 13:33:49 +08:00
- 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 use [`expect` ](https://jasmine.github.io/api/edge/matchers.html ) to ensure something is expected.
2025-04-16 00:37:47 +08:00
- Each test should follow the project’ s [JavaScript Code Guidelines ](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md#js )
2015-03-01 11:54:58 +08:00
2018-03-06 13:35:28 +08:00
## Code coverage
2025-04-16 00:37:47 +08:00
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-test-karma` 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.
2018-03-06 13:35:28 +08:00
2015-03-01 11:54:58 +08:00
### Example tests
2018-03-06 13:35:28 +08:00
```js
2015-03-01 11:54:58 +08:00
// Synchronous test
2019-07-28 21:24:46 +08:00
describe('getInstance', () => {
2019-03-13 22:23:50 +08:00
it('should return null if there is no instance', () => {
// Make assertion
2021-10-14 23:16:54 +08:00
expect(Tab.getInstance(fixtureEl)).toBeNull()
2019-03-13 22:23:50 +08:00
})
it('should return this instance', () => {
fixtureEl.innerHTML = '< div > < / div > '
const divEl = fixtureEl.querySelector('div')
const tab = new Tab(divEl)
// Make assertion
2019-07-28 21:24:46 +08:00
expect(Tab.getInstance(divEl)).toEqual(tab)
2019-03-13 22:23:50 +08:00
})
2015-03-01 11:54:58 +08:00
})
// Asynchronous test
2022-01-30 20:30:04 +08:00
it('should show a tooltip without the animation', () => {
return new Promise(resolve => {
fixtureEl.innerHTML = '< a href = "#" rel = "tooltip" title = "Another tooltip" > < / a > '
2019-03-13 22:23:50 +08:00
2022-01-30 20:30:04 +08:00
const tooltipEl = fixtureEl.querySelector('a')
const tooltip = new Tooltip(tooltipEl, {
animation: false
})
2019-03-13 22:23:50 +08:00
2022-01-30 20:30:04 +08:00
tooltipEl.addEventListener('shown.bs.tooltip', () => {
const tip = document.querySelector('.tooltip')
2019-03-13 22:23:50 +08:00
2022-01-30 20:30:04 +08:00
expect(tip).not.toBeNull()
expect(tip.classList.contains('fade')).toEqual(false)
resolve()
})
2019-03-13 22:23:50 +08:00
2022-01-30 20:30:04 +08:00
tooltip.show()
})
2015-03-01 11:54:58 +08:00
})
```