Skip to content

Commit c935728

Browse files
Copilotrenemadsen
Copilot
and
renemadsen
committed
Update PACKAGE_JSON_SETUP.md with comprehensive solutions for all test configuration errors
Co-authored-by: renemadsen <[email protected]>
1 parent be9960b commit c935728

File tree

1 file changed

+340
-15
lines changed

1 file changed

+340
-15
lines changed

‎PACKAGE_JSON_SETUP.md‎

Lines changed: 340 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,165 @@
11
# Package.json Configuration for Angular Unit Tests
22

33
## Overview
4-
This document explains the package.json configuration needed in the main `eform-angular-frontend` repository to support running unit tests for the time-planning-pn plugin.
4+
This document explains the package.json and related configuration files needed in the main `eform-angular-frontend` repository to support running unit tests for the time-planning-pn plugin.
5+
6+
## Required Changes to Frontend Repository
7+
8+
### 1. Update package.json
9+
10+
Add these dependencies and scripts to your `package.json`:
11+
12+
```json
13+
{
14+
"scripts": {
15+
"test": "ng test",
16+
"test:ci": "ng test --no-watch --no-progress --browsers=ChromeHeadless --code-coverage"
17+
},
18+
"devDependencies": {
19+
"@types/jasmine": "~5.1.0",
20+
"jasmine-core": "~5.1.0",
21+
"karma": "~6.4.0",
22+
"karma-chrome-launcher": "~3.2.0",
23+
"karma-coverage": "~2.2.0",
24+
"karma-jasmine": "~5.1.0",
25+
"karma-jasmine-html-reporter": "~2.1.0"
26+
}
27+
}
28+
```
29+
30+
Then run:
31+
```bash
32+
npm install
33+
# or
34+
yarn install
35+
```
36+
37+
### 2. Update src/test.ts
38+
39+
The `zone.js` import paths have changed in newer versions. Update your `src/test.ts` file:
40+
41+
**Remove these old imports:**
42+
```typescript
43+
import 'zone.js/dist/long-stack-trace-zone';
44+
import 'zone.js/dist/proxy.js';
45+
import 'zone.js/dist/sync-test';
46+
import 'zone.js/dist/jasmine-patch';
47+
import 'zone.js/dist/async-test';
48+
import 'zone.js/dist/fake-async-test';
49+
```
50+
51+
**Replace with these new imports:**
52+
```typescript
53+
import 'zone.js';
54+
import 'zone.js/testing';
55+
```
56+
57+
**Complete example of src/test.ts:**
58+
```typescript
59+
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
60+
61+
import 'zone.js';
62+
import 'zone.js/testing';
63+
import { getTestBed } from '@angular/core/testing';
64+
import {
65+
BrowserDynamicTestingModule,
66+
platformBrowserDynamicTesting
67+
} from '@angular/platform-browser-dynamic/testing';
68+
69+
declare const require: {
70+
context(path: string, deep?: boolean, filter?: RegExp): {
71+
<T>(id: string): T;
72+
keys(): string[];
73+
};
74+
};
75+
76+
// First, initialize the Angular testing environment.
77+
getTestBed().initTestEnvironment(
78+
BrowserDynamicTestingModule,
79+
platformBrowserDynamicTesting(),
80+
);
81+
82+
// Then we find all the tests.
83+
const context = require.context('./', true, /\.spec\.ts$/);
84+
// And load the modules.
85+
context.keys().map(context);
86+
```
87+
88+
### 3. Update tsconfig.spec.json
89+
90+
Add `@types/jasmine` to the types array:
91+
92+
```json
93+
{
94+
"extends": "./tsconfig.json",
95+
"compilerOptions": {
96+
"outDir": "./out-tsc/spec",
97+
"types": [
98+
"jasmine",
99+
"node"
100+
]
101+
},
102+
"include": [
103+
"src/**/*.spec.ts",
104+
"src/**/*.d.ts"
105+
]
106+
}
107+
```
108+
109+
### 4. Update karma.conf.js
110+
111+
Ensure your `karma.conf.js` includes the coverage reporter:
112+
113+
```javascript
114+
module.exports = function (config) {
115+
config.set({
116+
basePath: '',
117+
frameworks: ['jasmine', '@angular-devkit/build-angular'],
118+
plugins: [
119+
require('karma-jasmine'),
120+
require('karma-chrome-launcher'),
121+
require('karma-jasmine-html-reporter'),
122+
require('karma-coverage'),
123+
require('@angular-devkit/build-angular/plugins/karma')
124+
],
125+
client: {
126+
jasmine: {
127+
// you can add configuration options for Jasmine here
128+
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
129+
// for example, you can disable the random execution with `random: false`
130+
// or set a specific seed with `seed: 4321`
131+
},
132+
clearContext: false // leave Jasmine Spec Runner output visible in browser
133+
},
134+
jasmineHtmlReporter: {
135+
suppressAll: true // removes the duplicated traces
136+
},
137+
coverageReporter: {
138+
dir: require('path').join(__dirname, './coverage'),
139+
subdir: '.',
140+
reporters: [
141+
{ type: 'html' },
142+
{ type: 'text-summary' },
143+
{ type: 'lcovonly' }
144+
]
145+
},
146+
reporters: ['progress', 'kjhtml'],
147+
browsers: ['Chrome'],
148+
customLaunchers: {
149+
ChromeHeadless: {
150+
base: 'Chrome',
151+
flags: [
152+
'--headless',
153+
'--disable-gpu',
154+
'--no-sandbox',
155+
'--remote-debugging-port=9222'
156+
]
157+
}
158+
},
159+
restartOnFileChange: true
160+
});
161+
};
162+
```
5163

