測試單元 Jasmine e Karma Angular

Question

我在角度 6 上做單元測試，我在測試這個分支時遇到問題，我用它來觀察屏幕有多大來決定我將顯示多少列

 @Component({ selector: 'app-rdesp-waiting-approval', templateUrl: './rdesp-waiting-approval.component.html', styleUrls: ['./rdesp-waiting-approval.component.scss'], animations: fuseAnimations }) export class RdespWaitingForApproval implements OnInit { constructor( @Inject(ToastrService) private toaster: ToastrService, private _profileService: ProfileService, private _service: ApprovalsService, public dialog: MatDialog, private route: ActivatedRoute, public _matDialog: MatDialog, private _approvalsService: ApprovalsService, private media: ObservableMedia ) { this.watcher = media.subscribe((change: MediaChange) => { this.activeMediaQuery = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : ''; if ( change.mqAlias == 'xs') { this.displayedColumns = ['job' ,'name', 'totalValue']; }else{ this.displayedColumns = ['internalId','DateOfPublication', 'alias', 'job', 'name','totalValue']; } }); } }

Answer 1

正如我在另一個問題的回答中提到的，您需要模擬 ObservableMedia 服務並返回允許測試的內容。 提醒一下，這是我設置的Stackblitz來演示這一點。 在 Stackblitz 中，我只測試了 ObservableMedia，而不是所有其他依賴注入。

這是 StackBlitz 的兩個規范：

it('should have 3 columns in mat table when changeMqAlias === "xs"', () => {
    component.changeMqAlias = 'xs';
    fixture.detectChanges();
    expect(component.displayedColumns).toEqual(['job', 'name', 'totalValue']);
});
    it('should have 6 columns in mat table when changeMqAlias !== "xs"', () => {
    component.changeMqAlias = 'xl';
    fixture.detectChanges();
    expect(component.displayedColumns.length).toEqual(6);
});

我希望這有幫助。