Angular 6: Как написать спецификацию теста jasmine для диалога mat
Я пытаюсь написать тестовую спецификацию для mat-dialog, но мне не удалось добиться успеха, проблема в том, что он вызывается функцией. Как это сделать? Спасибо за вашу помощь. Вот мой код
closeDialogCancelButton() {
if (this.editFormData.dirty) {
let dialogRef = this.dialogCancel.open(DialogCancel,
{
width: '250px',
disableClose: true,
data:
{
id: '1'
}
});
dialogRef.afterClosed().subscribe(result => {
if (result)
this.dialog.close();
});
} else
this.dialog.close();
}
Я не могу предоставить весь код компонентов, но я думаю, что этого достаточно для создания спецификаций в jasmine.
Я пытался много раз, но возникали некоторые ошибки из-за того, что он указывал на другие компоненты.
что такое this.dialogCancel это сервис?
это просто объект матдиалога
Вы уверены, что не вводите dialogCancel в конструктор компонента?
Ответы 2
Я решил то же самое, высмеяв MatDialog. то есть:
import { of } from 'rxjs';
export class MatDialogMock {
open() {
return {
afterClosed: () => of({ name: 'some object' })
};
}
}
Затем добавьте этот макет в конфигурацию TestBed.
providers: [{provide: MatDialog, useClass: MatDialogMock}]
Расширяя ответ Данило, и с помощью Angular 7 вы можете протестировать matDialog так же, как показано ниже.
С методом тестирования:
openExport() {
const dialogRef = this.matDialog.open(ExportComponent, {
data: {}
});
dialogRef.afterClosed().subscribe(result => {
if (result !== 'cancel') {
this.export(result);
}
});
}
И с моим действием mat-dialog-close, определенным как таковое:
<div mat-dialog-actions>
<button mat-button [mat-dialog-close] = "'cancel'">Cancel</button>
...
</div>
Вы можете использовать следующие тесты:
describe('openExport', () => {
const testCases = [
{
returnValue: 'Successful output from dialog',
isSuccess: true
},
{
returnValue: 'cancel',
isSuccess: false
},
];
testCases.forEach(testCase => {
it(`should open the export matDialog and handle a ${testCase.isSuccess} output`, () => {
const returnedVal = {
afterClosed: () => of(testCase.returnValue)
};
spyOn(component, 'export');
spyOn(component['matDialog'], 'open').and.returnValue(returnedVal);
component.openExport();
if (testCase.isSuccess) {
expect(component.export).toHaveBeenCalled();
} else {
expect(component.export).not.toHaveBeenCalled();
}
expect(component['matDialog'].open).toHaveBeenCalled();
});
});
});
Не забудьте предоставить вашему TestBed.configureTestingModulematDialog и MAT_DIALOG_DATA:
providers: [
{ provide: MatDialogRef, useValue: {} },
{ provide: MAT_DIALOG_DATA, useValue: {} }
]
Можете ли вы добавить весь код компонента?