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

lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts

@@ -24,6 +24,7 @@ import { FormFieldTypes } from '../core/form-field-types';
 import { CoreTestingModule } from '../../../../testing/core.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { FormModel } from '../core/form.model';
+import { By } from '@angular/platform-browser';
 
 describe('AmountWidgetComponent', () => {
 
@@ -81,6 +82,42 @@ describe('AmountWidgetComponent', () => {
         expect(widget.placeholder).toBe('1234');
     });
 
+    describe('when tooltip is set', () => {
+
+        beforeEach(() => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+                type: FormFieldTypes.AMOUNT,
+                tooltip: 'my custom tooltip'
+            });
+            fixture.detectChanges();
+        });
+
+        it('should show tooltip', async () => {
+            const amountInput = fixture.nativeElement.querySelector('input');
+            amountInput.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 amountInput = fixture.nativeElement.querySelector('input');
+            amountInput.dispatchEvent(new Event('mouseenter'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            amountInput.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(() => {
@@ -275,35 +312,6 @@ describe('AmountWidgetComponent - rendering', () => {
         expect(errorMessage.textContent.trim()).toContain('FORM.FIELD.VALIDATOR.INVALID_NUMBER');
     });
 
-    it('should display tooltip when tooltip is set', async () => {
-        widget.field = new FormFieldModel(new FormModel(), {
-            id: 'TestAmount1',
-            name: 'Test Amount',
-            type: 'amount',
-            required: true,
-            colspan: 2,
-            placeholder: 'Check Placeholder Text',
-            minValue: null,
-            maxValue: null,
-            visibilityCondition: null,
-            params: {
-                existingColspan: 1,
-                maxColspan: 2
-            },
-            enableFractions: false,
-            currency: '$',
-            tooltip: 'ammount widget'
-        });
-
-        fixture.detectChanges();
-        await fixture.whenStable();
-
-        const ammountElement: any = fixture.nativeElement.querySelector('#TestAmount1');
-        const tooltip = ammountElement.getAttribute('ng-reflect-message');
-
-        expect(tooltip).toEqual(widget.field.tooltip);
-    });
-
     describe('when form model has left labels', () => {
 
         it('should have left labels classes on leftLabels true', async () => {

lib/core/src/lib/form/components/widgets/checkbox/checkbox.widget.spec.ts

@@ -27,6 +27,7 @@ import { TranslateLoaderService } from '../../../../services/translate-loader.se
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { CoreTestingModule } from '../../../../testing';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { By } from '@angular/platform-browser';
 
 describe('CheckboxWidgetComponent', () => {
 
@@ -111,16 +112,40 @@ describe('CheckboxWidgetComponent', () => {
             expect(checkbox.getAttribute('aria-checked')).toBe('false');
         });
 
-        it('should display tooltip when tooltip is set', async () => {
-            widget.field.tooltip = 'checkbox widget';
+        describe('when tooltip is set', () => {
 
+            beforeEach(() => {
+                widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+                    type: FormFieldTypes.BOOLEAN,
+                    tooltip: 'my custom tooltip'
+                });
                 fixture.detectChanges();
+            });
+
+            it('should show tooltip', async () => {
+                const checkboxInput = fixture.nativeElement.querySelector('mat-checkbox');
+                checkboxInput.dispatchEvent(new Event('mouseenter'));
                 await fixture.whenStable();
+                fixture.detectChanges();
 
-            const checkbox = fixture.debugElement.nativeElement.querySelector('#check-id');
-            const tooltip = checkbox.getAttribute('ng-reflect-message');
+                const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement;
+                expect(tooltipElement).toBeTruthy();
+                expect(tooltipElement.textContent.trim()).toBe('my custom tooltip');
+              });
 
-            expect(tooltip).toEqual(widget.field.tooltip);
+            it('should hide tooltip', async () => {
+                const checkboxInput = fixture.nativeElement.querySelector('mat-checkbox');
+                checkboxInput.dispatchEvent(new Event('mouseenter'));
+                await fixture.whenStable();
+                fixture.detectChanges();
+
+                checkboxInput.dispatchEvent(new Event('mouseleave'));
+                await fixture.whenStable();
+                fixture.detectChanges();
+
+                const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip'));
+                expect(tooltipElement).toBeFalsy();
+            });
         });
     });
 });

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts

@@ -25,6 +25,7 @@ import { CoreTestingModule } from '../../../../testing/core.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FormFieldTypes } from '../core/form-field-types';
+import { By } from '@angular/platform-browser';
 
 describe('DateTimeWidgetComponent', () => {
 
@@ -108,6 +109,42 @@ describe('DateTimeWidgetComponent', () => {
         expect(widget.onFieldChanged).toHaveBeenCalledWith(field);
     });
 
+    describe('when tooltip is set', () => {
+
+        beforeEach(() => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+                type: FormFieldTypes.DATETIME,
+                tooltip: 'my custom tooltip'
+            });
+            fixture.detectChanges();
+        });
+
+        it('should show tooltip', async () => {
+            const dateTimeInput = fixture.nativeElement.querySelector('input');
+            dateTimeInput.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 dateTimeInput = fixture.nativeElement.querySelector('input');
+            dateTimeInput.dispatchEvent(new Event('mouseenter'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            dateTimeInput.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(() => {
@@ -197,25 +234,6 @@ describe('DateTimeWidgetComponent', () => {
             dateButton = element.querySelector<HTMLButtonElement>('button');
             expect(dateButton.disabled).toBeTruthy();
         });
-
-        it('should display tooltip when tooltip is set', () => {
-            widget.field = new FormFieldModel(new FormModel(), {
-                id: 'date-field-id',
-                name: 'date-name',
-                value: '12-30-9999 10:30 AM',
-                dateDisplayFormat: 'MM-DD-YYYY HH:mm A',
-                type: 'datetime',
-                readOnly: 'false',
-                tooltip: 'datetime widget'
-            });
-
-            fixture.detectChanges();
-
-            const dateElement: any = 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', () => {

lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.spec.ts

@@ -23,6 +23,7 @@ import { CoreTestingModule } from '../../../../testing/core.testing.module';
 import { FormFieldModel } from '../core/form-field.model';
 import { FormModel } from '../core/form.model';
 import { FormFieldTypes } from '../core/form-field-types';
+import { By } from '@angular/platform-browser';
 
 describe('MultilineTextWidgetComponentComponent', () => {
 
@@ -47,6 +48,42 @@ describe('MultilineTextWidgetComponentComponent', () => {
         expect(widget).toBeDefined();
     });
 
+    describe('when tooltip is set', () => {
+
+        beforeEach(() => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+                type: FormFieldTypes.MULTILINE_TEXT,
+                tooltip: 'my custom tooltip'
+            });
+            fixture.detectChanges();
+        });
+
+        it('should show tooltip', async () => {
+            const multilineTextarea = fixture.nativeElement.querySelector('textarea');
+            multilineTextarea.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 multilineTextarea = fixture.nativeElement.querySelector('textarea');
+            multilineTextarea.dispatchEvent(new Event('mouseenter'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            multilineTextarea.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/core/src/lib/form/components/widgets/number/number.widget.spec.ts

@@ -19,6 +19,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { By } from '@angular/platform-browser';
 import { TranslateModule } from '@ngx-translate/core';
 import { CoreTestingModule, setupTestBed } from '../../../../testing';
 import { FormFieldModel, FormFieldTypes, FormModel } from '../core';
@@ -50,6 +51,74 @@ describe('NumberWidgetComponent', () => {
         expect(widget).toBeDefined();
     });
 
+    describe('when tooltip is set', () => {
+
+        beforeEach(() => {
+            widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+                type: FormFieldTypes.NUMBER,
+                tooltip: 'my custom tooltip'
+            });
+            fixture.detectChanges();
+        });
+
+        it('should show tooltip', async () => {
+            const numberInput = fixture.nativeElement.querySelector('input');
+            numberInput.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 numberInput = fixture.nativeElement.querySelector('input');
+            numberInput.dispatchEvent(new Event('mouseenter'));
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            numberInput.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.NUMBER,
+                required: true
+            });
+        });
+
+        it('should be marked as invalid after interaction', async () => {
+            const numberInput = fixture.nativeElement.querySelector('input');
+            expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeFalsy();
+
+            numberInput.dispatchEvent(new Event('blur'));
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeTruthy();
+        });
+
+        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('*');
+        });
+    });
+
     describe('when form model has left labels', () => {
 
         it('should have left labels classes on leftLabels true', async () => {

lib/core/src/lib/form/components/widgets/text/text.widget.spec.ts

@@ -26,6 +26,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { CoreTestingModule } from '../../../../testing';
 import { TranslateModule } from '@ngx-translate/core';
+import { By } from '@angular/platform-browser';
 
 const enterValueInTextField = (element: HTMLInputElement, value: string) => {
     element.value = value;
@@ -175,23 +176,41 @@ describe('TextWidgetComponent', () => {
                 await fixture.whenStable();
                 expect(widget.field.isValid).toBe(false);
             });
-
-            it('should display tooltip when tooltip is set', async () => {
-                widget.field = new FormFieldModel(new FormModel(), {
-                    id: 'text-id',
-                    name: 'text-name',
-                    value: '',
-                    type: FormFieldTypes.TEXT,
-                    tooltip: 'text widget'
         });
 
+        describe('when tooltip is set', () => {
+
+            beforeEach(() => {
+                widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+                    type: FormFieldTypes.TEXT,
+                    tooltip: 'my custom tooltip'
+                });
                 fixture.detectChanges();
+            });
+
+            it('should show tooltip', async () => {
+                const textInput = fixture.nativeElement.querySelector('input');
+                textInput.dispatchEvent(new Event('mouseenter'));
                 await fixture.whenStable();
+                fixture.detectChanges();
 
-                const textElement: any = element.querySelector('#text-id');
-                const tooltip = textElement.getAttribute('ng-reflect-message');
+                const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement;
+                expect(tooltipElement).toBeTruthy();
+                expect(tooltipElement.textContent.trim()).toBe('my custom tooltip');
+              });
 
-                expect(tooltip).toEqual(widget.field.tooltip);
+            it('should hide tooltip', async () => {
+                const textInput = fixture.nativeElement.querySelector('input');
+                textInput.dispatchEvent(new Event('mouseenter'));
+                await fixture.whenStable();
+                fixture.detectChanges();
+
+                textInput.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/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);
-            });
         });
     });
 
@@ -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();
+        });
+    });
 });