[AAE-3296] Add unit tests for Tooltips in Form Widgets (#6094)

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { FormFieldModel } from './../core/form-field.model';
 import { AmountWidgetComponent, ADF_AMOUNT_SETTINGS } from './amount.widget';
 import { setupTestBed } from '../../../../testing/setup-test-bed';
@@ -146,6 +146,33 @@ describe('AmountWidgetComponent - rendering', () => {
         const errorWidget = fixture.nativeElement.querySelector('error-widget .adf-error-text');
         expect(errorWidget.textContent).toBe('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();
+        const ammountElement: any = fixture.nativeElement.querySelector('#TestAmount1');
+        const tooltip = ammountElement.getAttribute('ng-reflect-message');
+
+        expect(tooltip).toEqual(widget.field.tooltip);
+    }));
 });
 
 describe('AmountWidgetComponent settings', () => {

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

@@ -26,6 +26,7 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateLoaderService } from 'core/services';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { CoreTestingModule } from '../../../../testing';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 describe('CheckboxWidgetComponent', () => {
 
@@ -38,7 +39,8 @@ describe('CheckboxWidgetComponent', () => {
             TranslateModule.forRoot(),
             CoreTestingModule,
             FormBaseModule,
-            MatCheckboxModule
+            MatCheckboxModule,
+            MatTooltipModule
         ],
         providers: [
             { provide: TranslateLoader, useClass: TranslateLoaderService }
@@ -55,7 +57,7 @@ describe('CheckboxWidgetComponent', () => {
     describe('when template is ready', () => {
 
         beforeEach(() => {
-            widget.field = new FormFieldModel(new FormModel({taskId: 'fake-task-id'}), {
+            widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
                 id: 'check-id',
                 name: 'check-name',
                 value: '',
@@ -91,5 +93,17 @@ describe('CheckboxWidgetComponent', () => {
                 expect(checkbox.getAttribute('aria-checked')).toBe('false');
             });
         }));
-   });
+
+        it('should display tooltip when tooltip is set', async(() => {
+            widget.field.tooltip = 'checkbox widget';
+
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                const checkbox = fixture.debugElement.nativeElement.querySelector('#check-id');
+                const tooltip = checkbox.getAttribute('ng-reflect-message');
+
+                expect(tooltip).toEqual(widget.field.tooltip);
+            });
+        }));
+    });
 });

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

@@ -23,6 +23,7 @@ import { DateTimeWidgetComponent } from './date-time.widget';
 import { setupTestBed } from '../../../../testing/setup-test-bed';
 import { CoreTestingModule } from '../../../../testing/core.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 describe('DateTimeWidgetComponent', () => {
 
@@ -33,7 +34,8 @@ describe('DateTimeWidgetComponent', () => {
     setupTestBed({
         imports: [
             TranslateModule.forRoot(),
-            CoreTestingModule
+            CoreTestingModule,
+            MatTooltipModule
         ]
     });
 
@@ -116,12 +118,12 @@ describe('DateTimeWidgetComponent', () => {
             });
             fixture.detectChanges();
             fixture.whenStable()
-            .then(() => {
-                expect(element.querySelector('#date-field-id')).toBeDefined();
-                expect(element.querySelector('#date-field-id')).not.toBeNull();
-                const dateElement: any = element.querySelector('#date-field-id');
-                expect(dateElement.value).toBe('30-11-9999 10:30 AM');
-            });
+                .then(() => {
+                    expect(element.querySelector('#date-field-id')).toBeDefined();
+                    expect(element.querySelector('#date-field-id')).not.toBeNull();
+                    const dateElement: any = element.querySelector('#date-field-id');
+                    expect(dateElement.value).toBe('30-11-9999 10:30 AM');
+                });
         }));
 
         it('should show the correct format type', async(() => {
@@ -164,5 +166,23 @@ describe('DateTimeWidgetComponent', () => {
             dateButton = <HTMLButtonElement> element.querySelector('button');
             expect(dateButton.disabled).toBeTruthy();
         }));
+
+        it('should display tooltip when tooltip is set', async(() => {
+            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);
+        }));
     });
 });

