inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-4964] Add enter and escape events for updating card view properties (#5167)

Browse Source 
* [ADF-4964] Add enter and escape events for updating card view properties

* [ADF-4964] Add unit tests
This commit is contained in:
arditdomi
2019-10-21 14:22:16 +01:00
committed by Maurizio Vitale
parent 2a033507b3
commit 1970b1da82
2 changed files with 59 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
View File

@@ -38,6 +38,8 @@
<div class="adf-textitem-editable-controls">
<mat-form-field floatPlaceholder="never" class="adf-input-container">
<input *ngIf="!property.multiline" #editorInput
(keyup.escape)="reset()"
(keyup.enter)="update()"
matInput
class="adf-input"
[placeholder]="property.default | translate"

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

@@ -67,7 +67,7 @@ describe('CardViewTextItemComponent', () => {
componentWithDisplayName = fixture.componentInstance;
componentWithDisplayName.property = new CardViewTextItemModel({
label: 'Name label',
value: {id: 123, displayName: 'User Name'},
value: { id: 123, displayName: 'User Name' },
key: 'namekey'
});
fixture.detectChanges();
@@ -338,5 +338,61 @@ describe('CardViewTextItemComponent', () => {
const updateInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-update-${component.property.key}"]`));
updateInput.triggerEventHandler('click', null);
});
it('should update the value using the enter key', async(() => {
component.inEdit = false;
component.property.isValid = () => true;
const cardViewUpdateService = TestBed.get(CardViewUpdateService);
const expectedText = 'changed text';
fixture.detectChanges();
const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe(
(updateNotification) => {
expect(updateNotification.target).toBe(component.property);
expect(updateNotification.changed).toEqual({ textkey: expectedText });
disposableUpdate.unsubscribe();
}
);
const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-toggle-${component.property.key}"]`));
editIcon.triggerEventHandler('click', null);
fixture.detectChanges();
const editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-editinput-${component.property.key}"]`));
editInput.nativeElement.value = expectedText;
editInput.nativeElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
const enterKeyboardEvent = new KeyboardEvent('keyup', { 'key': 'Enter' });
editInput.nativeElement.dispatchEvent(enterKeyboardEvent);
fixture.detectChanges();
const textItemReadOnly = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-textkey"]`));
expect(textItemReadOnly.nativeElement.textContent).toEqual(expectedText);
expect(component.property.value).toBe(expectedText);
}));
it('should reset the value using the escape key', async(() => {
component.inEdit = false;
component.property.isValid = () => true;
fixture.detectChanges();
const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-toggle-${component.property.key}"]`));
editIcon.triggerEventHandler('click', null);
fixture.detectChanges();
const editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-editinput-${component.property.key}"]`));
editInput.nativeElement.value = 'changed text';
editInput.nativeElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
const enterKeyboardEvent = new KeyboardEvent('keyup', { 'key': 'Escape' });
editInput.nativeElement.dispatchEvent(enterKeyboardEvent);
fixture.detectChanges();
const textItemReadOnly = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-textkey"]`));
expect(textItemReadOnly.nativeElement.textContent).toEqual('Lorem ipsum');
expect(component.property.value).toBe('Lorem ipsum');
}));
});
});