Angular2-ユニットテスト観察可能なエラー「未定義のプロパティ「サブスクライブ」を読み取れません」

AJカルシ

戻ってきたサービス関数がObservableあり、コンポーネントの1つでそのサービスを利用しています。ここに掲載されている手法を使用して、コンポーネントの単体テストを作成しましたしかし、不思議なことに「未定義のプロパティ「サブスクライブ」を読み取れません」というメッセージが表示されます。

テスト中のコンポーネント:

@Component({
    moduleId: module.id,
    templateUrl: 'signup.component.html'
})
export class SignupComponent implements OnInit {
    signupForm: FormGroup;
    submitted = false;    
    registered = false;

    constructor(public router: Router, private fb: FormBuilder, public authService: AuthService) {        

        this.signupForm = this.fb.group({
            'firstName': ['', Validators.required],
            'lastName': ['', Validators.required],
            'email': ['', Validators.compose([Validators.required])],            
            'password': ['', Validators.compose([Validators.required])],
            'confirmPassword': ['', Validators.required]
        });
    }

    ngOnInit() {       
    }

    signup(event: any) {
        event.preventDefault();
        this.submitted = true;

        if (!this.signupForm.valid) return;

        this.authService.register(this.signupForm.value)
            .subscribe(
            (res: Response) => {
                if (res.ok) {
                    this.registered = true;
                }
            },
            (error: any) => {
                this.registered = false;                
                console.log (error.status + ': ' + error.message);
            });
    }
}

AbstractMockObservableService

import { Subscription } from 'rxjs/Subscription';

export abstract class AbstractMockObservableService {
    protected _subscription: Subscription;
    protected _fakeContent: any;
    protected _fakeError: any;

    set error(err: any) {
        this._fakeError = err;
    }

    set content(data: any) {
        this._fakeContent = data;
    }

    get subscription(): Subscription {
        return this._subscription;
    }

    subscribe(next: Function, error?: Function, complete?: Function): Subscription {
        this._subscription = new Subscription();
        spyOn(this._subscription, 'unsubscribe');

        if (next && this._fakeContent && !this._fakeError) {
            next(this._fakeContent);
        }
        if (error && this._fakeError) {
            error(this._fakeError);
        }
        if (complete) {
            complete();
        }
        return this._subscription;
    }
}

そして最後にユニットテスト

import { ComponentFixture, TestBed, async, fakeAsync, tick } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement, Component, NO_ERRORS_SCHEMA } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';
import { FormBuilder } from "@angular/forms";

import { SignupComponent } from './signup.component';
import { AuthService } from "../index";
import { AbstractMockObservableService } from './abstract-mock-observable-service'

let validUser = {
    firstName: "Ahmad", lastName: "Qarshi", email: "[email protected]"
    password: "ahmad#123", confirmPassword: "ahmad#123" 
}

class RouterStub {
    navigate(url: string) { return url; }
}

class LocationStub {
    path(url?: string) { return '/security/login'; }
}

class AuthServiceStub extends AbstractMockObservableService {
    register(model: any) {
        return this;
    }
}

let authServiceStub: AuthServiceStub;
let comp: SignupComponent;
let fixture: ComponentFixture<SignupComponent>;
let de: DebugElement;
let el: HTMLElement;


function updateForm(firstName: string, lastName: string, email: string
    password: string, confPassword: string) {
    comp.signupForm.controls['firstName'].setValue(firstName);
    comp.signupForm.controls['lastName'].setValue(lastName);
    comp.signupForm.controls['email'].setValue(email);    
    comp.signupForm.controls['password'].setValue(password);
    comp.signupForm.controls['confirmPassword'].setValue(confPassword);    
}

describe('SignupComponent', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [SignupComponent],
            schemas: [NO_ERRORS_SCHEMA]
        });
    });
    compileAndCreate();
    tests();
});