lib/core/form/components/widgets/hyperlink/hyperlink.widget.spec.ts

@@ -22,6 +22,7 @@ import { HyperlinkWidgetComponent } from './hyperlink.widget';
 import { setupTestBed } from '../../../../testing/setup-test-bed';
 import { CoreTestingModule } from '../../../../testing';
 import { TranslateModule } from '@ngx-translate/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 describe('HyperlinkWidgetComponent', () => {
 
@@ -32,7 +33,8 @@ describe('HyperlinkWidgetComponent', () => {
     setupTestBed({
         imports: [
             TranslateModule.forRoot(),
-            CoreTestingModule
+            CoreTestingModule,
+            MatTooltipModule
         ]
     });
 
@@ -192,4 +194,22 @@ describe('HyperlinkWidgetComponent', () => {
         expect(hyperlinkWidgetLink.href).toBe(url);
         expect(hyperlinkWidgetLink.innerText).toBe(displayText);
     });
+
+    it('should display tooltip when tooltip is set', () => {
+        const displayText = 'displayText';
+        const url = 'https://www.alfresco.com/';
+        widget.field = new FormFieldModel(new FormModel(), {
+            id: 'hyperlink',
+            hyperlinkUrl: url,
+            displayText: displayText,
+            type: FormFieldTypes.HYPERLINK,
+            tooltip: 'hyperlink widget'
+        });
+
+        fixture.detectChanges();
+        const checkbox = fixture.debugElement.nativeElement.querySelector('.adf-hyperlink-widget div');
+        const tooltip = checkbox.getAttribute('ng-reflect-message');
+
+        expect(tooltip).toEqual(widget.field.tooltip);
+    });
 });

lib/core/form/components/widgets/people/people.widget.spec.ts

@@ -268,5 +268,15 @@ describe('PeopleWidgetComponent', () => {
                 expect(selectEmitSpy).toHaveBeenCalledWith(1001);
             });
         });
+
+        it('should display tooltip when tooltip is set', async(() => {
+            widget.field.tooltip = 'people widget';
+
+            fixture.detectChanges();
+            const radioButtonsElement: any = element.querySelector('#people-id');
+            const tooltip = radioButtonsElement.getAttribute('ng-reflect-message');
+
+            expect(tooltip).toEqual(widget.field.tooltip);
+        }));
     });
 });

lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.spec.ts

@@ -230,6 +230,26 @@ describe('RadioButtonsWidgetComponent', () => {
             expect(radioButtonWidget.field.isValid).toBe(true);
         });
 
+        it('should display tooltip when tooltip is set', async(() => {
+            radioButtonWidget.field = new FormFieldModel(new FormModel(), {
+                id: 'radio-id',
+                name: 'radio-name-label',
+                type: FormFieldTypes.RADIO_BUTTONS,
+                readOnly: false,
+                required: true,
+                optionType: 'manual',
+                options: restOption,
+                value: 'opt-name-2',
+                tooltip: 'radio widget'
+            });
+
+            fixture.detectChanges();
+            const radioButtonsElement: any = element.querySelector('#radio-id-opt-1');
+            const tooltip = radioButtonsElement.getAttribute('ng-reflect-message');
+
+            expect(tooltip).toEqual(radioButtonWidget.field.tooltip);
+        }));
+
         describe('and radioButton is populated via taskId', () => {
 
             beforeEach(async(() => {

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

@@ -203,6 +203,21 @@ describe('TextWidgetComponent', () => {
                 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'
+                });
+
+                fixture.detectChanges();
+                const textElement: any = element.querySelector('#text-id');
+                const tooltip = textElement.getAttribute('ng-reflect-message');
+
+                expect(tooltip).toEqual(widget.field.tooltip);
+            }));
         });
 
         describe('and no mask is configured on text element', () => {