2 votes

karma ne fonctionne pas avec le drapeau "watch" après la mise à jour d'Angular 7

Après la mise à jour d'angular 7 à partir d'angular 6 avec des changements de code minimes dans notre dépôt de code, les exécutions de test de karma uni sont devenues très lentes, et lorsqu'elles sont exécutées avec le paramètre watch défini sur true, elles ne parviennent pas à recharger/relier les tests immédiatement après avoir enregistré un fichier, alors que la plupart du temps, il faut 4 minutes après l'enregistrement d'un fichier pour redéclencher l'exécution de test, ou dans certains cas, il y a un dépassement de temps. Un seul ng test L'exécution du karma avec angular 7 prend généralement environ 3 minutes, comme c'était le cas avec angular 6. La lenteur de 4 minutes dans angular 7 persiste même lors de l'exécution d'un seul fichier spec, dont l'exécution et la reconstruction ne prenaient que quelques secondes avant la mise à niveau vers angular 7.

Contenu du fichier Package.json :

{
  "name": "my proj",
  "description": "asdfa",
  "version": "0.0.0-development",
  "license": "UNLICENSED",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --hmr",
    "build": "ng build",
    "build-ci": "ng build --prod",
    "test": "ng test --code-coverage",
    "test-ci": "ng test --watch=false --browsers ChromeHeadlessNoSandbox --code-coverage",
    "lint": "tslint --project .",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependenciesComments": {
    "angular-split-ng6": "This is a fork of the main (abandoned) angular-split library. The fork includes rxjs 6 upgrade."
  },
  "dependencies": {
    "@angular/animations": "^7.0.0",
    "@angular/cdk": "^7.0.0",
    "@angular/common": "^7.0.0",
    "@angular/compiler": "^7.0.0",
    "@angular/core": "^7.0.0",
    "@angular/forms": "^7.0.0",
    "@angular/http": "^7.0.0",
    "@angular/material": "^7.0.0",
    "@angular/material-moment-adapter": "^7.0.0",
    "@angular/platform-browser": "^7.0.0",
    "@angular/platform-browser-dynamic": "^7.0.0",
    "@angular/router": "^7.0.0",
    "@angularclass/hmr": "^2.1.3",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^6.0.1",
    "@ngrx/router-store": "^6.0.1",
    "@ngrx/store": "^6.0.1",
    "@ngrx/store-devtools": "^6.0.1",
    "@ngx-translate/core": "^10.0.1",
    "@ngx-translate/http-loader": "^3.0.1",
    "@nicky-lenaers/ngx-scroll-to": "^1.0.0",
    "adal-angular": "^1.0.16",
    "ag-grid": "^18.1.0",
    "ag-grid-angular": "^18.1.0",
    "ag-grid-enterprise": "^18.1.0",
    "angular-split-ng6": "^1.0.0-rc.5",
    "angular2-jwt": "^0.2.3",
    "angular2-prettyjson": "^2.0.6",
    "applicationinsights-js": "^1.0.20",
    "core-js": "^2.5.3",
    "d3": "5.7.0",
    "deepmerge": "^1.5.1",
    "expose-loader": "^0.7.4",
    "fast-json-patch": "^2.0.6",
    "hammerjs": "^2.0.8",
    "juice": "^4.3.2",
    "moment": "^2.20.1",
    "ng2-dragula": "^1.5.0",
    "ngrx-store-freeze": "^0.2.0",
    "ngx-order-pipe": "^2.0.1",
    "ngx-perfect-scrollbar": "^6.0.0",
    "ngx-quill": "^3.1.0",
    "ngx-scrollspy": "^1.2.1",
    "particle-ui": "../particle-ui/src/lib",
    "quill": "^1.3.6",
    "quill-delta": "^3.6.3",
    "rxjs": "^6.3.3",
    "sax": "^1.2.4",
    "stream": "0.0.2",
    "timers": "^0.1.1",
    "web-animations-js": "^2.3.1",
    "xml2js": "^0.4.19",
    "xmlbuilder": "^10.0.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.3",
    "@angular/cli": "^7.0.1",
    "@angular/compiler-cli": "^7.0.0",
    "@angular/language-service": "^7.0.0",
    "@types/adal": "^1.0.27",
    "@types/applicationinsights-js": "^1.0.5",
    "@types/d3": "5.0.0",
    "@types/deepmerge": "^1.3.3",
    "@types/jasmine": "^2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.5.2",
    "@types/xml2js": "^0.4.3",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.5.0",
    "codelyzer": "^4.3.0",
    "jasmine-core": "^2.99.1",
    "jasmine-marbles": "^0.3.1",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage": "^1.1.1",
    "karma-coverage-istanbul-reporter": "^1.4.1",
    "karma-jasmine": "^1.1.1",
    "karma-scss-preprocessor": "^3.0.0",
    "karma-spec-reporter": "^0.0.32",
    "karma-spec-reporter-2": "^0.2.0",
    "karma-trx-reporter": "^0.2.9",
    "protractor": "^5.2.2",
    "rxjs-tslint": "^0.1.5",
    "ts-node": "^3.3.0",
    "tslint": "^5.11.0",
    "tslint-defocus": "^2.0.5",
    "tslint-language-service": "^0.9.9",
    "typescript": "3.1.x",
    "wallaby-webpack": "^3.9.5"
  }
}

