Wie können verschiedene Testdienste bereitgestellt werden, um die Komponente Angular 2 zu testen?

Question

Ich habe zwei Mock Dienstleistungen:

@Injectable() 
class UserRegistrationServiceMock { 
    registerBasicDetails(details: UserRegistrationDetails) { 
     let response: UserRegistrationResponse = new UserRegistrationResponse(); 
     response.success = false; 
     response.userMessage = 'Test Message';     
     return Observable.of(response); 
    } 

    registerAdvancedDetails() {   
    } 
} 

@Injectable() 
class UserRegistrationServiceSuccessMock { 
    registerBasicDetails(details: UserRegistrationDetails) { 
     let response: UserRegistrationResponse = new UserRegistrationResponse(); 
     response.success = true; 
     response.userMessage = 'Test Message'; 
     return Observable.of(response); 
    } 

    registerAdvancedDetails() { 
    } 
} 

In meinem Jasmine Test stelle ich seine Definition in den "beforeEachProviders" und "before" Methoden:

beforeEachProviders(() => [   
provide(UserRegistrationService, { useClass: UserRegistrationServiceMock }) 
]); 

beforeEach(inject([UserRegistrationService], (_userRegistration)) 

Da ist in meinem eigentlichen Test ich die referenzieren Benutzerregistrierungsdienst, um die Komponente zu initialisieren:

Die Frage hier ist, wie ich das zweite Scheinimplementiergerät zur Verfügung stellen kann Service für meine Komponente?

Answer 1

Sie stellen die zweite Scheinklasse auf die gleiche Weise bereit, wie Sie die erste anbieten.

Fügen Sie es in beforeEachProviders() und beforeEach

beforeEachProviders(() => [   
    provide(UserRegistrationService, { useClass: UserRegistrationServiceMock }), 
    provide(UserRegistrationServiceSuccess, { useClass: UserRegistrationServiceSuccessMock }) 
]); 

beforeEach(inject([UserRegistrationService, UserRegistrationServiceSuccess], (_userRegistration, _userSuccess)) 

Als Tipp, den ich nur vorschlagen injizieren würde, was Sie für jeden Test benötigen, nicht alle Abhängigkeiten in jedem Test zu injizieren. (Es sei denn, Sie haben nur einen Test in dieser Datei). Halten Sie beforeEachProviders, sondern beforeEach zu verwenden, tun dies in Ihrem Komponententest:

it("should create an instance", inject([UserRegistrationService, UserRegistrationServiceSuccess], (_userRegistration : UserRegistrationServiceMock, _userSuccess : UserRegistrationServiceSuccessMock) => { 
     let component: BasicRegistrationComponent = 
     new BasicRegistrationComponent(null, formBuilder, promptWindow, userInfo, translator, userRegistration); 
     expect(component).toBeTruthy(); 
})); 

Auch wenn Sie Mock-Dienste verwenden Sie sie wie oben verweisen: _userRegistration : UserRegistrationServiceMock. Im Grunde bedeutet diese Injection-Anweisung: Wenn der Test nach UserRegistrationService sucht, überlasse ich es UserRegistrationServiceMock, aber ich nenne es _userRegistration. Lassen Sie mich wissen, ob dies nicht :) hilft

Answer 2

die beste und lesbare Weise, die ich gefunden habe, durch Verschachtelung einen zusätzlichen Satzes beschreiben Aussagen dies zu tun:

describe('SomeComponent',() => { 

    describe("Normal Registration",() => { 
     beforeEachProviders(() => [   
      provide(UserRegistrationService, { useClass: UserRegistrationServiceMock }) 
     ]); 

     beforeEach(inject([UserRegistrationService], (_userRegistration)) 

     it('should create an instance',() => { 
      let component: BasicRegistrationComponent = 
      new BasicRegistrationComponent(null, formBuilder, promptWindow, userInfo, translator, userRegistration); 
      expect(component).toBeTruthy(); 
     }); 
    }); 

    describe("Registration Success",() => { 
     beforeEachProviders(() => [   
      provide(UserRegistrationService, { useClass: UserRegistrationServiceSuccessMock }) 
     ]); 

     beforeEach(inject([UserRegistrationService], (_userRegistration)) 

     it('should create an instance',() => { 
      let component: BasicRegistrationComponent = 
       new BasicRegistrationComponent(null, formBuilder, promptWindow, userInfo, translator, userRegistration); 
      expect(component).toBeTruthy(); 
     }); 
    }); 
});