如何提供不同的模拟服务来测试 Angular 2 组件？答案

【问题标题】：How to provide different mock services to test Angular 2 component?如何提供不同的模拟服务来测试 Angular 2 组件？
【发布时间】：2016-12-15 07:44:32
【问题描述】：

我有两个模拟服务：

@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() {
    }
}

在我的 Jasmine 测试中，我在“beforeEachProviders”和“beforeEach”方法中提供了它的定义：

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

这里的问题是如何为我的组件提供服务的第二个模拟实现？

【问题讨论】：

标签： angular typescript jasmine

【解决方案1】：

您提供第二个模拟类的方式与提供第一个模拟类的方式相同。

将其包含在beforeEachProviders() 和beforeEach 中

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

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

作为一个提示，我建议只为每个测试注入你需要的东西，而不是在每个测试中注入所有依赖项。（除非您在该文件中只有一个测试）。保留beforeEachProviders，但不要使用beforeEach，而是在您的组件测试中执行此操作：

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

此外，如果您使用的是模拟服务，您应该像上面那样引用它们： _userRegistration : UserRegistrationServiceMock。基本上，注入语句的意思是：当测试正在寻找UserRegistrationService 时，我通过了UserRegistrationServiceMock，但我称它为_userRegistration。如果这没有帮助，请告诉我:)

【讨论】：

【解决方案2】：

我发现最好和最易读的方法是嵌套一组额外的描述语句：

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

【讨论】：