write tests

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

@@ -36,6 +36,6 @@ tabs-demo md-card {
   }
 
   button {
-    width: 100%
+    width: 100%;
   }
 }

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

@@ -0,0 +1,196 @@
+import {async, ComponentFixture, TestBed, flushMicrotasks, fakeAsync} from '@angular/core/testing';
+import {Component, ViewChild, TemplateRef, ViewContainerRef} from '@angular/core';
+import {LayoutDirection, Dir} from '../core/rtl/dir';
+import {TemplatePortal} from '../core/portal/portal';
+import {MdTabBody} from './tab-body';
+import {MdRippleModule} from '../core/ripple/ripple';
+import {CommonModule} from '@angular/common';
+import {PortalModule} from '../core';
+
+
+describe('MdTabBody', () => {
+  let dir: LayoutDirection = 'ltr';
+
+  beforeEach(async(() => {
+    dir = 'ltr';
+    TestBed.configureTestingModule({
+      imports: [CommonModule, PortalModule, MdRippleModule],
+      declarations: [
+        MdTabBody,
+        SimpleTabBodyApp,
+      ],
+      providers: [
+        { provide: Dir, useFactory: () => { return {value: dir}; }
+      }]
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  describe('when initialized as center', () => {
+    let fixture: ComponentFixture<SimpleTabBodyApp>;
+
+    describe('in LTR direction', () => {
+      beforeEach(() => {
+        dir = 'ltr';
+        fixture = TestBed.createComponent(SimpleTabBodyApp);
+      });
+
+      it('should be center position without origin', () => {
+        fixture.componentInstance.position = 0;
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.mdTabBody._position).toBe('center');
+      });
+
+      it('should be left-origin-center position with negative or zero origin', () => {
+        fixture.componentInstance.position = 0;
+        fixture.componentInstance.origin = 0;
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.mdTabBody._position).toBe('left-origin-center');
+      });
+
+      it('should be right-origin-center position with positive nonzero origin', () => {
+        fixture.componentInstance.position = 0;
+        fixture.componentInstance.origin = 1;
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.mdTabBody._position).toBe('right-origin-center');
+      });
+    });
+
+    describe('in RTL direction', () => {
+      beforeEach(() => {
+        dir = 'rtl';
+        fixture = TestBed.createComponent(SimpleTabBodyApp);
+      });
+
+      it('should be right-origin-center position with negative or zero origin', () => {
+        fixture.componentInstance.position = 0;
+        fixture.componentInstance.origin = 0;
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.mdTabBody._position).toBe('right-origin-center');
+      });
+
+      it('should be left-origin-center position with positive nonzero origin', () => {
+        fixture.componentInstance.position = 0;
+        fixture.componentInstance.origin = 1;
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.mdTabBody._position).toBe('left-origin-center');
+      });
+    });
+  });
+
+  describe('should properly set the position in LTR', () => {
+    let fixture: ComponentFixture<SimpleTabBodyApp>;
+
+    beforeEach(() => {
+      dir = 'ltr';
+      fixture = TestBed.createComponent(SimpleTabBodyApp);
+      fixture.detectChanges();
+    });
+
+    it('to be left position with negative position', () => {
+      fixture.componentInstance.position = -1;
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.mdTabBody._position).toBe('left');
+    });
+
+    it('to be center position with zero position', () => {
+      fixture.componentInstance.position = 0;
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.mdTabBody._position).toBe('center');
+    });
+
+    it('to be left position with positive position', () => {
+      fixture.componentInstance.position = 1;
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.mdTabBody._position).toBe('right');
+    });
+  });
+
+  describe('should properly set the position in RTL', () => {
+    let fixture: ComponentFixture<SimpleTabBodyApp>;
+
+    beforeEach(() => {
+      dir = 'rtl';
+      fixture = TestBed.createComponent(SimpleTabBodyApp);
+      fixture.detectChanges();
+    });
+
+    it('to be right position with negative position', () => {
+      fixture.componentInstance.position = -1;
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.mdTabBody._position).toBe('right');
+    });
+
+    it('to be center position with zero position', () => {
+      fixture.componentInstance.position = 0;
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.mdTabBody._position).toBe('center');
+    });
+
+    it('to be left position with positive position', () => {
+      fixture.componentInstance.position = 1;
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.mdTabBody._position).toBe('left');
+    });
+  });
+
+  describe('on centered', () => {
+    let fixture: ComponentFixture<SimpleTabBodyApp>;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SimpleTabBodyApp);
+    });
+
+    it('should attach the content when centered and detach when not', fakeAsync(() => {
+      fixture.componentInstance.position = 1;
+      fixture.detectChanges();
+      expect(fixture.componentInstance.mdTabBody._portalHost.hasAttached()).toBe(false);
+
+      fixture.componentInstance.position = 0;
+      fixture.detectChanges();
+      expect(fixture.componentInstance.mdTabBody._portalHost.hasAttached()).toBe(true);
+
+      fixture.componentInstance.position = 1;
+      fixture.detectChanges();
+      flushMicrotasks(); // Finish animation and let it detach in animation done handler
+      expect(fixture.componentInstance.mdTabBody._portalHost.hasAttached()).toBe(false);
+    }));
+  });
+});
+
+
+@Component({
+  template: `
+    <template>Tab Body Content</template> 
+    <md-tab-body [md-tab-body-content]="content"
+                 [md-tab-body-position]="position"
+                 [md-tab-body-origin]="origin">
+    </md-tab-body>
+  `
+})
+class SimpleTabBodyApp {
+  content: TemplatePortal;
+  position: number;
+  origin: number;
+
+  @ViewChild(MdTabBody) mdTabBody: MdTabBody;
+  @ViewChild(TemplateRef) template: TemplateRef<any>;
+
+  constructor(private _viewContainerRef: ViewContainerRef) { }
+
+  ngAfterContentInit() {
+    this.content = new TemplatePortal(this.template, this._viewContainerRef);
+  }
+}

