标签: angular2-testing

我想写beforeEach这样的,以便每个人都it获得所需的模块/提供者:

beforeEach(() => addProviders([
        BaseRequestOptions,
        MockBackend,
        {
            provide: Http,
            useFactory: (backend: MockBackend, options: BaseRequestOptions) => new Http(backend, options),
            deps: [MockBackend, BaseRequestOptions]
        },
        MyService
    ]));

但是由于addProvidersRC6中的方法已被弃用,添加我的提供者的更好的替代方法是什么？

我正在为angular2组件编写测试用例.

我创建了一个使用observable流的服务,如下所示:

import {Injectable}      from '@angular/core'
import {Subject} from 'rxjs/Subject';
import {User} from './user.model';

@Injectable()
export class UserService {

  selectedUserInstance:User = new User();

  // Observable selectedUser source
  private selectedUserSource = new Subject<User>();

  // Observable selectColumn stream
  selectedUser$ = this.selectedUserSource.asObservable();

  // service command
  selectUser(user:User) {
    this.selectedUserInstance=user;
    this.selectedUserSource.next(user);
  }
}

现在在我的组件中,我订阅了这个流:

getSelectedUser() {
    this.subscriptionUser = this.userService.selectedUser$.subscribe(
      selectedUser => {
        this.selectedUser = selectedUser;
      }
    );
}

现在在我的spec.ts文件中,我想将此流模拟为:

spyOn(userService, 'selectedUser$')
        .and.returnValue(Observable.of({
            'name': 'bhushan',
            'desc': 'student'
        }));

但它一直给我以下错误:

错误:spyOn找不到要监视selectColumn $()的对象

有没有办法做到这一点？

我很长时间以来一直坚持这个问题.

任何输入？

谢谢

我正在学习Angular 2测试,我收到一个目前对我没有意义的错误.

'expect' was used when there was no current spec,

测试:

import {ExperimentsComponent} from "./experiments.component";
import {StateService} from "../common/state.service";
import {ExperimentsService} from "../common/experiments.service";

describe('experiments.component title and body should be correct',() => {

  let stateService = StateService;
  let experimentService = ExperimentsService;

  let app = new ExperimentsComponent(new stateService, new experimentService);

  expect(app.title).toBe('Experiments Page');
  expect(app.body).toBe('This is the about experiments body');

});

组件:

import {Component, OnInit} from "@angular/core";
import {Experiment} from "../common/experiment.model";
import {ExperimentsService} from "../common/experiments.service";
import {StateService} from "../common/state.service";


