Angular Input Host/Child Component Test

character-detail.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Component, NO_ERRORS_SCHEMA, DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';

import { CharacterDetailComponent } from './character-detail.component';
import { Character, DataService } from '../../core';
import * as testing from '../../../testing';

@Component({
  template: '<ro-character-detail [character]="selectedCharacter"></ro-character-detail>'
})
class TestHostComponent {
  selectedCharacter: Character = testing.characters[0];
}

describe('CharactersDetailComponent', () => {
  let component: CharacterDetailComponent;
  let fixture: ComponentFixture<CharacterDetailComponent>;
  let hostFixture: ComponentFixture<TestHostComponent>;
  let testHostComponent: TestHostComponent;
  let detailDebugEl: DebugElement;
  // let detailEl: HTMLElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [CharacterDetailComponent, TestHostComponent],
      providers: [{ provide: DataService, useClass: testing.DataServiceStub }],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    hostFixture = TestBed.createComponent(TestHostComponent);
    testHostComponent = hostFixture.componentInstance;
    detailDebugEl = hostFixture.debugElement.query(By.css('.character-detail input[placeholder=Name]'));

    fixture = TestBed.createComponent(CharacterDetailComponent);
    component = fixture.componentInstance;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should not have a character', () => {
    expect(component.character).toBeUndefined();
  });

  it('should set the character input ', () => {
    expect(detailDebugEl.nativeElement.ngModel).not.toContain(testHostComponent.selectedCharacter.name);
    hostFixture.detectChanges();
    expect(detailDebugEl.nativeElement.ngModel).toContain(testHostComponent.selectedCharacter.name);
  });

  // it('should have synchronized home world ', () => {
    // component.character = testing.characters[0];
    // const spy = spyOn(component, 'syncHomeWorld');
    // hostFixture.detectChanges();

    // fixture.detectChanges();
    // expect(component.character).toBe(testHostComponent.selectedCharacter);
    // expect(component.character).toEqual(testHostComponent.selectedCharacter);
    // expect(spy).toHaveBeenCalled();
    // expect(component.homeWorld.id).toBe(component.character.homeWorldId);
    // expect(component.homeWorld.id).toBe(component.character.homeWorld.id);
  // });
});

planet-detail.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Component, NO_ERRORS_SCHEMA, DebugElement } from '@angular/core';
import { MdSnackBar, MdSnackBarConfig } from '@angular/material';
import { By } from '@angular/platform-browser';

import { PlanetDetailComponent } from './planet-detail.component';
import { DataService, ConfigService, Planet } from '../../core';
import * as testing from '../../../testing';

@Component({
  template: '<ro-planet-detail [planet]="selectedPlanet"></ro-planet-detail>'
})
class TestHostComponent {
  selectedPlanet: Planet = testing.planets[0];
}

describe('PlanetDetailComponent', () => {
  let component: PlanetDetailComponent;
  let fixture: ComponentFixture<PlanetDetailComponent>;
  let hostFixture: ComponentFixture<TestHostComponent>;
  let testHostComponent: TestHostComponent;
  let detailDebugEl: DebugElement;
  // let detailEl: HTMLElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [PlanetDetailComponent, TestHostComponent],
      providers: [
        ConfigService,
        { provide: DataService, useClass: testing.DataServiceStub },
        { provide: MdSnackBar, useClass: testing.MdSnackBarStub }
      ],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    hostFixture = TestBed.createComponent(TestHostComponent);
    testHostComponent = hostFixture.componentInstance;
    detailDebugEl = hostFixture.debugElement.query(By.css('.planet-detail input[placeholder=Name]'));

    fixture = TestBed.createComponent(PlanetDetailComponent);
    component = fixture.componentInstance;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should not have a planet', () => {
    expect(component.planet).toBeUndefined();
  });

  it('should set the character input ', () => {
    expect(detailDebugEl.nativeElement.ngModel).not.toContain(testHostComponent.selectedPlanet.name);
    hostFixture.detectChanges();
    expect(detailDebugEl.nativeElement.ngModel).toContain(testHostComponent.selectedPlanet.name);
  });
});

Yo, @johnpapa, you've probably moved on past this gist but it looks like this:

fixture = TestBed.createComponent(CharacterDetailComponent);

should be replaced with the @ViewChild pattern we see from @Aik-Master.