Et le contenu de mon fichier de configuration karma :

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-coverage'),
      require('karma-coverage-istanbul-reporter'),
      require('karma-spec-reporter'),
      require('karma-trx-reporter'),
      require('karma-scss-preprocessor'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      captureConsole: true,
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    files: [
      { pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', includes: true }
    ],
    preprocessors: {
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), reports: ['lcovonly', 'cobertura', 'html', 'text-summary', 'text'],
      fixWebpackSourcePaths: true,
      'report-config': {
        cobertura: {
          file: 'cobertura-coverage.xml'
        }
      }
    },
    angularCli: {
      environment: 'dev',
      codeCoverage: true
    },
    reporters: ['spec', 'trx', 'coverage-istanbul'],
    specReporter: {
      lateReport: true,
      showSpecTiming: true, // print the time elapsed for each spec
      slowTestTime: 40, // karma-spec-reporter-2
      fastTestTime: 20 // karma-spec-reporter-2
    },
    trxReporter: {
      outputFile: 'coverage/test-results.trx',
      shortTestName: false
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    browsers: ['ChromeHeadlessNoSandbox'],
    browserNoActivityTimeout: 60000, // default is 10000
    browserDisconnectTimeout: 10000, // default is 2000
    captureTimeout: 60000, // default is 60000
    customLaunchers: {
      ChromeHeadlessNoSandbox: {
        base: 'ChromeHeadless',
        flags: [
          '--no-sandbox',
          '--no-proxy-server',
          '--disable-gpu' // https://bugs.chromium.org/p/chromium/issues/detail?id=737678
        ]
      },
      ChromeDebug: {
        base: 'Chrome',
        flags: [
          '--remote-debugging-port=9222'
        ]
      }
    }
  });
};

enfin, le contenu de mon fichier test.ts :

// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { getTestBed } from '@angular/core/testing';
import {
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
// tslint:disable-next-line:no-any
declare const __karma__: any;
// tslint:disable-next-line:no-any
declare const require: any;

import { LicenseManager } from 'ag-grid-enterprise/main';
import { environment } from './environments/environment';
LicenseManager.setLicenseKey(environment.licenses['ag-grid']);

// Prevent Karma from running prematurely.
__karma__.loaded = function () { };

// 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);
// Finally, start Karma to run the tests.
__karma__.start();

0voto

Samer Points 2675

Dans notre cas, nous avons dû utiliser un paquet Angular à haute mémoire pour éviter les dépassements de temps causés par la grande liste de tests, que le CLI d'Angular n'est pas conçu pour gérer.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X