function compileAndCreate() {
    beforeEach(async(() => {
        authServiceStub = new AuthServiceStub();
        TestBed.configureTestingModule({
            providers: [
                { provide: Router, useClass: RouterStub },
                { provide: Location, useClass: LocationStub },
                { provide: AuthService, useValue: authServiceStub },
                FormBuilder
            ]
        })
            .compileComponents().then(() => {
                fixture = TestBed.createComponent(SignupComponent);
                comp = fixture.componentInstance;
            });
    }));
}

function tests() {
    it('should call register user on submit', fakeAsync(() => {
        comp.submitted = false;
        updateForm(validUser.firstName, validUser.lastName, validUser.email, validUser.username, validUser.password,
            validUser.confirmPassword, validUser.tin, validUser.userType);

        spyOn(authServiceStub, 'register');
        authServiceStub.content = { ok: true };

        fixture.detectChanges();
        tick();
        fixture.detectChanges();

        fixture.debugElement.query(By.css('input[type=submit]')).nativeElement.click();


        expect(comp.submitted).toBeTruthy('request submitted');
        expect(authServiceStub.register).toHaveBeenCalled();
        expect(comp.registered).toBeTruthy('user registered');
    }));
}
アルバートペレスファレス

サービスメソッドをスパイし、呼び出されることを期待する場合は、.and.callThrough()spyOnを追加する必要があります。

コードは次のようになります。 spyOn(authServiceStub, 'register').and.callThrough();

そして、expect to haveBeenCalled()

ご覧ください:http//blog.danieleghidoli.it/2016/11/06/testing-angular-component-mock-services/

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Angular2観察可能な問題、未定義のプロパティ「サブスクライブ」を読み取れません

分類Dev

Angular2ユニットテスト-未定義のプロパティ「root」を読み取れません

分類Dev

Angular2ユニットテスト「未定義のプロパティ「unsubscribe」を読み取れません」

分類Dev

Angular:未定義のプロパティ「call」を読み取れません(ブートストラップ時)

分類Dev

Angularfire2。未定義のプロパティ「サブスクライブ」を読み取れません

分類Dev

Angular2 / 4-未定義のプロパティサブスクライブを読み取ることができません

分類Dev

Angular5-観察可能なリターンエラーは未定義のプロパティを読み取ることができません

分類Dev

Angularユニットテスト:TypeError:未定義のプロパティ 'root'を読み取れません

分類Dev

未定義のプロパティunsubscribeを読み取れません:Angular2テスト

分類Dev

angular2:エラー:TypeError:未定義のプロパティ '...'を読み取れません

分類Dev

angular2:エラー:TypeError:未定義のプロパティ '...'を読み取れません

分類Dev

npmテスト(Angular 2ユニットテスト)を実行した後、未定義のプロパティ 'subscribe'を読み取れません

分類Dev

npmテスト(Angular 2ユニットテスト)を実行した後、未定義のプロパティ 'subscribe'を読み取れません

分類Dev

npmテスト(Angular 2ユニットテスト)を実行した後、未定義のプロパティ 'subscribe'を読み取れません

分類Dev

KarmaによるAngularユニットテスト:セッションストレージは「未定義のプロパティを読み取れません」

分類Dev

Angular4ユニットテストエラー「TypeError:undefinedのプロパティ 'subscribe'を読み取れません」

分類Dev

ユニットテストAngular4でエラー `TypeError:Undefined`のプロパティ 'subscribe'を読み取れません

分類Dev

2つの連鎖リクエストによるアクション。「未定義のプロパティを読み取れません」エラー

分類Dev

Angular2:未定義のプロパティ 'name'を読み取れません

分類Dev

Angular2:未定義のプロパティ 'name'を読み取れません

分類Dev

Angular2未定義のプロパティ 'push'を読み取れません

分類Dev

Angular2 +未定義のプロパティ「id」を読み取れません

分類Dev

未定義のプロパティ「post」を読み取れません-Angular2

分類Dev

