diff --git a/apps/components-e2e/src/app/app.routing.module.ts b/apps/components-e2e/src/app/app.routing.module.ts index b334bfd56a..c8fa085234 100644 --- a/apps/components-e2e/src/app/app.routing.module.ts +++ b/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: () => diff --git a/apps/components-e2e/src/components/tag-list/tag-list.e2e.ts b/apps/components-e2e/src/components/tag-list/tag-list.e2e.ts new file mode 100644 index 0000000000..803d36a21c --- /dev/null +++ b/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...'); +}); diff --git a/apps/components-e2e/src/components/tag-list/tag-list.html b/apps/components-e2e/src/components/tag-list/tag-list.html new file mode 100644 index 0000000000..d477c56b0c --- /dev/null +++ b/apps/components-e2e/src/components/tag-list/tag-list.html @@ -0,0 +1,11 @@ + + Alpha + Beta + Gamma + Delta + Epsilon + Zeta + Eta + Theta + + diff --git a/apps/components-e2e/src/components/tag-list/tag-list.module.ts b/apps/components-e2e/src/components/tag-list/tag-list.module.ts new file mode 100644 index 0000000000..2937f79231 --- /dev/null +++ b/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 {} diff --git a/apps/components-e2e/src/components/tag-list/tag-list.ts b/apps/components-e2e/src/components/tag-list/tag-list.ts new file mode 100644 index 0000000000..6cac8528fb --- /dev/null +++ b/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 {} diff --git a/apps/dev/src/tag/tag-demo.component.ts b/apps/dev/src/tag/tag-demo.component.ts index bacfac2902..56f9e84952 100644 --- a/apps/dev/src/tag/tag-demo.component.ts +++ b/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'); } diff --git a/components/tag/src/tag-list/tag-list.html b/components/tag/src/tag-list/tag-list.html index 4ef640cc17..e62943bc03 100644 --- a/components/tag/src/tag-list/tag-list.html +++ b/components/tag/src/tag-list/tag-list.html @@ -6,7 +6,7 @@ *ngIf="_showAllTags" > -
+
{{ _hiddenTagCount }} More...
{ const moreBtn = fixture.debugElement.query( By.css('.dt-tag-list-more-btn'), ); + expect(moreBtn).not.toBe('0 More...'); expect(moreBtn).toBeNull(); }); diff --git a/components/tag/src/tag-list/tag-list.ts b/components/tag/src/tag-list/tag-list.ts index a45326fda6..7a1a1f14cb 100644 --- a/components/tag/src/tag-list/tag-list.ts +++ b/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. */