6164
## Required Test Scripts
7165

@@ -13,7 +171,7 @@ If your package.json has a `test:ci` script, it will use that:
13171
```json
14172
{
15173
"scripts": {
16-
"test:ci": "ng test --watch=false --code-coverage --browsers=ChromeHeadless"
174+
"test:ci": "ng test --no-watch --no-progress --browsers=ChromeHeadless --code-coverage"
17175
}
18176
}
19177
```
@@ -42,36 +200,203 @@ Error: Cannot find module 'karma'
42200

43201
**Cause:** The frontend repository doesn't have Karma installed, which is required for running Angular unit tests with `ng test`.
44202

45-
**Solution:** Add Karma and related dependencies to the frontend's package.json:
203+
**Solution:** Add Karma and related dependencies to the frontend's package.json (see section 1 above).
204+
205+
**Note:** The GitHub Actions workflow will now detect if Karma is missing and skip the tests gracefully with a helpful message instead of failing.
206+
207+
### Issue 1: "Can not load reporter 'coverage'" Error
208+
209+
**Error message:**
210+
```
211+
ERROR [reporter]: Can not load reporter "coverage", it is not registered!
212+
```
213+
214+
**Cause:** The `karma-coverage` package is not installed or not properly configured in karma.conf.js.
215+
216+
**Solution:**
217+
1. Install `karma-coverage`: `npm install --save-dev karma-coverage`
218+
2. Add it to the plugins array in karma.conf.js (see section 4 above)
219+
3. Configure the coverageReporter in karma.conf.js (see section 4 above)
220+
221+
### Issue 2: Zone.js Module Not Found Errors
222+
223+
**Error messages:**
224+
```
225+
Error: Module not found: Error: Package path ./dist/long-stack-trace-zone is not exported
226+
Error: Module not found: Error: Package path ./dist/proxy.js is not exported
227+
Error: Module not found: Error: Package path ./dist/sync-test is not exported
228+
Error: Module not found: Error: Package path ./dist/jasmine-patch is not exported
229+
Error: Module not found: Error: Package path ./dist/async-test is not exported
230+
Error: Module not found: Error: Package path ./dist/fake-async-test is not exported
231+
```
232+
233+
**Cause:** Zone.js v0.12.0+ changed its module exports. The old import paths no longer work.
234+
235+
**Solution:** Update `src/test.ts` to use the new import paths (see section 2 above):
236+
```typescript
237+
// Remove old imports:
238+
// import 'zone.js/dist/long-stack-trace-zone';
239+
// import 'zone.js/dist/proxy.js';
240+
// etc...
241+
242+
// Use new imports:
243+
import 'zone.js';
244+
import 'zone.js/testing';
245+
```
246+
247+
### Issue 3: TypeScript "Cannot find name 'describe'" Errors
248+
249+
**Error messages:**
250+
```
251+
error TS2593: Cannot find name 'describe'
252+
error TS2304: Cannot find name 'beforeEach'
253+
error TS2304: Cannot find name 'it'
254+
error TS2304: Cannot find name 'expect'
255+
```
256+
257+
**Cause:** TypeScript can't find the Jasmine type definitions.
258+
259+
**Solution:**
260+
1. Install `@types/jasmine`: `npm install --save-dev @types/jasmine`
261+
2. Update `tsconfig.spec.json` to include jasmine in the types array (see section 3 above)
262+
263+
### Issue 4: "--include" parameter not recognized
264+
265+
If you're using Karma with Jasmine, the `--include` parameter might not work. Instead, you can:
266+
267+
**Solution A:** Use a karma.conf.js configuration that supports file filtering:
268+
```javascript
269+
// karma.conf.js
270+
module.exports = function(config) {
271+
config.set({
272+
// ... other config
273+
files: [
274+
{ pattern: './src/**/*.spec.ts', included: true, watched: true }
275+
],
276+
});
277+
};
278+
```
279+
280+
**Solution B:** Update package.json to support include patterns:
281+
```json
282+
{
283+
"scripts": {
284+
"test:ci": "ng test --no-watch --no-progress --browsers=ChromeHeadless --code-coverage",
285+
"test:plugin": "ng test --no-watch --browsers=ChromeHeadless --include='**/time-planning-pn/**/*.spec.ts'"
286+
}
287+
}
288+
```
289+
290+
### Issue 5: ChromeHeadless not available
291+
292+
If ChromeHeadless browser is not configured:
293+
294+
**Solution:** Configure Chrome headless in karma.conf.js (see section 4 above for the customLaunchers configuration).
295+
296+
### Issue 6: Angular version compatibility
297+
298+
For Angular 15+, you might need to use the new test configuration:
299+
300+
```json
301+
{
302+
"scripts": {
303+
"test": "ng test",
304+
"test:ci": "ng test --no-watch --no-progress --browsers=ChromeHeadless --code-coverage"
305+
}
306+
}
307+
```
308+
309+
### Issue 7: Jest instead of Karma
310+
311+
If your project uses Jest instead of Karma:
312+
313+
```json
314+
{
315+
"scripts": {
316+
"test": "jest",
317+
"test:ci": "jest --ci --coverage --testPathPattern='time-planning-pn'"
318+
}
319+
}
320+
```
321+
322+
## Quick Setup Checklist
323+
324+
To enable unit tests in the frontend repository, complete these steps:
325+
326+
- [ ] Add dependencies to package.json (karma, jasmine, etc.)
327+
- [ ] Run `npm install` or `yarn install`
328+
- [ ] Update `src/test.ts` with new zone.js imports
329+
- [ ] Update `tsconfig.spec.json` to include jasmine types
330+
- [ ] Update `karma.conf.js` with coverage reporter configuration
331+
- [ ] Add `test:ci` script to package.json
332+
- [ ] Test locally: `npm run test:ci`
333+
334+
## Recommended Configuration
335+
336+
For the most compatibility with the time-planning-pn plugin tests, use this configuration:
46337

