inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-12 17:04:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-5647] rework template of library metadata form component (#3487)

Browse Source 
* ACS-5647 Removed template for view mode and used template for edit mode instead

* ACS-5647 Fixed auto focus for name field

* ACS-5647 Reverted data automation id

* ACS-5647 Corrected unit tests

* e2e fix for library details

---------

Co-authored-by: akash.rathod@hyland.com <akash.rathod@hyland.com>
This commit is contained in:
AleksanderSklorz 2023-10-24 22:29:59 +02:00 committed by GitHub
parent 9b2cf2bbf1
commit 7ae335c3d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 66 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
e2e/playwright/actions/src/tests/create-library.spec.ts
View File

@ -145,10 +145,10 @@ test.describe('Create Libraries ', () => {
await expect(libraryTable.getCellLinkByName(randomLibraryName).and(myLibrariesPage.page.getByTitle(randomLibraryDescription))).toBeVisible();
await libraryTable.getRowByName(randomLibraryName).click();
await libraryViewDetails.click();
await expect(libraryDetails.getNameField('Name').getByText(randomLibraryName)).toBeVisible();
await expect(libraryDetails.getIdField('Library ID').getByText(randomLibraryId)).toBeVisible();
await expect(libraryDetails.getVisibilityField('Visibility').getByText(publicVisibility)).toBeVisible();
await expect(libraryDetails.getDescriptionField(libraryDescriptionLabel).getByText(randomLibraryDescription)).toBeVisible();
expect(await libraryDetails.getNameField('Name').locator('input').inputValue()).toBe(randomLibraryName);
expect(await libraryDetails.getIdField('Library ID').locator('input').inputValue()).toBe(randomLibraryId);
await expect(libraryDetails.getVisibilityField('Visibility').locator('.mat-select-value').getByText(publicVisibility)).toBeVisible();
expect(await libraryDetails.getDescriptionField.inputValue()).toBe(randomLibraryDescription);
await apiClientFactory.sites.deleteSite(randomLibraryId, { permanent: true });
});

110
projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html
View File

@ -1,90 +1,11 @@
<mat-card *ngIf="node">
<mat-card-content *ngIf="!edit">
<div class="mat-form-field mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float">
<div class="mat-form-field-wrapper" data-automation-id="library-name-properties-wrapper">
<div class="mat-form-field-flex">
<div class="mat-form-field-infix">
<span class="mat-form-field-label-wrapper">
<span class="mat-form-field-label">
{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}
</span>
</span>
<span class="mat-input-element">
{{ form.controls.title.value }}
</span>
</div>
</div>
</div>
</div>
<div class="mat-form-field mat-primary mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float">
<div class="mat-form-field-wrapper" data-automation-id="library-id-properties-wrapper">
<div class="mat-form-field-flex">
<div class="mat-form-field-infix">
<span class="mat-form-field-label-wrapper">
<span class="mat-form-field-label">
{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}
</span>
</span>
<span class="mat-input-element">
{{ form.controls.id.value }}
</span>
</div>
</div>
</div>
</div>
<div class="mat-form-field mat-primary mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float">
<div class="mat-form-field-wrapper" data-automation-id="library-visibility-properties-wrapper">
<div class="mat-form-field-flex">
<div class="mat-form-field-infix">
<span class="mat-form-field-label-wrapper">
<span class="mat-form-field-label">
{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}
</span>
</span>
<span class="mat-input-element">
{{ visibilityLabel | translate }}
</span>
</div>
</div>
</div>
</div>
<div class="mat-form-field mat-primary mat-form-field-type-mat-input mat-form-field-can-float mat-form-field-should-float">
<div class="mat-form-field-wrapper" data-automation-id="library-description-properties-wrapper">
<div class="mat-form-field-flex">
<div class="mat-form-field-infix">
<span class="mat-form-field-label-wrapper">
<span class="mat-form-field-label">
{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}
</span>
</span>
<span class="mat-input-element">
{{ form.controls.description?.value }}
</span>
</div>
</div>
</div>
</div>
</mat-card-content>
<mat-card-actions align="end" *ngIf="!edit && canUpdateLibrary">
<button mat-button color="primary" (click)="toggleEdit()">
{{ 'LIBRARY.DIALOG.EDIT' | translate }}
</button>
</mat-card-actions>
<mat-card-content *ngIf="edit">
<mat-card-content>
<form [formGroup]="form" autocomplete="off">
<mat-form-field floatLabel="auto">
<mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper">
<input
matInput
cdkFocusInitial
[cdkTrapFocusAutoCapture]="form.enabled"
[cdkTrapFocus]="form.enabled"
required
placeholder="{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}"
formControlName="title"
@ -96,11 +17,11 @@
</mat-error>
</mat-form-field>
<mat-form-field floatLabel="auto">
<mat-form-field floatLabel="auto" data-automation-id="library-id-properties-wrapper">
<input matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}" formControlName="id" />
</mat-form-field>
<mat-form-field floatLabel="auto">
<mat-form-field floatLabel="auto" data-automation-id="library-visibility-properties-wrapper">
<mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility">
<mat-option [value]="type.value" *ngFor="let type of libraryType">
{{ type.label | translate }}
@ -108,7 +29,7 @@
</mat-select>
</mat-form-field>
<mat-form-field floatLabel="auto">
<mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper">
<textarea
matInput
placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
@ -123,12 +44,17 @@
</form>
</mat-card-content>
<mat-card-actions align="end" *ngIf="edit && canUpdateLibrary">
<button mat-button (click)="cancel()">
{{ 'LIBRARY.DIALOG.CANCEL' | translate }}
</button>
<button mat-button color="primary" [disabled]="form.invalid || form.pristine" (click)="update()">
{{ 'LIBRARY.DIALOG.UPDATE' | translate }}
<mat-card-actions align="end" *ngIf="canUpdateLibrary">
<ng-container *ngIf="form.enabled">
<button mat-button (click)="cancel()">
{{ 'LIBRARY.DIALOG.CANCEL' | translate }}
</button>
<button mat-button color="primary" [disabled]="form.invalid || form.pristine" (click)="update()">
{{ 'LIBRARY.DIALOG.UPDATE' | translate }}
</button>
</ng-container>
<button mat-button color="primary" (click)="toggleEdit()" *ngIf="form.disabled">
{{ 'LIBRARY.DIALOG.EDIT' | translate }}
</button>
</mat-card-actions>
</mat-card>

