diff --git a/src/app/directives/form-change-guard/form-change-guard-for-slide-in.directive.spec.ts b/src/app/directives/form-change-guard/form-change-guard-for-slide-in.directive.spec.ts new file mode 100644 index 00000000000..d392692b762 --- /dev/null +++ b/src/app/directives/form-change-guard/form-change-guard-for-slide-in.directive.spec.ts @@ -0,0 +1,69 @@ +import { FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { + createHostFactory, SpectatorHost, mockProvider, +} from '@ngneat/spectator/jest'; +import { TranslateService } from '@ngx-translate/core'; +import { of, Subject } from 'rxjs'; +import { DialogService } from 'app/modules/dialog/dialog.service'; +import { IxSlideInRef } from 'app/modules/forms/ix-forms/components/ix-slide-in/ix-slide-in-ref'; +import { FormChangeGuardForSlideInDirective } from './form-change-guard-for-slide-in.directive'; + +describe('FormChangeGuardForSlideInDirective', () => { + let spectator: SpectatorHost>; + + const createHost = createHostFactory({ + component: FormChangeGuardForSlideInDirective, + imports: [ReactiveFormsModule], + providers: [ + mockProvider(DialogService, { + confirm: jest.fn(() => of(true)), + }), + mockProvider(TranslateService, { + instant: jest.fn((key: string) => key), + }), + { + provide: IxSlideInRef, + useFactory: () => ({ + close: jest.fn(), + slideInClosed$: new Subject(), + }), + }, + ], + }); + + beforeEach(() => { + spectator = createHost(` +
+ `, { + hostProps: { + form: new FormGroup({}), + }, + }); + }); + + it('should set formChanged to true when form value changes', () => { + spectator.component.formGroup.markAsPristine(); + + spectator.component.formGroup.valueChanges.subscribe(() => { + expect(spectator.component.formChanged).toBe(true); + }); + }); + + it('should emit close event if there are no unsaved changes', () => { + spectator.component.formGroup.markAsPristine(); + + spectator.detectChanges(); + + spectator.component.closeWithConfirmation().subscribe((shouldClose) => { + expect(shouldClose).toBe(true); + }); + }); + + it('should call confirmation dialog if there are unsaved changes', () => { + const dialogService = spectator.inject(DialogService); + + spectator.component.closeWithConfirmation().subscribe(() => { + expect(dialogService.confirm).toHaveBeenCalled(); + }); + }); +}); diff --git a/src/app/directives/form-change-guard/form-change-guard-for-slide-in.directive.ts b/src/app/directives/form-change-guard/form-change-guard-for-slide-in.directive.ts index 47c5fead7c6..ddc2ee0af20 100644 --- a/src/app/directives/form-change-guard/form-change-guard-for-slide-in.directive.ts +++ b/src/app/directives/form-change-guard/form-change-guard-for-slide-in.directive.ts @@ -17,7 +17,7 @@ import { IxSlideInRef } from 'app/modules/forms/ix-forms/components/ix-slide-in/ export class FormChangeGuardForSlideInDirective implements OnInit { @Input() formGroup: FormGroup; - private formChanged = false; + formChanged = false; constructor( private translate: TranslateService, @@ -30,6 +30,23 @@ export class FormChangeGuardForSlideInDirective implements OnInit { this.overrideSlideInClose(); } + closeWithConfirmation(response?: T): Observable { + if (!this.formChanged) { + this.emitClose(response); + return of(true); + } + + return this.showConfirmDialog().pipe( + switchMap((shouldClose) => { + if (shouldClose) { + this.formChanged = false; + this.emitClose(response); + } + return of(shouldClose); + }), + ); + } + private trackFormChanges(): void { this.formGroup.valueChanges .pipe( @@ -47,23 +64,6 @@ export class FormChangeGuardForSlideInDirective implements OnInit { .subscribe(); } - private closeWithConfirmation(response?: T): Observable { - if (!this.formChanged) { - this.emitClose(response); - return of(true); - } - - return this.showConfirmDialog().pipe( - switchMap((shouldClose) => { - if (shouldClose) { - this.formChanged = false; - this.emitClose(response); - } - return of(shouldClose); - }), - ); - } - private showConfirmDialog(): Observable { return this.dialogService.confirm({ title: this.translate.instant('Unsaved Changes'),