Angularコンポーネントのテストエラー:TypeErrorが未定義のプロパティ「subscribe」を読み取れません

分類Dev

[karma-server]:TypeError:未定義のプロパティ「範囲」を読み取れません-CI環境でのAngularユニットテスト

分類Dev

未定義の 'ngOnInit''getData'のプロパティを読み取れません-Angular-ユニットテスト-jasmine

分類Dev

Angular2 エラー プロパティを読み取れません

分類Dev

ブラウザーからangular2でチェックされた値を取得する方法(元の例外に直面:未定義のエラーのプロパティ 'push'を読み取ることができません)

分類Dev

Angularの新しいhttpクライアントエラーが未定義のプロパティ「データ」を読み取れません

Related 関連記事

  1. 1

    Angular2観察可能な問題、未定義のプロパティ「サブスクライブ」を読み取れません

  2. 2

    Angular2ユニットテスト-未定義のプロパティ「root」を読み取れません

  3. 3

    Angular2ユニットテスト「未定義のプロパティ「unsubscribe」を読み取れません」

  4. 4

    Angular:未定義のプロパティ「call」を読み取れません(ブートストラップ時)

  5. 5

    Angularfire2。未定義のプロパティ「サブスクライブ」を読み取れません

  6. 6

    Angular2 / 4-未定義のプロパティサブスクライブを読み取ることができません

  7. 7

    Angular5-観察可能なリターンエラーは未定義のプロパティを読み取ることができません

  8. 8

    Angularユニットテスト:TypeError:未定義のプロパティ 'root'を読み取れません

  9. 9

    未定義のプロパティunsubscribeを読み取れません:Angular2テスト

  10. 10

    angular2:エラー:TypeError:未定義のプロパティ '...'を読み取れません

  11. 11

    angular2:エラー:TypeError:未定義のプロパティ '...'を読み取れません

  12. 12

    npmテスト(Angular 2ユニットテスト)を実行した後、未定義のプロパティ 'subscribe'を読み取れません

  13. 13

    npmテスト(Angular 2ユニットテスト)を実行した後、未定義のプロパティ 'subscribe'を読み取れません

  14. 14

    npmテスト(Angular 2ユニットテスト)を実行した後、未定義のプロパティ 'subscribe'を読み取れません

  15. 15

    KarmaによるAngularユニットテスト:セッションストレージは「未定義のプロパティを読み取れません」

  16. 16

    Angular4ユニットテストエラー「TypeError:undefinedのプロパティ 'subscribe'を読み取れません」

  17. 17

    ユニットテストAngular4でエラー `TypeError:Undefined`のプロパティ 'subscribe'を読み取れません

  18. 18

    2つの連鎖リクエストによるアクション。「未定義のプロパティを読み取れません」エラー

  19. 19

    Angular2:未定義のプロパティ 'name'を読み取れません

  20. 20

    Angular2:未定義のプロパティ 'name'を読み取れません

  21. 21

    Angular2未定義のプロパティ 'push'を読み取れません

  22. 22

    Angular2 +未定義のプロパティ「id」を読み取れません

  23. 23

    未定義のプロパティ「post」を読み取れません-Angular2

  24. 24

    Angularコンポーネントのテストエラー:TypeErrorが未定義のプロパティ「subscribe」を読み取れません

  25. 25

    [karma-server]:TypeError:未定義のプロパティ「範囲」を読み取れません-CI環境でのAngularユニットテスト

  26. 26

    未定義の 'ngOnInit''getData'のプロパティを読み取れません-Angular-ユニットテスト-jasmine

  27. 27

    Angular2 エラー プロパティを読み取れません

  28. 28

    ブラウザーからangular2でチェックされた値を取得する方法(元の例外に直面:未定義のエラーのプロパティ 'push'を読み取ることができません)

  29. 29

    Angularの新しいhttpクライアントエラーが未定義のプロパティ「データ」を読み取れません

ホットタグ

アーカイブ