From 7f7a20ccba47d6bd12ae94a27f928e01ae6bd7aa Mon Sep 17 00:00:00 2001
From: "BLACKBAUD\\Trevor.Burch" <Trevor.Burch@blackbaud.com>
Date: Tue, 4 Sep 2018 15:02:45 -0400
Subject: [PATCH 1/3] Added a11y attributes for text expand

---
 .../fixtures/text-expand.component.fixture.ts |  7 +-
 .../text-expand/text-expand.component.html    | 12 ++-
 .../text-expand/text-expand.component.spec.ts | 89 ++++++++++++-------
 .../text-expand/text-expand.component.ts      |  7 ++
 4 files changed, 78 insertions(+), 37 deletions(-)

diff --git a/src/modules/text-expand/fixtures/text-expand.component.fixture.ts b/src/modules/text-expand/fixtures/text-expand.component.fixture.ts
index a8fc01981..14539ed17 100644
--- a/src/modules/text-expand/fixtures/text-expand.component.fixture.ts
+++ b/src/modules/text-expand/fixtures/text-expand.component.fixture.ts
@@ -1,11 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { SkyTextExpandComponent } from '../text-expand.component';
 
 @Component({
   selector: 'sky-text-expand-demo',
   templateUrl: './text-expand.component.fixture.html'
 })
 export class TextExpandTestComponent {
-  // tslint:disable-next-line
+
+  @ViewChild(SkyTextExpandComponent)
+  public textExpand: SkyTextExpandComponent;
   public text: string;
   public maxLength: number;
   public truncateNewlines: boolean = true;
diff --git a/src/modules/text-expand/text-expand.component.html b/src/modules/text-expand/text-expand.component.html
index fdddbf07a..94d7a7470 100644
--- a/src/modules/text-expand/text-expand.component.html
+++ b/src/modules/text-expand/text-expand.component.html
@@ -2,7 +2,15 @@
   class="sky-text-expand-container"
   (transitionend)="animationEnd()"
    #container>
-  <span class="sky-text-expand-text" #text></span>
+  <span class="sky-text-expand-text" [id]="contentSectionId" #text></span>
   <span class="sky-text-expand-ellipsis" *ngIf="!isExpanded && expandable">... </span>
-  <button type="button" class="sky-btn sky-btn-link-inline sky-text-expand-see-more" *ngIf="expandable" (click)="textExpand()">{{buttonText}}</button>
+  <button *ngIf="expandable"
+    type="button"
+    class="sky-btn sky-btn-link-inline sky-text-expand-see-more"
+    [attr.aria-expanded]="isExpanded"
+    [attr.aria-controls]="contentSectionId"
+    (click)="textExpand()"
+  >
+    {{buttonText}}
+  </button>
 </div>
diff --git a/src/modules/text-expand/text-expand.component.spec.ts b/src/modules/text-expand/text-expand.component.spec.ts
index 0b9c165cf..ef629bcfe 100644
--- a/src/modules/text-expand/text-expand.component.spec.ts
+++ b/src/modules/text-expand/text-expand.component.spec.ts
@@ -1,7 +1,8 @@
 import {
   TestBed,
   inject,
-  async
+  fakeAsync,
+  tick
 } from '@angular/core/testing';
 
 import { BrowserModule } from '@angular/platform-browser';
@@ -63,6 +64,31 @@ describe('Text expand component', () => {
   );
 
   describe('basic behaviors', () => {
+
+    it('should have necessary aria properties', fakeAsync(() => {
+      let fixture = TestBed.createComponent(TextExpandTestComponent);
+      let cmp = fixture.componentInstance as TextExpandTestComponent;
+      let el = fixture.nativeElement as HTMLElement;
+
+      // tslint:disable-next-line
+      cmp.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec.';
+
+      fixture.detectChanges();
+      const buttonElem = <HTMLElement>el.querySelector('.sky-text-expand-see-more');
+
+      expect(buttonElem.getAttribute('aria-expanded')).toBe('false');
+      expect(buttonElem.getAttribute('aria-controls')).toBe(cmp.textExpand.contentSectionId);
+
+      buttonElem.click();
+      fixture.detectChanges();
+      tick(20);
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+
+      expect(buttonElem.getAttribute('aria-expanded')).toBe('true');
+    }));
+
     it('should not have see more button or ellipsis if text is short', () => {
       let fixture = TestBed.createComponent(TextExpandTestComponent);
       let cmp = fixture.componentInstance as TextExpandTestComponent;
@@ -231,7 +257,7 @@ describe('Text expand component', () => {
       expect(seeMoreButton.innerText.trim()).toBe(SkyResources.getString('text_expand_see_more'));
     });
 
-    it('should expand on click of the see more button', async(() => {
+    it('should expand on click of the see more button', fakeAsync(() => {
       let fixture = TestBed.createComponent(TextExpandTestComponent);
       let cmp = fixture.componentInstance as TextExpandTestComponent;
       let el = fixture.nativeElement as HTMLElement;
@@ -253,37 +279,34 @@ describe('Text expand component', () => {
 
       seeMoreButton.click();
       fixture.detectChanges();
-      fixture.whenStable().then(() => {
-        fixture.detectChanges();
-        fixture.whenStable().then(() => {
-          fixture.detectChanges();
-          ellipsis = el.querySelector('.sky-text-expand-ellipsis');
-          textArea = <HTMLElement>el.querySelector('.sky-text-expand-text');
-
-          expect(container.style.maxHeight).toBe('');
-          expect(seeMoreButton.innerText.trim())
-            .toBe(SkyResources.getString('text_expand_see_less'));
-          expect(ellipsis).toBeNull();
-          expect(textArea.innerText.trim()).toBe(expandedText);
-          seeMoreButton.click();
-          fixture.detectChanges();
-          fixture.whenStable().then(() => {
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
-              fixture.detectChanges();
-              ellipsis = el.querySelector('.sky-text-expand-ellipsis');
-              textArea = <HTMLElement>el.querySelector('.sky-text-expand-text');
-
-              expect(container.style.maxHeight).toBe('');
-              expect(seeMoreButton.innerText.trim())
-                .toBe(SkyResources.getString('text_expand_see_more'));
-              expect(ellipsis).not.toBeNull();
-              expect(textArea.innerText.trim()).toBe(collapsedText);
-            });
-          });
-        });
-      });
-    }), 300000);
+      tick(20);
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      ellipsis = el.querySelector('.sky-text-expand-ellipsis');
+      textArea = <HTMLElement>el.querySelector('.sky-text-expand-text');
+
+      expect(container.style.maxHeight).toBe('');
+      expect(seeMoreButton.innerText.trim())
+        .toBe(SkyResources.getString('text_expand_see_less'));
+      expect(ellipsis).toBeNull();
+      expect(textArea.innerText.trim()).toBe(expandedText);
+      seeMoreButton.click();
+      fixture.detectChanges();
+      tick(20);
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      ellipsis = el.querySelector('.sky-text-expand-ellipsis');
+      textArea = <HTMLElement>el.querySelector('.sky-text-expand-text');
+
+      expect(container.style.maxHeight).toBe('');
+      expect(seeMoreButton.innerText.trim())
+        .toBe(SkyResources.getString('text_expand_see_more'));
+      expect(ellipsis).not.toBeNull();
+      expect(textArea.innerText.trim()).toBe(collapsedText);
+
+    }));
 
     it('should render newlines if requested', () => {
       let fixture = TestBed.createComponent(TextExpandTestComponent);
diff --git a/src/modules/text-expand/text-expand.component.ts b/src/modules/text-expand/text-expand.component.ts
index 1b8cb8246..fb6b2ae9f 100644
--- a/src/modules/text-expand/text-expand.component.ts
+++ b/src/modules/text-expand/text-expand.component.ts
@@ -22,6 +22,11 @@ import {
   SkyTextExpandAdapterService
 } from './text-expand-adapter.service';
 
+/**
+ * Auto-incrementing integer used to generate unique ids for checkbox components.
+ */
+let nextId = 0;
+
 @Component({
   selector: 'sky-text-expand',
   templateUrl: './text-expand.component.html',
@@ -61,6 +66,8 @@ export class SkyTextExpandComponent implements AfterContentInit {
   public isExpanded: boolean = false;
   public expandable: boolean;
   public buttonText: string;
+  public contentSectionId: string = `sky-text-expand-content-${++nextId}`;
+
   private seeMoreText: string = this.resources.getString('text_expand_see_more');
   private seeLessText: string = this.resources.getString('text_expand_see_less');
   private textToShow: string;

From 4024fcfbb4b6439f09a5699fbcaaef7db2f133bf Mon Sep 17 00:00:00 2001
From: "BLACKBAUD\\Trevor.Burch" <Trevor.Burch@blackbaud.com>
Date: Wed, 5 Sep 2018 12:22:37 -0400
Subject: [PATCH 2/3] Added modal version of a11y and added a11y for text
 expand repeater

---
 .../text-expand-repeater.component.fixture.ts |  5 +++-
 .../text-expand-repeater.component.html       | 10 +++++--
 .../text-expand-repeater.component.spec.ts    | 29 ++++++++++++++++++-
 .../text-expand-repeater.component.ts         |  7 +++++
 .../text-expand/text-expand.component.html    |  5 ++--
 .../text-expand/text-expand.component.spec.ts | 11 +++++++
 .../text-expand/text-expand.component.ts      |  6 ++--
 7 files changed, 65 insertions(+), 8 deletions(-)

diff --git a/src/modules/text-expand-repeater/fixtures/text-expand-repeater.component.fixture.ts b/src/modules/text-expand-repeater/fixtures/text-expand-repeater.component.fixture.ts
index d8f18dd9f..05c1ec4d0 100644
--- a/src/modules/text-expand-repeater/fixtures/text-expand-repeater.component.fixture.ts
+++ b/src/modules/text-expand-repeater/fixtures/text-expand-repeater.component.fixture.ts
@@ -1,10 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { SkyTextExpandRepeaterComponent } from '../text-expand-repeater.component';
 
 @Component({
   selector: 'sky-text-expand-repeater-demo',
   templateUrl: './text-expand-repeater.component.fixture.html'
 })
 export class TextExpandRepeaterTestComponent {
+  @ViewChild(SkyTextExpandRepeaterComponent)
+  public textExpand: SkyTextExpandRepeaterComponent;
   public data: string[];
   public numItems: number;
 }
diff --git a/src/modules/text-expand-repeater/text-expand-repeater.component.html b/src/modules/text-expand-repeater/text-expand-repeater.component.html
index 3a1971d1f..4059fd114 100644
--- a/src/modules/text-expand-repeater/text-expand-repeater.component.html
+++ b/src/modules/text-expand-repeater/text-expand-repeater.component.html
@@ -1,10 +1,16 @@
 <div class="sky-text-expand-repeater">
-  <ul class="sky-text-expand-repeater-container" (transitionend)="animationEnd()" #container>
+  <ul class="sky-text-expand-repeater-container" [id]="contentSectionId" (transitionend)="animationEnd()" #container>
     <li *ngFor="let item of contentItems" class="sky-text-expand-repeater-item">
       {{item}}
     </li>
   </ul>
-  <button type="button" class="sky-btn sky-btn-link-inline sky-text-expand-repeater-see-more" *ngIf="expandable" (click)="repeaterExpand()">
+  <button *ngIf="expandable"
+    type="button"
+    class="sky-btn sky-btn-link-inline sky-text-expand-repeater-see-more"
+    [attr.aria-expanded]="isExpanded"
+    [attr.aria-controls]="contentSectionId"
+    (click)="repeaterExpand()"
+  >
     {{buttonText}}
   </button>
 </div>
diff --git a/src/modules/text-expand-repeater/text-expand-repeater.component.spec.ts b/src/modules/text-expand-repeater/text-expand-repeater.component.spec.ts
index a7bedc240..968bcd9d5 100644
--- a/src/modules/text-expand-repeater/text-expand-repeater.component.spec.ts
+++ b/src/modules/text-expand-repeater/text-expand-repeater.component.spec.ts
@@ -1,6 +1,8 @@
 import {
   TestBed,
-  async
+  async,
+  fakeAsync,
+  tick
 } from '@angular/core/testing';
 
 import { BrowserModule } from '@angular/platform-browser';
@@ -24,6 +26,31 @@ describe('Text expand repeater component', () => {
   });
 
   describe('basic behaviors', () => {
+    it('should have necessary aria properties', fakeAsync(() => {
+      let fixture = TestBed.createComponent(TextExpandRepeaterTestComponent);
+      let cmp = fixture.componentInstance as TextExpandRepeaterTestComponent;
+      let el = fixture.nativeElement as HTMLElement;
+
+      cmp.data = ['john', 'bob', 'hank'];
+      cmp.numItems = 2;
+
+      fixture.detectChanges();
+      const buttonElem = <HTMLElement>el.querySelector('.sky-text-expand-repeater-see-more');
+
+      expect(buttonElem.getAttribute('aria-expanded')).toBe('false');
+      expect(buttonElem.getAttribute('aria-controls')).toBe(cmp.textExpand.contentSectionId);
+
+      buttonElem.click();
+      fixture.detectChanges();
+      tick(20);
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+
+      expect(buttonElem.getAttribute('aria-expanded')).toBe('true');
+      expect(buttonElem.getAttribute('aria-controls')).toBe(cmp.textExpand.contentSectionId);
+    }));
+
     it('should not have see more button if data is less than or equal to max items', () => {
       let fixture = TestBed.createComponent(TextExpandRepeaterTestComponent);
       let cmp = fixture.componentInstance as TextExpandRepeaterTestComponent;
diff --git a/src/modules/text-expand-repeater/text-expand-repeater.component.ts b/src/modules/text-expand-repeater/text-expand-repeater.component.ts
index 43398129f..5fb2ead41 100644
--- a/src/modules/text-expand-repeater/text-expand-repeater.component.ts
+++ b/src/modules/text-expand-repeater/text-expand-repeater.component.ts
@@ -11,6 +11,12 @@ import {
 import {
   SkyResourcesService
 } from '../resources';
+
+/**
+ * Auto-incrementing integer used to generate unique ids for checkbox components.
+ */
+let nextId = 0;
+
 @Component({
   selector: 'sky-text-expand-repeater',
   templateUrl: './text-expand-repeater.component.html',
@@ -30,6 +36,7 @@ export class SkyTextExpandRepeaterComponent implements AfterViewInit {
   public buttonText: string;
   public contentItems: Array<any>;
   public expandable: boolean;
+  public contentSectionId: string = `sky-text-expand-repeater-content-${++nextId}`;
 
   private seeMoreText: string = this.resources.getString('text_expand_see_more');
   private seeLessText: string = this.resources.getString('text_expand_see_less');
diff --git a/src/modules/text-expand/text-expand.component.html b/src/modules/text-expand/text-expand.component.html
index 94d7a7470..54b76bebf 100644
--- a/src/modules/text-expand/text-expand.component.html
+++ b/src/modules/text-expand/text-expand.component.html
@@ -7,8 +7,9 @@
   <button *ngIf="expandable"
     type="button"
     class="sky-btn sky-btn-link-inline sky-text-expand-see-more"
-    [attr.aria-expanded]="isExpanded"
-    [attr.aria-controls]="contentSectionId"
+    [attr.aria-expanded]="isModal ? undefined : isExpanded"
+    [attr.aria-controls]="isModal ? undefined : contentSectionId"
+    [attr.aria-haspopup]="isModal ? 'dialog' : undefined"
     (click)="textExpand()"
   >
     {{buttonText}}
diff --git a/src/modules/text-expand/text-expand.component.spec.ts b/src/modules/text-expand/text-expand.component.spec.ts
index ef629bcfe..49ac39ca2 100644
--- a/src/modules/text-expand/text-expand.component.spec.ts
+++ b/src/modules/text-expand/text-expand.component.spec.ts
@@ -78,6 +78,7 @@ describe('Text expand component', () => {
 
       expect(buttonElem.getAttribute('aria-expanded')).toBe('false');
       expect(buttonElem.getAttribute('aria-controls')).toBe(cmp.textExpand.contentSectionId);
+      expect(buttonElem.getAttribute('aria-haspopup')).toBeNull();
 
       buttonElem.click();
       fixture.detectChanges();
@@ -87,6 +88,16 @@ describe('Text expand component', () => {
       fixture.detectChanges();
 
       expect(buttonElem.getAttribute('aria-expanded')).toBe('true');
+      expect(buttonElem.getAttribute('aria-controls')).toBe(cmp.textExpand.contentSectionId);
+      expect(buttonElem.getAttribute('aria-haspopup')).toBeNull();
+
+      // tslint:disable-next-line
+      cmp.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies';
+      fixture.detectChanges();
+
+      expect(buttonElem.getAttribute('aria-expanded')).toBeNull();
+      expect(buttonElem.getAttribute('aria-controls')).toBeNull();
+      expect(buttonElem.getAttribute('aria-haspopup')).toBe('dialog');
     }));
 
     it('should not have see more button or ellipsis if text is short', () => {
diff --git a/src/modules/text-expand/text-expand.component.ts b/src/modules/text-expand/text-expand.component.ts
index fb6b2ae9f..29ea091e5 100644
--- a/src/modules/text-expand/text-expand.component.ts
+++ b/src/modules/text-expand/text-expand.component.ts
@@ -67,6 +67,7 @@ export class SkyTextExpandComponent implements AfterContentInit {
   public expandable: boolean;
   public buttonText: string;
   public contentSectionId: string = `sky-text-expand-content-${++nextId}`;
+  public isModal: boolean;
 
   private seeMoreText: string = this.resources.getString('text_expand_see_more');
   private seeLessText: string = this.resources.getString('text_expand_see_less');
@@ -81,8 +82,7 @@ export class SkyTextExpandComponent implements AfterContentInit {
     private textExpandAdapter: SkyTextExpandAdapterService) { }
 
   public textExpand() {
-    if (this.newlineCount > this.maxExpandedNewlines
-      || this.expandedText.length > this.maxExpandedLength) {
+    if (this.isModal) {
       // Modal View
       /* istanbul ignore else */
       /* sanity check */
@@ -150,6 +150,8 @@ export class SkyTextExpandComponent implements AfterContentInit {
         this.buttonText = this.seeMoreText;
         this.isExpanded = false;
         this.expandable = true;
+        this.isModal = this.newlineCount > this.maxExpandedNewlines
+          || this.expandedText.length > this.maxExpandedLength;
       } else {
         this.expandable = false;
       }

From 78f838518824bae74d5c63d608fc52879cbfb15e Mon Sep 17 00:00:00 2001
From: "BLACKBAUD\\Trevor.Burch" <Trevor.Burch@blackbaud.com>
Date: Wed, 5 Sep 2018 15:34:15 -0400
Subject: [PATCH 3/3] Code review changes

---
 .../text-expand-repeater.component.spec.ts    | 127 ++++++----------
 .../text-expand-repeater.component.ts         |   2 +-
 .../text-expand/text-expand.component.spec.ts | 138 +++++++-----------
 .../text-expand/text-expand.component.ts      |   2 +-
 4 files changed, 101 insertions(+), 168 deletions(-)

diff --git a/src/modules/text-expand-repeater/text-expand-repeater.component.spec.ts b/src/modules/text-expand-repeater/text-expand-repeater.component.spec.ts
index 968bcd9d5..2136336a6 100644
--- a/src/modules/text-expand-repeater/text-expand-repeater.component.spec.ts
+++ b/src/modules/text-expand-repeater/text-expand-repeater.component.spec.ts
@@ -1,8 +1,8 @@
 import {
   TestBed,
-  async,
   fakeAsync,
-  tick
+  tick,
+  ComponentFixture
 } from '@angular/core/testing';
 
 import { BrowserModule } from '@angular/platform-browser';
@@ -13,6 +13,19 @@ import { SkyResources } from '../resources/resources';
 
 describe('Text expand repeater component', () => {
 
+  function clickTextExpandButton(buttonElem: HTMLElement, fixture: ComponentFixture<TextExpandRepeaterTestComponent>) {
+    buttonElem.click();
+    fixture.detectChanges();
+    tick(20);
+    fixture.detectChanges();
+    tick(500);
+    fixture.detectChanges();
+  }
+
+  let fixture: ComponentFixture<TextExpandRepeaterTestComponent>;
+  let cmp: TextExpandRepeaterTestComponent;
+  let el: HTMLElement;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [
@@ -23,14 +36,14 @@ describe('Text expand repeater component', () => {
         SkyTextExpandRepeaterModule
       ]
     });
+
+    fixture = TestBed.createComponent(TextExpandRepeaterTestComponent);
+    cmp = fixture.componentInstance as TextExpandRepeaterTestComponent;
+    el = fixture.nativeElement as HTMLElement;
   });
 
   describe('basic behaviors', () => {
     it('should have necessary aria properties', fakeAsync(() => {
-      let fixture = TestBed.createComponent(TextExpandRepeaterTestComponent);
-      let cmp = fixture.componentInstance as TextExpandRepeaterTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
-
       cmp.data = ['john', 'bob', 'hank'];
       cmp.numItems = 2;
 
@@ -40,22 +53,13 @@ describe('Text expand repeater component', () => {
       expect(buttonElem.getAttribute('aria-expanded')).toBe('false');
       expect(buttonElem.getAttribute('aria-controls')).toBe(cmp.textExpand.contentSectionId);
 
-      buttonElem.click();
-      fixture.detectChanges();
-      tick(20);
-      fixture.detectChanges();
-      tick(500);
-      fixture.detectChanges();
+      clickTextExpandButton(buttonElem, fixture);
 
       expect(buttonElem.getAttribute('aria-expanded')).toBe('true');
       expect(buttonElem.getAttribute('aria-controls')).toBe(cmp.textExpand.contentSectionId);
     }));
 
     it('should not have see more button if data is less than or equal to max items', () => {
-      let fixture = TestBed.createComponent(TextExpandRepeaterTestComponent);
-      let cmp = fixture.componentInstance as TextExpandRepeaterTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
-
       cmp.data = ['john', 'bob'];
       cmp.numItems = 2;
 
@@ -66,10 +70,6 @@ describe('Text expand repeater component', () => {
     });
 
     it('should have see more button if data is more than max items', () => {
-      let fixture = TestBed.createComponent(TextExpandRepeaterTestComponent);
-      let cmp = fixture.componentInstance as TextExpandRepeaterTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
-
       cmp.data = ['john', 'bob', 'hank'];
       cmp.numItems = 2;
 
@@ -80,10 +80,6 @@ describe('Text expand repeater component', () => {
     });
 
     it('should not have see more button or data if long data is changed to undefined', () => {
-      let fixture = TestBed.createComponent(TextExpandRepeaterTestComponent);
-      let cmp = fixture.componentInstance as TextExpandRepeaterTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
-
       cmp.data = ['john', 'bob', 'hank'];
       cmp.numItems = 2;
 
@@ -105,10 +101,6 @@ describe('Text expand repeater component', () => {
     });
 
     it('should have see more button or data if long data is changed to undefined and back', () => {
-      let fixture = TestBed.createComponent(TextExpandRepeaterTestComponent);
-      let cmp = fixture.componentInstance as TextExpandRepeaterTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
-
       cmp.data = ['john', 'bob', 'hank'];
       cmp.numItems = 2;
 
@@ -128,7 +120,7 @@ describe('Text expand repeater component', () => {
       seeMoreButton = el.querySelector('.sky-text-expand-repeater-see-more');
       expect(seeMoreButton).toBeNull();
 
-       cmp.data = ['john', 'bob', 'hank'];
+      cmp.data = ['john', 'bob', 'hank'];
 
       fixture.detectChanges();
       seeMoreButton = el.querySelector('.sky-text-expand-repeater-see-more');
@@ -139,10 +131,6 @@ describe('Text expand repeater component', () => {
     });
 
     it('should not have see more button or data if long data is changed to shorter data', () => {
-      let fixture = TestBed.createComponent(TextExpandRepeaterTestComponent);
-      let cmp = fixture.componentInstance as TextExpandRepeaterTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
-
       cmp.data = ['john', 'bob', 'hank'];
       cmp.numItems = 2;
 
@@ -163,12 +151,9 @@ describe('Text expand repeater component', () => {
       expect(seeMoreButton).toBeNull();
     });
 
-    it('should expand and collapse correctly', async(() => {
-      let fixture = TestBed.createComponent(TextExpandRepeaterTestComponent);
-      let cmp = fixture.componentInstance as TextExpandRepeaterTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
+    it('should expand and collapse correctly', fakeAsync(() => {
       let container: HTMLElement
-        = <HTMLElement> document.querySelector('.sky-text-expand-repeater-container');
+        = <HTMLElement>document.querySelector('.sky-text-expand-repeater-container');
 
       cmp.data = ['john', 'bob', 'hank'];
       cmp.numItems = 2;
@@ -187,49 +172,33 @@ describe('Text expand repeater component', () => {
       expect(shownItems.length).toBe(2);
       expect(hiddenItems.length).toBe(1);
 
-      seeMoreButton.click();
-      fixture.detectChanges();
+      clickTextExpandButton(seeMoreButton, fixture);
 
-      fixture.whenStable().then(() => {
-        fixture.detectChanges();
-        fixture.whenStable().then(() => {
-          fixture.detectChanges();
-          shownItems =
-            el.querySelectorAll(shownItemsSelector);
-          hiddenItems =
-            el.querySelectorAll(hiddenItemsSelector);
-          seeMoreButton = el.querySelector('.sky-text-expand-repeater-see-more');
-          expect(container.style.maxHeight).toBe('');
-          expect(seeMoreButton.innerText.trim())
-            .toBe(SkyResources.getString('text_expand_see_less'));
-          expect(shownItems.length).toBe(3);
-          expect(hiddenItems.length).toBe(0);
-
-          seeMoreButton.click();
-          fixture.detectChanges();
-          fixture.whenStable().then(() => {
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
-              fixture.detectChanges();
-              shownItems =
-                el.querySelectorAll(shownItemsSelector);
-              hiddenItems = el.querySelectorAll(hiddenItemsSelector);
-              seeMoreButton = el.querySelector('.sky-text-expand-repeater-see-more');
-              expect(container.style.minHeight).toBe('');
-              expect(seeMoreButton.innerText.trim())
-                .toBe(SkyResources.getString('text_expand_see_more'));
-              expect(shownItems.length).toBe(2);
-              expect(hiddenItems.length).toBe(1);
-            });
-          });
-        });
-      });
-    }), 300000);
-    it('should not display anything if no value is given for the text', () => {
-      let fixture = TestBed.createComponent(TextExpandRepeaterTestComponent);
-      let cmp = fixture.componentInstance as TextExpandRepeaterTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
+      shownItems =
+        el.querySelectorAll(shownItemsSelector);
+      hiddenItems =
+        el.querySelectorAll(hiddenItemsSelector);
+      seeMoreButton = el.querySelector('.sky-text-expand-repeater-see-more');
+      expect(container.style.maxHeight).toBe('');
+      expect(seeMoreButton.innerText.trim())
+        .toBe(SkyResources.getString('text_expand_see_less'));
+      expect(shownItems.length).toBe(3);
+      expect(hiddenItems.length).toBe(0);
+
+      clickTextExpandButton(seeMoreButton, fixture);
 
+      shownItems =
+        el.querySelectorAll(shownItemsSelector);
+      hiddenItems = el.querySelectorAll(hiddenItemsSelector);
+      seeMoreButton = el.querySelector('.sky-text-expand-repeater-see-more');
+      expect(container.style.minHeight).toBe('');
+      expect(seeMoreButton.innerText.trim())
+        .toBe(SkyResources.getString('text_expand_see_more'));
+      expect(shownItems.length).toBe(2);
+      expect(hiddenItems.length).toBe(1);
+    }));
+
+    it('should not display anything if no value is given for the text', () => {
       cmp.data = undefined;
       cmp.numItems = 2;
 
diff --git a/src/modules/text-expand-repeater/text-expand-repeater.component.ts b/src/modules/text-expand-repeater/text-expand-repeater.component.ts
index 5fb2ead41..2b205d91e 100644
--- a/src/modules/text-expand-repeater/text-expand-repeater.component.ts
+++ b/src/modules/text-expand-repeater/text-expand-repeater.component.ts
@@ -13,7 +13,7 @@ import {
 } from '../resources';
 
 /**
- * Auto-incrementing integer used to generate unique ids for checkbox components.
+ * Auto-incrementing integer used to generate unique ids for text expand repeater components.
  */
 let nextId = 0;
 
diff --git a/src/modules/text-expand/text-expand.component.spec.ts b/src/modules/text-expand/text-expand.component.spec.ts
index 49ac39ca2..deded59be 100644
--- a/src/modules/text-expand/text-expand.component.spec.ts
+++ b/src/modules/text-expand/text-expand.component.spec.ts
@@ -2,7 +2,8 @@ import {
   TestBed,
   inject,
   fakeAsync,
-  tick
+  tick,
+  ComponentFixture
 } from '@angular/core/testing';
 
 import { BrowserModule } from '@angular/platform-browser';
@@ -33,6 +34,28 @@ describe('Text expand component', () => {
     }
   };
 
+  // tslint:disable
+  const SHORT_TEXT = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu';
+  const SHORT_TEXT_WITH_NEWLINES = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\nAenean commodo ligula eget dolor. Aenean massa.\nCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu';
+  const LONG_TEXT = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec.';
+  const LONGER_TEXT = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec foo bar.';
+  const VERY_LONG_TEXT = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies';
+  const COLLAPSED_TEXT = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec';
+  // tslint:enable
+
+  function clickTextExpandButton(buttonElem: HTMLElement, fixture: ComponentFixture<TextExpandTestComponent>) {
+    buttonElem.click();
+    fixture.detectChanges();
+    tick(20);
+    fixture.detectChanges();
+    tick(500);
+    fixture.detectChanges();
+  }
+
+  let fixture: ComponentFixture<TextExpandTestComponent>;
+  let cmp: TextExpandTestComponent;
+  let el: HTMLElement;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [
@@ -48,6 +71,10 @@ describe('Text expand component', () => {
         { provide: SkyWindowRefService, useValue: mockWindowService }
       ]
     });
+
+    fixture = TestBed.createComponent(TextExpandTestComponent);
+    cmp = fixture.componentInstance as TextExpandTestComponent;
+    el = fixture.nativeElement as HTMLElement;
   });
 
   beforeEach(
@@ -66,12 +93,8 @@ describe('Text expand component', () => {
   describe('basic behaviors', () => {
 
     it('should have necessary aria properties', fakeAsync(() => {
-      let fixture = TestBed.createComponent(TextExpandTestComponent);
-      let cmp = fixture.componentInstance as TextExpandTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
-
       // tslint:disable-next-line
-      cmp.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec.';
+      cmp.text = LONG_TEXT;
 
       fixture.detectChanges();
       const buttonElem = <HTMLElement>el.querySelector('.sky-text-expand-see-more');
@@ -80,19 +103,14 @@ describe('Text expand component', () => {
       expect(buttonElem.getAttribute('aria-controls')).toBe(cmp.textExpand.contentSectionId);
       expect(buttonElem.getAttribute('aria-haspopup')).toBeNull();
 
-      buttonElem.click();
-      fixture.detectChanges();
-      tick(20);
-      fixture.detectChanges();
-      tick(500);
-      fixture.detectChanges();
+      clickTextExpandButton(buttonElem, fixture);
 
       expect(buttonElem.getAttribute('aria-expanded')).toBe('true');
       expect(buttonElem.getAttribute('aria-controls')).toBe(cmp.textExpand.contentSectionId);
       expect(buttonElem.getAttribute('aria-haspopup')).toBeNull();
 
       // tslint:disable-next-line
-      cmp.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies';
+      cmp.text = VERY_LONG_TEXT;
       fixture.detectChanges();
 
       expect(buttonElem.getAttribute('aria-expanded')).toBeNull();
@@ -101,12 +119,8 @@ describe('Text expand component', () => {
     }));
 
     it('should not have see more button or ellipsis if text is short', () => {
-      let fixture = TestBed.createComponent(TextExpandTestComponent);
-      let cmp = fixture.componentInstance as TextExpandTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
-
       // tslint:disable-next-line
-      cmp.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu';
+      cmp.text = SHORT_TEXT;
 
       fixture.detectChanges();
 
@@ -118,12 +132,8 @@ describe('Text expand component', () => {
 
     // tslint:disable-next-line
     it('should not have see more button or ellipsis if text is long but less than the set max length', () => {
-      let fixture = TestBed.createComponent(TextExpandTestComponent);
-      let cmp = fixture.componentInstance as TextExpandTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
-
       // tslint:disable-next-line
-      cmp.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec foo bar.';
+      cmp.text = LONGER_TEXT;
       cmp.maxLength = 400;
 
       fixture.detectChanges();
@@ -135,12 +145,8 @@ describe('Text expand component', () => {
     });
 
     it('should have the see more button and ellipsis if text is longer', () => {
-      let fixture = TestBed.createComponent(TextExpandTestComponent);
-      let cmp = fixture.componentInstance as TextExpandTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
-
       // tslint:disable-next-line
-      cmp.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec.';
+      cmp.text = LONG_TEXT;
 
       fixture.detectChanges();
       let ellipsis: any = el.querySelector('.sky-text-expand-ellipsis');
@@ -151,12 +157,8 @@ describe('Text expand component', () => {
     });
 
     it('should not have a see more button if changed from long text to undefined', () => {
-      let fixture = TestBed.createComponent(TextExpandTestComponent);
-      let cmp = fixture.componentInstance as TextExpandTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
-
       // tslint:disable-next-line
-      cmp.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec.';
+      cmp.text = LONG_TEXT;
 
       fixture.detectChanges();
       let ellipsis: any = el.querySelector('.sky-text-expand-ellipsis');
@@ -175,12 +177,8 @@ describe('Text expand component', () => {
     });
 
     it('should have a see more button if changed from long text to undefined and back', () => {
-      let fixture = TestBed.createComponent(TextExpandTestComponent);
-      let cmp = fixture.componentInstance as TextExpandTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
-
       // tslint:disable-next-line
-      cmp.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec.';
+      cmp.text = LONG_TEXT;
 
       fixture.detectChanges();
       let ellipsis: any = el.querySelector('.sky-text-expand-ellipsis');
@@ -198,7 +196,7 @@ describe('Text expand component', () => {
       expect(seeMoreButton).toBeNull();
 
       // tslint:disable-next-line
-      cmp.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec.';
+      cmp.text = LONG_TEXT;
 
       fixture.detectChanges();
       ellipsis = el.querySelector('.sky-text-expand-ellipsis');
@@ -209,12 +207,8 @@ describe('Text expand component', () => {
     });
 
     it('should not have a see more button if changed from long text to short text', () => {
-      let fixture = TestBed.createComponent(TextExpandTestComponent);
-      let cmp = fixture.componentInstance as TextExpandTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
-
       // tslint:disable-next-line
-      cmp.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec.';
+      cmp.text = LONG_TEXT;
 
       fixture.detectChanges();
       let ellipsis: any = el.querySelector('.sky-text-expand-ellipsis');
@@ -224,7 +218,7 @@ describe('Text expand component', () => {
       expect(seeMoreButton.innerText.trim()).toBe(SkyResources.getString('text_expand_see_more'));
 
       // tslint:disable-next-line
-      cmp.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu';
+      cmp.text = SHORT_TEXT;
 
       fixture.detectChanges();
       ellipsis = el.querySelector('.sky-text-expand-ellipsis');
@@ -234,10 +228,6 @@ describe('Text expand component', () => {
     });
 
     it('should not display anything if no value is given for the text', () => {
-      let fixture = TestBed.createComponent(TextExpandTestComponent);
-      let cmp = fixture.componentInstance as TextExpandTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
-
       // tslint:disable-next-line
       cmp.text = undefined;
 
@@ -252,12 +242,8 @@ describe('Text expand component', () => {
     });
 
     it('should have the see more button or ellipsis if text is short but has newlines', () => {
-      let fixture = TestBed.createComponent(TextExpandTestComponent);
-      let cmp = fixture.componentInstance as TextExpandTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
-
       // tslint:disable-next-line
-      cmp.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\nAenean commodo ligula eget dolor. Aenean massa.\nCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu';
+      cmp.text = SHORT_TEXT_WITH_NEWLINES;
 
       fixture.detectChanges();
 
@@ -269,14 +255,11 @@ describe('Text expand component', () => {
     });
 
     it('should expand on click of the see more button', fakeAsync(() => {
-      let fixture = TestBed.createComponent(TextExpandTestComponent);
-      let cmp = fixture.componentInstance as TextExpandTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
       // tslint:disable-next-line
-      let expandedText = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec.';
+      let expandedText = LONG_TEXT;
       cmp.text = expandedText;
       // tslint:disable-next-line
-      let collapsedText = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec';
+      let collapsedText = COLLAPSED_TEXT;
 
       fixture.detectChanges();
 
@@ -288,12 +271,8 @@ describe('Text expand component', () => {
       expect(seeMoreButton.innerText.trim()).toBe(SkyResources.getString('text_expand_see_more'));
       expect(textArea.innerText.trim()).toBe(collapsedText);
 
-      seeMoreButton.click();
-      fixture.detectChanges();
-      tick(20);
-      fixture.detectChanges();
-      tick(500);
-      fixture.detectChanges();
+      clickTextExpandButton(seeMoreButton, fixture);
+
       ellipsis = el.querySelector('.sky-text-expand-ellipsis');
       textArea = <HTMLElement>el.querySelector('.sky-text-expand-text');
 
@@ -302,12 +281,9 @@ describe('Text expand component', () => {
         .toBe(SkyResources.getString('text_expand_see_less'));
       expect(ellipsis).toBeNull();
       expect(textArea.innerText.trim()).toBe(expandedText);
-      seeMoreButton.click();
-      fixture.detectChanges();
-      tick(20);
-      fixture.detectChanges();
-      tick(500);
-      fixture.detectChanges();
+
+      clickTextExpandButton(seeMoreButton, fixture);
+
       ellipsis = el.querySelector('.sky-text-expand-ellipsis');
       textArea = <HTMLElement>el.querySelector('.sky-text-expand-text');
 
@@ -320,12 +296,8 @@ describe('Text expand component', () => {
     }));
 
     it('should render newlines if requested', () => {
-      let fixture = TestBed.createComponent(TextExpandTestComponent);
-      let cmp = fixture.componentInstance as TextExpandTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
-
       // tslint:disable-next-line
-      cmp.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\nAenean commodo ligula eget dolor. Aenean massa.\nCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu';
+      cmp.text = SHORT_TEXT_WITH_NEWLINES;
       cmp.truncateNewlines = false;
 
       fixture.detectChanges();
@@ -337,12 +309,8 @@ describe('Text expand component', () => {
     });
 
     it('should expand text when the maxLength property is set', () => {
-      let fixture = TestBed.createComponent(TextExpandTestComponent);
-      let cmp = fixture.componentInstance as TextExpandTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
-
       // tslint:disable-next-line
-      cmp.text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\nAenean commodo ligula eget dolor. Aenean massa.\nCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu';
+      cmp.text = SHORT_TEXT_WITH_NEWLINES;
       cmp.maxLength = 10;
 
       fixture.detectChanges();
@@ -360,15 +328,11 @@ describe('Text expand component', () => {
 
   describe('modal behaviors', () => {
     it('should open a modal when looking at very long text', () => {
-      let fixture = TestBed.createComponent(TextExpandTestComponent);
-      let cmp = fixture.componentInstance as TextExpandTestComponent;
-      let el = fixture.nativeElement as HTMLElement;
-
       // tslint:disable-next-line
-      let expandedText = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies';
+      let expandedText = VERY_LONG_TEXT;
       cmp.text = expandedText;
       // tslint:disable-next-line
-      let collapsedText = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec';
+      let collapsedText = COLLAPSED_TEXT;
 
       fixture.detectChanges();
 
diff --git a/src/modules/text-expand/text-expand.component.ts b/src/modules/text-expand/text-expand.component.ts
index 29ea091e5..ff9ec046d 100644
--- a/src/modules/text-expand/text-expand.component.ts
+++ b/src/modules/text-expand/text-expand.component.ts
@@ -23,7 +23,7 @@ import {
 } from './text-expand-adapter.service';
 
 /**
- * Auto-incrementing integer used to generate unique ids for checkbox components.
+ * Auto-incrementing integer used to generate unique ids for text expand components.
  */
 let nextId = 0;