javascript - 当在组件的根目录中提供服务时如何监视服务方法

Question

我正在使用 karma-jasmine 为 Angular 组件编写单元测试。我在我的 ProfileComponent 中使用了提供者并注入(inject)了 ProfileService。

profile.component.ts

@Component({
    selector: 'app-profile',
    templateUrl: './profile.component.html',
    styleUrls: ['./profile.component.scss'],
    providers: [ProfileService]
})
export class ProfileComponent implements OnInit {

    public data;

    constructor(private profileService: ProfileService) {}

    ngOnInit() {
        await this.profileService.login();
        this.profileService.getData('A').subscribe((result) => {
            this.data = result;
        });
    }

}

profile.service.ts

@Injectable()
export class ProfileService {

    private baseUrl: string;

    constructor(private http: HttpClient) {
        this.baseUrl = 'https://localhost:4002';
    }

    public async login() {
        const loginUrl = `${this.baseUrl}/api/Login`;
        return this.http.post(loginUrl, {}, { headers }).toPromise();
    }

    getData(id: string) {
        const url = `${this.baseUrl}/api/GetData/${id}`;
        return this.http.get(url, { headers });
    }
}

profile.component.spec.ts

const data = ['A', 'B', 'C'];

describe('Client.App.ProfileComponent', () => {
    let component: ProfileComponent;
    let fixture: ComponentFixture < ProfileComponent > ;
    let profileService: ProfileService;
    let profileData;

    beforeEach(async (() => {
        TestBed.configureTestingModule({
            imports: [HttpClientTestingModule, ReactiveFormsModule, RouterTestingModule],
            declarations: [ProfileComponent],
            providers: [ProfileService],
            schemas: [NO_ERRORS_SCHEMA]
        }).compileComponents();
    }));

    beforeEach(fakeAsync(() => {
        profileData = new Subject();
        profileService = TestBed.inject < ProfileService > (ProfileService);
        spyOn(profileService, 'login').and.returnValue({});
        spyOn(profileService, 'getData').and.returnValue(profileData);
        fixture = TestBed.createComponent(ProfileComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    }));

    it('shall create the component', () => {
        profileData.next(data);
        fixture.detectChanges();
        expect(component).toBeDefined();
    });
});

我添加了一个调试器并检查它是否登录失败。所以，我有两个问题:

1. 因为我在 Profile Component 中使用了提供程序，我可以将 ProfileService 注入(inject)到 profile.component.spec.ts 文件中吗？它将创建同一服务的两个实例？
2. 如何监视 ProfileService 的 login() 和 getData()，因为下面的语句不起作用...？

spyOn(profileService, 'login').and.returnValue({});

请帮我解决这个问题。

Answer 1

1. 因为我在配置文件组件中使用了提供程序，我可以在 profile.component.spec.ts 文件中注入(inject) Profileervice，因为它会创建同一服务的两个实例......？

回答:您应该为服务创建一个Stub，以使用useClass

替换对实际 ProfileService 的依赖

export class ProfileServiceStub {
    getData(id: string) {
       return of({some_obj: "value"})
    }
}

和在规范中

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [HttpClientTestingModule, ReactiveFormsModule, RouterTestingModule],
            declarations: [ProfileComponent],
            providers: [ {provide: ProfileService , useClass: ProfileServiceStub } ], // <-- useclass here
            schemas: [NO_ERRORS_SCHEMA]
        }).compileComponents();

1. 如何监视 ProfileService 的 login() 和 getData()，因为以下语句不起作用...？

答案:在组件构造函数中将服务设为public，如下所示:

constructor(public profileService: ProfileService) { }

我强烈建议您阅读 my article on something similar where I have tested the component