Angular Karma Test Bench

Angular Karma Test Bench is a VS Code extension for exploring, running, debugging, and checking coverage for Angular tests that use Karma.

Source code: mwmarcos/angular-karma-test-bench

Based on new vscode testing api and inspired by karma test explorer.

Credits

Angular Karma Test Bench is maintained by Marco Schlicht. It is based on the original angular-testing extension created by Ravi Teja Vattem. See Ravi's blog post for a detailed introduction to the original extension.

Maintenance note

This package is a personal fork of the original extension. I used AI-assisted development tools to help fix issues I encountered, but I do not intend to maintain it as a long-term project. It is provided as-is for anyone who finds it useful.

How to install this extension using VSIX:

• Clone the Angular Karma Test Bench repository.
• Make sure you have the minimum required node v18.
• Install the dependencies npm install.
• Run npm run pkg to package the extension, which generates angular-karma-test-bench-{version}.vsix in the project root.
• Open vscode and go to the extensions tab.
• Click on three dots on the top right corner and click 'Install from vsix' from the menu as shown in the below image.

• Vscode will pop a notification once the installation is successful and it will also be listed in the installed extensions.

How to use the extension:

• Make sure you have installed the extension in first place 😉.
• Find and click the Testing tab which will list all the tests in the project.

Tests are grouped by file path. Their longest common parent directory is omitted, so tests stored below src/app start at the first directory that differs:

feature
└── component.spec.ts
    └── test suites and tests

Consecutive folders with no other children are displayed as one compact path, for example directives/contextmenu.

If a spec file contains one top-level suite, that suite is displayed directly. Files with multiple top-level suites retain a compact filename node, for example menu.spec.ts is displayed as menu.

The project root in the Testing view is named {workspace} - {project} by default. Set angularKarmaTestBench.projectName to use a custom name instead.

Configuration

Standard single-project Angular workspaces work without configuration. The following workspace settings are available for other layouts:

For example, a repository containing an Angular workspace below frontend with several Angular projects can use:

{
  "angularKarmaTestBench.rootPath": "frontend",
  "angularKarmaTestBench.angularProjectName": "customer-portal",
  "angularKarmaTestBench.testFiles": [
    "src/**/*.spec.ts",
    "testing/**/*.test.ts"
  ],
  "angularKarmaTestBench.excludeFiles": [
    "**/node_modules/**",
    "**/generated/**"
  ],
  "angularKarmaTestBench.karmaConfigPath": "apps/customer-portal/karma.custom.js"
}

Changing project, discovery, or Karma process settings currently requires reloading the VS Code window or restarting the extension host.

• When the extension is opened, it discovers the project tests. The Karma server starts automatically only when angularKarmaTestBench.autoStartServer is enabled; otherwise use the status bar or the Angular Karma Test Bench: Start Server command.

• After the server starts, the following happens.

  • The extension will find all the tests in the project and list them in the testing tab
  • The extension will boot-up the karma server on the available port
  • We can see the status of the karma server in the status bar (✔️3000 in the image below).

  

  • The karma server will now remain active(until the vscode window is closed) and wait for the user action.

• Run, debug, and coverage actions start the Karma server automatically when needed.

• We can add debug points in code and debug a test.

• The coverage profile runs the selected tests and publishes their coverage.

• Make sure the inline coverage is enabled to show the coverage of the file

• The tests results and the detailed history can be seen in TEST RESULTS tab

• A test failure will be displayed as follows

Work in progress

• Improve support for projects with non-standard Karma and Angular layouts.
• Expand test discovery for dynamically generated Jasmine test names.

Troubleshooting

• You might notice some delay in the tasks performed by the extension (Optimization is in progress).
• This extension writes most of the logs to the output channel shown below

• Use Angular Karma Test Bench: Restart Server to restart the managed Karma process.
• If you notice 100% cpu utilization, it could be due to having multiple vscode instances open and each will run its own instance of karma server.