31
projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.spec.ts
View File

@ -77,6 +77,7 @@ describe('LibraryMetadataFormComponent', () => {
it('should initialize form with node data', () => {
fixture.detectChanges();
component.toggleEdit();
expect(component.form.value).toEqual(siteEntryModel);
});
@ -89,6 +90,7 @@ describe('LibraryMetadataFormComponent', () => {
};
fixture.detectChanges();
component.toggleEdit();
expect(component.form.value).toEqual(siteEntryModel);
@ -161,6 +163,7 @@ describe('LibraryMetadataFormComponent', () => {
component.node.entry.role = Site.RoleEnum.SiteManager;
fixture.detectChanges();
component.toggleEdit();
component.update();
@ -172,6 +175,7 @@ describe('LibraryMetadataFormComponent', () => {
siteEntryModel.title = ' some title ';
component.node.entry.title = siteEntryModel.title;
component.ngOnInit();
component.toggleEdit();
component.update();
expect(store.dispatch).toHaveBeenCalledWith(
@ -186,6 +190,7 @@ describe('LibraryMetadataFormComponent', () => {
component.node.entry.role = Site.RoleEnum.SiteManager;
spyOn(component.form, 'markAsPristine');
component.ngOnInit();
component.toggleEdit();
component.update();
expect(component.form.markAsPristine).toHaveBeenCalled();
@ -195,6 +200,7 @@ describe('LibraryMetadataFormComponent', () => {
component.node.entry.role = Site.RoleEnum.SiteConsumer;
fixture.detectChanges();
component.toggleEdit();
component.update();
@ -205,6 +211,7 @@ describe('LibraryMetadataFormComponent', () => {
component.node.entry.role = Site.RoleEnum.SiteConsumer;
spyOn(component.form, 'markAsPristine');
component.ngOnInit();
component.toggleEdit();
component.update();
expect(component.form.markAsPristine).not.toHaveBeenCalled();
@ -214,6 +221,7 @@ describe('LibraryMetadataFormComponent', () => {
component.node.entry.role = Site.RoleEnum.SiteManager;
fixture.detectChanges();
component.toggleEdit();
component.form.controls['title'].setErrors({ maxlength: true });
@ -227,23 +235,36 @@ describe('LibraryMetadataFormComponent', () => {
spyOn(component.form, 'markAsPristine');
spyOnProperty(component.form, 'valid').and.returnValue(false);
component.ngOnInit();
component.toggleEdit();
component.update();
expect(component.form.markAsPristine).not.toHaveBeenCalled();
});
it('should toggle edit mode', () => {
component.edit = false;
it('should disable form after calling toggleEdit if form was enabled', () => {
spyOn(component.form, 'disable');
component.toggleEdit();
expect(component.edit).toBe(true);
expect(component.form.disable).toHaveBeenCalledWith({
emitEvent: false
});
});
it('should enable form without id field after calling toggleEdit if form was disabled', () => {
component.toggleEdit();
spyOn(component.form, 'enable');
spyOn(component.form.controls.id, 'disable');
component.toggleEdit();
expect(component.edit).toBe(false);
expect(component.form.enable).toHaveBeenCalledWith({
emitEvent: false
});
expect(component.form.controls.id.disable).toHaveBeenCalled();
});
it('should cancel from changes', () => {
fixture.detectChanges();
component.toggleEdit();
expect(component.form.value).toEqual(siteEntryModel);
@ -252,6 +273,7 @@ describe('LibraryMetadataFormComponent', () => {
expect(component.form.value.title).toBe('libraryTitle-edit');
component.cancel();
component.toggleEdit();
expect(component.form.value).toEqual(siteEntryModel);
});
@ -328,6 +350,7 @@ describe('LibraryMetadataFormComponent', () => {
it('should set proper titleErrorTranslationKey when there is error for empty title', () => {
component.ngOnInit();
component.toggleEdit();
component.form.controls.title.setValue(' ');
expect(component.titleErrorTranslationKey).toBe('LIBRARY.ERRORS.ONLY_SPACES');

18
projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts
View File

@ -101,7 +101,6 @@ export class LibraryMetadataFormComponent implements OnInit, OnChanges, OnDestro
@Input()
node: SiteEntry;
edit: boolean;
libraryTitleExists = false;
libraryType = [
@ -119,17 +118,22 @@ export class LibraryMetadataFormComponent implements OnInit, OnChanges, OnDestro
matcher = new InstantErrorStateMatcher();
canUpdateLibrary = false;
visibilityLabel = '';
onDestroy$: Subject<boolean> = new Subject<boolean>();
constructor(private alfrescoApiService: AlfrescoApiService, protected store: Store<AppStore>, private actions$: Actions) {}
getVisibilityLabel(value: string) {
return this.libraryType.find((type) => type.value === value).label;
}
toggleEdit() {
this.edit = !this.edit;
if (this.form.enabled) {
this.form.disable({
emitEvent: false
});
} else {
this.form.enable({
emitEvent: false
});
this.form.controls.id.disable();
}
}
cancel() {
@ -139,6 +143,7 @@ export class LibraryMetadataFormComponent implements OnInit, OnChanges, OnDestro
}
ngOnInit() {
this.toggleEdit();
this.updateForm(this.node);
this.form.controls.title.statusChanges
.pipe(takeUntil(this.onDestroy$))
@ -168,7 +173,6 @@ export class LibraryMetadataFormComponent implements OnInit, OnChanges, OnDestro
}
});
this.canUpdateLibrary = this.node?.entry?.role === 'SiteManager';
this.visibilityLabel = this.libraryType.find((type) => type.value === this.form.controls['visibility'].value).label;
this.handleUpdatingEvent<SnackbarInfoAction>(SnackbarActionTypes.Info, 'LIBRARY.SUCCESS.LIBRARY_UPDATED', () =>
Object.assign(this.node.entry, this.form.value)
);

2
projects/aca-playwright-shared/src/page-objects/components/adf-info-drawer.component.ts
View File

@ -35,5 +35,5 @@ export class AdfInfoDrawerComponent extends BaseComponent {
public getNameField = (labelText: string) => this.getChild('[data-automation-id="library-name-properties-wrapper"]', { hasText: labelText });
public getIdField = (labelText: string) => this.getChild('[data-automation-id="library-id-properties-wrapper"]', { hasText: labelText });
public getVisibilityField = (labelText: string) => this.getChild('[data-automation-id="library-visibility-properties-wrapper"]', { hasText: labelText });
public getDescriptionField = (labelText: string) => this.getChild('[data-automation-id="library-description-properties-wrapper"]', { hasText: labelText });
public getDescriptionField = this.getChild('[data-automation-id="library-description-properties-wrapper"] textarea');
}

8
projects/aca-testing-shared/src/components/info-drawer/info-drawer-metadata-library.ts
View File

@ -32,6 +32,8 @@ export class LibraryMetadata extends Component {
visibilityPublic = this.byCssText('.mat-option .mat-option-text', 'Public', browser);
visibilityPrivate = this.byCssText('.mat-option .mat-option-text', 'Private', browser);
visibilityModerated = this.byCssText('.mat-option .mat-option-text', 'Moderated', browser);
visibilityValue = this.byCss('[data-automation-id="library-visibility-properties-wrapper"] .mat-select');
hint = this.byCss('.mat-hint');
error = this.byCss('.mat-error');
@ -57,7 +59,7 @@ export class LibraryMetadata extends Component {
}
private async getValueOfField(fieldName: string) {
return this.getFieldByName(fieldName).getText();
return this.getFieldByName(fieldName).getAttribute('value');
}
private async enterTextInInput(fieldName: string, text: string) {
@ -140,11 +142,11 @@ export class LibraryMetadata extends Component {
}
async isVisibilityDisplayed() {
return this.isFieldDisplayed('Visibility');
return browser.isElementPresent(this.visibilityValue);
}
async getVisibility(): Promise<string> {
return this.getValueOfField('Visibility');
return this.visibilityValue.getText();
}
async setVisibility(visibility: string) {