Adding code coverage to Cypress (AngularX)

[jidma]

PR description

The PR adds code coverage to Cypress e2e Testing (AngularX front end).

When the option is selected, two new npm scripts are added:

The first command allows the user to start the Angular dev server with instrumented code (using istanbul). The dev server is started without ghostMode:

npm run webapp:instrumenter

The second command runs the e2e tests and generates a coverage report:

npm run e2e:cypress:coverage

Cypress will then run against the dev server on port 9000 (started with npm run start-insrt)

After the tests are finished, a report is generated under ./coverage/lcov-report/

Known issue

If running against a non instrumented code (ie. started with npm run e2e:cypress), Cypress will issue a warning complaining about the code not being instrumented.

Readme added section:

(...)

Code Coverage

When using Cypress with AngularX, you can generate code coverage report by running your dev server with instrumented code:

Start your backend (option -P-webapp to skip compiling the Angular Front):

./mvnw -P-webapp

Start your Angular dev server with instrumented code:

npm run webapp:instrumenter

Start your Cypress end to end testing:

npm run e2e:cypress:coverage

The coverage report is generated under ./coverage/lcov-report/
(...)

---

Please make sure the below checklist is followed for Pull Requests.

• All continuous integration tests are green
• Tests are added where necessary
• jhipster-online was updated if necessary
• Documentation is added/updated where necessary
• Coding Rules & Commit Guidelines as per our CONTRIBUTING.md document are followed

When you are still working on the PR, consider converting it to Draft (bellow reviewers) and adding skip-ci label, you can still see CI build result at your branch.

[CLAassistant]

All committers have signed the CLA.

[mshima]

This PR is interesting and you did a great job.
We should make it more modular and simplify it.

[jidma]

@mshima thank you for the code reviews ans suggestions.

[jidma]

@mshima thank once again you for your code review.

After adding and testing your commit, I can't seem to get the instrumented code:

npm run webapp:instrumenter

./mvnw -P-webapp   (because I'm currently on windows and npm run backend:start doesn't work for some reason)

The code doesn't seem to be instrumented:

I wanted to let you know first (am I missing something obvious?) before I investigate further later.

[mshima]

The loader is inside if (targetOptions.target === 'serve' || config.watch) but target is build.

Rebase against main for webpack needle support.

[jidma]

@mshima it's working now. Thanks!

[mshima]

LGTM.

@jidma can you add an option to generator/app/index.js please?
See #14465 (comment).

[mshima]

@jidma congratulations on your first contribution.

[jidma]

@jidma congratulations on your first contribution.

@mshima thank you the support!

[marcolafranca]

Hi,
thank you for your work.
I have a problem when I enable this generator in jhipster wizard.
Jhipster 7.5.0

ERROR! Error parsing file src\test\javascript\cypress\plugins\index.ts: SyntaxError: ';' expected. (27:4)
  25 |       return launchOptions;
  26 |     }
> 27 |   });
     |    ^
  28 |
  29 |   on('task', {
  30 |     lighthouse: lighthouse((lighthouseReport) => {

At: 1: // ***********************************************************
2: // This example plugins/index.js can be used to load plugins
3: //
4: // You can change the location of this file or turn off loading
5: // the plugins file with the 'pluginsFile' configuration option.
6: //
7: // You can read more here:
8: // https://on.cypress.io/plugins-guide
9: // ***********************************************************
10:
11: // This function is called when a project is opened or re-opened (e.g. due to
12: // the project's config changing)
13: import fs = require('fs');
14: import { lighthouse, pa11y, prepareAudit } from 'cypress-audit';
15: import ReportGenerator = require('lighthouse/report/generator/report-generator');
16: /**
17:  * @type {Cypress.PluginConfig}
18:  */
19: module.exports = (on, config) => {
20:   // `on` is used to hook into various events Cypress emits
21: // `config` is the resolved Cypress config  on('before:browser:launch', (browser, launchOptions) => {
22:     prepareAudit(launchOptions);
23:     if (browser.name === 'chrome' && browser.isHeadless) {
24:       launchOptions.args.push('--disable-gpu');
25:       return launchOptions;
26:     }
27:   });
28:
29:   on('task', {
30:     lighthouse: lighthouse((lighthouseReport) => {
31:       !fs.existsSync('target/cypress') && fs.mkdirSync('target/cypress', { recursive: true });
32:       fs.writeFileSync('target/cypress/lhreport.html', ReportGenerator.generateReport(lighthouseReport.lhr, 'html'));
33:     }),
34:     pa11y: pa11y(),
35:   });
36:     require('@cypress/code-coverage/task')(on, config);
37:     return config;
38: }
39:
Error: Error parsing file src\test\javascript\cypress\plugins\index.ts: SyntaxError: ';' expected. (27:4)
  25 |       return launchOptions;
  26 |     }
> 27 |   });
     |    ^
  28 |
  29 |   on('task', {
  30 |     lighthouse: lighthouse((lighthouseReport) => {

At: 1: // ***********************************************************
2: // This example plugins/index.js can be used to load plugins
3: //
4: // You can change the location of this file or turn off loading
5: // the plugins file with the 'pluginsFile' configuration option.
6: //
7: // You can read more here:
8: // https://on.cypress.io/plugins-guide
9: // ***********************************************************
10:
11: // This function is called when a project is opened or re-opened (e.g. due to
12: // the project's config changing)
13: import fs = require('fs');
14: import { lighthouse, pa11y, prepareAudit } from 'cypress-audit';
15: import ReportGenerator = require('lighthouse/report/generator/report-generator');
16: /**
17:  * @type {Cypress.PluginConfig}
18:  */
19: module.exports = (on, config) => {
20:   // `on` is used to hook into various events Cypress emits
21: // `config` is the resolved Cypress config  on('before:browser:launch', (browser, launchOptions) => {
22:     prepareAudit(launchOptions);
23:     if (browser.name === 'chrome' && browser.isHeadless) {
24:       launchOptions.args.push('--disable-gpu');
25:       return launchOptions;
26:     }
27:   });
28:
29:   on('task', {
30:     lighthouse: lighthouse((lighthouseReport) => {
31:       !fs.existsSync('target/cypress') && fs.mkdirSync('target/cypress', { recursive: true });
32:       fs.writeFileSync('target/cypress/lhreport.html', ReportGenerator.generateReport(lighthouseReport.lhr, 'html'));
33:     }),
34:     pa11y: pa11y(),
35:   });
36:     require('@cypress/code-coverage/task')(on, config);
37:     return config;
38: }
39:
    at patternSpy.dot (C:\Users\marco_ye\AppData\Roaming\npm\node_modules\generator-jhipster\generators\generator-transforms.js:79:15)
    at async PTransform.transform [as _transform] (C:\Users\marco_ye\AppData\Roaming\npm\node_modules\generator-jhipster\node_modules\p-transform\index.js:127:7)
    at async PTransform.queuedTransform (C:\Users\marco_ye\AppData\Roaming\npm\node_modules\generator-jhipster\node_modules\p-transform\index.js:88:26)
    at async run (C:\Users\marco_ye\AppData\Roaming\npm\node_modules\generator-jhipster\node_modules\p-queue\dist\index.js:163:29)
   create src\main\webapp\i18n\en\logs.json
   create src\test\javascript\cypress\fixtures\integration-test.png

Can you help me? Thank you very much :-)