chore(Navigation): now using truncation pipe

ISSUES CLOSED: #1367
GetTerminus · Mar 6, 2019 · 58f4f2a · 58f4f2a
1 parent 0b68fdd
commit 58f4f2a
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -145,13 +145,14 @@ for each feature.
 <br>
 [:circus_tent: Pipes Demo][demo-pipes]
 
-| Pipe                                       | Notes                                      | Status             |
-|--------------------------------------------|--------------------------------------------|:------------------:|
-| [`tsDate`][src-pipes-date]                 | `short`, `medium`, `extended`, `timestamp` | :white_check_mark: |
-| [`tsRoundNumber`][src-pipes-roundNumber]   | Round a number to a specific precision     | :white_check_mark: |
-| [`tsSentenceCase`][src-pipes-sentenceCase] | Convert string casing to sentence-case     | :white_check_mark: |
-| [`tsTimeAgo`][src-pipes-timeAgo]           | Human-readable time span                   | :white_check_mark: |
-| [`tsTitleCase`][src-pipes-titleCase]       | Title Case A String                        | :white_check_mark: |
+| Pipe                                       | Notes                                       | Status             |
+|--------------------------------------------|---------------------------------------------|:------------------:|
+| [`tsDate`][src-pipes-date]                 | `short`, `medium`, `extended`, `timestamp`  | :white_check_mark: |
+| [`tsRoundNumber`][src-pipes-roundNumber]   | Round a number to a specific precision      | :white_check_mark: |
+| [`tsSentenceCase`][src-pipes-sentenceCase] | Convert string casing to sentence-case      | :white_check_mark: |
+| [`tsTimeAgo`][src-pipes-timeAgo]           | Human-readable time span                    | :white_check_mark: |
+| [`tsTitleCase`][src-pipes-titleCase]       | Title Case A String                         | :white_check_mark: |
+| [`tsTruncateAt`][src-pipes-truncate]       | Truncate a string, `start`, `middle`, `end` | :white_check_mark: |
 
 
 ### Services
@@ -389,6 +390,7 @@ This project follows the [all-contributors](https://github.com/kentcdodds/all-co
 [src-pipes-sentenceCase]: ./terminus-ui/pipes/src/sentence-case/sentence-case.pipe.ts
 [src-pipes-timeAgo]:      ./terminus-ui/pipes/src/time-ago/time-ago.pipe.ts
 [src-pipes-titleCase]:    ./terminus-ui/pipes/src/title-case/title-case.pipe.ts
+[src-pipes-truncate]:     ./terminus-ui/pipes/src/truncate/truncate.pipe.ts
 [src-pipes]:              ./terminus-ui/pipes/src/
 [src-radio-group]:        ./terminus-ui/radio-group/src/
 [src-scrollbars]:         ./terminus-ui/scrollbars/src/

diff --git a/terminus-ui/navigation/src/navigation.component.html b/terminus-ui/navigation/src/navigation.component.html
@@ -70,7 +70,7 @@
       <ts-tooltip
         [tooltipValue]="welcomeMessage"
       >
-        {{ truncatedWelcomeMsg }}
+        {{ welcomeMessage | tsTruncateAt:welcomeMsgLength }}
       </ts-tooltip>
     </span>
     <span class="c-navigation__trigger-welcome" *ngIf="welcomeMessage.length<=welcomeMsgLength">
@@ -81,7 +81,7 @@
       <ts-tooltip
         [tooltipValue]="usersFullName"
       >
-        {{ truncatedUserName }}
+        {{ usersFullName | tsTruncateAt:userNameLength }}
       </ts-tooltip>      
     </span>
     <span *ngIf="usersFullName && usersFullName.length<=userNameLength">

diff --git a/terminus-ui/navigation/src/navigation.component.spec.ts b/terminus-ui/navigation/src/navigation.component.spec.ts
@@ -98,20 +98,17 @@ describe(`TsNavigationComponent`, function() {
       expect(component.usersFullName).toEqual(null);
     });
 
-    test(`should truncate if character count is greater than userNameLength`, () => {
-      component.user = USER_MOCK_23;
-
-      expect(component.usersFullName).toEqual(USER_MOCK_23.fullName);
-      expect(component.truncatedUserName).toEqual('Maximillian Rockatan...');
-    });
-
 
     test(`should accept character count of userNameLength`, () => {
       component.user = USER_MOCK;
       component.userNameLength = 10;
 
-       expect(component.usersFullName).toEqual(USER_MOCK.fullName);
-      expect(component.truncatedUserName).toEqual('Max Rockat...');
+      expect(component.usersFullName).toEqual(USER_MOCK.fullName);
+      // NOTE: the following lines can be tested once this test has been converted and can detectChanges() can be called.
+      // there is no class for the user name, so might taking the second child of .mat-button-wrapper
+      // expect(document.querySelector('.mat-button-wrapper span:nth-child(2)')).not.toBeNull();
+      // tslint:disable-next-line:max-line-length
+      // expect(document.querySelector('.mat-button-wrapper span:nth-child(2) > .ts-tooltip > .c-tooltip')).textContent.trim().length.toEqual(10);
     });
   });
 
