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

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

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

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

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

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


1 ответ

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

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

  1. Обновление .angular-cli.json:

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

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

    "@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, чтобы установить эти пакеты.

  4. Добавьте это (или подобное) в новый файл 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
      });
    };
    
  5. Добавьте это в новый файл :

    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. Добавить новый файл 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 и посмотреть, как ваши тесты выполняются.

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