Karma Testing Skill
Core Patterns
karma.conf.js
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'src/**/*.js',
'test/**/*.spec.js'
],
preprocessors: {
'src/**/*.js': ['coverage']
},
reporters: ['progress', 'coverage'],
coverageReporter: {
type: 'html',
dir: 'coverage/'
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome', 'Firefox'],
singleRun: false,
concurrency: Infinity,
// LambdaTest cloud browsers
customLaunchers: {
ChromeLT: {
base: 'WebDriver',
config: {
hostname: 'hub.lambdatest.com',
port: 80
},
browserName: 'Chrome',
version: 'latest',
name: 'Karma Test',
tunnel: true,
user: process.env.LT_USERNAME,
accessKey: process.env.LT_ACCESS_KEY
}
}
});
};
Test with Jasmine Framework
describe('StringUtils', () => {
it('should capitalize first letter', () => {
expect(StringUtils.capitalize('hello')).toBe('Hello');
});
it('should handle empty string', () => {
expect(StringUtils.capitalize('')).toBe('');
});
});
Angular Integration
// karma.conf.js for Angular
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-coverage'),
require('@angular-devkit/build-angular/plugins/karma')
],
Setup: npm install karma karma-jasmine karma-chrome-launcher karma-coverage --save-dev
Run: npx karma start or npx karma start --single-run
Init: npx karma init karma.conf.js
Deep Patterns
See reference/playbook.md for production-grade patterns:
| Section |
What You Get |
| §1 Production Configuration |
Full karma.conf.js with coverage thresholds, reporters, CI launchers |
| §2 Component Testing |
Service mocking, DOM interaction, form validation patterns |
| §3 HTTP Service Testing |
HttpTestingController, error handling, retry testing |
| §4 Directive & Pipe Testing |
Host component pattern, custom pipes with edge cases |
| §5 RxJS & Async Patterns |
debounceTime, switchMap cancellation, subscription cleanup |
| §6 Router & NgRx Testing |
RouterTestingModule, MockStore, selector overrides |
| §7 LambdaTest Integration |
Cloud browser configuration for cross-browser testing |
| §8 CI/CD Integration |
GitHub Actions with coverage, test reporting |
| §9 Debugging Table |
12 common problems with causes and fixes |
| §10 Best Practices |
14-item checklist for production Angular testing |
1---2name: karma-skill3description: Generates Karma test runner configurations for browser-based JavaScript testing. Works with Jasmine, Mocha, or QUnit. Use when user mentions "Karma", "karma.conf.js", "browser test runner". Triggers on: "Karma", "karma.conf", "karma test runner", "browser-based JS test".4license: MIT5---6
7# Karma Testing Skill
8
9## Core Patterns
10
11### karma.conf.js
12
13```javascript
14module.exports = function(config) {
15 config.set({
16 basePath: '',
17 frameworks: ['jasmine'],
18 files: [
19 'src/**/*.js',
20 'test/**/*.spec.js'
21 ],
22 preprocessors: {
23 'src/**/*.js': ['coverage']
24 },
25 reporters: ['progress', 'coverage'],
26 coverageReporter: {
27 type: 'html',
28 dir: 'coverage/'
29 },
30 port: 9876,
31 colors: true,
32 logLevel: config.LOG_INFO,
33 autoWatch: true,
34 browsers: ['Chrome', 'Firefox'],
35 singleRun: false,
36 concurrency: Infinity,
37
38 // LambdaTest cloud browsers
39 customLaunchers: {
40 ChromeLT: {
41 base: 'WebDriver',
42 config: {
43 hostname: 'hub.lambdatest.com',
44 port: 80
45 },
46 browserName: 'Chrome',
47 version: 'latest',
48 name: 'Karma Test',
49 tunnel: true,
50 user: process.env.LT_USERNAME,
51 accessKey: process.env.LT_ACCESS_KEY
52 }
53 }
54 });
55};
56```
57
58### Test with Jasmine Framework
59
60```javascript
61describe('StringUtils', () => {
62 it('should capitalize first letter', () => {
63 expect(StringUtils.capitalize('hello')).toBe('Hello');
64 });
65
66 it('should handle empty string', () => {
67 expect(StringUtils.capitalize('')).toBe('');
68 });
69});
70```
71
72### Angular Integration
73
74```javascript
75// karma.conf.js for Angular
76frameworks: ['jasmine', '@angular-devkit/build-angular'],
77plugins: [
78 require('karma-jasmine'),
79 require('karma-chrome-launcher'),
80 require('karma-coverage'),
81 require('@angular-devkit/build-angular/plugins/karma')
82],
83```
84
85## Setup: `npm install karma karma-jasmine karma-chrome-launcher karma-coverage --save-dev`
86## Run: `npx karma start` or `npx karma start --single-run`
87## Init: `npx karma init karma.conf.js`
88
89## Deep Patterns
90
91See `reference/playbook.md` for production-grade patterns:
92
93| Section | What You Get |
94|---------|-------------|
95| §1 Production Configuration | Full karma.conf.js with coverage thresholds, reporters, CI launchers |
96| §2 Component Testing | Service mocking, DOM interaction, form validation patterns |
97| §3 HTTP Service Testing | HttpTestingController, error handling, retry testing |
98| §4 Directive & Pipe Testing | Host component pattern, custom pipes with edge cases |
99| §5 RxJS & Async Patterns | debounceTime, switchMap cancellation, subscription cleanup |
100| §6 Router & NgRx Testing | RouterTestingModule, MockStore, selector overrides |
101| §7 LambdaTest Integration | Cloud browser configuration for cross-browser testing |
102| §8 CI/CD Integration | GitHub Actions with coverage, test reporting |
103| §9 Debugging Table | 12 common problems with causes and fixes |
104| §10 Best Practices | 14-item checklist for production Angular testing |
LambdaTest