[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', () => {
 
-            fixture.detectChanges();
-            await fixture.whenStable();
+            beforeEach(() => {
+                widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
+                    type: FormFieldTypes.BOOLEAN,
+                    tooltip: 'my custom tooltip'
+                });
+                fixture.detectChanges();
+            });
 
-            const checkbox = fixture.debugElement.nativeElement.querySelector('#check-id');
-            const tooltip = checkbox.getAttribute('ng-reflect-message');
+            it('should show tooltip', async () => {
+                const checkboxInput = fixture.nativeElement.querySelector('mat-checkbox');
+                checkboxInput.dispatchEvent(new Event('mouseenter'));
+                await fixture.whenStable();
+                fixture.detectChanges();
 
-            expect(tooltip).toEqual(widget.field.tooltip);
+                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 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: '',
+        describe('when tooltip is set', () => {
+
+            beforeEach(() => {
+                widget.field = new FormFieldModel(new FormModel({ taskId: '<id>' }), {
                     type: FormFieldTypes.TEXT,
-                    tooltip: 'text widget'
+                    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();
             });
         });