向 Angular“最小”CLI 应用程序添加测试

Question

我曾经ng new my-app --minimal搭建过一个 Angular 5 CLI 应用程序来玩。这样做了一段时间后，我发现我确实想要一个规范文件。所以我所做的是：

1. /src/app/my-thing.ts使用类创建文件
2. 创建一个/src/app/my-thing.spec.ts包含内容的文件describe('MyThing', () => { ... }

但显然describe(...)找不到，因为--minimal跳过了设置测试，所以没有什么可以支持它。

我如何正确添加一个可以很好地工作的测试设置ng test？

Answer 1

我更想了解是否有基于 CLI 的解决方案，但现在我只是继续使用一些 git、diff 和 cli 魔术来查看启动和运行所需的内容。这是愚蠢的解决方案：

1. 更新.angular-cli.json删除：

   "class": {
     "spec": false
   }
   

2. .angular-cli.json将设置更新"spec": false到true里面的任何地方"component"

3. 将这些添加到package.json：

   "@types/jasmine": "~2.8.3",
   "@types/jasminewd2": "~2.0.2",
   "@types/node": "~6.0.60",
   "jasmine-core": "~2.8.0",
   "jasmine-spec-reporter": "~4.2.1",
   "karma": "~2.0.0",
   "karma-chrome-launcher": "~2.2.0",
   "karma-coverage-istanbul-reporter": "^1.2.1",
   "karma-jasmine": "~1.1.0",
   "karma-jasmine-html-reporter": "^0.2.2",
   

   并运行npm install以安装这些软件包。

4. karma.conf.js在项目根目录的新文件中添加这个（或类似的）：

   module.exports = function (config) {
     config.set({
       basePath: '',
       frameworks: ['jasmine', '@angular/cli'],
       plugins: [
         require('karma-jasmine'),
         require('karma-chrome-launcher'),
         require('karma-jasmine-html-reporter'),
         require('karma-coverage-istanbul-reporter'),
         require('@angular/cli/plugins/karma')
       ],
       client:{
         clearContext: false // leave Jasmine Spec Runner output visible in browser
       },
       coverageIstanbulReporter: {
         reports: [ 'html', 'lcovonly' ],
         fixWebpackSourcePaths: true
       },
       angularCli: {
         environment: 'dev'
       },
       reporters: ['progress', 'kjhtml'],
       port: 9876,
       colors: true,
       logLevel: config.LOG_INFO,
       autoWatch: true,
       browsers: ['Chrome'],
       singleRun: false
     });
   };
   

5. 将此添加到新文件中src/test.ts：

   import 'zone.js/dist/zone-testing';
   import { getTestBed } from '@angular/core/testing';
   import {
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting
   } from '@angular/platform-browser-dynamic/testing';
   
   declare const require: any;
   
   // First, initialize the Angular testing environment.
   getTestBed().initTestEnvironment(
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting()
   );
   // Then we find all the tests.
   const context = require.context('./', true, /\.spec\.ts$/);
   // And load the modules.
   context.keys().map(context);
   

6. 添加这个新文件src/tsconfig.spec.json：

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

现在您应该能够运行ng test并看到您的测试运行。

希望这可以帮助某人。