Не удалось выполнить CanDeactivateFn Karma Test Angular 16
У меня есть canDeactivateGuard, который возвращается из MatDialog компонента для несохраненного действия. Моя проблема в том, что я не могу протестировать функциональную защиту и получаю ошибку – Ошибка типа: невозможно прочитать свойства неопределенного значения (чтение «canUserExitAlertDialog»)
Вот гвардия-
import { CanDeactivateFn } from '@angular/router';
import { Observable, map } from 'rxjs';
export const canDeactivateGuard: CanDeactivateFn<any> = (
component,
route,
state
): Observable<boolean> | boolean => {
return component.canUserExitAlertDialog('back').pipe(
map((result) => {
console.info(result);
return result === 'discard';
})
);
};
Вот метод моего компонента, который вызывает охранник: Примечание. У меня есть диалог с матом, в котором есть две кнопки: «Отменить» и «Отменить». При нажатии кнопки «Отменить» пользователь перенаправляется на домашнюю страницу.
canUserExitAlertDialog(key: string): Observable<any> {
//I have a condition in the alert component based on this key
if (this.hasFormSaved) { //if any changes are saved then not considered
return of('discard');
}
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.data = { action: key, redirect: 'home' };
if (this.wasFormChanged || this.form.dirty) {
const dialogRef = this.dialog.open(AlertComponent, dialogConfig);
return dialogRef.afterClosed();
} else {
this.dialog.closeAll();
return of('discard');
}
}
Код в компоненте Dialog Alert:
export class AlertComponent {
userAction!: any;
alertMsg = 'Are you sure you want to discard the changes?';
unsavedChanges = 'This will reload the page';
constructor(
@Inject(MAT_DIALOG_DATA) data: any,
@Inject(Window) private window: Window,
private dialogRef: MatDialogRef<AlertComponent>
) {
this.userAction = data;
}
public onCancel(): void {
this.dialogRef.close('cancel');
}
public onDiscard(): void {
this.dialogRef.close('discard');
if (this.userAction.action === 'something') { //key I passed from the main component
console.info('do something');
}
}
}
Наконец, вот мой код в файле спецификации CanDeactivate:
describe('canDeactivateGuard functional guard', () => {
let nextState: RouterStateSnapshot;
let component: MyComponent;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
{
provide: ActivatedRoute,
useValue: {
snapshot: {},
},
},
],
});
});
it('should be created', fakeAsync(() => {
const activatedRoute = TestBed.inject(ActivatedRoute);
const nextState = {} as RouterStateSnapshot;
const currState = {} as RouterStateSnapshot;
const guardResponse = TestBed.runInInjectionContext(() => {
canDeactivateGuard(
component,
activatedRoute.snapshot,
currState,
nextState
) as Observable<any>;
});
expect(guardResponse).toBeTruthy();
}));
Я попытался создать компонент-заглушку и определить метод canUserExitAlertDialog, но это не помогло. Есть ли другой способ успешно пройти этот тест? Согласно угловому уровню, защита деактивации на уровне класса устарела.
Ошибка здесь- сообщение об ошибке
Тестовое покрытие- введите сюда описание изображения
Ответы 3
Мы также можем издеваться над компонентом, чтобы вернуть наблюдаемую величину, а затем использовать fakeAsync и flush для получения ответа.
it('should be created', fakeAsync(() => {
const activatedRoute = TestBed.inject(ActivatedRoute);
const nextState = {} as RouterStateSnapshot;
const currState = {} as RouterStateSnapshot
let output;
const guardResponse = TestBed.runInInjectionContext(() => {
canDeactivateGuard(
{ canUserExitAlertDialog: (param) => of('discard'), } as any, // <- changed here!
activatedRoute.snapshot,
currState,
nextState
).subscribe((data) => {
output = data;
});
});
flush();
expect(output).toBeTruthy();
}));
Поскольку вы не инициализируете компонент, вы получаете эту ошибку. Есть, по крайней мере, два способа двигаться вперед.
Попробуйте инициализировать компонент как экземпляр и проверьте, проходят ли тесты!
it('should be created', fakeAsync(() => {
const activatedRoute = TestBed.inject(ActivatedRoute);
const nextState = {} as RouterStateSnapshot;
const currState = {} as RouterStateSnapshot;
const guardResponse = TestBed.runInInjectionContext(() => {
canDeactivateGuard(
new AlertComponent(), // <- changed here!
activatedRoute.snapshot,
currState,
nextState
) as Observable<any>;
});
expect(guardResponse).toBeTruthy();
}));
Добавьте компонент на тестовый стенд, создайте компонент и внедрите его!
it('should be created', fakeAsync(() => {
const activatedRoute = TestBed.inject(ActivatedRoute);
const nextState = {} as RouterStateSnapshot;
const currState = {} as RouterStateSnapshot;
const fixture = TestBed.createComponent(FeedbackCardComponent); // <- changed here!
component = fixture.componentInstance; // <- changed here!
const guardResponse = TestBed.runInInjectionContext(() => {
canDeactivateGuard(
component,
activatedRoute.snapshot,
currState,
nextState
) as Observable<any>;
});
expect(guardResponse).toBeTruthy();
}));
@ ufccoder123 Пожалуйста, попробуйте мой обновленный ответ в качестве первого предложения!
it('должно быть создано', fakeAsync(() => { const activeRoute = TestBed.inject(ActivatedRoute); const nextState = {} as RouterStateSnapshot; const currState = {} as RouterStateSnapshot; const GuardResponse = TestBed.runInInjectionContext(() => { canDeactivateGuard( { canUserExitAlertDialog: (param: Any) => of('discard') } as Any, activeRoute.snapshot, currState, nextState ) as Observable<any>; .toBeTruthy() })); Я получаю Ожидается, что неопределенное будет правдивым.
В первом предложении говорится: Ожидается, что неопределенное будет правдивым.
@ufccoder123 извините, нам нужно подписаться, затем сбросить ее и затем проверить значение!
Я не думаю, что мы можем подписаться на runInInjectionContext. Свойство «подписаться» не существует для типа «void».
Вот мой окончательный тестовый файл. Спасибо @Naren за все предложения. ->
fdescribe('canDeactivate functional guard', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
{
provide: ActivatedRoute,
useValue: {
snapshot: {},
},
},
],
});
});
it('should be able to test canDeactivate functional guard action', fakeAsync(() => {
const activatedRoute = TestBed.inject(ActivatedRoute);
const nextState = {} as RouterStateSnapshot;
const currState = {} as RouterStateSnapshot
let output;
const guardResponse = TestBed.runInInjectionContext(() => {
let deactivateResp = canDeactivateGuard(
{ canUserExitAlertDialog: (param: any) => of('discard'), } as any,
activatedRoute.snapshot,
currState,
nextState
) as Observable<any>;
deactivateResp.subscribe((data: any) => { // <- changed here!
output = data;
});
});
flush();
expect(output).toBeTruthy();
}));
});
Я создал stackblitz для своего кода. В нем рассматривается тема о том, как создать защиту canDecactivate в Angular 17 с помощью действия Mat-dialog. Поскольку я не смог найти помощь, которую искал в stackoverflow или где-либо еще для функциональной защиты canDeactivate с помощью Mat-Dialog, я создал этот stackblitz, чтобы он мог помочь другим. Примечание. В соответствии с уровнем углового класса деактивация защиты устарела. Посмотрите и предложите любые идеи по улучшению.
К сожалению, не сработало. Теперь выдает ошибку для NullInjectorError: R3InjectorError(DynamicTestModule)[SharedService -> HttpClient -> HttpClient], которая внедряется в компонент.