[AAE-2107] Move e2e to Unit test (#5535)

* [AAE-2107] Move e2e to Unit test

* * fixed namings

* * more unit test added

* * minor changes

lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts

@@ -23,17 +23,26 @@ import { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
 import { CardViewDateItemComponent } from './card-view-dateitem.component';
 import { CoreTestingModule } from '../../../testing/core.testing.module';
+import { AppConfigService } from '@alfresco/adf-core';
 
 describe('CardViewDateItemComponent', () => {
 
     let fixture: ComponentFixture<CardViewDateItemComponent>;
     let component: CardViewDateItemComponent;
+    let appConfigService: AppConfigService;
 
     setupTestBed({
         imports: [CoreTestingModule]
     });
 
     beforeEach(() => {
+        appConfigService = TestBed.get(AppConfigService);
+        appConfigService.config.dateValues = {
+            defaultDateFormat: 'shortDate',
+            defaultDateTimeFormat: 'M/d/yy, h:mm a',
+            defaultLocale: 'uk'
+        };
+
         fixture = TestBed.createComponent(CardViewDateItemComponent);
         component = fixture.componentInstance;
         component.property = new CardViewDateItemModel({
@@ -46,8 +55,10 @@ describe('CardViewDateItemComponent', () => {
         });
     });
 
-    afterEach(() => {
-        fixture.destroy();
+    afterEach(() => fixture.destroy());
+
+    it('should pick date format from appConfigService', () => {
+        expect(component.dateFormat).toEqual('shortDate');
     });
 
     it('should render the label and value', () => {
@@ -153,6 +164,7 @@ describe('CardViewDateItemComponent', () => {
         component.property.editable = true;
         fixture.detectChanges();
 
+        expect(component.isEditable()).toBe(false);
         const datePicker = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-${component.property.key}"]`));
         const datePickerToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepickertoggle-${component.property.key}"]`));
         expect(datePicker).toBeNull('Datepicker should NOT be in DOM');
@@ -206,101 +218,111 @@ describe('CardViewDateItemComponent', () => {
         );
     }));
 
-    it('should render the clear icon in case of displayClearAction:true', () => {
-        component.editable = true;
-        component.property.editable = true;
-        component.property.value = 'Jul 10 2017';
-        fixture.detectChanges();
-
-        const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear-${component.property.key}"]`));
-        expect(datePickerClearToggle).not.toBeNull('Clean Icon should be in DOM');
-    });
-
-    it('should not render the clear icon in case of property value empty', () => {
-        component.editable = true;
-        component.property.editable = true;
-        component.property.value = null;
-        fixture.detectChanges();
-
-        const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear--${component.property.key}"]`));
-        expect(datePickerClearToggle).toBeNull('Clean Icon should not be in DOM');
-    });
-
-    it('should not render the clear icon in case of displayClearAction:false', () => {
-        component.editable = true;
-        component.property.editable = true;
-        component.displayClearAction = false;
-        component.property.value = 'Jul 10 2017';
-        fixture.detectChanges();
-
-        const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear--${component.property.key}"]`));
-        expect(datePickerClearToggle).toBeNull('Clean Icon should not be in DOM');
-    });
-
-    it('should remove the property value after a successful clear attempt', async(() => {
-        component.editable = true;
-        component.property.editable = true;
-        component.property.value = 'Jul 10 2017';
-        fixture.detectChanges();
-
-        component.onDateClear();
-
-        fixture.whenStable().then(
-            () => {
-                expect(component.property.value).toBeNull();
-            }
-        );
-    }));
-
-    it('should remove the property default value after a successful clear attempt', async(() => {
-        component.editable = true;
-        component.property.editable = true;
-        component.property.default = 'Jul 10 2017';
-        fixture.detectChanges();
-
-        component.onDateClear();
-
-        fixture.whenStable().then(
-            () => {
-                expect(component.property.default).toBeNull();
-            }
-        );
-    }));
-
-    it('should remove actual and default value after a successful clear attempt', async(() => {
-        component.editable = true;
-        component.property.editable = true;
-        component.property.default = 'Jul 10 2017';
-        component.property.value = 'Jul 10 2017';
-        fixture.detectChanges();
-
-        component.onDateClear();
-
-        fixture.whenStable().then(
-            () => {
-                expect(component.property.value).toBeNull();
-                expect(component.property.default).toBeNull();
-            }
-        );
-    }));
-
-    it('should be possible update a date/date-time', async(() => {
-        component.editable = true;
-        component.property.editable = true;
-        component.property.default = 'Jul 10 2017';
-        component.property.key = 'fake-key';
-        component.property.value = 'Jul 10 2017';
-        const expectedDate = moment('Jul 10 2018', 'MMM DD YY');
-        fixture.detectChanges();
-
-        fixture.whenStable().then(() => {
+    describe('clear icon', () => {
+        it('should render the clear icon in case of displayClearAction:true', () => {
+            component.editable = true;
+            component.property.editable = true;
+            component.property.value = 'Jul 10 2017';
             fixture.detectChanges();
-            const element = fixture.debugElement.nativeElement.querySelector('span[data-automation-id="card-date-value-fake-key"]');
-            expect(element).toBeDefined();
-            expect(element.innerText).toEqual('Jul 10, 2017');
-            component.onDateChanged({ value: expectedDate });
-            fixture.detectChanges();
-            fixture.whenStable().then(() => expect(component.property.value).toEqual(expectedDate.toDate()));
+
+            const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear-${component.property.key}"]`));
+            expect(datePickerClearToggle).not.toBeNull('Clean Icon should be in DOM');
         });
-    }));
+
+        it('should not render the clear icon in case of property value empty', () => {
+            component.editable = true;
+            component.property.editable = true;
+            component.property.value = null;
+            fixture.detectChanges();
+
+            const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear--${component.property.key}"]`));
+            expect(datePickerClearToggle).toBeNull('Clean Icon should not be in DOM');
+        });
+
+        it('should not render the clear icon in case of displayClearAction:false', () => {
+            component.editable = true;
+            component.property.editable = true;
+            component.displayClearAction = false;
+            component.property.value = 'Jul 10 2017';
+            fixture.detectChanges();
+
+            const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear--${component.property.key}"]`));
+            expect(datePickerClearToggle).toBeNull('Clean Icon should not be in DOM');
+        });
+
+        it('should remove the property value after a successful clear attempt', async(() => {
+            component.editable = true;
+            component.property.editable = true;
+            component.property.value = 'Jul 10 2017';
+            fixture.detectChanges();
+
+            component.onDateClear();
+
+            fixture.whenStable().then(
+                () => {
+                    expect(component.property.value).toBeNull();
+                }
+            );
+        }));
+
+        it('should remove the property default value after a successful clear attempt', async(() => {
+            component.editable = true;
+            component.property.editable = true;
+            component.property.default = 'Jul 10 2017';
+            fixture.detectChanges();
+
+            component.onDateClear();
+
+            fixture.whenStable().then(
+                () => {
+                    expect(component.property.default).toBeNull();
+                }
+            );
+        }));
+
+        it('should remove actual and default value after a successful clear attempt', async(() => {
+            component.editable = true;
+            component.property.editable = true;
+            component.property.default = 'Jul 10 2017';
+            component.property.value = 'Jul 10 2017';
+            fixture.detectChanges();
+            const cardViewUpdateService = TestBed.get(CardViewUpdateService);
+
+            const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe(
+                (updateNotification) => {
+                    expect(updateNotification.target).toBe(component.property);
+                    expect(updateNotification.changed).toEqual({ dateKey: null });
+                    disposableUpdate.unsubscribe();
+                }
+            );
+
+            component.onDateClear();
+
+            fixture.whenStable().then(() => {
+                expect(component.property.value).toBeNull();
+                expect(component.property.default).toBeNull();
+            });
+        }));
+    });
+
+    it('should be possible update a date-time', async () => {
+        component.editable = true;
+        component.property.editable = true;
+        component.property.default = 'Jul 10 2017 00:01:00';
+        component.property.key = 'fake-key';
+        component.dateFormat = 'M/d/yy, h:mm a';
+        component.property.value = 'Jul 10 2017 00:01:00';
+        const expectedDate = moment('Jul 10 2018', 'MMM DD YY h:m:s');
+        fixture.detectChanges();
+
+        await fixture.whenStable();
+        fixture.detectChanges();
+        const element = fixture.debugElement.nativeElement.querySelector('span[data-automation-id="card-date-value-fake-key"]');
+        expect(element).toBeDefined();
+        expect(element.innerText).toEqual('Jul 10, 2017');
+        component.onDateChanged({ value: expectedDate });
+
+        fixture.detectChanges();
+        expect(component.property.value).toEqual(expectedDate.toDate());
+    });
 });

lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.spec.ts

@@ -66,12 +66,14 @@ describe('CardViewKeyValuePairsItemComponent', () => {
             component.property = new CardViewKeyValuePairsItemModel({
                 label: 'Key Value Pairs',
                 value: mockData,
-                key: 'key-value-pairs'
+                key: 'key-value-pairs',
+                editable: false
             });
 
             component.ngOnChanges();
             fixture.detectChanges();
 
+            expect(component.isEditable()).toBe(false);
             const table = fixture.debugElement.query(By.css('.adf-card-view__key-value-pairs__read-only'));
             const form = fixture.debugElement.query(By.css('.adf-card-view__key-value-pairs'));
 
@@ -96,7 +98,6 @@ describe('CardViewKeyValuePairsItemComponent', () => {
             const valueInput = fixture.debugElement.query(By.css(`[data-automation-id="card-${component.property.key}-value-input-0"]`));
             expect(nameInput).not.toBeNull();
             expect(valueInput).not.toBeNull();
-
         });
 
         it('should remove an item from list on REMOVE button click', () => {

lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts

@@ -16,6 +16,7 @@
  */
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { OverlayContainer } from '@angular/cdk/overlay';
 import { By } from '@angular/platform-browser';
 import { CardViewSelectItemModel } from '../../models/card-view-selectitem.model';
 import { CardViewSelectItemComponent } from './card-view-selectitem.component';
@@ -27,6 +28,7 @@ describe('CardViewSelectItemComponent', () => {
 
     let fixture: ComponentFixture<CardViewSelectItemComponent>;
     let component: CardViewSelectItemComponent;
+    let overlayContainer: OverlayContainer;
     const mockData = [{ key: 'one', label: 'One' }, { key: 'two', label: 'Two' }, { key: 'three', label: 'Three' }];
     const mockDefaultProps = {
         label: 'Select box label',
@@ -43,6 +45,7 @@ describe('CardViewSelectItemComponent', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(CardViewSelectItemComponent);
         component = fixture.componentInstance;
+        overlayContainer = TestBed.get(OverlayContainer);
         component.property = new CardViewSelectItemModel(mockDefaultProps);
     });
 
@@ -75,6 +78,50 @@ describe('CardViewSelectItemComponent', () => {
             expect(selectBox).toBeNull();
         });
 
+        it('should be possible edit selectBox item', () => {
+            component.property = new CardViewSelectItemModel({
+                ...mockDefaultProps,
+                editable: true
+            });
+            component.editable = true;
+            component.displayNoneOption = true;
+            component.ngOnChanges();
+            fixture.detectChanges();
+
+            expect(component.value).toEqual('two');
+            expect(component.isEditable()).toBe(true);
+            const selectBox = fixture.debugElement.query(By.css('.mat-select-trigger'));
+            selectBox.triggerEventHandler('click', {});
+
+            fixture.detectChanges();
+            const optionsElement = Array.from(overlayContainer.getContainerElement().querySelectorAll('mat-option'));
+            expect(optionsElement.length).toEqual(4);
+            optionsElement[1].dispatchEvent(new Event('click'));
+            fixture.detectChanges();
+
+            expect(component.value).toEqual('one');
+        });
+
+        it('should be able to enable None option', () => {
+            component.property = new CardViewSelectItemModel({
+                ...mockDefaultProps,
+                editable: true
+            });
+            component.editable = true;
+            component.displayNoneOption = true;
+            component.ngOnChanges();
+            fixture.detectChanges();
+
+            expect(component.isEditable()).toBe(true);
+            const selectBox = fixture.debugElement.query(By.css('.mat-select-trigger'));
+            selectBox.triggerEventHandler('click', {});
+
+            fixture.detectChanges();
+            const noneElement: HTMLElement = overlayContainer.getContainerElement().querySelector('mat-option');
+            expect(noneElement).toBeDefined();
+            expect(noneElement.innerText).toEqual('CORE.CARDVIEW.NONE');
+        });
+
         it('should render select box if editable property is TRUE', () => {
             component.ngOnChanges();
             component.editable = true;

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts

@@ -22,11 +22,13 @@ import { CardViewUpdateService } from '../../services/card-view-update.service';
 import { CardViewTextItemComponent } from './card-view-textitem.component';
 import { setupTestBed } from '../../../testing/setup-test-bed';
 import { CoreTestingModule } from '../../../testing/core.testing.module';
+import { CardViewItemFloatValidator, CardViewItemIntValidator } from '@alfresco/adf-core';
 
 describe('CardViewTextItemComponent', () => {
 
     let fixture: ComponentFixture<CardViewTextItemComponent>;
     let component: CardViewTextItemComponent;
+    const mouseEvent = new MouseEvent('click');
 
     setupTestBed({
         imports: [CoreTestingModule]
@@ -109,128 +111,6 @@ describe('CardViewTextItemComponent', () => {
             expect(value.nativeElement.innerText.trim()).toBe('FAKE-DEFAULT-KEY');
         });
 
-        it('should render the default as value if the value is empty, clickable is false and displayEmpty is true', () => {
-            component.property = new CardViewTextItemModel({
-                label: 'Text label',
-                value: '',
-                key: 'textkey',
-                default: 'FAKE-DEFAULT-KEY',
-                clickable: false
-            });
-            component.displayEmpty = true;
-            fixture.detectChanges();
-
-            const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
-            expect(value).not.toBeNull();
-            expect(value.nativeElement.innerText.trim()).toBe('FAKE-DEFAULT-KEY');
-        });
-
-        it('should render the default as value if the value is empty and clickable true', () => {
-            component.property = new CardViewTextItemModel({
-                label: 'Text label',
-                value: '',
-                key: 'textkey',
-                default: 'FAKE-DEFAULT-KEY',
-                clickable: true
-            });
-            fixture.detectChanges();
-
-            const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
-            expect(value).not.toBeNull();
-            expect(value.nativeElement.innerText.trim()).toBe('FAKE-DEFAULT-KEY');
-        });
-
-        it('should not render the edit icon in case of clickable true but edit false', () => {
-            component.property = new CardViewTextItemModel({
-                label: 'Text label',
-                value: '',
-                key: 'textkey',
-                default: 'FAKE-DEFAULT-KEY',
-                clickable: true
-            });
-            fixture.detectChanges();
-
-            const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.icon}"]`));
-            expect(value).toBeNull();
-        });
-
-        it('should not render the clickable icon in case editable set to false', () => {
-            component.property = new CardViewTextItemModel({
-                label: 'Text label',
-                value: '',
-                key: 'textkey',
-                default: 'FAKE-DEFAULT-KEY',
-                clickable: true,
-                icon: 'create'
-            });
-            component.editable = false;
-            fixture.detectChanges();
-
-            const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-textkey"]`));
-            expect(value).toBeNull('icon should NOT be shown');
-        });
-
-        it('should render the defined clickable icon in case of clickable true and editable input set to true', () => {
-            component.property = new CardViewTextItemModel({
-                label: 'Text label',
-                value: '',
-                key: 'textkey',
-                default: 'FAKE-DEFAULT-KEY',
-                clickable: true,
-                icon: 'FAKE_ICON'
-            });
-            component.editable = true;
-            fixture.detectChanges();
-
-            const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-textkey"]`));
-            expect(value).not.toBeNull();
-            expect(value.nativeElement.innerText).toBe('FAKE_ICON');
-        });
-
-        it('should not render clickable icon in case of clickable true and icon undefined', () => {
-            component.property = new CardViewTextItemModel({
-                label: 'Text label',
-                value: '',
-                key: 'textkey',
-                default: 'FAKE-DEFAULT-KEY',
-                clickable: true
-            });
-            component.editable = true;
-            fixture.detectChanges();
-
-            const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-textkey"]`));
-            expect(value).toBeNull('icon should NOT be shown');
-        });
-
-        it('should not render the edit icon in case of clickable true and icon undefined', () => {
-            component.property = new CardViewTextItemModel({
-                label: 'Text label',
-                value: '',
-                key: 'textkey',
-                default: 'FAKE-DEFAULT-KEY',
-                clickable: true
-            });
-            fixture.detectChanges();
-
-            const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.icon}"]`));
-            expect(value).toBeNull('Edit icon should NOT be shown');
-        });
-
-        it('should not render the edit icon in case of clickable false and icon defined', () => {
-            component.property = new CardViewTextItemModel({
-                label: 'Text label',
-                value: '',
-                key: 'textkey',
-                default: 'FAKE-DEFAULT-KEY',
-                clickable: false,
-                icon: 'FAKE-ICON'
-            });
-            fixture.detectChanges();
-
-            const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.icon}"]`));
-            expect(value).toBeNull('Edit icon should NOT be shown');
-        });
-
         it('should render value when editable:true', () => {
             component.editable = true;
             component.property.editable = true;
@@ -268,6 +148,142 @@ describe('CardViewTextItemComponent', () => {
         });
     });
 
+    describe('clickable', () => {
+        beforeEach(() => {
+            component.property = new CardViewTextItemModel({
+                label: 'Text label',
+                value: '',
+                key: 'textkey',
+                default: 'FAKE-DEFAULT-KEY'
+            });
+        });
+
+        it('should render the default as value if the value is empty, clickable is false and displayEmpty is true', () => {
+            component.property.clickable = false;
+            component.displayEmpty = true;
+            fixture.detectChanges();
+
+            const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.innerText.trim()).toBe('FAKE-DEFAULT-KEY');
+        });
+
+        it('should render the default as value if the value is empty and clickable true', () => {
+            component.property.clickable = true;
+            fixture.detectChanges();
+
+            const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.innerText.trim()).toBe('FAKE-DEFAULT-KEY');
+        });
+
+        it('should not render the edit icon in case of clickable true but edit false', () => {
+            component.property.clickable = true;
+            fixture.detectChanges();
+
+            const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.icon}"]`));
+            expect(value).toBeNull();
+        });
+
+        it('should not render the clickable icon in case editable set to false', () => {
+            component.property.clickable = true;
+            component.property.icon = 'create';
+            component.editable = false;
+            fixture.detectChanges();
+
+            const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-textkey"]`));
+            expect(value).toBeNull('icon should NOT be shown');
+        });
+
+        it('should render the defined clickable icon in case of clickable true and editable input set to true', () => {
+            component.property.clickable = true;
+            component.property.icon = 'FAKE_ICON';
+            component.editable = true;
+            fixture.detectChanges();
+
+            const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-textkey"]`));
+            expect(value).not.toBeNull();
+            expect(value.nativeElement.innerText).toBe('FAKE_ICON');
+        });
+
+        it('should not render clickable icon in case of clickable true and icon undefined', () => {
+            component.property.clickable = true;
+            component.editable = true;
+            fixture.detectChanges();
+
+            const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-textkey"]`));
+            expect(value).toBeNull('icon should NOT be shown');
+        });
+
+        it('should not render the edit icon in case of clickable false and icon defined', () => {
+            component.property.clickable = false;
+            component.property.icon = 'FAKE_ICON';
+            fixture.detectChanges();
+
+            const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.icon}"]`));
+            expect(value).toBeNull('Edit icon should NOT be shown');
+        });
+
+        it('should call back function when clickable property enabled', () => {
+            const callBackSpy = jasmine.createSpy('callBack');
+            component.property.clickable = true;
+            component.property.icon = 'FAKE_ICON';
+            component.property.clickCallBack = callBackSpy;
+            component.editable = true;
+            fixture.detectChanges();
+
+            const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-textkey"]`));
+            expect(value.nativeElement.innerText).toBe('FAKE_ICON');
+            value.nativeElement.click();
+            expect(callBackSpy).toHaveBeenCalled();
+        });
+
+        it('should click event to the event stream when clickable property enabled', () => {
+            const cardViewUpdateService = TestBed.get(CardViewUpdateService);
+            spyOn(cardViewUpdateService, 'clicked').and.stub();
+
+            component.property.clickable = true;
+            component.property.icon = 'FAKE_ICON';
+            component.editable = false;
+            fixture.detectChanges();
+
+            const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-toggle-${component.property.key}"]`));
+            value.nativeElement.click();
+            expect(cardViewUpdateService.clicked).toHaveBeenCalled();
+        });
+
+        it('should update input the value on click of save', () => {
+            component.property.clickable = true;
+
+            component.property.editable = true;
+            component.editable = true;
+            component.editedValue = 'updated-value';
+            component.property.isValid = () => true;
+            const expectedText = 'changed text';
+            spyOn(component, 'update').and.callThrough();
+            const cardViewUpdateService = TestBed.get(CardViewUpdateService);
+            fixture.detectChanges();
+
+            const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
+                expect(updateNotification.target).toBe(component.property);
+                expect(updateNotification.changed).toEqual({ textkey: expectedText });
+                disposableUpdate.unsubscribe();
+            });
+
+            updateTextField(component.property.key, expectedText);
+
+            const saveButton = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-update-${component.property.key}"]`));
+            saveButton.nativeElement.click();
+
+            expect(component.update).toHaveBeenCalled();
+            fixture.detectChanges();
+
+            expect(getFieldValue(component.property.key)).toEqual(expectedText);
+            expect(component.property.value).toBe(expectedText);
+        });
+
+    });
+
     describe('Update', () => {
         const event = new MouseEvent('click');
 
@@ -416,7 +432,7 @@ describe('CardViewTextItemComponent', () => {
             editInput.nativeElement.dispatchEvent(enterKeyboardEvent);
             fixture.detectChanges();
 
-            const textItemReadOnly = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-textkey"]`));
+            const textItemReadOnly = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
             expect(textItemReadOnly.nativeElement.textContent).toEqual(expectedText);
             expect(component.property.value).toBe(expectedText);
         }));
@@ -439,9 +455,294 @@ describe('CardViewTextItemComponent', () => {
             editInput.nativeElement.dispatchEvent(enterKeyboardEvent);
             fixture.detectChanges();
 
-            const textItemReadOnly = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-textkey"]`));
+            const textItemReadOnly = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`));
             expect(textItemReadOnly.nativeElement.textContent).toEqual('Lorem ipsum');
             expect(component.property.value).toBe('Lorem ipsum');
         }));
+
+        it('should reset the value onclick of clear button', () => {
+            component.inEdit = false;
+            component.property.isValid = () => true;
+            spyOn(component, 'reset').and.callThrough();
+            fixture.detectChanges();
+
+            updateTextField(component.property.key, 'changed text');
+
+            const clearButton = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-reset-${component.property.key}"]`));
+            clearButton.nativeElement.click();
+            expect(component.reset).toHaveBeenCalled();
+
+            fixture.detectChanges();
+
+            expect(getFieldValue(component.property.key)).toEqual('Lorem ipsum');
+            expect(component.property.value).toBe('Lorem ipsum');
+        });
+
+        it('should update multiline input the value on click of save', () => {
+            component.inEdit = false;
+            component.property.isValid = () => true;
+            component.property.multiline = true;
+            const expectedText = 'changed text';
+            spyOn(component, 'update').and.callThrough();
+            const cardViewUpdateService = TestBed.get(CardViewUpdateService);
+            fixture.detectChanges();
+
+            const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
+                expect(updateNotification.target).toBe(component.property);
+                expect(updateNotification.changed).toEqual({ textkey: expectedText });
+                disposableUpdate.unsubscribe();
+            });
+
+            updateTextArea(component.property.key, expectedText);
+
+            const saveButton = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-update-${component.property.key}"]`));
+            saveButton.nativeElement.click();
+
+            expect(component.update).toHaveBeenCalled();
+            fixture.detectChanges();
+
+            expect(getFieldValue(component.property.key)).toEqual(expectedText);
+            expect(component.property.value).toBe(expectedText);
+        });
     });
+
+    describe('number', () => {
+        let cardViewUpdateService: CardViewUpdateService;
+
+        beforeEach(() => {
+            component.property.editable = true;
+            component.editable = true;
+            component.inEdit = false;
+            component.property.value = 10;
+            component.property.validators.push(new CardViewItemIntValidator());
+            component.ngOnChanges();
+            fixture.detectChanges();
+            cardViewUpdateService = TestBed.get(CardViewUpdateService);
+        });
+
+        it('should show validation error when string passed', () => {
+            spyOn(component, 'update').and.callThrough();
+
+            updateTextField(component.property.key, 'update number');
+
+            const saveButton = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-update-${component.property.key}"]`));
+            saveButton.nativeElement.click();
+            fixture.detectChanges();
+            expect(component.update).toHaveBeenCalled();
+
+            const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
+            expect(error.nativeElement.innerText).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
+            expect(component.property.value).toBe(10);
+        });
+
+        it('should show validation error for empty string', () => {
+            spyOn(component, 'update').and.callThrough();
+
+            updateTextField(component.property.key, ' ');
+
+            const saveButton = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-update-${component.property.key}"]`));
+            saveButton.nativeElement.click();
+            expect(component.update).toHaveBeenCalled();
+
+            fixture.detectChanges();
+            const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
+            expect(error.nativeElement.innerText).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
+
+            expect(component.property.value).toBe(10);
+        });
+
+        it('should show validation error for float number', () => {
+            spyOn(component, 'update').and.callThrough();
+
+            updateTextField(component.property.key, 0.024);
+
+            const saveButton = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-update-${component.property.key}"]`));
+            saveButton.nativeElement.click();
+            expect(component.update).toHaveBeenCalled();
+
+            fixture.detectChanges();
+            const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
+            expect(error.nativeElement.innerText).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
+
+            expect(component.property.value).toBe(10);
+        });
+
+        it('should show validation error for exceed the number limit (2147483648)', () => {
+            spyOn(component, 'update').and.callThrough();
+
+            updateTextField(component.property.key, 2147483648);
+
+            const saveButton = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-update-${component.property.key}"]`));
+            saveButton.nativeElement.click();
+            expect(component.update).toHaveBeenCalled();
+
+            fixture.detectChanges();
+            const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
+            expect(error.nativeElement.innerText).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
+
+            expect(component.property.value).toBe(10);
+        });
+
+        it('should not show validation error for below the number limit (2147483647)', () => {
+            spyOn(component, 'update').and.callThrough();
+
+            updateTextField(component.property.key, 2147483647);
+
+            const saveButton = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-update-${component.property.key}"]`));
+            saveButton.nativeElement.click();
+            expect(component.update).toHaveBeenCalled();
+
+            fixture.detectChanges();
+            const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
+            expect(error).toBeFalsy();
+
+            expect(component.property.value).toBe('2147483647');
+        });
+
+        it('should reset the value onclick of clear button', () => {
+            spyOn(component, 'reset').and.callThrough();
+            fixture.detectChanges();
+
+            updateTextField(component.property.key, 20);
+
+            const clearButton = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-reset-${component.property.key}"]`));
+            clearButton.nativeElement.click();
+            expect(component.reset).toHaveBeenCalled();
+
+            fixture.detectChanges();
+            const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
+            expect(error).toBeFalsy();
+
+            expect(getFieldValue(component.property.key)).toEqual('10');
+            expect(component.property.value).toBe(10);
+        });
+
+        it('should update input the value on click of save', () => {
+            component.property.multiline = true;
+            const expectedNumber = 2020;
+            spyOn(component, 'update').and.callThrough();
+            fixture.detectChanges();
+            expect(component.property.value).not.toEqual(expectedNumber);
+
+            const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
+                expect(updateNotification.target).toBe(component.property);
+                expect(updateNotification.changed).toEqual({ textkey: expectedNumber.toString() });
+                disposableUpdate.unsubscribe();
+            });
+
+            updateTextArea(component.property.key, expectedNumber);
+
+            const saveButton = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-update-${component.property.key}"]`));
+            saveButton.nativeElement.click();
+            expect(component.update).toHaveBeenCalled();
+
+            fixture.detectChanges();
+            const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
+            expect(error).toBeFalsy();
+
+            expect(getFieldValue(component.property.key)).toEqual(expectedNumber.toString());
+            expect(component.property.value).toBe(expectedNumber.toString());
+        });
+    });
+
+    describe('float', () => {
+        let cardViewUpdateService: CardViewUpdateService;
+        const floatValue = 77.33;
+
+        beforeEach(() => {
+            component.property.editable = true;
+            component.editable = true;
+            component.inEdit = false;
+            component.property.value = floatValue;
+            component.property.validators.push(new CardViewItemFloatValidator());
+            component.ngOnChanges();
+            fixture.detectChanges();
+            cardViewUpdateService = TestBed.get(CardViewUpdateService);
+        });
+
+        it('should show validation error when string passed', () => {
+            spyOn(component, 'update').and.callThrough();
+
+            updateTextField(component.property.key, ' ');
+
+            const saveButton = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-update-${component.property.key}"]`));
+            saveButton.nativeElement.click();
+            expect(component.update).toHaveBeenCalled();
+
+            fixture.detectChanges();
+            const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
+            expect(error.nativeElement.innerText).toEqual('CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR');
+
+            expect(component.property.value).toBe(floatValue);
+        });
+
+        it('should show validation error for empty string', () => {
+            spyOn(component, 'update').and.callThrough();
+
+            updateTextField(component.property.key, ' ');
+
+            const saveButton = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-update-${component.property.key}"]`));
+            saveButton.nativeElement.click();
+            expect(component.update).toHaveBeenCalled();
+
+            fixture.detectChanges();
+            const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
+            expect(error.nativeElement.innerText).toEqual('CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR');
+
+            expect(component.property.value).toBe(floatValue);
+        });
+
+        it('should update input the value on click of save', () => {
+            component.property.multiline = true;
+            const expectedFloat = 88.44;
+            spyOn(component, 'update').and.callThrough();
+            fixture.detectChanges();
+
+            const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
+                expect(updateNotification.target).toBe(component.property);
+                expect(updateNotification.changed).toEqual({ textkey: expectedFloat.toString() });
+                disposableUpdate.unsubscribe();
+            });
+
+            updateTextArea(component.property.key, expectedFloat);
+
+            const saveButton = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-update-${component.property.key}"]`));
+            saveButton.nativeElement.click();
+            expect(component.update).toHaveBeenCalled();
+
+            fixture.detectChanges();
+            const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
+            expect(error).toBeFalsy();
+
+            expect(getFieldValue(component.property.key)).toEqual(expectedFloat.toString());
+            expect(component.property.value).toBe(expectedFloat.toString());
+        });
+    });
+
+    function updateTextField(key, value) {
+        const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-toggle-${key}"]`));
+        editIcon.nativeElement.dispatchEvent(new MouseEvent('click'));
+        fixture.detectChanges();
+
+        const editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-editinput-${key}"]`));
+        editInput.nativeElement.value = value;
+        editInput.nativeElement.dispatchEvent(new Event('input'));
+        fixture.detectChanges();
+    }
+
+    function updateTextArea(key, value) {
+        const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-toggle-${key}"]`));
+        editIcon.nativeElement.dispatchEvent(mouseEvent);
+        fixture.detectChanges();
+
+        const editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edittextarea-${key}"]`));
+        editInput.nativeElement.value = value;
+        editInput.nativeElement.dispatchEvent(new Event('input'));
+        fixture.detectChanges();
+    }
+
+    function getFieldValue(key): string {
+        const textItemReadOnly = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${key}"]`));
+        return textItemReadOnly.nativeElement.textContent;
+    }
 });

lib/core/datatable/components/datatable/datatable.component.spec.ts

@@ -890,6 +890,25 @@ describe('DataTable', () => {
         expect(dataTable.isSelectAllChecked).toBe(true);
     });
 
+    it('should allow select row when multi-select enabled', () => {
+        const data = new ObjectDataTableAdapter([{}, {}], []);
+        const rows = data.getRows();
+
+        dataTable.multiselect = true;
+        dataTable.ngOnChanges({ 'data': new SimpleChange('123', data, true) });
+
+        expect(rows[0].isSelected).toBe(false);
+        expect(rows[1].isSelected).toBe(false);
+
+        dataTable.onCheckboxChange(rows[1], <MatCheckboxChange> { checked: true });
+        expect(rows[0].isSelected).toBe(false);
+        expect(rows[1].isSelected).toBe(true);
+
+        dataTable.onCheckboxChange(rows[0], <MatCheckboxChange> { checked: true });
+        expect(rows[0].isSelected).toBe(true);
+        expect(rows[1].isSelected).toBe(true);
+    });
+
     it('should require multiselect option to toggle row state', () => {
         const data = new ObjectDataTableAdapter([{}, {}, {}], []);
         const rows = data.getRows();