Добавить тесты в приложение "Минимальное" для CLI с угловым

Jeroen спросил: 12 мая 2018 в 05:19 в: angular

Я использовал ng new my-app --minimal для того, чтобы рисовать приложение с угловым 5 CLI для игры. Сделав это немного, я обнаружил, что мне нужен файл спецификации для чего-то. Итак, что я сделал:

Создайте файл /src/app/my-thing.ts с классом
Создайте файл /src/app/my-thing.spec.ts с контентом describe('MyThing', () => { ... }

Но, очевидно, describe(...) не может быть найден, потому что --minimal пропускает настройку тестов , поэтому нет ничего, чтобы его поддержать.

Как правильно добавить настройки тестов, которые будут хорошо работать с ng test?

angular

BradleyDotNET ответил: 12 мая 2018 в 05:43

Вам наверняка понадобится жасмин

Jeroen ответил: 12 мая 2018 в 05:48

@BradleyDotNET Thx для ответа. Моя первая попытка была просто npm i jasmine и оттуда оттуда, но это не закончилось хорошо, поэтому после немногого я решил сделать более "грубую силу". Я поделился им как с ответом, но все же надеюсь, что кто-то сможет научить меня умнее.

1 ответ

Jeroen ответил: 12 мая 2018 в 05:47

Я бы предпочел узнать, есть ли для этого решение на основе CLI, но пока я только что нажал и использовал магию git, diff и cli, чтобы узнать, что нужно для запуска и запуска. Вот глупое решение:

Обновление .angular-cli.json:
```
"class": {
  "spec": false
}
```
Обновление .angular-cli.json "spec": false true внутри "component"

Добавьте их в :

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

и запустите package.json, чтобы установить эти пакеты.

Добавьте это (или подобное) в новый файл npm install в корне проекта:

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

Добавьте это в новый файл :

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

Добавить новый файл karma.conf.js:

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

Теперь вы можете запустить src/test.ts и посмотреть, как ваши тесты выполняются.

Надеюсь, это поможет кому-то.