单元测试混合 Angular Js 和 Angular 8 应用程序

Posted 2023-03-13

【中文标题】单元测试混合 Angular Js 和 Angular 8 应用程序

【英文标题】：Unit Testing Hybrid Angular Js and Angular 8 Application

【发布时间】：2021-01-22 09:58:42

【问题描述】：

我正在开发一个 Angular js 和 Angular 8 混合应用程序。在 Angular 中创建的新组件被降级为在 Angular js 中使用。模块代码sn-p如下：

@NgModule(
    // Declaration and Imports
    providers:[
        ServiceName,
        // Other Services
    ],
    entryComponents: [
        ComponentName,
        // Other components to be used in angular js
    ]
)
export class FeatureModule


declare var angular: angular.IAngularStatic
angular.module('app')
   .directive('cmpName', downgradeComponent(component: ComponentName ) as angular.IDirectiveFactory)
   .factory('serviceName', downgradeInjectable(ServiceName));

app.module.ts文件中有如下代码。

// Usual Stuff
export class AppModule 
  constructor(
    private upgrade: UpgradeModule,
  ) 
  

  ngDoBootstrap() 
    this.upgrade.bootstrap(document.body, ['app'],  strictDi: true );
  

Angular cli 生成的组件规范文件中没有任何更新。

在tsconfig.spec.json，

  "extends": "../tsconfig.json",
  "compilerOptions": 
    "baseUrl": "./",
    "outDir": "../out-tsc/spec",
    "types": ["jasmine", "node", "angular"]
  ,
  "files": ["test.ts", "polyfills.ts"],
  "include": ["**/*.spec.ts", "**/*.d.ts"]

karma.conf.js 如下所示。

module.exports = function (config) 
  config.set(
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: 
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    ,
    coverageIstanbulReporter: 
      dir: require('path').join(__dirname, '../coverage/ProjectFolder'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true
    ,
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  );
;

现在，如果我运行 npm run test 或 ng test 命令来运行测试套件，我会收到以下错误。An error was thrown in afterAll Uncaught ReferenceError: angular is not defined ReferenceError: angular is not defined at Module../..path-to-module-file/feature.module.ts.

我该如何解决这个问题？我是否必须模拟模块文件中声明的angular 变量。任何帮助表示赞赏？

【参考方案1】：

我不太了解细节，但我使用 Webpack 和 Karma 运行一个混合应用程序。我降级了我所有的组件，以便它们可以在 AngularJS 中使用，就像你一样。

不同之处在于我有一个名为 vendor.ts 的文件，其中包含 AngularJS。我打赌你也是，因为你只谈论测试失败，而不是产品被破坏。我的 Karma 配置文件中有一个条目：

    files: [
       pattern: "node_modules/babel-polyfill/dist/polyfill.js", watched: false ,
       pattern: "node_modules/intl/locale-data/jsonp/en-GB.js", watched: false ,
       pattern: "node_modules/intl/locale-data/jsonp/fr-FR.js", watched: false ,
       pattern: "static/polyfills.ts", watched: false ,
       pattern: "static/vendor.ts", watched: false ,
       pattern: "node_modules/zone.js/dist/long-stack-trace-zone.js", watched: false ,
       pattern: "node_modules/zone.js/dist/proxy.js", watched: false ,
       pattern: "node_modules/zone.js/dist/sync-test.js", watched: false ,
       pattern: "node_modules/zone.js/dist/jasmine-patch.js", watched: false ,
       pattern: "node_modules/zone.js/dist/async-test.js", watched: false ,
       pattern: "node_modules/zone.js/dist/fake-async-test.js", watched: false ,
       pattern: "node_modules/angular-mocks/angular-mocks.js", watched: false ,
       pattern: "static/main.ts", watched: false ,
       pattern: "static/main.test.ts", watched: false ,
    ],

这会告诉 Karma 哪些文件到 watch and serve in the browser。我想这意味着 Webpack 编译完这些文件后，Karma-Webpack 可以找到编译后的文件并提供服务。

【讨论】：

@Rubin Helsloot 没有 vendor.ts 。你能告诉我vendor.ts 的外观或资源链接吗？谢谢

您本身不需要vendor.ts。这只是一个带有import "angular"; import "@angular/common"; ... import "zonejs"; 的文件，没有额外的代码。你的代码库中有 import "angular" 或 import * as angular from "angular" 吗？

我们在功能模块中将变量声明为declare var angular: angular.IAngularStatic。我在功能模块中尝试过import * as angular from angular，但它破坏了构建和测试。

还有import "angular";?检查生成的文件，它是否包含任何 AngularJS 代码？

完全是棱角分明的。我在问题本身中添加了功能模块文件的外观。我也一直在使用 angular cli