diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts b/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts index 40b4332f5b..a72edfdc1a 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts @@ -187,7 +187,8 @@ describe('CategoriesManagementComponent', () => { expect(categoryControlLabel.textContent.trim()).toBe('CATEGORIES_MANAGEMENT.NAME'); }); - it('should hide category control and existing categories panel on clicking hide button', () => { + it('should hide and clear category control and existing categories panel on clicking hide button', fakeAsync(() => { + typeCategory('test'); const categoryControlHideBtn: HTMLButtonElement = fixture.debugElement.query(By.css('.adf-category-name-field button')).nativeElement; const controlVisibilityChangeSpy = spyOn(component.categoryNameControlVisibleChange, 'emit').and.callThrough(); categoryControlHideBtn.click(); @@ -198,7 +199,12 @@ describe('CategoriesManagementComponent', () => { expect(component.categoryNameControlVisible).toBeFalse(); expect(component.existingCategoriesPanelVisible).toBeFalse(); expect(controlVisibilityChangeSpy).toHaveBeenCalledOnceWith(false); - }); + + component.categoryNameControlVisible = true; + fixture.detectChanges(); + tick(100); + expect(getCategoryControlInput().value).toBe(''); + })); }); describe('Spinner', () => { diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts index 06cf901b8a..51d4683fe1 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts @@ -89,6 +89,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { this._existingCategoriesPanelVisible = true; } else { this._existingCategoriesPanelVisible = false; + this.clearCategoryNameInput(); } } @@ -211,6 +212,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { this.categoryNameControlVisible = false; this.categoryNameControlVisibleChange.emit(false); this._existingCategoriesPanelVisible = false; + this.clearCategoryNameInput(); } /** @@ -222,8 +224,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { const newCat = new Category({ id: newCatName, name: newCatName }); this.categories.push(newCat); this.hideNameInput(); - this.categoryNameControl.setValue(''); - this.categoryNameControl.markAsUntouched(); + this.clearCategoryNameInput(); this._existingCategories = null; this.categoriesChange.emit(this.categories); } @@ -336,4 +337,9 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { private sortCategoriesList(categoriesList: Category[]) { categoriesList.sort((category1, category2) => category1.name.localeCompare(category2.name)); } + + private clearCategoryNameInput() { + this.categoryNameControl.setValue(''); + this.categoryNameControl.markAsUntouched(); + } } diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts index 1db41f65e8..b70f495557 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts @@ -388,9 +388,11 @@ describe('ContentMetadataComponent', () => { }); describe('Reseting', () => { - it('should reset changedProperties on reset click', async () => { + it('should reset properties on reset click', async () => { component.changedProperties = { properties: { 'property-key': 'updated-value' } }; component.hasMetadataChanged = true; + component.tagNameControlVisible = true; + component.categoryControlVisible = true; component.editable = true; const expectedNode = Object.assign({}, node, { name: 'some-modified-value' }); spyOn(nodesApiService, 'updateNode').and.returnValue(of(expectedNode)); @@ -403,6 +405,9 @@ describe('ContentMetadataComponent', () => { fixture.detectChanges(); expect(component.changedProperties).toEqual({}); expect(nodesApiService.updateNode).not.toHaveBeenCalled(); + expect(component.hasMetadataChanged).toBeFalse(); + expect(component.tagNameControlVisible).toBeFalse(); + expect(component.categoryControlVisible).toBeFalse(); }); }); diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts index 77e95350de..87ad4828eb 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts @@ -267,6 +267,8 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy { revertChanges() { this.changedProperties = {}; this.hasMetadataChanged = false; + this.tagNameControlVisible = false; + this.categoryControlVisible = false; } cancelChanges() { diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts index 9c68ef9634..67e8b9f28c 100644 --- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts +++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts @@ -211,7 +211,6 @@ describe('TagsCreatorComponent', () => { expect(getAddedTags().length).toBe(0); })); - it('should remove specific tag after clicking at remove icon', fakeAsync(() => { const tag1 = 'Tag 1'; const tag2 = 'Tag 2'; @@ -266,8 +265,9 @@ describe('TagsCreatorComponent', () => { expect(tagNameField.query(By.directive(MatFormField))).toBeTruthy(); }); - it('should be hidden after clicking button for hiding input', fakeAsync(() => { + it('should be hidden and cleared after clicking button for hiding input', fakeAsync(() => { component.tagNameControlVisible = true; + typeTag('test'); fixture.detectChanges(); tick(100); @@ -275,6 +275,12 @@ describe('TagsCreatorComponent', () => { const tagNameField = fixture.debugElement.query(By.css(tagNameFieldSelector)); expect(tagNameField).toBeFalsy(); + + component.tagNameControlVisible = true; + fixture.detectChanges(); + tick(100); + + expect(getNameInput().value).toBe(''); })); it('should input be autofocused', fakeAsync(() => { @@ -297,6 +303,25 @@ describe('TagsCreatorComponent', () => { expect(getNameInput()).toBe(document.activeElement as HTMLInputElement); })); + it('should be hidden and cleared on discard changes', fakeAsync(() => { + component.tagNameControlVisible = true; + component.tags = ['Passed tag 1', 'Passed tag 2']; + typeTag('test'); + fixture.detectChanges(); + tick(100); + expect(getNameInput().value).toBe('test'); + + component.tagNameControlVisible = false; + fixture.detectChanges(); + tick(100); + expect(getNameInput()).toBeFalsy(); + + component.tagNameControlVisible = true; + fixture.detectChanges(); + tick(100); + expect(getNameInput().value).toBe(''); + })); + describe('Errors', () => { function getFirstError(): string { const error = fixture.debugElement.query(By.directive(MatError)); diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts index ce70c6a361..63aec2c491 100644 --- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts +++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts @@ -108,6 +108,7 @@ export class TagsCreatorComponent implements OnInit, OnDestroy { }); } else { this._existingTagsPanelVisible = false; + this.clearTagNameInput(); } this.existingTagsPanelVisibilityChange.emit(this.existingTagsPanelVisible); } @@ -250,6 +251,7 @@ export class TagsCreatorComponent implements OnInit, OnDestroy { this._existingTagsPanelVisible = false; this.existingTagsPanelVisibilityChange.emit(this.existingTagsPanelVisible); this.tagNameControlVisibleChange.emit(this.tagNameControlVisible); + this.clearTagNameInput(); } /** @@ -260,9 +262,8 @@ export class TagsCreatorComponent implements OnInit, OnDestroy { if (!this._typing && !this.tagNameControl.invalid) { this.tags.push(this.tagNameControl.value.trim()); this.hideNameInput(); - this.tagNameControl.setValue(''); + this.clearTagNameInput(); this.checkScrollbarVisibility(); - this.tagNameControl.markAsUntouched(); this.tagsChange.emit(this.tags); } } @@ -425,4 +426,9 @@ export class TagsCreatorComponent implements OnInit, OnDestroy { private excludeAlreadyAddedTags(tags: TagEntry[]) { this._existingTags = tags.filter((tag) => !this.tags.includes(tag.entry.tag)); } + + private clearTagNameInput() { + this.tagNameControl.setValue(''); + this.tagNameControl.markAsUntouched(); + } }