Skip to content

Replace Karma with Vitest for JavaScript testing #2197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
milmazz merged 3 commits into from
Feb 9, 2026
Merged

Replace Karma with Vitest for JavaScript testing #2197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0515dea
Update JS packages
milmazz Feb 9, 2026
a8a823c
replace Karma with Vitest to run JS tests
milmazz Feb 9, 2026
4bdfa00
allow developers to track JS code coverage
milmazz Feb 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,7 @@ jobs:

# Test JS
- run: npm run lint --prefix assets
- name: npm run test --prefix assets
run: |
sudo apt-get install xvfb
xvfb-run --auto-servernum npm run test --prefix assets
env:
CI: true
- run: npm run test --prefix assets

# Push updated assets if all good
- name: Push updated assets
Expand Down
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,6 @@ formatters/html/dist/html.js

# Ignore escript when built
/ex_doc

# Ignore coverage directory created by Vitest
assets/coverage/
23 changes: 15 additions & 8 deletions assets/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ To work on these assets you need to have [Node.js] and [npm] installed. (npm is
Assets are built with [esbuild], which, along with the JavaScript linter and test-runner, is set as a dependency in the assets `package.json` and installed via [npm]:

```bash
$ npm install --prefix assets
npm install --prefix assets
```

## `npm run` scripts
Expand All @@ -17,7 +17,7 @@ The following scripts are available from the root folder of the project.
### `build`

```bash
$ npm run --prefix assets build
npm run --prefix assets build
```

Build a complete production bundle, including JavaScript and CSS.
Expand All @@ -27,7 +27,7 @@ Build a complete production bundle, including JavaScript and CSS.
### `build:watch`

```bash
$ npm run --prefix assets build:watch
npm run --prefix assets build:watch
```

Run the `build` command with watch mode set, providing for automatic assets rebuilds on every asset file change.
Expand All @@ -37,30 +37,37 @@ Additionally, in watch mode, the docs are built after every asset rebuild, meani
### `lint`

```bash
$ npm run --prefix assets lint
npm run --prefix assets lint
```

Lint all JavaScript files using [ESLint].

### `lint:fix`

```bash
$ npm run --prefix assets lint:fix
npm run --prefix assets lint:fix
```

Lint and automatically fix all JavaScript files using [ESLint].

### `test`

```bash
$ npm run --prefix assets test
npm run --prefix assets test
```

Run all the available JavaScript tests using [Karma].
Run all the available JavaScript tests using [Vitest].

### `test:coverage`

```bash
npm run --prefix assets test:coverage
Copy link
Member Author

@milmazz milmazz Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This new script will allow developers to track coverage in case they want to verify or improve our current testing suite.

This is the current report in case you're curious:

npm run --prefix assets test:coverage                                                                                                                  (base)

> test:coverage
> vitest run --coverage


 RUN  v3.2.4 /Users/milmazz/Dev/elixir-lang/ex_doc/assets
      Coverage enabled with v8

 ✓ test/helpers.spec.js (1 test) 2ms
 ✓ test/autocomplete/suggestions.spec.js (16 tests) 6ms
 ✓ test/tooltips/hints.spec.js (2 tests) 7ms

 Test Files  3 passed (3)
      Tests  19 passed (19)
   Start at  23:45:56
   Duration  563ms (transform 39ms, setup 0ms, collect 67ms, tests 15ms, environment 628ms, prepare 127ms)

 % Coverage report from v8
----------------------------|---------|----------|---------|---------|----------------------------------------------------------------------
File                        | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------------------------|---------|----------|---------|---------|----------------------------------------------------------------------
All files                   |   17.22 |    68.46 |   37.14 |   17.22 |
 js                         |     7.3 |    21.73 |    12.5 |     7.3 |
  constants.js              |       0 |        0 |       0 |       0 | 1-7
  content.js                |       0 |        0 |       0 |       0 | 1-24
  copy-button.js            |       0 |        0 |       0 |       0 | 1-45
  copy-markdown.js          |       0 |        0 |       0 |       0 | 1-64
  globals.js                |   81.81 |    33.33 |      50 |   81.81 | 14-15
  helpers.js                |   53.24 |      100 |   21.42 |   53.24 | 46-47,58-128,137-139,154-157,166-171,192-202,210-211,219-221,232-242
  keyboard-shortcuts.js     |       0 |        0 |       0 |       0 | 1-126
  makeup.js                 |       0 |        0 |       0 |       0 | 1-28
  modal.js                  |       0 |        0 |       0 |       0 | 1-98
  quick-switch.js           |       0 |        0 |       0 |       0 | 1-239
  search-bar.js             |       0 |        0 |       0 |       0 | 1-335
  search-page.js            |       0 |        0 |       0 |       0 | 1-302
  settings-store.js         |       0 |        0 |       0 |       0 | 1-122
  settings.js               |       0 |        0 |       0 |       0 | 1-105
  swup.js                   |       0 |        0 |       0 |       0 | 1-40
  tabsets.js                |       0 |        0 |       0 |       0 | 1-147
  theme.js                  |       0 |        0 |       0 |       0 | 1-34
  toast.js                  |       0 |        0 |       0 |       0 | 1-25
 js/autocomplete            |   74.11 |    93.24 |   95.23 |   74.11 |
  autocomplete-list.js      |       0 |        0 |       0 |       0 | 1-108
  suggestions.js            |    98.9 |    94.52 |     100 |    98.9 | 154,183-184
 js/entry                   |       0 |        0 |       0 |       0 |
  epub.js                   |       0 |        0 |       0 |       0 | 1-6
  html.js                   |       0 |        0 |       0 |       0 | 1-19
  inline_html.js            |       0 |        0 |       0 |       0 | 1-34
 js/handlebars              |       0 |        0 |       0 |       0 |
  helpers.js                |       0 |        0 |       0 |       0 | 1-17
 js/sidebar                 |       0 |        0 |       0 |       0 |
  constants.js              |       0 |        0 |       0 |       0 | 1-7
  sidebar-drawer.js         |       0 |        0 |       0 |       0 | 1-128
  sidebar-list.js           |       0 |        0 |       0 |       0 | 1-263
  sidebar-version-select.js |       0 |        0 |       0 |       0 | 1-126
 js/tooltips                |   31.23 |    33.33 |   22.22 |   31.23 |
  hint-page.js              |       0 |        0 |       0 |       0 | 1-35
  hints.js                  |   66.24 |       50 |   28.57 |   66.24 | 51-63,73-80,88-91,99-133,139-142
  tooltips.js               |       0 |        0 |       0 |       0 | 1-177
----------------------------|---------|----------|---------|---------|----------------------------------------------------------------------

While the console report is a bit verbose, the tested modules have good coverage:

  • js/autocomplete/suggestions.js — 98.9% statements
  • js/globals.js — 81.8% statements
  • js/tooltips/hints.js — 66.2% statements
  • js/helpers.js — 53.2% statements

Overall is 17.2% across all 39 JS files, reflecting that only 3 modules are currently tested.

The command also provides an alternative view that you can browse by opening: assets/coverage/index.html

Image

```

Run all the available JavaScript tests with code coverage using [Vitest].

[esbuild]: https://esbuild.github.io
[Node.js]: https://nodejs.org/
[npm]: https://www.npmjs.com/
[ESLint]: https://eslint.org/
[Karma]: https://karma-runner.github.io/
[Vitest]: https://vitest.dev/
23 changes: 0 additions & 23 deletions assets/karma.conf.js
View file
Open in desktop

This file was deleted.

Loading