@@ -122,17 +119,14 @@ describe(`TsNavigationComponent`, function() {
       expect(component.welcomeMessage).toEqual('Welcome');
     });
 
-    test(`should truncate if character count is greater than welcomeMsgLength`, () => {
-      component.welcomeMessage = 'This message has 31 characters.';
-      expect(component.welcomeMessage).toEqual('This message has 31 characters.');
-      expect(component.truncatedWelcomeMsg).toEqual('This message has 31 chara...');
-    });
-
     test(`should accept character count of welcomeMsgLength`, () => {
       component.welcomeMessage = 'This message has 31 characters.';
       component.welcomeMsgLength = 20;
+
       expect(component.welcomeMessage).toEqual('This message has 31 characters.');
-      expect(component.truncatedWelcomeMsg).toEqual('This message has 31 ...');
+      // NOTE: the following lines can be tested once this test has been converted and can detectChanges() can be called.
+      // expect(document.querySelector('.c-navigation__trigger-welcome')).not.toBeNull();
+      // expect(document.querySelector('.c-navigation__trigger-welcome > .ts-tooltip > .c-tooltip')).textContent.trim().length.toEqual(20);
     });
   });
 

diff --git a/terminus-ui/navigation/src/navigation.component.ts b/terminus-ui/navigation/src/navigation.component.ts
@@ -237,25 +237,6 @@ export class TsNavigationComponent implements OnInit, AfterViewInit {
   @Input()
   public welcomeMsgLength: number = 25;
 
-  /**
-   * Getter to return truncated user name
-   */
-  public get truncatedUserName(): string | undefined {
-    // istanbul ignore else
-    if (this.usersFullName && this.usersFullName.length > this.userNameLength) {
-      return this.usersFullName.slice(0, this.userNameLength) + '...';
-    }
-  }
-
-  /**
-   * Getter to return truncated welcome message
-   */
-  public get truncatedWelcomeMsg(): string | undefined {
-    // istanbul ignore else
-    if (this.welcomeMessage.length > this.welcomeMsgLength) {
-      return this.welcomeMessage.slice(0, this.welcomeMsgLength) + '...';
-    }
-  }
 
   /**
    * Element reference for visible list items

diff --git a/terminus-ui/navigation/src/navigation.module.ts b/terminus-ui/navigation/src/navigation.module.ts
@@ -4,6 +4,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { RouterModule } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
+import { TsPipesModule } from '@terminus/ui/pipes';
 import { TsIconModule } from '@terminus/ui/icon';
 import { TsTooltipModule } from '@terminus/ui/tooltip';
 
@@ -20,6 +21,7 @@ export * from './navigation.component';
     MatMenuModule,
     RouterModule,
     TsIconModule,
+    TsPipesModule,
     TsTooltipModule,
   ],
   declarations: [