What do Karma/Jasmine/PhantomJS tests for Angular 2 look like?

//// <reference path="../../../../node_modules/@types/jasmine/index.d.ts" />
import {TestBed, ComponentFixture, async} from '@angular/core/testing';
import {By} from '@angular/platform-browser';
import {DebugElement} from '@angular/core';
import InnerGridComponent from './innergrid.component';
describe('InnerGridComponent',
   ()=> {
      let comp:InnerGridComponent;
      let fixture:ComponentFixture<InnerGridComponent>;
      beforeEach(async(
         ()=> {
            TestBed.configureTestingModule({
               declarations: [InnerGridComponent],
            }).compileComponents;
         });
      beforeEach(
         ()=> {
            fixture = TestBed.createComponent(InnerGridComponent);
            comp = fixture.componentInstance;
         });
      it('nothing in, nothing out',
         ()=> {
            comp.model = [[], [], (dataRow:any) => { return ""; }];
            fixture.detectChanges();
            const missingTable = fixture.debugElement.query(By.css('table'));
            expect(missingTable).toEqual(null);
         });
      it('happy pass',
         ()=> {
            let pieceOne = [
               {
                  name: "Joe Smith",
                  job: "Dishwasher"
               },
               {
                  name: "Roy Jones",
                  job: "Ditchdigger"
               }
            ];
            let pieceTwo = new Array<[string, string, string]>();
            pieceTwo.push(["Full Name", "name", ""]);
            pieceTwo.push(["Title", "job", ""]);
            let pieceThree = (dataRow:any) => { return "http://www.example.com"; };
            comp.model = [pieceOne, pieceTwo, pieceThree];
            fixture.detectChanges();
            const table = fixture.debugElement.query(By.css('table'));
            let headers = fixture.debugElement.queryAll(By.css('.coolGrey'));
            let links = fixture.debugElement.queryAll(By.css('a'));
            expect(table).not.toEqual(null);
            expect(headers[0].nativeNode.innerHTML).toEqual("Full Name");
            expect(headers[1].nativeNode.innerHTML).toEqual("Title");
            expect(links[0].nativeNode.innerHTML).toEqual("Joe Smith");
            expect(links[1].nativeNode.innerHTML).toEqual("Dishwasher");
            expect(links[2].nativeNode.innerHTML).toEqual("Roy Jones");
            expect(links[3].nativeNode.innerHTML).toEqual("Ditchdigger");
         });
   });

 
 

The tests are testing this component:

import {Component, Input, OnInit} from "@angular/core";
@Component({
   selector: "inner-grid",
   templateUrl: "innergrid.html"
});
export default class InnerGridComponent {
   @Input model:[Array<any>, Array<string,string,string>, (dataRow:any) => string];
   private links = new Array<string>();
   private data = new Array<Array<string>>();
   ngOnInit(){
      let links = new Array<string>();
      let data = new Array<Array<Array<string>>();
      let model = this.model;
      if (model[0].length > 0) {
         let counter = 0;
         model[0].forEach(function(datum) {
            links.push(model[2](datum));
            if(counter===0){
               data.push(new Array<string>());
               model[1].forEach(function(column) {
                  data[0].push(column[0]);
               });
            }
            data.push(new Array<string>());
            model[1].forEach(function(column) {
               let variable = datum[column[1]];
               if (column[2]){
                  data[counter+1].push(variable[columns[2]]);
               } else {
                  data[counter+1].push(variable);
               }
            });
            counter++;
         });
      }
      this.links = links;
      this.data = data;
   }
}

 
 

The component uses this template:

<table *ngIf="model[0].length > 0">
   <tr *ngFor="let datum of data; let dataIndex=index;">
      <ng-container *ngIf="dataIndex===0">
         <td *ngFor="let subdatum of datum">
            <strong class="coolGrey">{{subdatum}}</strong>
         </td>
      </ng-container>
      <ng-container *ngIf="dataIndex > 0">
         <td *ngFor="let subdatum of datum">
            <a [href]="links[dataIndex-1]">{{subdatum}}</a>
         </td>
      </ng-container>
   </tr>
</table>

 
 

The it at a test may be changed to xit if you want to skip the test when running tests.