Испытательный блок 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);
});

Надеюсь, это поможет.