2017-07-30 11 views
0

ファイル:login.component.spec.tsリファクタリングテストユニット4角度とジャスミン

  • ジャスミン、カルマ、および角度4

コード:

// To set up 
import { By } from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 
import { TestBed, ComponentFixture, async } from '@angular/core/testing'; 
import { RouterTestingModule } from '@angular/router/testing'; 
import { MaterialModule } from '@angular/material'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 

// To support the view 
import { ReactiveFormsModule, FormsModule } from '@angular/forms'; 
import { PageLoginComponent } from './login.component'; 

describe('PageLoginComponent',() => { 
    let component: PageLoginComponent; 
    let fixture: ComponentFixture<PageLoginComponent>; 

    // To Assign 
    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     PageLoginComponent, 
     ], 
     imports: [ 
     RouterTestingModule, 
     BrowserAnimationsModule, 
     MaterialModule, 
     FormsModule, 
     ReactiveFormsModule, 
     ] 
    }) 
    .compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(PageLoginComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    }); 

    // To Tear down 
    it('should be created',() => { 
    expect(component).toBeDefined(); 
    }); 

    it('should return true',() => { 
    component.login(); 
    console.log(component.form.errors); 
    expect(component.form.errors.invalidLogin).toBe(true); 
    }); 

}); 

このテストのために私がする必要がある実行しますこれらのすべての輸入を行います。

認証フォルダの下に、ログインコンポーネント、ロック画面、確認、パスワードを忘れました。

これらのコンポーネントごとにテストを書く必要があります。彼らはほぼ同じ輸入品を使用しています(少なくとも// set up部分)。

同様のインポートを共有モジュールに入れて、その1つのモジュールを新しいテストにインポートする方法はありますか?

(良くないオブジェクト指向設計の実践、私はそれが可能であるならば、私はちょうど好奇心、ということを知っている)事前に

感謝。

------------- login.component.ts - 場合は、あなたが

import { UsernameValidators } from './username.validator'; 
import { Component } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms'; 

@Component({ 
    selector: 'my-page-login', 
    styles: [], 
    templateUrl: './login.component.html' 
}) 

export class PageLoginComponent { 
    form = new FormGroup({ 
    username: new FormControl('', [ 
     Validators.required 
    ]), 
    password: new FormControl('', Validators.required) 
    }); 

    // Defining property - For the ease of access 
    get username() { 
    return this.form.get('username'); 
    } 

    get password() { 
    return this.form.get('password'); 
    } 

    login() { 
     this.form.setErrors({ 
     invalidLogin: true 
     }); 
    } 
} 

答えて

0

それを必要とするここで私が思いついた解決策は次のとおりです。

I TestModuleを作成し、すべてのテストで共有されるすべてのインポートを作成しました。各スペックファイルの中で、私はその特定のテストに特有のものだけをインポートします。

specファイルで今すぐtestHelpers

import { RouterTestingModule } from '@angular/router/testing'; 
import { ControlMessagesComponent } from './../shared/control-messages.component'; 
import { DataStub } from './data.stub'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { ApiService } from '../service/api.service'; 
import { MaterialModule, MdNativeDateModule } from '@angular/material'; 
import { DeliveryBoyService } from './../service/delivery-boy.service'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule, ReactiveFormsModule, FormBuilder, NgForm } from '@angular/forms'; 
import { StorageService } from './../service/storage.service'; 
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     MaterialModule, 
     MdNativeDateModule, 
     FormsModule, 
     ReactiveFormsModule, 
     BrowserAnimationsModule, 
     CommonModule, 
     RouterTestingModule, 
    ], 
    declarations: [ 
     ControlMessagesComponent, 
    ], 
    providers: [ 
     NgForm, 
     StorageService, 
     { provide: ApiService, useClass: DataStub }, 
     FormBuilder, 
    ], 
    schemas: [ NO_ERRORS_SCHEMA ], 
    exports: [ 
     CommonModule, 
     ReactiveFormsModule, 
     FormsModule, 
     ControlMessagesComponent, 
     MaterialModule, 
     MdNativeDateModule, 
     RouterTestingModule, 
    ] 
}) 
export class TestModule {} 

というフォルダにあるtestHelper.module.tsからエクスポート(サンプルTestModule

TestModule:ある

import { TestModule } from './../../test-helpers/testHelper.module'; 
import { CountdownPipe } from './../../pipes/count-down.pipe'; 
import { ARegistrationService } from './../a-registration.service'; 
import { ANewFormComponent } from './a-new-form.component'; 
import { async, ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing'; 

describe('ANewFormComponent',() => { 
    let component: ANewFormComponent; 
    let fixture: ComponentFixture<ANewFormComponent>; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ ANewFormComponent, CountdownPipe ], 
     imports: [ 
     TestModule 
     ], 
     providers: [ 
     ARegistrationService, 
     ] 
    }) 
    .compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(ANewFormComponent); 
    component = fixture.componentInstance; 
    }); 


    fit('should be created',() => { 
    fixture.detectChanges(); 
    expect(component).toBeTruthy(); 
    }); 

}); 

。私はこれが非常に良いリファクタリングだと思います。 TestBedをセットアップしてテストに乗ります。

乾杯