fix: karma shim values; update app.component.spec more like cli

Author: wardbell

app/app.component.spec.ts

@@ -1,37 +1,35 @@
 /* tslint:disable:no-unused-variable */
 import { AppComponent } from './app.component';
 
-import { TestBed }      from '@angular/core/testing';
-
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By }           from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
 
 ////////  SPECS  /////////////
+describe('AppComponent', function () {
+  let de: DebugElement;
+  let comp: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+
+  beforeEach(async(() => {
+   TestBed.configureTestingModule({
+      declarations: [ AppComponent ]
+    })
+    .compileComponents();
+  }));
 
-/// Delete this
-describe('Smoke test', () => {
-  it('should run a passing test', () => {
-    expect(true).toEqual(true, 'should pass');
-  });
-});
-
-describe('AppComponent with TCB', function () {
   beforeEach(() => {
-    TestBed.configureTestingModule({declarations: [AppComponent]});
+    fixture = TestBed.createComponent(AppComponent);
+    comp = fixture.componentInstance;
+    de = fixture.debugElement.query(By.css('h1'));
   });
 
-  it('should instantiate component', () => {
-    let fixture = TestBed.createComponent(AppComponent);
-    expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent');
-  });
+  it('should create component', () => expect(comp).toBeDefined() );
 
   it('should have expected <h1> text', () => {
-    let fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
-
-    let h1 = fixture.debugElement.query(el => el.name === 'h1').nativeElement;  // it works
-
-        h1 = fixture.debugElement.query(By.css('h1')).nativeElement;            // preferred
-
-    expect(h1.innerText).toMatch(/angular app/i, '<h1> should say something about "Angular App"');
+    const h1 = de.nativeElement;
+    expect(h1.innerText).toMatch(/angular app/i,
+      '<h1> should say something about "Angular App"');
   });
 });

app/app.component.ts

@@ -2,6 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'my-app',
-    template: '<h1>My First Angular App</h1>'
+    template: `<h1>My First Angular App</h1>`
 })
 export class AppComponent { }

app/app.module.ts

@@ -4,8 +4,8 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent }  from './app.component';
 
 @NgModule({
-  imports: [ BrowserModule ],
+  imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
-  bootstrap: [ AppComponent ]
+  bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

karma-test-shim.js

@@ -28,7 +28,7 @@ var allSpecFiles = Object.keys(window.__karma__.files)
   .filter(isBuiltFile);
 
 System.config({
-  baseURL: '/base',
+  baseURL: 'base',
   // Extend usual application package list with test folder
   packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },
 

karma.conf.js

@@ -3,7 +3,7 @@ module.exports = function(config) {
 
   var appBase    = 'app/';       // transpiled app JS and map files
   var appSrcBase = 'app/';       // app source TS files
-  var appAssets  = '/base/app/'; // component assets fetched by Angular's compiler
+  var appAssets  = 'base/app/'; // component assets fetched by Angular's compiler
 
   var testBase    = 'testing/';       // transpiled test JS and map files
   var testSrcBase = 'testing/';       // test source TS files