How to add cypress code coverage for angular 6?

Question

My current angaular app uses Angular 6.1 and I want to cypress code coverage. All the examples I found are using Angular 8.x. As you know upgrading from Angular 6 to Angular 8 is not recommended and it might break many things. Has anyone successfully added cypress code coverage to Angular 6. Any help or suggestion on this will greatly help me.

Thanks in advance.

Now I will tell what I have tried

I am using this blog as reference blog ref and app App github . I have cloned the app from above link. App is already in Angular 8 and I have downgraded to Angular 6. But when I try to build the app, I see this error

Schema validation failed with the following errors:
  Data path ".builders['cypress']" should have required property 'class'.

I have given package.json dependencies and devdependencies as reference

 "dependencies": {
    "@angular-devkit/build-angular": "^0.8.8",
    "@angular/animations": "^6.1.7",
    "@angular/cli": "^7.0.6",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "rxjs": "^6.5.3",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@briebug/cypress-schematic": "^3.2.0",
    "@cypress/code-coverage": "^1.14.0",
    "@cypress/webpack-preprocessor": "4.1.3",
    "@istanbuljs/nyc-config-typescript": "^1.0.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "cypress": "4.1.0",
    "istanbul-instrumenter-loader": "^3.0.1",
    "istanbul-lib-coverage": "^3.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "ngx-build-plus": "^9.0.6",
    "nyc": "^15.0.0",
    "source-map-support": "^0.5.19",
    "ts-loader": "6.2.1",
    "ts-node": "^7.0.1",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  },

My overall goal is to generate code coverage using cypress. If anyone has already generated code coverage for angular 6, please do let me know.

May not be possible, the error indicates a Schematics problem. The app you use uses @briebug/cypress-schematic which at earliest release has angular dependencies labelled v7. — Richard Matsen
– Richard Matsen, Commented Jan 16, 2021 at 20:45
Thanks @RichardMatsen ,can you tell me how you found it has earliest release has v7 dependencies, to be frank I am new in finding dependencies. — karansys
– karansys, Commented Jan 16, 2021 at 20:54
Hi @RachidO, yes I am trying to generate coverage for end to end test — karansys
– karansys, Commented Jan 16, 2021 at 20:54
From the npmjs link, go to the github repository - on that page open the 'Switch branch or tags' dropdown. There's only one branch, but look in tags and scoot down all the way to v1.02 and select that release. Take a look in package.json, dependencies section and you can see the Angular dependencies have v7. — Richard Matsen
– Richard Matsen, Commented Jan 16, 2021 at 21:13

Richard Matsen · Accepted Answer · 2021-01-16 21:50:16Z

1

This is not going to give you a definitive answer, but is the approach I would try.

From the Cypress docs page,

Examples

skylock/cypress-angular-coverage-example shows an Angular 8 + TypeScript application with instrumentation done using ngx-build-plus.

From ngx-build-plus

Get the right version

Angular 6-7/ CLI 6-7: ngx-build-plus@^7
Angular 8/ CLI 8: ngx-build-plus^8.0.0
Angular 9/ CLI 9: ngx-build-plus^9.0.0

Switching to [email protected], you have a bunch of instructions under Getting Started that look useful.

Once you have the app instrumented (see Instrument your application on how to check), it should be plain sailing as @cypress/code-coverage works pretty well, even combines e2e, unit test and server (api) coverage.

answered Jan 16, 2021 at 21:50

Richard Matsen

20.9k3 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

karansys Over a year ago

Thank you so much Richard, will give it a try and let you know soon :)

Collectives™ on Stack Overflow

How to add cypress code coverage for angular 6?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related