xos-table component with minimal configuration

Change-Id: If1af35fcb30556c5ca34ffeb2b6e2b11fc87ffae
diff --git a/spec/components/hello.spec.ts b/spec/components/hello.spec.ts
deleted file mode 100644
index 44420ac..0000000
--- a/spec/components/hello.spec.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/// <reference path="../../typings/index.d.ts"/>
-
-import {Router} from '@angular/router';
-import {HelloComponent} from '../../src/app/hello';
-import {LogoutComponent} from '../../src/app/components/logout/logout.component';
-import {StyleConfig} from '../../src/app/config/style.config';
-import { Http, BaseRequestOptions } from '@angular/http';
-import {CookieService} from 'angular2-cookie/services/cookies.service';
-import {XosHttp} from '../../src/app/services/rest/xoshttp.service';
-import {InstanceStore} from '../../src/app/services/stores/instance.store';
-import {GlobalEvent} from '../../src/app/services/websockets/websocket.global';
-import {AuthService} from '../../src/app/services/rest/auth.service';
-import {InstanceService} from '../../src/app/services/rest/instance.service';
-import {SliceService} from '../../src/app/services/rest/slices.service';
-import {TestBed, async} from '@angular/core/testing';
-import {MockBackend} from '@angular/http/testing';
-
-describe('hello component', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        HelloComponent,
-        LogoutComponent
-      ],
-      providers: [
-        {
-          provide: Http,
-          useFactory: (mockBackend, options) => {
-            return new Http(mockBackend, options);
-          },
-          deps: [MockBackend, BaseRequestOptions]
-        },
-        MockBackend,
-        BaseRequestOptions,
-        CookieService,
-        {
-          provide: Router,
-          useClass: class { navigate = jasmine.createSpy('navigate'); }
-        },
-        XosHttp,
-        InstanceStore,
-        GlobalEvent,
-        AuthService,
-        InstanceService,
-        SliceService
-      ]
-    });
-    TestBed.compileComponents();
-  }));
-
-  it('should render hello world', () => {
-    const fixture = TestBed.createComponent(HelloComponent);
-    fixture.detectChanges();
-    const hello = fixture.nativeElement;
-    expect(hello.querySelector('h1').textContent).toBe(`Hello ${StyleConfig.projectName}!`);
-  });
-});
diff --git a/spec/components/table.component.ts b/spec/components/table.component.ts
new file mode 100644
index 0000000..b664b20
--- /dev/null
+++ b/spec/components/table.component.ts
@@ -0,0 +1,81 @@
+/// <reference path="../../typings/index.d.ts"/>
+
+import { Observable } from 'rxjs/Rx';
+import {BehaviorSubject} from 'rxjs';
+import { TestBed } from '@angular/core/testing';
+import { XosTableComponent } from './../../src/app/components/tables/table.component';
+import {IXosTableConfig} from '../../src/app/interfaces/xos-components/table.interface';
+import * as $ from 'jquery';
+
+describe('Component: XosTableComponent', () => {
+  let component: XosTableComponent;
+  let fixture;
+  let compiled;
+  let subject: BehaviorSubject<any>;
+  let observable: Observable<any>;
+
+  beforeEach(() => {
+
+    subject = new BehaviorSubject([]);
+    observable = subject.asObservable();
+
+    TestBed.configureTestingModule({
+      declarations: [XosTableComponent],
+      imports: []
+    });
+
+    fixture = TestBed.createComponent(XosTableComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should exist', () => {
+    expect(component).toBeDefined();
+  });
+
+  describe('when configured', () => {
+    beforeEach(() => {
+      component.config = {
+        columns: [
+          {
+            label: 'Col 1',
+            prop: 'foo'
+          },
+          {
+            label: 'Col 2',
+            prop: 'bar'
+          }
+        ]
+      };
+
+      subject.next([
+        {foo: 'foo1', bar: 'baz1'},
+        {foo: 'foo2', bar: 'baz2'}
+      ]);
+
+      component.data = observable;
+
+      // manually trigger data bindng
+      fixture.detectChanges();
+      compiled = fixture.nativeElement;
+    });
+
+    it('should print labels', () => {
+      const th1 = $(compiled).find('table tr:first-child th:first-child');
+      const th2 = $(compiled).find('table tr:first-child th:last-child');
+      expect(th1.text()).toBe('Col 1');
+      expect(th2.text()).toBe('Col 2');
+    });
+
+    it('should print content in rows', () => {
+      const td1_1 = $(compiled).find('table tr:nth-child(2) td:first-child');
+      const td1_2 = $(compiled).find('table tr:nth-child(2) td:last-child');
+      expect(td1_1.text().trim()).toBe('foo1');
+      expect(td1_2.text().trim()).toBe('baz1');
+
+      const td2_1 = $(compiled).find('table tr:nth-child(3) td:first-child');
+      const td2_2 = $(compiled).find('table tr:nth-child(3) td:last-child');
+      expect(td2_1.text().trim()).toBe('foo2');
+      expect(td2_2.text().trim()).toBe('baz2');
+    });
+  });
+});