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 @@
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..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,6 +1,8 @@
import {
TestBed,
- async
+ fakeAsync,
+ tick,
+ ComponentFixture
} from '@angular/core/testing';
import { BrowserModule } from '@angular/platform-browser';
@@ -11,6 +13,19 @@ import { SkyResources } from '../resources/resources';
describe('Text expand repeater component', () => {
+ function clickTextExpandButton(buttonElem: HTMLElement, fixture: ComponentFixture) {
+ buttonElem.click();
+ fixture.detectChanges();
+ tick(20);
+ fixture.detectChanges();
+ tick(500);
+ fixture.detectChanges();
+ }
+
+ let fixture: ComponentFixture;
+ let cmp: TextExpandRepeaterTestComponent;
+ let el: HTMLElement;
+
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
@@ -21,14 +36,30 @@ 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 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;
+ it('should have necessary aria properties', fakeAsync(() => {
+ cmp.data = ['john', 'bob', 'hank'];
+ cmp.numItems = 2;
+
+ fixture.detectChanges();
+ const buttonElem = el.querySelector('.sky-text-expand-repeater-see-more');
+ expect(buttonElem.getAttribute('aria-expanded')).toBe('false');
+ expect(buttonElem.getAttribute('aria-controls')).toBe(cmp.textExpand.contentSectionId);
+
+ 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', () => {
cmp.data = ['john', 'bob'];
cmp.numItems = 2;
@@ -39,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;
@@ -53,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;
@@ -78,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;
@@ -101,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');
@@ -112,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;
@@ -136,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
- = document.querySelector('.sky-text-expand-repeater-container');
+ = document.querySelector('.sky-text-expand-repeater-container');
cmp.data = ['john', 'bob', 'hank'];
cmp.numItems = 2;
@@ -160,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 43398129f..2b205d91e 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 text expand repeater 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;
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/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..54b76bebf 100644
--- a/src/modules/text-expand/text-expand.component.html
+++ b/src/modules/text-expand/text-expand.component.html
@@ -2,7 +2,16 @@
class="sky-text-expand-container"
(transitionend)="animationEnd()"
#container>
-
+
...
-
+
diff --git a/src/modules/text-expand/text-expand.component.spec.ts b/src/modules/text-expand/text-expand.component.spec.ts
index 0b9c165cf..deded59be 100644
--- a/src/modules/text-expand/text-expand.component.spec.ts
+++ b/src/modules/text-expand/text-expand.component.spec.ts
@@ -1,7 +1,9 @@
import {
TestBed,
inject,
- async
+ fakeAsync,
+ tick,
+ ComponentFixture
} from '@angular/core/testing';
import { BrowserModule } from '@angular/platform-browser';
@@ -32,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) {
+ buttonElem.click();
+ fixture.detectChanges();
+ tick(20);
+ fixture.detectChanges();
+ tick(500);
+ fixture.detectChanges();
+ }
+
+ let fixture: ComponentFixture;
+ let cmp: TextExpandTestComponent;
+ let el: HTMLElement;
+
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
@@ -47,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(
@@ -63,13 +91,36 @@ describe('Text expand component', () => {
);
describe('basic behaviors', () => {
- 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;
+ it('should have necessary aria properties', fakeAsync(() => {
// 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 = LONG_TEXT;
+
+ fixture.detectChanges();
+ const buttonElem = el.querySelector('.sky-text-expand-see-more');
+
+ expect(buttonElem.getAttribute('aria-expanded')).toBe('false');
+ expect(buttonElem.getAttribute('aria-controls')).toBe(cmp.textExpand.contentSectionId);
+ expect(buttonElem.getAttribute('aria-haspopup')).toBeNull();
+
+ 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 = VERY_LONG_TEXT;
+ 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', () => {
+ // tslint:disable-next-line
+ cmp.text = SHORT_TEXT;
fixture.detectChanges();
@@ -81,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();
@@ -98,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');
@@ -114,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');
@@ -138,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');
@@ -161,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');
@@ -172,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');
@@ -187,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');
@@ -197,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;
@@ -215,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();
@@ -231,15 +254,12 @@ 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(() => {
- let fixture = TestBed.createComponent(TextExpandTestComponent);
- let cmp = fixture.componentInstance as TextExpandTestComponent;
- let el = fixture.nativeElement as HTMLElement;
+ it('should expand on click of the see more button', fakeAsync(() => {
// 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();
@@ -251,47 +271,33 @@ 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();
- fixture.whenStable().then(() => {
- fixture.detectChanges();
- fixture.whenStable().then(() => {
- fixture.detectChanges();
- ellipsis = el.querySelector('.sky-text-expand-ellipsis');
- textArea = 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 = 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);
+ clickTextExpandButton(seeMoreButton, fixture);
- it('should render newlines if requested', () => {
- let fixture = TestBed.createComponent(TextExpandTestComponent);
- let cmp = fixture.componentInstance as TextExpandTestComponent;
- let el = fixture.nativeElement as HTMLElement;
+ ellipsis = el.querySelector('.sky-text-expand-ellipsis');
+ textArea = 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);
+
+ clickTextExpandButton(seeMoreButton, fixture);
+ ellipsis = el.querySelector('.sky-text-expand-ellipsis');
+ textArea = 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', () => {
// 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();
@@ -303,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();
@@ -326,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 1b8cb8246..ff9ec046d 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 text expand components.
+ */
+let nextId = 0;
+
@Component({
selector: 'sky-text-expand',
templateUrl: './text-expand.component.html',
@@ -61,6 +66,9 @@ export class SkyTextExpandComponent implements AfterContentInit {
public isExpanded: boolean = false;
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');
private textToShow: string;
@@ -74,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 */
@@ -143,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;
}