@Component({
    selector: 'experiments',
    template: …

使用Jasmine和Karma进行测试,我正在使用该zxcvbn库进行一些密码强度计算.当我尝试通过调用updateScore()下面的函数来运行规范时,这会失败.

private updateScore(): void {
    const analysis = zxcvbn(this.password)
    this.score = analysis.score;
    this.comment = analysis.feedback.warning || analysis.feedback.suggestions[0];
  }

在导入中,我正在做 import zxcvbn from 'zxcvbn';

这适用于应用程序,甚至在我构建和模拟时,但在规范中,它给了我这个错误:

FAILED TESTS:
  PasswordStrengthChecker
    ? should update the score when password changes
      Chrome 55.0.2883 (Mac OS X 10.11.6)
    TypeError: zxcvbn_1.default is not a function
        at PasswordStrengthChecker.updateScore (webpack:///src/components/password-strength-checker/password-strength-checker.ts:25:28 <- src/test.ts:93920:40)
        at PasswordStrengthChecker.ngOnChanges (webpack:///src/components/password-strength-checker/password-strength-checker.ts:20:9 <- src/test.ts:93916:14)
        at Object.<anonymous> (webpack:///src/components/password-strength-checker/password-strength-checker.spec.ts:27:13 <- src/test.ts:185997:18)
        at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:232:0 <- src/test.ts:183822:26)
        at ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:79:0 <- src/test.ts:130574:39)
        at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:231:0 <- …

我正在尝试将测试引入我现有的项目中,但我仍然遇到同样的错误,我认为这会阻止我运行测试.我得到的错误是

错误在.../src/app/dashboard.component.spec.ts(15,13):找不到名称'HTMLElement'.)

Chrome 57.0.2987(Mac OS X 10.12.3):执行4个成功中的4个(7.24秒/ 6.55秒)

我的dashboard.component.spec.ts看起来像这样:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { DashboardComponent } from './dashboard.component';
import { ExchangeService } from './exchange.service';

describe('DashboardComponent (templateUrl)', () => {

    let comp: DashboardComponent;
    let fixture: ComponentFixture<DashboardComponent>;

    let spy: jasmine.Spy;
    let de: DebugElement;
    let el: HTMLElement; // how does this work...?
    let exchangeService: ExchangeService; // the actual injected service

    const testExchange = 'New York Stock …

这似乎是一个项目设置问题.这在以前工作.我不知道这些错误消息可以帮助我开始.有没有人对从哪里开始诊断问题有一些建议？

21 05 2017 07:42:55.094:WARN [karma]: No captured browser, open http://localhost:9876/
21 05 2017 07:42:55.110:INFO [karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
21 05 2017 07:42:55.110:INFO [launcher]: Launching browser Chrome with unlimited concurrency
21 05 2017 07:42:55.118:INFO [launcher]: Starting browser Chrome                                                                                                                                                                                                        ERROR in /Users/jgreenaw/WebstormProjects/legalcoveapp/node_modules/@angular/core/src/testability/testability.d.ts (41,33): Cannot find name 'Node'.

ERROR in /Users/jgreenaw/WebstormProjects/legalcoveapp/node_modules/@angular/forms/src/directives/ng_form.d.ts (69,22): Cannot find name 'Event'.

ERROR in /Users/jgreenaw/WebstormProjects/legalcoveapp/node_modules/@angular/forms/src/directives/reactive_directives/form_group_directive.d.ts (74,22): Cannot find name 'Event'.

ERROR in /Users/jgreenaw/WebstormProjects/legalcoveapp/node_modules/@ng-bootstrap/ng-bootstrap/rating/rating.d.ts (58,26): Cannot find name 'KeyboardEvent'.

ERROR in /Users/jgreenaw/WebstormProjects/legalcoveapp/node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.d.ts (81,26): Cannot find name …

我有一个采用模板驱动形式的组件

<form (ngSubmit)="onSearchCorpus(form)" #form="ngForm">
<combo-box [(ngModel)]="model.corpus" name="corpus" #corpus="ngModel"></combo-box>
<input [(ngModel)]="model.label" name="label" id="label" type="text" required pattern="^(?!\s*$)[\w\_\-\:\s]*" maxlength="50" class="form-control label-name" autocomplete="off" #label="ngModel">
<textarea [(ngModel)]="model.query" name="query" id="query" maxlength="3600" required validateQuerySyntax class="form-control search-query" #query="ngModel" #queryControl
        placeholder="Example: (&quot;grantee&quot; OR &quot;grant&quot; OR &quot;sponsor&quot; OR &quot;contribute&quot; OR &quot;contributor&quot;) NEAR (&quot;non-profit organization&quot; OR &quot;charities&quot;)">
      </textarea>
 <button [disabled]="corpusValidationInProgress" type="submit" class="button-level-one">Search</button>
</form>

在处理表单提交的方法中,我访问控制 NgForm实例的属性,它在浏览器中工作正常.

onSearchCorpus(formData: NgForm) {
   ...
   const corpusErrors = formData.controls.corpus.errors;
   ...
}

但是,当我尝试使用Karma测试此方法时,NgForm的controls属性为空.我很困惑为什么会这样.该方法失败并出错cannot read property "errors" of undefined.

以下是我的测试结果:

it('should not perform corpusSearch …

我正在使用karma viewport npm 包viewport通过jasmine测试规范设置for chrome 浏览器。我正在遵循上面提供的链接中的指南。这很简单，但不知何故我无法让它工作。

这是我的karma.conf.js。

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine', '@angular/cli', 'viewport'],
        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-remap-istanbul'),
            require('@angular/cli/plugins/karma'),
            require('karma-viewport')
        ],
        files: [
            { pattern: './src/test.ts', watched: false }
        ],
        preprocessors: {
            './src/test.ts': ['@angular/cli']
        },
        mime: {
            'text/x-typescript': ['ts','tsx']
        },
        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'],

        htmlReporter: …

我使用 angular-cli 创建了一个简单的应用程序来说明我的问题。你可以在这里看到所有的代码：https : //github.com/wholladay/tracking

每当单击包含元素时，该指令都会调用服务。因此，我想模拟该服务并确保在将点击事件发送到指令时调用它。

这是我的测试代码：

/* tslint:disable:no-unused-variable */
import { inject, addProviders } from '@angular/core/testing';
import { TestComponentBuilder } from '@angular/compiler/testing';
import { Component } from '@angular/core';
import { By } from '@angular/platform-browser';
import { TrackingDirective } from './tracking.directive';
import { TrackingService } from './tracking.service';

class MockTrackingService extends TrackingService {
  public eventCount = 0;

  public trackEvent(eventName: string) {
    this.eventCount++;
  }
}

describe('TrackingDirective', () => {
  let builder: TestComponentBuilder;
  let mockTrackingService: MockTrackingService;
  let trackingDirective: TrackingDirective;

  beforeEach(() => { …

我已经编写了一些测试用例，当我尝试运行 ng test 时，仅执行一个测试用例，其余的则被跳过

// 我的 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.
declare var __karma__: any;
declare var require: any;

// Prevent Karma from running prematurely.
__karma__.loaded = function …