Skip to content

Debugging karma tests

Jump to bottom
Ben Clark edited this page Mar 22, 2022 · 4 revisions

When you run 'npm test', the karma.conf.cjs file is consulted for the test runner.

This file has a port, and a setting that kills the test runner once all tests are run:


    // web server port
    port: 9876,
    ...
    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,     // <-- Change this to false

You will want to change the singleRun: true setting to false, then fire off an npm run test. Pay attention to which port the test runner binds to- if there are previous test runners still running on your system, it'll keep adding one to the port number.

Startup terminal logs should look like this:

21 03 2022 10:59:52.518:WARN [karma]: No captured browser, open http://localhost:9876/ // <-- note port number
21 03 2022 10:59:52.556:INFO [karma-server]: Karma v6.3.17 server started at http://localhost:9876/
21 03 2022 10:59:52.557:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
21 03 2022 10:59:52.560:INFO [launcher]: Starting browser ChromeHeadless
21 03 2022 10:59:53.179:INFO [Chrome Headless 99.0.4844.74 (Mac OS 10.15.7)]: Connected on socket LKmWt-oi6cHoXFp-AAAB with id 94531101

now connect to localhost:9876 (or whatever port the test runner picked) to bring up the karma test runner page:

You should see something like: image

Clicking the 'debug' button will take you to a new page, it should flicker and act strange as it runs through the tests. Each refresh of this page will fire off the test suite anew.

To debug, open the browser devtools and wait for sources to load- from there, you should be able to browse the sources base/test/spec folder to see all the test specs. Simply navigate to the source file you want to debug, set a breakpoint in the devtools, and refresh the debug runner tab. You should hit your breakpoint!

image

Debugging a single file:

edit the karma.conf.cjs so that the files:[] directive has the final line commented. Replace it with the test spec(s) you want.

ex: image

Refreshing your sources

Once you get into a groove you're going to want to test and re-test your sources. There's no need to kill the entire npm process each time you want to load new code- simply refresh the browser tab.

NOTE: While debugging, you will have two tabs open. one to the main test runner, and the debug one. You need to refresh the main tab, then the debug runner tab to load new code. If you just want to re-run your current test run but haven't changed any code, just reload the debug runner tab.

Here's what they look like in chrome:

image

If you make a modification to code that's under test, refresh the browser tab

Clone this wiki locally