diff --git a/npm/ng-packs/packages/core/src/lib/directives/form-submit.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/form-submit.directive.ts index 5d0c6ef7a1..4d6c1014db 100644 --- a/npm/ng-packs/packages/core/src/lib/directives/form-submit.directive.ts +++ b/npm/ng-packs/packages/core/src/lib/directives/form-submit.directive.ts @@ -21,6 +21,9 @@ type Controls = { [key: string]: FormControl } | FormGroup[]; selector: 'form[ngSubmit][formGroup]', }) export class FormSubmitDirective implements OnInit, OnDestroy { + @Input() + debounce = 200; + @Input() notValidateOnSubmit: string | boolean; @@ -42,7 +45,7 @@ export class FormSubmitDirective implements OnInit, OnDestroy { fromEvent(this.host.nativeElement as HTMLElement, 'keyup') .pipe( - debounceTime(200), + debounceTime(this.debounce), filter((key: KeyboardEvent) => key && key.key === 'Enter'), takeUntilDestroy(this), ) diff --git a/npm/ng-packs/packages/core/src/lib/tests/form-submit.directive.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/form-submit.directive.spec.ts new file mode 100644 index 0000000000..094a41d4a6 --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/tests/form-submit.directive.spec.ts @@ -0,0 +1,46 @@ +import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator/jest'; +import { FormSubmitDirective } from '../directives/form-submit.directive'; +import { FormsModule, ReactiveFormsModule, FormGroup } from '@angular/forms'; +import { timer } from 'rxjs'; + +describe('FormSubmitDirective', () => { + let spectator: SpectatorDirective; + let directive: FormSubmitDirective; + + const formGroup = new FormGroup({}); + const submitEventFn = jest.fn(() => {}); + + const createDirective = createDirectiveFactory({ + directive: FormSubmitDirective, + imports: [FormsModule, ReactiveFormsModule], + }); + + beforeEach(() => { + spectator = createDirective( + '
form content
', + { + hostProps: { + submitEventFn, + formGroup, + }, + }, + ); + directive = spectator.directive; + }); + + test('should be created', () => { + expect(directive).toBeTruthy(); + }); + + test('should have 20ms debounce time', () => { + expect(directive.debounce).toBe(20); + }); + + test('should dispatch submit event on keyup event triggered after given debounce time', done => { + spectator.dispatchKeyboardEvent('form', 'keyup', 'Enter'); + timer(directive.debounce + 10).subscribe(() => { + expect(submitEventFn).toHaveBeenCalled(); + done(); + }); + }); +});