fix(tag-list): Fixes bug where more button displayed '0 More...' when…

… no tags were hidden.

apps/components-e2e/src/app/app.routing.module.ts

@@ -152,6 +152,13 @@ export const routes: Routes = [
         module => module.DtE2ETabsModule,
       ),
   },
+  {
+    path: 'tag/tag-list',
+    loadChildren: () =>
+      import('../components/tag-list/tag-list.module').then(
+        module => module.DtE2ETagListModule,
+      ),
+  },
   {
     path: 'tile',
     loadChildren: () =>

apps/components-e2e/src/components/tag-list/tag-list.e2e.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Selector } from 'testcafe';
+import { waitForAngular } from '../../utils';
+
+const tagList = Selector('#tagList');
+
+fixture
+  .only('Tag List')
+  .page('http://localhost:4200/tag/tag-list')
+  .beforeEach(async (testController: TestController) => {
+    await testController.resizeWindow(1200, 800);
+    await waitForAngular();
+  });
+
+test("should not display '0 More...'", async (testController: TestController) => {
+  await testController.expect(tagList.textContent).notContains('0 More...');
+});

apps/components-e2e/src/components/tag-list/tag-list.html

@@ -0,0 +1,11 @@
+<dt-tag-list id="tagList">
+  <dt-tag>Alpha</dt-tag>
+  <dt-tag>Beta</dt-tag>
+  <dt-tag>Gamma</dt-tag>
+  <dt-tag>Delta</dt-tag>
+  <dt-tag>Epsilon</dt-tag>
+  <dt-tag>Zeta</dt-tag>
+  <dt-tag>Eta</dt-tag>
+  <dt-tag>Theta</dt-tag>
+  <dt-tag-add></dt-tag-add>
+</dt-tag-list>

apps/components-e2e/src/components/tag-list/tag-list.module.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { Route, RouterModule } from '@angular/router';
+import { DtTagModule } from '@dynatrace/barista-components/tag';
+import { DtE2ETagList } from './tag-list';
+
+const routes: Route[] = [{ path: '', component: DtE2ETagList }];
+
+@NgModule({
+  declarations: [DtE2ETagList],
+  imports: [CommonModule, RouterModule.forChild(routes), DtTagModule],
+  exports: [],
+  providers: [],
+})
+export class DtE2ETagListModule {}

apps/components-e2e/src/components/tag-list/tag-list.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'dt-e2e-tag-list',
+  templateUrl: 'tag-list.html',
+})
+export class DtE2ETagList {}

apps/dev/src/tag/tag-demo.component.ts

@@ -42,7 +42,18 @@ export class TagDemo implements OnInit {
       .add('KitKat')
       .add('Beer')
       .add('Raphaelo')
-      .add('Bean')
+      .add('Bean1')
+      .add('Bean2')
+      .add('Bean3')
+      .add('Bean4')
+      .add('Bean5')
+      .add('Bean6')
+      .add('Bean7')
+      .add('Bean8')
+      .add('Bean9')
+      .add('Bean12')
+      .add('Bean23')
+      .add('Bean34')
       .add('Pine');
   }
 

components/tag/src/tag-list/tag-list.html

@@ -6,7 +6,7 @@
       *ngIf="_showAllTags"
     ></ng-template>
   </div>
-  <div class="dt-tag-list-more-btn" *ngIf="!_isOneLine && !_showAllTags">
+  <div class="dt-tag-list-more-btn" *ngIf="_toDisplayMoreButton()">
     <a (click)="_expand()" class="dt-link">{{ _hiddenTagCount }} More...</a>
   </div>
   <ng-template

components/tag/src/tag-list/tag-list.spec.ts

@@ -84,6 +84,7 @@ describe('DtTagList', () => {
       const moreBtn = fixture.debugElement.query(
         By.css('.dt-tag-list-more-btn'),
       );
+      expect(moreBtn).not.toBe('0 More...');
       expect(moreBtn).toBeNull();
     });
 

components/tag/src/tag-list/tag-list.ts

@@ -196,6 +196,13 @@ export class DtTagList implements AfterContentInit, OnDestroy {
     });
     this._tagAddSubscriptions = [];
   }
+
+  /**
+   * @internal evaluates whether to display the x more button
+   */
+  _toDisplayMoreButton(): boolean {
+    return !this._isOneLine && !this._showAllTags && this._hiddenTagCount > 0;
+  }
 }
 
 /** Returns the width of a directive by calculating the last visible elements and the directives position. */