From 70289106161345cae037d2aca7efa2288bcfc65a Mon Sep 17 00:00:00 2001 From: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com> Date: Thu, 23 Feb 2023 22:15:36 +0100 Subject: [PATCH] =?UTF-8?q?[ACS-4670]=20Removed=20View=200=20More=20tags?= =?UTF-8?q?=20button=20when=20chip=20takes=20more=20than=20on=E2=80=A6=20(?= =?UTF-8?q?#8307)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ACS-4670 Removed View 0 More tags button when chip takes more than one line * ACS-4670 Removed async and import reduction --- .../lib/tag/tag-node-list.component.spec.ts | 83 ++++++++++++++----- .../src/lib/tag/tag-node-list.component.ts | 3 +- 2 files changed, 65 insertions(+), 21 deletions(-) diff --git a/lib/content-services/src/lib/tag/tag-node-list.component.spec.ts b/lib/content-services/src/lib/tag/tag-node-list.component.spec.ts index 0cc31e39f7..662c1bae9d 100644 --- a/lib/content-services/src/lib/tag/tag-node-list.component.spec.ts +++ b/lib/content-services/src/lib/tag/tag-node-list.component.spec.ts @@ -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 { + 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 { + 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); }); }); }); diff --git a/lib/content-services/src/lib/tag/tag-node-list.component.ts b/lib/content-services/src/lib/tag/tag-node-list.component.ts index d968cacbb4..6b68854f1b 100644 --- a/lib/content-services/src/lib/tag/tag-node-list.component.ts +++ b/lib/content-services/src/lib/tag/tag-node-list.component.ts @@ -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;