share link: add time debouncing (#5587)

* add time debouncing

* fix tests

lib/content-services/src/lib/content-node-share/content-node-share.dialog.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { TestBed, fakeAsync, ComponentFixture } from '@angular/core/testing';
+import { TestBed, fakeAsync, ComponentFixture, tick } from '@angular/core/testing';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material';
 import { of, empty } from 'rxjs';
 import {
@@ -65,12 +65,14 @@ describe('ShareDialogComponent', () => {
 
     beforeEach(() => {
         fixture = TestBed.createComponent(ShareDialogComponent);
+        component = fixture.componentInstance;
+        component.maxDebounceTime = 0;
+
         matDialog = TestBed.get(MatDialog);
         sharedLinksApiService = TestBed.get(SharedLinksApiService);
         renditionService = TestBed.get(RenditionsService);
         nodesApiService = TestBed.get(NodesApiService);
         appConfigService = TestBed.get(AppConfigService);
-        component = fixture.componentInstance;
 
         node = {
             entry: {
@@ -239,7 +241,7 @@ describe('ShareDialogComponent', () => {
         expect(fixture.nativeElement.querySelector('mat-datetimepicker-toggle button').disabled).toBe(true);
     });
 
-    it('should reset expiration date when toggle is unchecked', () => {
+    it('should reset expiration date when toggle is unchecked', async () => {
         node.entry.properties['qshare:sharedId'] = 'sharedId';
         node.entry.properties['qshare:sharedId'] = '2017-04-15T18:31:37+00:00';
         node.entry.allowableOperations = ['update'];
@@ -255,13 +257,13 @@ describe('ShareDialogComponent', () => {
         fixture.detectChanges();
 
         fixture.nativeElement
-        .querySelector(
+            .querySelector('.mat-slide-toggle[data-automation-id="adf-expire-toggle"] label')
-            '.mat-slide-toggle[data-automation-id="adf-expire-toggle"] label'
-        )
             .dispatchEvent(new MouseEvent('click'));
 
         fixture.detectChanges();
 
+        await fixture.whenStable();
+
         expect(nodesApiService.updateNode).toHaveBeenCalledWith('nodeId', {
             properties: { 'qshare:expiryDate': null }
         });
@@ -287,7 +289,7 @@ describe('ShareDialogComponent', () => {
             .classList).toContain('mat-disabled');
     });
 
-    it('should update node expiration date with selected date', () => {
+    it('should update node expiration date with selected date', fakeAsync(() => {
         const date = moment();
         node.entry.allowableOperations = ['update'];
         node.entry.properties['qshare:sharedId'] = 'sharedId';
@@ -309,10 +311,12 @@ describe('ShareDialogComponent', () => {
         fixture.componentInstance.form.controls['time'].setValue(date);
         fixture.detectChanges();
 
+        tick(100);
+
         expect(nodesApiService.updateNode).toHaveBeenCalledWith('nodeId', {
             properties: { 'qshare:expiryDate': date.utc().format() }
         });
-    });
+    }));
 
     describe('datetimepicker type', () => {
         beforeEach(() => {
@@ -324,7 +328,7 @@ describe('ShareDialogComponent', () => {
             };
         });
 
-        it('it should update node with input date and end of day time when type is `date`', () => {
+        it('it should update node with input date and end of day time when type is `date`', fakeAsync(() => {
             const dateTimePickerType = 'date';
             const date = moment('2525-01-01 13:00:00');
             spyOn(appConfigService, 'get').and.callFake(() => dateTimePickerType);
@@ -335,13 +339,14 @@ describe('ShareDialogComponent', () => {
 
             fixture.componentInstance.time.setValue(date);
             fixture.detectChanges();
+            tick(500);
 
             expect(nodesApiService.updateNode).toHaveBeenCalledWith('nodeId', {
                     properties: { 'qshare:expiryDate': date.endOf('day').utc().format() }
             });
-        });
+        }));
 
-        it('it should update node with input date and time when type is `datetime`', () => {
+        it('it should update node with input date and time when type is `datetime`', fakeAsync(() => {
             const dateTimePickerType = 'datetime';
             const date = moment('2525-01-01 13:00:00');
             spyOn(appConfigService, 'get').and.returnValue(dateTimePickerType);
@@ -352,10 +357,11 @@ describe('ShareDialogComponent', () => {
 
             fixture.componentInstance.time.setValue(date);
             fixture.detectChanges();
+            tick(100);
 
             expect(nodesApiService.updateNode).toHaveBeenCalledWith('nodeId', {
                     properties: { 'qshare:expiryDate': date.utc().format() }
             });
-        });
+        }));
     });
 });

lib/content-services/src/lib/content-node-share/content-node-share.dialog.ts

@@ -37,7 +37,7 @@ import { SharedLinkEntry, Node } from '@alfresco/js-api';
 import { ConfirmDialogComponent } from '../dialogs/confirm.dialog';
 import moment from 'moment-es6';
 import { ContentNodeShareSettings } from './content-node-share.settings';
-import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { takeUntil, debounceTime } from 'rxjs/operators';
 
 type DatePickerType = 'date' | 'time' | 'month' | 'datetime';
 
@@ -61,6 +61,7 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
         time: new FormControl({ value: '', disabled: true })
     });
     type: DatePickerType = 'datetime';
+    maxDebounceTime = 500;
 
     @ViewChild('slideToggleExpirationDate')
     slideToggleExpirationDate;
@@ -101,7 +102,7 @@ export class ShareDialogComponent implements OnInit, OnDestroy {
 
         this.time.valueChanges
             .pipe(
-                distinctUntilChanged(),
+                debounceTime(this.maxDebounceTime),
                 takeUntil(this.onDestroy$)
             )
             .subscribe(value => this.onTimeChanged(value));