[ADF-4755][CardViewDate&SelectItemComponent] Provide a way to reset date and none option as default. (#4955)

* [ADF-4755] [CardViewDateItemComponent] Provide a way to reset date.

* Added clear icon to reset date to empty.
* Added Translation key to the new icon.

* * Added displayClearAction flag to toggle clear action.* Added None as default for the selectItem components.* Added displayNoneOption flag to toggle the default none option.

* * Fixed comments.

* * Added translation key for 'none'  option.

* * Updated dateItem css to the match recent changes.

* * Fixed failing unit tests* Updated TaskHeader components with the displayClearAction.

* * Updated demo shell card-view component to test the latest changes
This commit is contained in:
siva kumar
2019-07-26 16:52:45 +05:30
committed by Maurizio Vitale
parent 525f0a06db
commit 05e73a8aa1
18 changed files with 161 additions and 8 deletions

View File

@@ -116,6 +116,7 @@ describe('CardViewDateItemComponent', () => {
});
it('should render value when editable:true', () => {
component.displayClearAction = false;
component.editable = true;
component.property.editable = true;
fixture.detectChanges();
@@ -203,4 +204,50 @@ describe('CardViewDateItemComponent', () => {
}
);
}));
it('should render the clear icon in case of editable: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 displayClearAction is set 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(
(updateNotification) => {
expect(component.property.value).toBeNull();
}
);
}));
});