Question

我有两个模拟服务：

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

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

Answer 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。基本上，inject语句意味着：当测试正在寻找UserRegistrationService时，我正在传递它UserRegistrationServiceMock但我称之为_userRegistration。如果这没有帮助，请告诉我:)。

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

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

2 个答案: