Skip to content

Commit 06e5e3b

Browse files
andrewseguinandrewseguin
committed
write tests
1 parent d77e49f commit 06e5e3b

File tree

7 files changed

+308
-115
lines changed

7 files changed

+308
-115
lines changed

‎src/demo-app/tabs/tabs-demo.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,6 @@ tabs-demo md-card {
3636
}
3737

3838
button {
39-
width: 100%
39+
width: 100%;
4040
}
4141
}

‎src/lib/tabs/tab-body.spec.ts

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
import {async, ComponentFixture, TestBed, flushMicrotasks, fakeAsync} from '@angular/core/testing';
2+
import {Component, ViewChild, TemplateRef, ViewContainerRef} from '@angular/core';
3+
import {LayoutDirection, Dir} from '../core/rtl/dir';
4+
import {TemplatePortal} from '../core/portal/portal';
5+
import {MdTabBody} from './tab-body';
6+
import {MdRippleModule} from '../core/ripple/ripple';
7+
import {CommonModule} from '@angular/common';
8+
import {PortalModule} from '../core';
9+
10+
11+
describe('MdTabBody', () => {
12+
let dir: LayoutDirection = 'ltr';
13+
14+
beforeEach(async(() => {
15+
dir = 'ltr';
16+
TestBed.configureTestingModule({
17+
imports: [CommonModule, PortalModule, MdRippleModule],
18+
declarations: [
19+
MdTabBody,
20+
SimpleTabBodyApp,
21+
],
22+
providers: [
23+
{ provide: Dir, useFactory: () => { return {value: dir}; }
24+
}]
25+
});
26+
27+
TestBed.compileComponents();
28+
}));
29+
30+
describe('when initialized as center', () => {
31+
let fixture: ComponentFixture<SimpleTabBodyApp>;
32+
33+
describe('in LTR direction', () => {
34+
beforeEach(() => {
35+
dir = 'ltr';
36+
fixture = TestBed.createComponent(SimpleTabBodyApp);
37+
});
38+
39+
it('should be center position without origin', () => {
40+
fixture.componentInstance.position = 0;
41+
fixture.detectChanges();
42+
43+
expect(fixture.componentInstance.mdTabBody._position).toBe('center');
44+
});
45+
46+
it('should be left-origin-center position with negative or zero origin', () => {
47+
fixture.componentInstance.position = 0;
48+
fixture.componentInstance.origin = 0;
49+
fixture.detectChanges();
50+
51+
expect(fixture.componentInstance.mdTabBody._position).toBe('left-origin-center');
52+
});
53+
54+
it('should be right-origin-center position with positive nonzero origin', () => {
55+
fixture.componentInstance.position = 0;
56+
fixture.componentInstance.origin = 1;
57+
fixture.detectChanges();
58+
59+
expect(fixture.componentInstance.mdTabBody._position).toBe('right-origin-center');
60+
});
61+
});
62+
63+
describe('in RTL direction', () => {
64+
beforeEach(() => {
65+
dir = 'rtl';
66+
fixture = TestBed.createComponent(SimpleTabBodyApp);
67+
});
68+
69+
it('should be right-origin-center position with negative or zero origin', () => {
70+
fixture.componentInstance.position = 0;
71+
fixture.componentInstance.origin = 0;
72+
fixture.detectChanges();
73+
74+
expect(fixture.componentInstance.mdTabBody._position).toBe('right-origin-center');
75+
});
76+
77+
it('should be left-origin-center position with positive nonzero origin', () => {
78+
fixture.componentInstance.position = 0;
79+
fixture.componentInstance.origin = 1;
80+
fixture.detectChanges();
81+
82+
expect(fixture.componentInstance.mdTabBody._position).toBe('left-origin-center');
83+
});
84+
});
85+
});
86+
87+
describe('should properly set the position in LTR', () => {
88+
let fixture: ComponentFixture<SimpleTabBodyApp>;
89+
90+
beforeEach(() => {
91+
dir = 'ltr';
92+
fixture = TestBed.createComponent(SimpleTabBodyApp);
93+
fixture.detectChanges();
94+
});
95+
96+
it('to be left position with negative position', () => {
97+
fixture.componentInstance.position = -1;
98+
fixture.detectChanges();
99+
100+
expect(fixture.componentInstance.mdTabBody._position).toBe('left');
101+
});
102+
103+
it('to be center position with zero position', () => {
104+
fixture.componentInstance.position = 0;
105+
fixture.detectChanges();
106+
107+
expect(fixture.componentInstance.mdTabBody._position).toBe('center');
108+
});
109+
110+
it('to be left position with positive position', () => {
111+
fixture.componentInstance.position = 1;
112+
fixture.detectChanges();
113+
114+
expect(fixture.componentInstance.mdTabBody._position).toBe('right');
115+
});
116+
});
117+
118+
describe('should properly set the position in RTL', () => {
119+
let fixture: ComponentFixture<SimpleTabBodyApp>;
120+
121+
beforeEach(() => {
122+
dir = 'rtl';
123+
fixture = TestBed.createComponent(SimpleTabBodyApp);
124+
fixture.detectChanges();
125+
});
126+
127+
it('to be right position with negative position', () => {
128+
fixture.componentInstance.position = -1;
129+
fixture.detectChanges();
130+
131+
expect(fixture.componentInstance.mdTabBody._position).toBe('right');
132+
});
133+
134+
it('to be center position with zero position', () => {
135+
fixture.componentInstance.position = 0;
136+
fixture.detectChanges();
137+
138+
expect(fixture.componentInstance.mdTabBody._position).toBe('center');
139+
});
140+
141+
it('to be left position with positive position', () => {
142+
fixture.componentInstance.position = 1;
143+
fixture.detectChanges();
144+
145+
expect(fixture.componentInstance.mdTabBody._position).toBe('left');
146+
});
147+
});
148+
149+
describe('on centered', () => {
150+
let fixture: ComponentFixture<SimpleTabBodyApp>;
151+
152+
beforeEach(() => {
153+
fixture = TestBed.createComponent(SimpleTabBodyApp);
154+
});
155+
156+
it('should attach the content when centered and detach when not', fakeAsync(() => {
157+
fixture.componentInstance.position = 1;
158+
fixture.detectChanges();
159+
expect(fixture.componentInstance.mdTabBody._portalHost.hasAttached()).toBe(false);
160+
161+
fixture.componentInstance.position = 0;
162+
fixture.detectChanges();
163+
expect(fixture.componentInstance.mdTabBody._portalHost.hasAttached()).toBe(true);
164+
165+
fixture.componentInstance.position = 1;
166+
fixture.detectChanges();
167+
flushMicrotasks(); // Finish animation and let it detach in animation done handler
168+
expect(fixture.componentInstance.mdTabBody._portalHost.hasAttached()).toBe(false);
169+
}));
170+
});
171+
});
172+
173+
174+
@Component({
175+
template: `
176+
<template>Tab Body Content</template>
177+
<md-tab-body [md-tab-body-content]="content"
178+
[md-tab-body-position]="position"
179+
[md-tab-body-origin]="origin">
180+
</md-tab-body>
181+
`
182+
})
183+
class SimpleTabBodyApp {
184+
content: TemplatePortal;
185+
position: number;
186+
origin: number;
187+
188+
@ViewChild(MdTabBody) mdTabBody: MdTabBody;
189+
@ViewChild(TemplateRef) template: TemplateRef<any>;
190+
191+
constructor(private _viewContainerRef: ViewContainerRef) { }
192+
193+
ngAfterContentInit() {
194+
this.content = new TemplatePortal(this.template, this._viewContainerRef);
195+
}
196+
}

