Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Oct 24, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
92f80e8
ACS-5647 Removed template for view mode and used template for edit mo…
AleksanderSklorz Oct 16, 2023
88d3af0
ACS-5647 Fixed auto focus for name field
AleksanderSklorz Oct 18, 2023
249de2a
ACS-5647 Reverted data automation id
AleksanderSklorz Oct 18, 2023
7812689
ACS-5647 Corrected unit tests
AleksanderSklorz Oct 19, 2023
b64dda8
e2e fix for library details
akashrathod28 Oct 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions e2e/playwright/actions/src/tests/create-library.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
});
Expand Down
110 changes: 18 additions & 92 deletions .../src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -96,19 +17,19 @@
</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 }}
</mat-option>
</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 }}"
Expand All @@ -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 changes: 27 additions & 4 deletions ...c/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ describe('LibraryMetadataFormComponent', () => {

it('should initialize form with node data', () => {
fixture.detectChanges();
component.toggleEdit();

expect(component.form.value).toEqual(siteEntryModel);
});
Expand All @@ -89,6 +90,7 @@ describe('LibraryMetadataFormComponent', () => {
};

fixture.detectChanges();
component.toggleEdit();

expect(component.form.value).toEqual(siteEntryModel);

Expand Down Expand Up @@ -161,6 +163,7 @@ describe('LibraryMetadataFormComponent', () => {
component.node.entry.role = Site.RoleEnum.SiteManager;

fixture.detectChanges();
component.toggleEdit();

component.update();

Expand All @@ -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(
Expand All @@ -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();
Expand All @@ -195,6 +200,7 @@ describe('LibraryMetadataFormComponent', () => {
component.node.entry.role = Site.RoleEnum.SiteConsumer;

fixture.detectChanges();
component.toggleEdit();

component.update();

Expand All @@ -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();
Expand All @@ -214,6 +221,7 @@ describe('LibraryMetadataFormComponent', () => {
component.node.entry.role = Site.RoleEnum.SiteManager;

fixture.detectChanges();
component.toggleEdit();

component.form.controls['title'].setErrors({ maxlength: true });

Expand All @@ -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);

Expand All @@ -252,6 +273,7 @@ describe('LibraryMetadataFormComponent', () => {
expect(component.form.value.title).toBe('libraryTitle-edit');

component.cancel();
component.toggleEdit();

expect(component.form.value).toEqual(siteEntryModel);
});
Expand Down Expand Up @@ -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');
Expand Down
18 changes: 11 additions & 7 deletions ...nt/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,6 @@ export class LibraryMetadataFormComponent implements OnInit, OnChanges, OnDestro
@Input()
node: SiteEntry;

edit: boolean;
libraryTitleExists = false;

libraryType = [
Expand All @@ -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() {
Expand All @@ -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$))
Expand Down Expand Up @@ -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)
);
Expand Down
2 changes: 1 addition & 1 deletion projects/aca-playwright-shared/src/page-objects/components/adf-info-drawer.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 5 additions & 3 deletions projects/aca-testing-shared/src/components/info-drawer/info-drawer-metadata-library.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand All @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down
Loading