[AAE-11989] Automate C586839 - Should be able to see the tooltip for form widget (#8138)

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts

@@ -472,18 +472,6 @@ describe('AttachFileCloudWidgetComponent', () => {
                 expect(widget.rootNodeId).toEqual('-my-');
                 expect(openUploadFileDialogSpy).toHaveBeenCalledWith('-my-', 'single', false, true);
             });
-
-            it('should display tooltip when tooltip is set', async () => {
-                createUploadWidgetField(new FormModel(), 'attach-file-attach', [], onlyLocalParams);
-
-                fixture.detectChanges();
-                await fixture.whenStable();
-
-                const attachElement = element.querySelector('#attach-file-attach');
-                const tooltip = attachElement.getAttribute('ng-reflect-message');
-
-                expect(tooltip).toEqual(widget.field.tooltip);
-            });
         });
     });
 
@@ -590,7 +578,7 @@ describe('AttachFileCloudWidgetComponent', () => {
             });
         });
 
-        it('should preview file when show is clicked', async() => {
+        it('should preview file when show is clicked', async () => {
             spyOn(processCloudContentService, 'getRawContentNode').and.returnValue(of(new Blob()));
             await formService.formContentClicked.subscribe(
                 (fileClicked: any) => {
@@ -606,7 +594,7 @@ describe('AttachFileCloudWidgetComponent', () => {
             showOption.click();
         });
 
-        it('should request form to be updated with metadata when retrieve is clicked', async() => {
+        it('should request form to be updated with metadata when retrieve is clicked', async () => {
             updateFormSpy = spyOn(formService.updateFormValuesRequested, 'next');
             widget.field.value = [fakeNodeWithProperties];
             fixture.detectChanges();
@@ -670,7 +658,7 @@ describe('AttachFileCloudWidgetComponent', () => {
             await fixture.whenStable();
         });
 
-        it('should not be called onInit when widget has no value', async() => {
+        it('should not be called onInit when widget has no value', async () => {
             widget.ngOnInit();
 
             fixture.detectChanges();
@@ -678,7 +666,7 @@ describe('AttachFileCloudWidgetComponent', () => {
             expect(contentModelFormFileHandlerSpy).not.toHaveBeenCalled();
         });
 
-        it('should have been called onInit when widget only one file', async() => {
+        it('should have been called onInit when widget only one file', async () => {
             widget.field.value = [fakeNodeWithProperties];
             widget.ngOnInit();
 
@@ -689,7 +677,7 @@ describe('AttachFileCloudWidgetComponent', () => {
             expect(contentClickedSpy).toHaveBeenCalledWith(new UploadWidgetContentLinkModel(fakeNodeWithProperties, widget.field.id));
         });
 
-        it('should not be called onInit when widget has more than one file', async() => {
+        it('should not be called onInit when widget has more than one file', async () => {
             widget.field.value = [fakeNodeWithProperties, fakeMinimalNode];
 
             fixture.detectChanges();
@@ -697,7 +685,7 @@ describe('AttachFileCloudWidgetComponent', () => {
             expect(contentModelFormFileHandlerSpy).not.toHaveBeenCalled();
         });
 
-        it('should not be called on remove node if node removed is not the selected one', async() => {
+        it('should not be called on remove node if node removed is not the selected one', async () => {
             widget.field.value = [fakeNodeWithProperties, fakeMinimalNode];
             widget.selectedNode = fakeNodeWithProperties;
 
@@ -709,7 +697,7 @@ describe('AttachFileCloudWidgetComponent', () => {
             expect(contentModelFormFileHandlerSpy).not.toHaveBeenCalled();
         });
 
-        it('should have been called on remove node if node removed is the selected one', async() => {
+        it('should have been called on remove node if node removed is the selected one', async () => {
             widget.field.value = [fakeNodeWithProperties, fakeMinimalNode];
             widget.selectedNode = fakeNodeWithProperties;
             fixture.detectChanges();
@@ -722,7 +710,7 @@ describe('AttachFileCloudWidgetComponent', () => {
             expect(contentClickedSpy).toHaveBeenCalledWith(new UploadWidgetContentLinkModel(undefined, widget.field.id));
         });
 
-        it('should have been called on attach file when value was empty', async() => {
+        it('should have been called on attach file when value was empty', async () => {
             clickOnAttachFileWidget('attach-file-alfresco');
             fixture.detectChanges();
             await fixture.whenStable();
@@ -732,7 +720,7 @@ describe('AttachFileCloudWidgetComponent', () => {
             expect(contentClickedSpy).toHaveBeenCalledWith(new UploadWidgetContentLinkModel(fakeNodeWithProperties, widget.field.id));
         });
 
-        it('should not be called on attach file when has a file previously', async() => {
+        it('should not be called on attach file when has a file previously', async () => {
             widget.field.value = [fakeMinimalNode];
 
             clickOnAttachFileWidget('attach-file-alfresco');
@@ -900,4 +888,40 @@ describe('AttachFileCloudWidgetComponent', () => {
         });
 
     });
+
+    describe('when tooltip is set', () => {
+
+        beforeEach(() => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+                type: FormFieldTypes.UPLOAD,
+                tooltip: 'my custom tooltip'
+            });
+            fixture.detectChanges();
+        });
+
+        it('should show tooltip', async () => {
+            const attachButton = fixture.nativeElement.querySelector('button');
+            attachButton.dispatchEvent(new Event('mouseenter'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement;
+            expect(tooltipElement).toBeTruthy();
+            expect(tooltipElement.textContent.trim()).toBe('my custom tooltip');
+          });
+
+        it('should hide tooltip', async () => {
+            const attachButton = fixture.nativeElement.querySelector('button');
+            attachButton.dispatchEvent(new Event('mouseenter'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            attachButton.dispatchEvent(new Event('mouseleave'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip'));
+            expect(tooltipElement).toBeFalsy();
+        });
+    });
 });

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts

@@ -22,6 +22,7 @@ import moment from 'moment';
 import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { DATE_FORMAT_CLOUD } from '../../../../models/date-format-cloud.model';
+import { By } from '@angular/platform-browser';
 
 describe('DateWidgetComponent', () => {
 
@@ -181,25 +182,6 @@ describe('DateWidgetComponent', () => {
 
             expect(widget.field.isValid).toBeFalsy();
         });
-
-        it('should display tooltip when tooltip is set', async () => {
-            widget.field = new FormFieldModel(new FormModel(), {
-                id: 'date-field-id',
-                name: 'date-name',
-                value: 'aa',
-                type: 'date',
-                readOnly: 'false',
-                tooltip: 'date widget'
-            });
-
-            fixture.detectChanges();
-            await fixture.whenStable();
-
-            const dateElement = element.querySelector('#date-field-id');
-            const tooltip = dateElement.getAttribute('ng-reflect-message');
-
-            expect(tooltip).toEqual(widget.field.tooltip);
-        });
     });
 
     it('should display always the json value', async () => {
@@ -488,9 +470,77 @@ describe('DateWidgetComponent', () => {
                 expect(widget.field.maxValue).toEqual(expectedMaxValueString);
                 expect(widget.field.minValue).toEqual(expectedMinValueString);
             });
-
         });
-
     });
 
+    describe('when tooltip is set', () => {
+
+        beforeEach(() => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+                type: FormFieldTypes.DATE,
+                tooltip: 'my custom tooltip'
+            });
+            fixture.detectChanges();
+        });
+
+        it('should show tooltip', async () => {
+            const dateCloudInput = fixture.nativeElement.querySelector('input');
+            dateCloudInput.dispatchEvent(new Event('mouseenter'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement;
+            expect(tooltipElement).toBeTruthy();
+            expect(tooltipElement.textContent.trim()).toBe('my custom tooltip');
+          });
+
+        it('should hide tooltip', async () => {
+            const dateCloudInput = fixture.nativeElement.querySelector('input');
+            dateCloudInput.dispatchEvent(new Event('mouseenter'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            dateCloudInput.dispatchEvent(new Event('mouseleave'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip'));
+            expect(tooltipElement).toBeFalsy();
+        });
+    });
+
+    describe('when is required', () => {
+
+        beforeEach(() => {
+            widget.field = new FormFieldModel( new FormModel({ taskId: '<id>' }), {
+                type: FormFieldTypes.DATE,
+                required: true
+            });
+        });
+
+        it('should be able to display label with asterisk', async () => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
+
+            expect(asterisk).toBeTruthy();
+            expect(asterisk.textContent).toEqual('*');
+        });
+
+        it('should be invalid after user interaction without typing', async () => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(element.querySelector('.adf-invalid')).toBeFalsy();
+
+            const dateCloudInput = fixture.nativeElement.querySelector('input');
+            dateCloudInput.dispatchEvent(new Event('blur'));
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(element.querySelector('.adf-invalid')).toBeTruthy();
+        });
+    });
 });

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts

@@ -117,20 +117,6 @@ describe('DropdownCloudWidgetComponent', () => {
             expect(dropDownElement.attributes['ng-reflect-model'].value).toBe('empty');
         });
 
-        it('should display tooltip when tooltip is set', async () => {
-            widget.field.tooltip = 'dropdown widget';
-
-            widget.ngOnInit();
-
-            fixture.detectChanges();
-            await fixture.whenStable();
-
-            const dropDownElement: any = element.querySelector('#dropdown-id');
-            const tooltip = dropDownElement.getAttribute('ng-reflect-message');
-
-            expect(tooltip).toEqual(widget.field.tooltip);
-        });
-
         it('should load data from restUrl and populate options', async () => {
             const jsonDataSpy = spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of(fakeOptionList));
             widget.field.restUrl = 'https://fake-rest-url';
@@ -308,6 +294,42 @@ describe('DropdownCloudWidgetComponent', () => {
         });
     });
 
+    describe('when tooltip is set', () => {
+
+        beforeEach(() => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+                type: FormFieldTypes.DROPDOWN,
+                tooltip: 'my custom tooltip'
+            });
+            fixture.detectChanges();
+        });
+
+        it('should show tooltip', async () => {
+            const dropdownInput = fixture.debugElement.query(By.css('mat-select')).nativeElement;
+            dropdownInput.dispatchEvent(new Event('mouseenter'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement;
+            expect(tooltipElement).toBeTruthy();
+            expect(tooltipElement.textContent.trim()).toBe('my custom tooltip');
+          });
+
+        it('should hide tooltip', async () => {
+            const dropdownInput = fixture.debugElement.query(By.css('mat-select')).nativeElement;
+            dropdownInput.dispatchEvent(new Event('mouseenter'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            dropdownInput.dispatchEvent(new Event('mouseleave'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip'));
+            expect(tooltipElement).toBeFalsy();
+        });
+    });
+
     describe('when is required', () => {
 
         beforeEach(() => {

lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts

@@ -21,6 +21,7 @@ import { GroupCloudWidgetComponent } from './group-cloud.widget';
 import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
 
 describe('GroupCloudWidgetComponent', () => {
     let fixture: ComponentFixture<GroupCloudWidgetComponent>;
@@ -61,6 +62,42 @@ describe('GroupCloudWidgetComponent', () => {
         expect(widget.validate).toBeTruthy();
     });
 
+    describe('when tooltip is set', () => {
+
+        beforeEach(() => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+                type: FormFieldTypes.GROUP,
+                tooltip: 'my custom tooltip'
+            });
+            fixture.detectChanges();
+        });
+
+        it('should show tooltip', async () => {
+            const cloudGroupInput = element.querySelector('adf-cloud-group');
+            cloudGroupInput.dispatchEvent(new Event('mouseenter'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement;
+            expect(tooltipElement).toBeTruthy();
+            expect(tooltipElement.textContent.trim()).toBe('my custom tooltip');
+          });
+
+        it('should hide tooltip', async () => {
+            const cloudGroupInput = element.querySelector('[data-automation-id="adf-cloud-group-search-input"]');
+            cloudGroupInput.dispatchEvent(new Event('mouseenter'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            cloudGroupInput.dispatchEvent(new Event('mouseleave'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip'));
+            expect(tooltipElement).toBeFalsy();
+        });
+    });
+
     describe('when is required', () => {
 
         beforeEach(() => {

lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts

@@ -23,6 +23,7 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
 import { IdentityUserService } from '../../../../people/services/identity-user.service';
 import { mockShepherdsPie, mockYorkshirePudding } from '../../../../people/mock/people-cloud.mock';
+import { By } from '@angular/platform-browser';
 
 describe('PeopleCloudWidgetComponent', () => {
     let fixture: ComponentFixture<PeopleCloudWidgetComponent>;
@@ -88,6 +89,43 @@ describe('PeopleCloudWidgetComponent', () => {
         expect(widget.validate).toBeTruthy();
     });
 
+    describe('when tooltip is set', () => {
+
+        beforeEach(() => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+                type: FormFieldTypes.PEOPLE,
+                tooltip: 'my custom tooltip',
+                value: [mockYorkshirePudding]
+            });
+            fixture.detectChanges();
+        });
+
+        it('should show tooltip', async () => {
+            const cloudPeopleInput = element.querySelector('adf-cloud-people');
+            cloudPeopleInput.dispatchEvent(new Event('mouseenter'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement;
+            expect(tooltipElement).toBeTruthy();
+            expect(tooltipElement.textContent.trim()).toBe('my custom tooltip');
+          });
+
+        it('should hide tooltip', async () => {
+            const cloudPeopleInput = element.querySelector('adf-cloud-people');
+            cloudPeopleInput.dispatchEvent(new Event('mouseenter'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            cloudPeopleInput.dispatchEvent(new Event('mouseleave'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip'));
+            expect(tooltipElement).toBeFalsy();
+        });
+    });
+
     describe('when is required', () => {
 
         beforeEach(() => {

lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.spec.ts

@@ -22,6 +22,7 @@ import { FormCloudService } from '../../../services/form-cloud.service';
 import { RadioButtonsCloudWidgetComponent } from './radio-buttons-cloud.widget';
 import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
 import { of, throwError } from 'rxjs';
+import { By } from '@angular/platform-browser';
 
 describe('RadioButtonsCloudWidgetComponent', () => {
     let fixture: ComponentFixture<RadioButtonsCloudWidgetComponent>;
@@ -191,4 +192,42 @@ describe('RadioButtonsCloudWidgetComponent', () => {
         expect(errorIcon.textContent).toBe('error_outline');
         expect(errorMessage.textContent).toBe('FORM.FIELD.REST_API_FAILED');
     });
+
+    describe('when tooltip is set', () => {
+
+        beforeEach(() => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+                type: FormFieldTypes.RADIO_BUTTONS,
+                tooltip: 'my custom tooltip',
+                optionType: 'manual',
+                options: restOption
+            });
+            fixture.detectChanges();
+        });
+
+        it('should show tooltip', async () => {
+            const radioButtonsInput = element.querySelector('mat-radio-button');
+            radioButtonsInput.dispatchEvent(new Event('mouseenter'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement;
+            expect(tooltipElement).toBeTruthy();
+            expect(tooltipElement.textContent.trim()).toBe('my custom tooltip');
+          });
+
+        it('should hide tooltip', async () => {
+            const radioButtonsInput = element.querySelector('mat-radio-button');
+            radioButtonsInput.dispatchEvent(new Event('mouseenter'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            radioButtonsInput.dispatchEvent(new Event('mouseleave'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip'));
+            expect(tooltipElement).toBeFalsy();
+        });
+    });
 });