测试单元 Jasmine e Karma Angular答案

【问题标题】：Test Unit Jasmine e Karma Angular测试单元 Jasmine e Karma Angular
【发布时间】：2018-12-26 01:38:23
【问题描述】：

我正在对角度 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'];
      }
    });

  
  }
}

【问题讨论】：

您能告诉我们更多关于media 是什么的信息吗？是服务吗？
类内部化了一个 MatchMedia 服务并公开了一个 Subscribable 和 Observable 接口。

标签： angular unit-testing testing angular6 karma-jasmine

【解决方案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);
});

我希望这会有所帮助。

【讨论】：