47338
```json
48339
{
340+
"scripts": {
341+
"test": "ng test",
342+
"test:ci": "ng test --no-watch --no-progress --browsers=ChromeHeadless --code-coverage",
343+
"test:headless": "ng test --no-watch --browsers=ChromeHeadless"
344+
},
49345
"devDependencies": {
346+
"@angular-devkit/build-angular": "^15.0.0",
347+
"@types/jasmine": "~5.1.0",
348+
"jasmine-core": "~5.1.0",
50349
"karma": "~6.4.0",
51-
"karma-chrome-launcher": "~3.1.0",
350+
"karma-chrome-launcher": "~3.2.0",
52351
"karma-coverage": "~2.2.0",
53352
"karma-jasmine": "~5.1.0",
54-
"karma-jasmine-html-reporter": "~2.0.0",
55-
"@types/jasmine": "~4.3.0",
56-
"jasmine-core": "~4.5.0"
57-
},
58-
"scripts": {
59-
"test": "ng test",
60-
"test:ci": "ng test --no-watch --no-progress --browsers=ChromeHeadless --code-coverage"
353+
"karma-jasmine-html-reporter": "~2.1.0"
61354
}
62355
}
63356
```
64357

65-
Then run:
358+
## Workflow Behavior
359+
360+
The GitHub Actions workflow (`.github/workflows/dotnet-core-master.yml` and `dotnet-core-pr.yml`) will:
361+
362+
1. Check if Karma is installed in node_modules
363+
2. If not, skip tests with a helpful message
364+
3. If yes, check if `test:ci` script exists in package.json
365+
4. If yes, run: `npm run test:ci -- --include='**/time-planning-pn/**/*.spec.ts'`
366+
5. If no, check if `test` script exists
367+
6. If yes, run: `npm run test -- --watch=false --browsers=ChromeHeadless --include='**/time-planning-pn/**/*.spec.ts'`
368+
7. If neither exists, skip the tests with a message
369+
8. The step has `continue-on-error: true`, so it won't fail the entire workflow
370+
371+
## Testing Locally
372+
373+
To test if your configuration works:
374+
66375
```bash
376+
# Clone both repositories
377+
git clone https://github.com/microting/eform-angular-frontend.git
378+
git clone https://github.com/microting/eform-angular-timeplanning-plugin.git
379+
380+
# Copy plugin files
381+
cp -r eform-angular-timeplanning-plugin/eform-client/src/app/plugins/modules/time-planning-pn \
382+
eform-angular-frontend/eform-client/src/app/plugins/modules/
383+
384+
# Install dependencies
385+
cd eform-angular-frontend/eform-client
67386
npm install
387+
388+
# Try running tests
389+
npm run test:ci -- --include='**/time-planning-pn/**/*.spec.ts'
68390
# or
69-
yarn install
391+
npm run test -- --watch=false --browsers=ChromeHeadless
70392
```
71393

72-
**Note:** The GitHub Actions workflow will now detect if Karma is missing and skip the tests gracefully with a helpful message instead of failing.
394+
## Contact
73395

74-
### Issue 1: "--include" parameter not recognized
396+
If you need help configuring the tests, check:
397+
- Angular CLI testing documentation: https://angular.io/guide/testing
398+
- Karma configuration: https://karma-runner.github.io/latest/config/configuration-file.html
399+
- The test files in this repository for examples
75400

76401
If you're using Karma with Jasmine, the `--include` parameter might not work. Instead, you can:
77402

0 commit comments

Comments
 (0)