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-4995] Metadata - edit mode cannot be access via keyboard (#5253)

Browse Source 
* use keydown over keyup

* fix test

* fix tests
This commit is contained in:
Cilibiu Bogdan
2019-11-15 16:33:12 +02:00
committed by Eugenio Romano
parent 3dd43ce9b5
commit 81dcfa4341
3 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,8 +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()"
(keydown.escape)="reset($event)"
(keydown.enter)="update($event)"
matInput
class="adf-input"
[placeholder]="property.default | translate"
@@ -56,7 +56,7 @@
(input)="onTextAreaInputChange()"
[attr.data-automation-id]="'card-textitem-edittextarea-' + property.key"></textarea>
</mat-form-field>
<button mat-icon-button class="adf-textitem-action" (click)="update()"
<button mat-icon-button class="adf-textitem-action" (click)="update($event)"
[attr.aria-label]="'CORE.METADATA.ACTIONS.SAVE' | translate"
[attr.title]="'CORE.METADATA.ACTIONS.SAVE' | translate"
[attr.data-automation-id]="'card-textitem-update-' + property.key">
@@ -64,7 +64,7 @@
<mat-icon class="adf-textitem-icon">done</mat-icon>
</button>
<button mat-icon-button (click)="reset()" class="adf-textitem-action"
<button mat-icon-button (click)="reset($event)" class="adf-textitem-action"
[attr.aria-label]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
[attr.title]="'CORE.METADATA.ACTIONS.CANCEL' | translate"
[attr.data-automation-id]="'card-textitem-reset-' + property.key">

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

@@ -221,6 +221,7 @@ describe('CardViewTextItemComponent', () => {
});
describe('Update', () => {
const event = new MouseEvent('click');
beforeEach(() => {
component.editable = true;
@@ -234,7 +235,7 @@ describe('CardViewTextItemComponent', () => {
spyOn(component.property, 'isValid');
component.editedValue = 'updated-value';
component.update();
component.update(event);
expect(component.property.isValid).toHaveBeenCalledWith('updated-value');
});
@@ -245,7 +246,7 @@ describe('CardViewTextItemComponent', () => {
spyOn(cardViewUpdateService, 'update');
component.editedValue = 'updated-value';
component.update();
component.update(event);
expect(cardViewUpdateService.update).toHaveBeenCalledWith(component.property, 'updated-value');
});
@@ -255,7 +256,7 @@ describe('CardViewTextItemComponent', () => {
const cardViewUpdateService = TestBed.get(CardViewUpdateService);
spyOn(cardViewUpdateService, 'update');
component.update();
component.update(event);
expect(cardViewUpdateService.update).not.toHaveBeenCalled();
});
@@ -265,14 +266,14 @@ describe('CardViewTextItemComponent', () => {
component.property.isValid = () => false;
component.property.getValidationErrors = () => expectedErrorMessages;
component.update();
component.update(event);
expect(component.errorMessages).toBe(expectedErrorMessages);
});
it('should update the property value after a successful update attempt', async(() => {
component.property.isValid = () => true;
component.update();
component.update(event);
fixture.whenStable().then(() => {
expect(component.property.value).toBe(component.editedValue);
@@ -281,7 +282,7 @@ describe('CardViewTextItemComponent', () => {
it('should switch back to readonly mode after an update attempt', async(() => {
component.property.isValid = () => true;
component.update();
component.update(event);
fixture.whenStable().then(() => {
expect(component.inEdit).toBeFalsy();
@@ -327,7 +328,7 @@ describe('CardViewTextItemComponent', () => {
);
const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-toggle-${component.property.key}"]`));
editIcon.triggerEventHandler('click', null);
editIcon.nativeElement.dispatchEvent(new MouseEvent('click'));
fixture.detectChanges();
const editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-editinput-${component.property.key}"]`));
@@ -336,7 +337,7 @@ describe('CardViewTextItemComponent', () => {
fixture.detectChanges();
const updateInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-update-${component.property.key}"]`));
updateInput.triggerEventHandler('click', null);
updateInput.nativeElement.dispatchEvent(new MouseEvent('click'));
});
it('should update the value using the enter key', async(() => {
@@ -355,7 +356,7 @@ describe('CardViewTextItemComponent', () => {
);
const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-toggle-${component.property.key}"]`));
editIcon.triggerEventHandler('click', null);
editIcon.nativeElement.dispatchEvent(new MouseEvent('click'));
fixture.detectChanges();
const editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-editinput-${component.property.key}"]`));
@@ -363,7 +364,7 @@ describe('CardViewTextItemComponent', () => {
editInput.nativeElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
const enterKeyboardEvent = new KeyboardEvent('keyup', { 'key': 'Enter' });
const enterKeyboardEvent = new KeyboardEvent('keydown', { 'key': 'Enter' });
editInput.nativeElement.dispatchEvent(enterKeyboardEvent);
fixture.detectChanges();
@@ -378,7 +379,7 @@ describe('CardViewTextItemComponent', () => {
fixture.detectChanges();
const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-toggle-${component.property.key}"]`));
editIcon.triggerEventHandler('click', null);
editIcon.nativeElement.dispatchEvent(new MouseEvent('click'));
fixture.detectChanges();
const editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-editinput-${component.property.key}"]`));
@@ -386,7 +387,7 @@ describe('CardViewTextItemComponent', () => {
editInput.nativeElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
const enterKeyboardEvent = new KeyboardEvent('keyup', { 'key': 'Escape' });
const enterKeyboardEvent = new KeyboardEvent('keydown', { 'key': 'Escape' });
editInput.nativeElement.dispatchEvent(enterKeyboardEvent);
fixture.detectChanges();

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

@@ -84,7 +84,9 @@ export class CardViewTextItemComponent implements OnChanges {
}, 0);
}
reset(): void {
reset(event: MouseEvent|KeyboardEvent): void {
event.stopPropagation();
this.editedValue = this.property.multiline ? this.property.displayValue : this.property.value;
this.setEditMode(false);
this.resetErrorMessages();
@@ -94,7 +96,9 @@ export class CardViewTextItemComponent implements OnChanges {
this.errorMessages = [];
}
update(): void {
update(event: MouseEvent|KeyboardEvent): void {
event.stopPropagation();
if (this.property.isValid(this.editedValue)) {
const updatedValue = this.prepareValueForUpload(this.property, this.editedValue);
this.cardViewUpdateService.update(this.property, updatedValue);