Fix view tests and add unit tests

src/app/tab/tab.component.html

@@ -6,7 +6,7 @@
       href="{{ tabItem.href ? tabItem.href : '#' + tabItem.link }}" target="{{ tabItem.target }}">
       {{ tabItem.label }}
     </a>
-</li>
+  </li>
 </ul>
 <div>
   <ng-content select="mz-tab-item"></ng-content>

src/app/tab/tab.component.ts

@@ -17,7 +17,7 @@ export class MzTabComponent implements AfterViewInit {
   @ContentChildren(MzTabItemComponent) tabItems: QueryList<MzTabItemComponent>;
 
   constructor(
-    private renderer: Renderer,
+    public renderer: Renderer,
   ) { }
 
   ngAfterViewInit(): void {

src/app/tab/tab.component.unit.spec.ts

@@ -0,0 +1,90 @@
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+
+import { MzTabComponent } from './tab.component';
+
+describe('MzTabComponent:unit', () => {
+  let component: MzTabComponent;
+  let fixture: ComponentFixture<MzTabComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MzTabComponent ],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MzTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('initTab', () => {
+
+    function forceSetTimeoutEnd() {
+      tick(1); // force setTimeout execution
+    }
+
+    it('should initialize tab using jquery', fakeAsync(() => {
+
+      component.onShow = () => {};
+      component.responsiveThreshold = 300;
+      component.swipeable = true;
+
+      const mockJQueryTabNativeElement = { tab: true };
+
+      spyOn(component.renderer, 'invokeElementMethod');
+
+      spyOn(window, '$').and.callFake((selector: any) => {
+        return selector === component.tabs.nativeElement
+          ? mockJQueryTabNativeElement
+          : {};
+      });
+
+      component.initTabs();
+
+      forceSetTimeoutEnd();
+
+      expect(component.renderer.invokeElementMethod)
+        .toHaveBeenCalledWith(
+          mockJQueryTabNativeElement,
+          'tabs', [{
+            onShow: component.onShow,
+            responsiveThreshold: 300,
+            swipeable: true,
+          }],
+        );
+    }));
+
+    describe('initTab', () => {
+      it('should initialize tab using jquery', fakeAsync(() => {
+
+        const mockJQueryTabNativeElement = { tab: true };
+
+        spyOn(component.renderer, 'invokeElementMethod');
+
+        spyOn(window, '$').and.callFake((selector: any) => {
+          return selector === component.tabs.nativeElement
+            ? mockJQueryTabNativeElement
+            : {};
+        });
+
+        component.selectTab('tab1');
+
+        expect(component.renderer.invokeElementMethod)
+        .toHaveBeenCalledWith(
+          mockJQueryTabNativeElement,
+          'tabs',
+          [
+            'select_tab',
+            'tab1',
+          ],
+        );
+      }));
+    });
+  });
+});

src/app/tab/tab.component.view.spec.ts

@@ -7,7 +7,7 @@ import {
     MzTabItemComponent,
 } from './';
 
-fdescribe('MzCollapsibleComponent:view', () => {
+describe('MzTabComponent:view', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -74,7 +74,7 @@ fdescribe('MzCollapsibleComponent:view', () => {
 
       buildComponent<MzTabComponent>(`
         <mz-tab>
-          <mz-tab-item [active]="'true"' [label]="'label'">content</mz-tab-item>
+          <mz-tab-item [active]="'true'" [label]="'label'">content</mz-tab-item>
         </mz-tab>
       `).then((fixture) => {