Wanted: Step-by-step guide to run tests

[grasdk]

Hi everyone - and hi @bpatrik - thanks for the awesome work.

I want to contribute, but my Node knowledge and Typescript knowledge is very thin, but I have a programming education and understand most of the source code of PiGallery2 that I have read. So excuse my ignorance, but would someone be able to help me with the questions below?

Running a test
I'm interested in running and extending the MetaDataLoader test (MetaDataLoader.spec.ts). I want to work on a bug I reported myself, starting with a test that shows the problem. I believe an extra test in MetaDataLoader.spec.ts would highlight the problem. For this I have 2 questions

1. How would I run the MetaDataLoader from the command line and view the results, with a minimal amount of other stuff running? I'm not into the "lingo" so perhaps I'm looking for the wrong thing. So far I have been able to run ng test, but it runs everything (maybe?). Also I'm not sure whether the MetaDataLoader test is actually run. This is the output I get:

✔ Browser application bundle generation complete.
22 01 2024 08:07:33.218:INFO [karma-server]: Karma v6.4.1 server started at http://localhost:9876/
22 01 2024 08:07:33.220:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
22 01 2024 08:07:33.241:INFO [launcher]: Starting browser ChromeHeadless
22 01 2024 08:07:34.328:INFO [Chrome Headless 120.0.6099.224 (Linux x86_64)]: Connected on socket t7ZQE0iMX7Ss0cL6AAAB with id 52835366
ERROR: 'error:', HttpErrorResponse{headers: HttpHeaders{normalizedNames: Map{}, lazyUpdate: null, headers: Map{}}, status: 0, statusText: 'testError', url: '/pgapi/test/url', ok: false, name: 'HttpErrorResponse', message: 'Http failure response for /pgapi/test/url: 0 testError', error: null}
Chrome Headless 120.0.6099.224 (Linux x86_64): Executed 10 of 17 SUCCESS (0 secs / 0.087 secs)
ERROR: 'error:', HttpErrorResponse{headers: HttpHeaders{normalizedNames: Map{}, lazyUpdate: null, headers: Map{}}, status: 0, statusText: 'testError', url: '/pgapi/test/url', ok: ERROR: 'error:', HttpErrorResponse{headers: HttpHeaders{normalizedNames: Map{}, lazyUpdate: null, headers: Map{}}, status: 0, statusText: 'testError', url: '/pgapi/test/url', ok: false, name: 'HttpErrorResponse', message: 'Http failure response for /pgapi/test/url: 0 testError', error: null}
Chrome Headless 120.0.6099.224 (Linux x86_64): Executed 11 of 17 SUCCESS (0 secs / 0.089 secs)
ERROR: 'error:', HttpErrorResponse{headers: HttpHeaders{normalizedNames: Map{}, lazyUpdate: null, headers: Map{}}, status: 0, statusText: 'testError', url: '/pgapi/test/url', ok: ERROR: 'error:', HttpErrorResponse{headers: HttpHeaders{normalizedNames: Map{}, lazyUpdate: null, headers: Map{}}, status: 0, statusText: 'testError', url: '/pgapi/test/url', ok: false, name: 'HttpErrorResponse', message: 'Http failure response for /pgapi/test/url: 0 testError', error: null}
Chrome Headless 120.0.6099.224 (Linux x86_64): Executed 12 of 17 SUCCESS (0 secs / 0.091 secs)
ERROR: 'error:', HttpErrorResponse{headers: HttpHeaders{normalizedNames: Map{}, lazyUpdate: null, headers: Map{}}, status: 0, statusText: 'testError', url: '/pgapi/test/url', ok: ERROR: 'error:', HttpErrorResponse{headers: HttpHeaders{normalizedNames: Map{}, lazyUpdate: null, headers: Map{}}, status: 0, statusText: 'testError', url: '/pgapi/test/url', ok: false, name: 'HttpErrorResponse', message: 'Http failure response for /pgapi/test/url: 0 testError', error: null}
Chrome Headless 120.0.6099.224 (Linux x86_64): Executed 13 of 17 SUCCESS (0 secs / 0.093 secs)
ERROR: 'error:', HttpErrorResponse{headers: HttpHeaders{normalizedNames: Map{}, lazyUpdate: null, headers: Map{}}, status: 0, statusText: 'testError', url: '/pgapi/test/url', ok: Chrome Headless 120.0.6099.224 (Linux x86_64): Executed 17 of 17 SUCCESS (0.146 secs / 0.1 secs)
TOTAL: 17 SUCCESS

2. The MetaDataLoader test uses some JSON files with the expected result data. Could someone share how to generate these? I wouldn't like to make one for my test by hand.

Getting ready to develop
In the contributing guide, one is asked to run npm run run-dev and npm run build-backend. I'm using WSL2 on Windows 10 with 32GB of RAM, and the npm run run-dev command does not complete, even after 7 hours. The process is there, but not using any CPU after some time. The output is:

$ npm run run-dev

> [email protected] run-dev
> ng build  --configuration=dev

✔ Browser application bundle generation complete.
✔ Index html generation complete.

Initial Chunk Files | Names         |  Raw Size
vendor.js           | vendor        |   5.25 MB |
main.js             | main          |   1.89 MB |
styles.css          | styles        | 315.79 kB |
polyfills.js        | polyfills     | 149.58 kB |
scripts.js          | scripts       |  47.78 kB |
runtime.js          | runtime       |   6.37 kB |

                    | Initial Total |   7.65 MB

Build at: 2024-01-22T07:17:01.727Z - Hash: 4a7991604bd03864 - Time: 20078ms

Warning: /mnt/d/git/pigallery2/src/common/config/public/ClientConfig.ts depends on 'typeconfig/common'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /mnt/d/git/pigallery2/src/common/config/public/Config.ts depends on 'typeconfig/src/decorators/class/WebConfigClass'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /mnt/d/git/pigallery2/src/frontend/app/app.module.ts depends on 'leaflet'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Thanks for reading and for any help.

/Chris

[grasdk]

Ok. To answer my own question, for anyone in the future who might be interested:

I ended up using my Windows PC. I do have WSL2 running Ubuntu on it, but I went for pure Windows development (heretical, I know ;) ).

• Installed Windown x64 versions of VS Code, git and nodejs.
• Downloaded VS Code extensions and with some trial and error I'm up and running with these: "Debugger for Firefox, Docker, JavaScript and TypeScript Nightly, Mocha Test Explorer, Test Adapter Converter, Test Explorer UI, WSL

Not all of these are in play here, but Test Explorer UI allows me to pinpoint a specific test in MetaDataLoader.spec.js and run it.

With this in hand, I have now added another test, which fails due to the bug I want to fix. So now it's time to do some Test Driven Development.