src/lib/tabs/tab-body.ts

@@ -66,7 +66,7 @@ export class MdTabBody implements OnInit {
 
   /** The shifted index position of the tab body, where zero represents the active center tab. */
   _position: MdTabBodyPositionState;
-  @Input('md-tab-position') set position(position: number) {
+  @Input('md-tab-body-position') set position(position: number) {
     if (position < 0) {
       this._position = this._getLayoutDirection() == 'ltr' ? 'left' : 'right';
     } else if (position > 0) {
@@ -78,13 +78,14 @@ export class MdTabBody implements OnInit {
 
   /** The origin position from which this tab should appear when it is centered into view. */
   _origin: MdTabBodyOriginState;
-  @Input('md-tab-origin') set origin(origin: number) {
+  @Input('md-tab-body-origin') set origin(origin: number) {
     if (origin == null) { return; }
 
-    if (origin <= 0) {
-      this._origin = this._getLayoutDirection() == 'ltr' ? 'left' : 'right';
+    if ((this._getLayoutDirection() == 'ltr' && origin <= 0) ||
+        (this._getLayoutDirection() == 'rtl' && origin > 0)) {
+      this._origin = 'left';
     } else {
-      this._origin = this._getLayoutDirection() == 'ltr' ? 'right' : 'left';
+      this._origin = 'right';
     }
   }
 
@@ -111,7 +112,6 @@ export class MdTabBody implements OnInit {
   }
 
   _onTranslateTabStarted(e: AnimationTransitionEvent) {
-    console.log('Animation began with position ', this._position);
     if (this._isCenterPosition(e.toState)) {
       this.onTabBodyCentering.emit(this._elementRef.nativeElement.clientHeight);
     }

src/lib/tabs/tab-group.html

@@ -27,8 +27,8 @@
                [attr.aria-labelledby]="_getTabLabelId(i)"
                [class.md-tab-body-active]="selectedIndex == i"
                [md-tab-body-content]="tab.content"
-               [md-tab-position]="tab.position"
-               [md-tab-origin]="tab.origin"
+               [md-tab-body-position]="tab.position"
+               [md-tab-body-origin]="tab.origin"
                (onTabBodyCentered)="_removeTabBodyWrapperHeight()"
                (onTabBodyCentering)="_setTabBodyWrapperHeight($event)">
   </md-tab-body>