inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-5226] Make Categories & Tags View Details Edit consistent (#8826)

Browse Source 
* [ACS-5226] hide & clear tags input

* [ACS-5226] added unit test for reseting properties
This commit is contained in:
Mykyta Maliarchuk 2023-08-17 17:54:24 +02:00 committed by GitHub
parent f8d587bc2e
commit 3e56b9a4cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 59 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts
View File

@ -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', () => {

10
lib/content-services/src/lib/category/categories-management/categories-management.component.ts
View File

@ -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();
}
}

7
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts
View File

@ -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();
});
});

2
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts
View File

@ -267,6 +267,8 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
revertChanges() {
this.changedProperties = {};
this.hasMetadataChanged = false;
this.tagNameControlVisible = false;
this.categoryControlVisible = false;
}
cancelChanges() {

29
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts
View File

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

10
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts
View File

@ -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();
}
}