使用Angular-CLI 1.0.0-beta.25.5的Angular2 2.4.3，使用karma / jasmine升级单元测试后停止工作

时间：2017-01-19 09:12:36

标签： unit-testing angular karma-jasmine

最近我将 Angular 从 2.0.3 更新为 2.4.3 ，将 Angular-CLI 从 1.0.0-beta.21 至 1.0.0-beta.25.5

升级后我的单元测试停止工作。您可以在下面找到测试文件，配置文件和测试结果。你知道它有什么问题吗？感谢

测试结果 

$ npm test -- --watch=false

> portal@0.0.0 test /Users/artur/Sites/portal
> ng test "--watch=false"

19 01 2017 08:22:52.703:WARN [karma]: Port 9879 in use
19 01 2017 08:22:52.705:INFO [karma]: Karma v1.4.0 server started at http://0.0.0.0:9880/
19 01 2017 08:22:52.705:INFO [launcher]: Launching browser Chrome with unlimited concurrency
19 01 2017 08:22:52.726:INFO [launcher]: Starting browser Chrome
19 01 2017 08:22:55.619:INFO [Chrome 55.0.2883 (Mac OS X 10.12.2)]: Connected on socket XIi2HWa92rY4uvNvAAAA with id 35735618
Chrome 55.0.2883 (Mac OS X 10.12.2): Executed 0 of 0 ERROR (0.004 secs / 0 secs)
npm ERR! Test failed.  See above for more details.

banner.component.spec.ts 

/* tslint:disable:no-unused-variable */

import { Component } from '@angular/core';
import { TestBed, async } from '@angular/core/testing';
import { BannerComponent } from './banner.component';
import { RouterTestingModule } from '@angular/router/testing';

@Component({
  template: ''
})
class DummyComponent {}

describe('Component: Banner', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        DummyComponent,
        BannerComponent
      ],
      imports: [
        RouterTestingModule.withRoutes([
          { path: '', component: DummyComponent }
        ])
      ],
      providers: []
    });
  });

  it('should create an instance', async(() => {
    let fixture = TestBed.createComponent(BannerComponent);
    let component = fixture.debugElement.componentInstance;
    expect(component).toBeTruthy();
  }));
});

banner.component.ts 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.scss'],
  styles: [".banner >>> lp-svg svg path { fill: #fcfcfc; }"]
})
export class BannerComponent {}

的package.json 

{
  "name": "portal",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ngc": "./node_modules/.bin/ngc -p ./src",
    "start": "./node_modules/.bin/ng serve --host 0.0.0.0 --port 4000",
    "build.dev": "./node_modules/.bin/ng build --bh /portal/",
    "build.dev.watch": "./node_modules/.bin/ng build --bh /portal/ --watch true",
    "build.prod": "./node_modules/.bin/ng build --bh /portal/ --prod --env=prod",
    "build.prod.watch": "./node_modules/.bin/ng build --bh /portal/ --prod --env=prod",
    "serve.prod": "node lp-server.js",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "./node_modules/.bin/ng test",
    "e2e": "./protractor.sh",
    "copy.support-page": "./node_modules/.bin/copyfiles -u 1 ./src/support.html ./dist"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.3",
    "@angular/compiler": "^2.4.3",
    "@angular/compiler-cli": "^2.4.3",
    "@angular/core": "^2.4.3",
    "@angular/forms": "^2.4.3",
    "@angular/http": "^2.4.3",
    "@angular/platform-browser": "^2.4.3",
    "@angular/platform-browser-dynamic": "^2.4.3",
    "@angular/platform-server": "^2.4.3",
    "@angular/router": "^3.4.3",
    "copyfiles": "1.0.0",
    "core-js": "2.4.1",
    "jquery": "2.2.3",
    "perfect-scrollbar": "~0.6.10",
    "rxjs": "^5.0.3",
    "ts-helpers": "1.1.1",
    "typescript": "2.0.2",
    "underscore": "1.8.3",
    "zone.js": "0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.5.41",
    "angular-cli": "^1.0.0-beta.25.5",
    "codelyzer": "^2.0.0-beta.4",
    "jasmine-core": "^2.5.2",
    "jasmine-spec-reporter": "^3.2.0",
    "karma": "^1.4.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.0",
    "karma-mocha-reporter": "^2.2.1",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-remap-istanbul": "^0.4.0",
    "live-server": "1.1.0",
    "protractor": "^5.0.0",
    "ts-node": "1.2.1",
    "tslint": "3.13.0"
  }
}

karma.conf.js 

// 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-cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-phantomjs-launcher'),
      require('karma-remap-istanbul'),
      require('angular-cli/plugins/karma'),
      require('karma-mocha-reporter')
    ],
    files: [
      { pattern: 'src/test.ts', watched: false },
      { pattern: 'src/assets/img/*', watched: false, included: false, served: true, nocache: false }
    ],
    proxies: {
      '/portal/assets/img/': '/base/src/assets/img/'
    },
    preprocessors: {
      './src/test.ts': ['angular-cli']
    },
    remapIstanbulReporter: {
      reports: {
        html: 'coverage',
        lcovonly: './coverage/coverage.lcov'
      }
    },
    angularCli: {
      config: './angular-cli.json',
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
                ? ['progress', 'karma-remap-istanbul']
                : ['progress'],
    port: 9879,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    browserConsoleLogOptions: {
      level: 'debug',
      format: '%b %T: %m',
      terminal: true
    },
    customLaunchers: {
      'PhantomJS_custom': {
        base: 'PhantomJS',
        options: {
          windowName: 'my-window',
          settings: {
            webSecurityEnabled: false
          },
        },
        flags: ['--load-images=true'],
        debug: true
      }
    },
    phantomjsLauncher: {
        // Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom)
        exitOnResourceError: true
    }
  });
};

角cli.json 

{
  "project": {
    "version": "1.0.0-beta.25.5",
    "name": "ui-lender-portal-v2"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets"],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "lp",
      "mobile": false,
      "styles": [
        "styles.scss",
        "../node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css"
      ],
      "scripts": [
          "../node_modules/underscore/underscore.js",
          "../node_modules/jquery/dist/jquery.min.js",
          "../node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.js",
          "./libs/jquery-ui/jquery-ui.min.js",
          "./libs/jquery-mobile/jquery.mobile.custom.min.js",
          "./libs/slick/slick.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

1 个答案:

答案 0 :(得分：0)

最后，我使用Angular-CLI创建了新项目，并从我的项目中复制了源文件。这有帮助。

相关问题
最新问题