如何在没有TestBed的情况下为Angular Component编写单元笑话测试

Question

我对开玩笑测试很陌生，我很困惑为什么我的所有测试都失败了。

如果你知道有任何视频或文章专门帮助为Angular组件、服务等编写笑话单元测试，而没有"；TestBed"；请告诉我。

这是我的代码：

语音细节-图形组件.ts

@Component({
selector: 'senet-voice-details-graph',
templateUrl: './voice-details-graph.component.html',
styleUrls: ['./voice-details-graph.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class VoiceDetailsGraphComponent {
vm$: Observable<IVoiceSummary> = this._voiceDetailsFacade.vm$.pipe(
map(vm => vm.graphDetails)
);
constructor(private _voiceDetailsFacade: VoiceDetailsFacade) {}
setCdrFilters() {
this._voiceDetailsFacade.setCDRInitialOptions();
}
removeHyphen(phone: string) {
return phone.replace(/-|s/g, '');
}
}

语音细节-图形组件.特殊.ts

import { Injectable } from '@angular/core';
import { VoiceDetailsGraphComponent } from './voice-details-graph.component';
@Injectable()
class MockService {}
describe('VoiceDetailsGraphComponent', () => {
let component: any;
beforeEach(() => {
component = new VoiceDetailsGraphComponent(new MockService() as any);
});
it('should run #constructor()', () => {
expect(component).toBeTruthy();
});
it('should run #setCdrFilters()', async () => {
component._voiceDetailsFacade.setCDRInitialOptions = jest.fn();
component.setCdrFilters();
expect(component._voiceDetailsFacade.setCDRInitialOptions).toHaveBeenCalled();
});
it('should run #removeHyphen()', async () => {
const input = '1-800-999-9999';
const output = '18009999999';
component.phone.replace = jest.fn();
expect(component.removeHyphen(input)).toEqual(output);
expect(component.phone.replace.toHaveBeenCalled());
});
});

故障：

FAIL   senet-voice  libs/senet/voice/src/lib/features/voice-details/voice-details-graph/voice-details-graph.component.spec.ts (11.104 s)
● VoiceDetailsGraphComponent › should run #constructor()
TypeError: Cannot read property 'pipe' of undefined
13 | })
14 | export class VoiceDetailsGraphComponent {
> 15 |   vm$: Observable<IVoiceSummary> = this._voiceDetailsFacade.vm$.pipe(
|                                                                 ^
16 |     map(vm => vm.graphDetails)
17 |   );
18 | 
● VoiceDetailsGraphComponent › should run #constructor()
expect(received).toBeTruthy()
Received: undefined
13 | 
14 |   it('should run #constructor()', () => {
> 15 |     expect(component).toBeTruthy();
|                       ^
16 |   });
17 | 
18 |   it('should run #setCdrFilters()', async () => {
● VoiceDetailsGraphComponent › should run #setCdrFilters()
TypeError: Cannot read property 'pipe' of undefined
13 | })
14 | export class VoiceDetailsGraphComponent {
> 15 |   vm$: Observable<IVoiceSummary> = this._voiceDetailsFacade.vm$.pipe(
|                                                                 ^
16 |     map(vm => vm.graphDetails)
17 |   );
18 | 
● VoiceDetailsGraphComponent › should run #setCdrFilters()
TypeError: Cannot read property '_voiceDetailsFacade' of undefined
17 | 
18 |   it('should run #setCdrFilters()', async () => {
> 19 |     component._voiceDetailsFacade.setCDRInitialOptions = jest.fn();
|               ^
20 |     component.setCdrFilters();
21 |     expect(component._voiceDetailsFacade.setCDRInitialOptions).toHaveBeenCalled();
22 |   });
● VoiceDetailsGraphComponent › should run #removeHyphen()
TypeError: Cannot read property 'pipe' of undefined
13 | })
14 | export class VoiceDetailsGraphComponent {
> 15 |   vm$: Observable<IVoiceSummary> = this._voiceDetailsFacade.vm$.pipe(
|                                                                 ^
16 |     map(vm => vm.graphDetails)
17 |   );
18 | 
● VoiceDetailsGraphComponent › should run #removeHyphen()
TypeError: Cannot read property 'phone' of undefined
25 |     const input = '1-800-999-9999';
26 |     const output = '18009999999';
> 27 |     component.phone.replace = jest.fn();
|               ^
28 |     expect(component.removeHyphen(input)).toEqual(output);
29 |     expect(component.phone.replace.toHaveBeenCalled());
30 |   });

Answer 1

这最终成为了我的解决方案：

我需要在beforeEach函数中添加一个带有vm$observable对象的mock对象。

import { of } from 'rxjs';
import { VoiceDetailsGraphComponent } from './voice-details-graph.component';
describe('VoiceDetailsGraphComponent', () => {
let component: any;
beforeEach(() => {
const mockFacade = {
vm$: of({}),
};
component = new VoiceDetailsGraphComponent(mockFacade as any);
});
it('should run #constructor()', () => {
expect(component).toBeTruthy();
});
it('should run #setCdrFilters()', async () => {
component._voiceDetailsFacade.setCDRInitialOptions = jest.fn();
component.setCdrFilters();
expect(
component._voiceDetailsFacade.setCDRInitialOptions
).toHaveBeenCalled();
});
it('should run #removeHyphen()', async () => {
const input = '1-800-999-9999';
const output = '18009999999';
expect(component.removeHyphen(input)).toEqual(output);
});
});