在重構測試單元角4和茉莉花

Question

文件：login.component.spec.ts

• 茉莉花，噶及角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部分）。

有沒有一種方法可以將類似的輸入放入共享模塊，然後將該模塊導入到新測試中？

（沒有一個良好的面向對象設計的做法，我知道，我只是好奇，如果這是可能的）提前

感謝。

------------- 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 
     }); 
    } 
} 

Answer 1

這裏是我想出瞭解決方案：

我做了一個TestModule然後我把所有的進口，將在所有的測試共享。在每個spec文件中，我只導入特定測試的特定內容。

（樣品TestModule）

TestModule從testHelper.module.ts導出其是稱爲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 {} 

現在，在一個spec文件夾中：

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，然後繼續進行測試。

乾杯