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

[ACS-4670] Removed View 0 More tags button when chip takes more than on… (#8307)

Browse Source 
* ACS-4670 Removed View 0 More tags button when chip takes more than one line

* ACS-4670 Removed async and import reduction
This commit is contained in:
AleksanderSklorz
2023-02-23 22:15:36 +01:00
committed by GitHub
parent d26593e4d8
commit 7028910616
2 changed files with 65 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
lib/content-services/src/lib/tag/tag-node-list.component.spec.ts
View File

@@ -22,6 +22,7 @@ import { TagService } from './services/tag.service';
import { of } from 'rxjs';
import { ContentTestingModule } from '../testing/content.testing.module';
import { TranslateModule } from '@ngx-translate/core';
import { TagEntry } from '@alfresco/js-api';
describe('TagNodeList', () => {
@@ -53,6 +54,14 @@ describe('TagNodeList', () => {
let element: HTMLElement;
let tagService: TagService;
function findViewMoreButton(): HTMLButtonElement {
return element.querySelector('.adf-view-more-button');
}
function findTagChips(): NodeListOf<Element> {
return element.querySelectorAll('.adf-tag-chips');
}
setupTestBed({
imports: [
TranslateModule.forRoot(),
@@ -128,60 +137,94 @@ describe('TagNodeList', () => {
fixture.detectChanges();
await fixture.whenStable();
const viewMoreButton = element.querySelector('.adf-view-more-button');
const tagChips = element.querySelectorAll('.adf-tag-chips');
expect(viewMoreButton).toBeNull();
expect(tagChips.length).toBe(3);
expect(findViewMoreButton()).toBeNull();
expect(findTagChips().length).toBe(3);
});
});
describe('Limit tags display', () => {
beforeEach(async () => {
component.limitTagsDisplayed = true;
element.style.maxWidth = '200px';
async function renderTags(entries?: TagEntry[]): Promise<any> {
if (entries) {
dataTag.list.entries = entries;
}
component.tagsEntries = dataTag.list.entries;
fixture.detectChanges();
await fixture.whenStable();
}
beforeEach(() => {
component.limitTagsDisplayed = true;
element.style.maxWidth = '200px';
});
it('should render view more button when limiting is enabled', async () => {
await renderTags();
component.ngOnChanges();
fixture.detectChanges();
await fixture.whenStable();
const viewMoreButton = element.querySelector('.adf-view-more-button');
const tagChips = element.querySelectorAll('.adf-tag-chips');
expect(viewMoreButton).not.toBeNull();
expect(tagChips.length).toBe(component.tagsEntries.length);
expect(findViewMoreButton()).not.toBeNull();
expect(findTagChips().length).toBe(component.tagsEntries.length);
});
it('should not render view more button when limiting is enabled and all tags fits into container', async () => {
await renderTags();
element.style.maxWidth = '800px';
component.ngOnChanges();
fixture.detectChanges();
await fixture.whenStable();
const viewMoreButton = element.querySelector('.adf-view-more-button');
const tagChips = element.querySelectorAll('.adf-tag-chips');
expect(viewMoreButton).toBeNull();
expect(tagChips.length).toBe(3);
expect(findViewMoreButton()).toBeNull();
expect(findTagChips().length).toBe(3);
});
it('should display all tags when view more button is clicked', async () => {
await renderTags();
component.ngOnChanges();
fixture.detectChanges();
await fixture.whenStable();
let viewMoreButton: HTMLButtonElement = element.querySelector('.adf-view-more-button');
let tagChips = element.querySelectorAll('.adf-tag-chips');
let viewMoreButton = findViewMoreButton();
viewMoreButton.click();
fixture.detectChanges();
await fixture.whenStable();
viewMoreButton = element.querySelector('.adf-view-more-button');
tagChips = element.querySelectorAll('.adf-tag-chips');
viewMoreButton = findViewMoreButton();
expect(viewMoreButton).toBeNull();
expect(tagChips.length).toBe(3);
expect(findTagChips().length).toBe(3);
});
it('should not render view more button when tag takes more than one line and there are no more tags', async () => {
await renderTags([{
entry: {
tag: 'VeryLongTag VeryLongTag VeryLongTag VeryLongTag VeryLongTag VeryLongTag VeryLongTag VeryLongTag',
id: '0ee933fa-57fc-4587-8a77-b787e814f1d2'
}
}]);
component.ngOnChanges();
fixture.detectChanges();
await fixture.whenStable();
expect(findViewMoreButton()).toBeNull();
expect(findTagChips().length).toBe(component.tagsEntries.length);
});
it('should render view more button when tag takes more than one line and there are more tags', async () => {
await renderTags([{
entry: {
tag: 'VeryLongTag VeryLongTag VeryLongTag VeryLongTag VeryLongTag VeryLongTag VeryLongTag VeryLongTag',
id: '0ee933fa-57fc-4587-8a77-b787e814f1d2'
}
}, {
entry: {
tag: 'Some other tag',
id: '0ee933fa-57fc-4587-8a77-b787e814f1d3'
}
}]);
component.ngOnChanges();
fixture.detectChanges();
await fixture.whenStable();
expect(findViewMoreButton()).not.toBeNull();
expect(findTagChips().length).toBe(component.tagsEntries.length);
});
});
});

3
lib/content-services/src/lib/tag/tag-node-list.component.ts
View File

@@ -132,7 +132,8 @@ export class TagNodeListComponent implements OnChanges, OnDestroy, OnInit {
this.columnFlexDirection = tagsToDisplay === 1 && (containerWidth < (this.tagChips.get(0)._elementRef.nativeElement.offsetWidth + viewMoreBtnWidth));
this.undisplayedTagsCount = this.tagsEntries.length - tagsToDisplay;
this.tagsEntries = this.tagsEntries.slice(0, tagsToDisplay);
} else {
}
if (!this.undisplayedTagsCount) {
this.limitTagsDisplayed = false;
}
this.calculationsDone = true;