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

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

* ACS-4670 Removed async and import reduction

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<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');
+            expect(findViewMoreButton()).toBeNull();
-            const tagChips = element.querySelectorAll('.adf-tag-chips');
+            expect(findTagChips().length).toBe(3);
-            expect(viewMoreButton).toBeNull();
-            expect(tagChips.length).toBe(3);
         });
     });
 
     describe('Limit tags display', () => {
-        beforeEach(async () => {
+        async function renderTags(entries?: TagEntry[]): Promise<any> {
-            component.limitTagsDisplayed = true;
+            if (entries) {
-            element.style.maxWidth = '200px';
+                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');
+            expect(findViewMoreButton()).not.toBeNull();
-            const tagChips = element.querySelectorAll('.adf-tag-chips');
+            expect(findTagChips().length).toBe(component.tagsEntries.length);
-            expect(viewMoreButton).not.toBeNull();
-            expect(tagChips.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');
+            expect(findViewMoreButton()).toBeNull();
-            const tagChips = element.querySelectorAll('.adf-tag-chips');
+            expect(findTagChips().length).toBe(3);
-            expect(viewMoreButton).toBeNull();
-            expect(tagChips.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 viewMoreButton = findViewMoreButton();
-            let tagChips = element.querySelectorAll('.adf-tag-chips');
             viewMoreButton.click();
             fixture.detectChanges();
             await fixture.whenStable();
 
-            viewMoreButton = element.querySelector('.adf-view-more-button');
+            viewMoreButton = findViewMoreButton();
-            tagChips = element.querySelectorAll('.adf-tag-chips');
             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);
         });
     });
 });

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;