【问题标题】:How to add cypress code coverage for angular 6?如何为 Angular 6 添加柏树代码覆盖率?
【发布时间】:2021-04-21 09:50:18
【问题描述】:

我当前的 angaular 应用程序使用 Angular 6.1,并且我想要 cypress 代码覆盖率。我发现的所有示例都使用 Angular 8.x。如您所知,不建议从 Angular 6 升级到 Angular 8,这可能会破坏很多东西。有没有人成功地将 cypress 代码覆盖率添加到 Angular 6。任何关于此的帮助或建议都会对我有很大帮助。

提前致谢。

现在我将告诉我我尝试了什么

我使用此博客作为参考 blog ref 和应用程序 App github 。我已经从上面的链接克隆了应用程序。应用程序已经在 Angular 8 中,我已经降级到 Angular 6。但是当我尝试构建应用程序时,我看到了这个错误

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

我已经给出了 package.json 依赖和 devdependencies 作为参考

 "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"
  },

我的总体目标是使用 cypress 生成代码覆盖率。如果有人已经为 Angular 6 生成了代码覆盖率,请告诉我。

【问题讨论】:

  • 代码覆盖率是什么?单元测试? e2e 测试?
  • 可能是不可能的,错误表示原理图有问题。您使用的应用程序使用 @briebug/cypress-schematic,它在最早的版本中具有标记为 v7 的角度依赖项。
  • 谢谢@RichardMatsen,你能告诉我你是怎么发现它最早的版本有v7依赖的,坦率地说,我是寻找依赖的新手。
  • 嗨@RachidO,是的,我正在尝试为端到端测试生成覆盖率
  • 从 npmjs 链接转到 github 存储库 - 在该页面上打开“切换分支或标签”下拉菜单。只有一个分支,但查看标签并一直向下移动到 v1.02 并选择该版本。查看 package.json 的依赖项部分,您可以看到 Angular 依赖项有 v7。

标签: javascript angular typescript package cypress


【解决方案1】:

这不会给你一个明确的答案,但这是我会尝试的方法。

来自Cypress docs page

示例

来自ngx-build-plus

获取正确的版本

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

切换到 ngx-build-plus@7.7.2,Getting Started 下有一堆看起来很有用的指令。

一旦您对应用程序进行了检测(有关如何检查,请参阅 Instrument your application),它应该会一帆风顺,因为 @cypress/code-coverage 工作得很好,甚至结合了 e2e、单元测试和服务器 (api) 覆盖。

【讨论】:

  • 非常感谢 Richard,会试一试并尽快通知您 :)
猜你喜欢
  • 2019-01-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-03-11
  • 1970-01-01
  • 2018-05-08
  • 2018-05-18
  • 1970-01-01
相关资源
最近更新 更多