‎src/lib/tabs/tab-body.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export class MdTabBody implements OnInit {
6666

6767
/** The shifted index position of the tab body, where zero represents the active center tab. */
6868
_position: MdTabBodyPositionState;
69-
@Input('md-tab-position') set position(position: number) {
69+
@Input('md-tab-body-position') set position(position: number) {
7070
if (position < 0) {
7171
this._position = this._getLayoutDirection() == 'ltr' ? 'left' : 'right';
7272
} else if (position > 0) {
@@ -78,13 +78,14 @@ export class MdTabBody implements OnInit {
7878

7979
/** The origin position from which this tab should appear when it is centered into view. */
8080
_origin: MdTabBodyOriginState;
81-
@Input('md-tab-origin') set origin(origin: number) {
81+
@Input('md-tab-body-origin') set origin(origin: number) {
8282
if (origin == null) { return; }
8383

84-
if (origin <= 0) {
85-
this._origin = this._getLayoutDirection() == 'ltr' ? 'left' : 'right';
84+
if ((this._getLayoutDirection() == 'ltr' && origin <= 0) ||
85+
(this._getLayoutDirection() == 'rtl' && origin > 0)) {
86+
this._origin = 'left';
8687
} else {
87-
this._origin = this._getLayoutDirection() == 'ltr' ? 'right' : 'left';
88+
this._origin = 'right';
8889
}
8990
}
9091

@@ -111,7 +112,6 @@ export class MdTabBody implements OnInit {
111112
}
112113

113114
_onTranslateTabStarted(e: AnimationTransitionEvent) {
114-
console.log('Animation began with position ', this._position);
115115
if (this._isCenterPosition(e.toState)) {
116116
this.onTabBodyCentering.emit(this._elementRef.nativeElement.clientHeight);
117117
}

‎src/lib/tabs/tab-group.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@
2727
[attr.aria-labelledby]="_getTabLabelId(i)"
2828
[class.md-tab-body-active]="selectedIndex == i"
2929
[md-tab-body-content]="tab.content"
30-
[md-tab-position]="tab.position"
31-
[md-tab-origin]="tab.origin"
30+
[md-tab-body-position]="tab.position"
31+
[md-tab-body-origin]="tab.origin"
3232
(onTabBodyCentered)="_removeTabBodyWrapperHeight()"
3333
(onTabBodyCentering)="_setTabBodyWrapperHeight($event)">
3434
</md-tab-body>

0 commit comments

Comments
 (0)