将测试添加到Angular``最小''CLI应用程序 [英] Add tests to an Angular 'minimal' CLI app

问题描述

我使用了 ng new my-app --minimal 来搭建Angular 5 CLI应用程序.经过一会儿之后，我发现我确实想要一个spec文件.所以我所做的是:

I've used ng new my-app --minimal to scaffold an Angular 5 CLI app to play around with. After doing so for a bit, I found that I did want a spec file for something. So what I did was:

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

1. Create a file /src/app/my-thing.ts with a class
2. Create a file /src/app/my-thing.spec.ts with content describe('MyThing', () => { ... }

但是显然找不到 describe(...)，因为

But obviously describe(...) cannot be found, because --minimal skips setting up tests, so there's nothing there to support it.

如何正确添加可以与 ng test 完美配合的测试设置?

How do I properly add a tests setup that'll work nicely with ng test?

推荐答案

我更愿意了解是否有基于CLI的解决方案，但是现在我只是继续使用并使用了git，diff和cli魔术，了解启动和运行所需的内容.这是愚蠢的解决方案:

I'd prefer to learn if there's a CLI-based solution for this, but for now I've just pushed on and used some git, diff, and cli magic to see what was needed to get up and running. Here's the dumb solution:

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

"class": {
  "spec": false
}

更新 .angular-cli.json 并将"spec":false 设置为 true 到"component"内的任何地方

将这些添加到 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 来安装那些软件包.

and run npm install to get those packages installed.

将此(或类似内容)添加到项目根目录中的新文件 karma.conf.js 中:

Add this (or similar) in a new file karma.conf.js in the project root:

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
  });
};

将此添加到新文件 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);

添加此新文件 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 并查看测试运行了.

Now you should be able to run ng test and see your tests run.

希望这对某人有帮助.

这篇关于将测试添加到Angular``最小''CLI应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！