diff --git a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html index 517aeb3e7..9b36a72ff 100644 --- a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html +++ b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html @@ -5,9 +5,9 @@ {{ 'LIBRARY.DIALOG.FORM.NAME' | translate }} @if (form.enabled) { - } @else { - } diff --git a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.spec.ts b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.spec.ts index 67fafc479..019871878 100644 --- a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.spec.ts +++ b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.spec.ts @@ -31,6 +31,8 @@ import { AppTestingModule } from '../../../testing/app-testing.module'; import { NO_ERRORS_SCHEMA } from '@angular/core'; import { Site, SiteBodyCreate, SiteEntry, SitePaging } from '@alfresco/js-api'; import { of, Subject } from 'rxjs'; +import { UnitTestingUtils } from '@alfresco/adf-core'; +import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; describe('LibraryMetadataFormComponent', () => { let fixture: ComponentFixture; @@ -38,6 +40,11 @@ describe('LibraryMetadataFormComponent', () => { let store: Store; let siteEntryModel: SiteBodyCreate; let appHookService: AppHookService; + let unitTestingUtils: UnitTestingUtils; + + const getNameInput = (): HTMLInputElement => unitTestingUtils.getInputByDataAutomationId('app-library-metadata-form-name-input'); + + const clickEditButton = (): Promise => unitTestingUtils.clickMatButtonByDataAutomationId('app-library-metadata-form-edit-button'); beforeEach(() => { TestBed.configureTestingModule({ @@ -77,6 +84,7 @@ describe('LibraryMetadataFormComponent', () => { ...siteEntryModel } as Site }; + unitTestingUtils = new UnitTestingUtils(fixture.debugElement, TestbedHarnessEnvironment.loader(fixture)); }); it('should initialize form with node data', () => { @@ -159,7 +167,7 @@ describe('LibraryMetadataFormComponent', () => { component.node.entry.role = Site.RoleEnum.SiteManager; siteEntryModel.title = ' some title '; component.node.entry.title = siteEntryModel.title; - component.ngOnInit(); + fixture.detectChanges(); component.toggleEdit(); component.update(); @@ -176,7 +184,7 @@ describe('LibraryMetadataFormComponent', () => { it('should call markAsPristine on form when updating valid form and has permission to update', () => { component.node.entry.role = Site.RoleEnum.SiteManager; spyOn(component.form, 'markAsPristine'); - component.ngOnInit(); + fixture.detectChanges(); component.toggleEdit(); component.update(); @@ -209,7 +217,7 @@ describe('LibraryMetadataFormComponent', () => { it('should not call markAsPristine on form when updating valid form but has not permission to update', () => { component.node.entry.role = Site.RoleEnum.SiteConsumer; spyOn(component.form, 'markAsPristine'); - component.ngOnInit(); + fixture.detectChanges(); component.toggleEdit(); component.update(); @@ -233,7 +241,7 @@ describe('LibraryMetadataFormComponent', () => { component.node.entry.role = Site.RoleEnum.SiteManager; spyOn(component.form, 'markAsPristine'); spyOnProperty(component.form, 'valid').and.returnValue(false); - component.ngOnInit(); + fixture.detectChanges(); component.toggleEdit(); component.update(); @@ -250,7 +258,7 @@ describe('LibraryMetadataFormComponent', () => { }); it('should enable form without id field after calling toggleEdit if form was disabled', () => { - component.toggleEdit(); + fixture.detectChanges(); spyOn(component.form, 'enable'); spyOn(component.form.controls.id, 'disable'); @@ -261,6 +269,27 @@ describe('LibraryMetadataFormComponent', () => { expect(component.form.controls.id.disable).toHaveBeenCalled(); }); + it('should call focus on name input after clicking on edit button', async () => { + component.node.entry.role = Site.RoleEnum.SiteManager; + fixture.detectChanges(); + const nameInput = getNameInput(); + spyOn(nameInput, 'focus'); + + await clickEditButton(); + expect(nameInput.focus).toHaveBeenCalled(); + }); + + it('should not call focus on name input after clicking on cancel button', async () => { + component.node.entry.role = Site.RoleEnum.SiteManager; + fixture.detectChanges(); + await clickEditButton(); + const nameInput = getNameInput(); + spyOn(nameInput, 'focus'); + + await unitTestingUtils.clickMatButtonByDataAutomationId('app-library-metadata-form-cancel-button'); + expect(nameInput.focus).not.toHaveBeenCalled(); + }); + it('should cancel from changes', () => { fixture.detectChanges(); component.toggleEdit(); @@ -348,7 +377,7 @@ describe('LibraryMetadataFormComponent', () => { })); it('should set proper titleErrorTranslationKey when there is error for empty title', () => { - component.ngOnInit(); + fixture.detectChanges(); component.toggleEdit(); component.form.controls.title.setValue(' '); diff --git a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts index 8d59c52f0..e5a72bf65 100644 --- a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts +++ b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.ts @@ -22,7 +22,7 @@ * from Hyland Software. If not, see . */ -import { Component, DestroyRef, inject, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, DestroyRef, ElementRef, inject, Input, OnChanges, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { FormControl, FormGroupDirective, @@ -47,7 +47,6 @@ import { TranslatePipe } from '@ngx-translate/core'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatSelectModule } from '@angular/material/select'; import { MatInputModule } from '@angular/material/input'; -import { A11yModule } from '@angular/cdk/a11y'; import { MatButtonModule } from '@angular/material/button'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { NgForOf } from '@angular/common'; @@ -69,7 +68,6 @@ export class InstantErrorStateMatcher implements ErrorStateMatcher { MatSelectModule, MatOptionModule, MatInputModule, - A11yModule, MatButtonModule, NgForOf ], @@ -113,6 +111,8 @@ export class LibraryMetadataFormComponent implements OnInit, OnChanges { canUpdateLibrary = false; isAdmin = false; + @ViewChild('libraryNameInput') + private readonly libraryNameInput: ElementRef; private readonly destroyRef = inject(DestroyRef); constructor( @@ -131,6 +131,7 @@ export class LibraryMetadataFormComponent implements OnInit, OnChanges { emitEvent: false }); this.form.controls.id.disable(); + this.libraryNameInput.nativeElement.focus(); } }