A set of Angular spec helpers.

angular-spec-helpers.ts

export const createHost = (childComp, props, moduleMerge: NgModule = {}) => {
  @Directive({
    selector: '[test-anchor]'
  })
  class TestAnchor {
    constructor(public viewRef: ViewContainerRef) {
    }
  }

  @Component({
    template: '<ng-template test-anchor></ng-template>'
  })
  class Host implements OnInit {
    @ViewChild(TestAnchor) anchor
    compRef: ComponentRef<any>

    constructor(private compFactory: ComponentFactoryResolver) {
    }

    ngOnInit() {
      const factory = this.compFactory.resolveComponentFactory(childComp)
      this.compRef = this.anchor.viewRef.createComponent(factory)
      this.setProps(props)
    }

    setProps(newProps) {
      Object.keys(newProps).forEach(prop => {
        this.compRef.instance[prop] = newProps[prop]
      })
      this.compRef.changeDetectorRef.detectChanges()
    }
  }

  @NgModule({
    declarations: [Host, childComp, TestAnchor, ...(moduleMerge.declarations || [])],
    providers: [...(moduleMerge.providers || [])],
    imports: [CommonModule, BrowserModule, FormsModule, ReactiveFormsModule, ...(moduleMerge.imports || [])],
    entryComponents: [Host, childComp, ...(moduleMerge.entryComponents || [])]
  })
  class TestModule {
    static host = Host
  }

  return TestModule
}

export const mockRoute = (url: string, params: { [key: string]: string }) => {
  return {
    url: of(url.split('/').map(segment => new UrlSegment(segment, {}))),
    paramMap: of({
      get: (paramKey) => params[paramKey]
    })
  }
}
      
export const page = (host: ComponentFixture<any>) => {
  return {
    detectChanges: () => host.detectChanges(),
    $: (selector: string) => host.nativeElement.querySelector(selector),
    $$: (selector: string) => host.nativeElement.querySelectorAll(selector),
    $ng: (selector: string) => host.debugElement.query(By.css(selector)),
    $$ng: (selector: string) => host.debugElement.queryAll(By.css(selector)),
    component: host.componentInstance,
    fillIn: (selector: string, value: any) => {
      const input = host.nativeElement.querySelector(selector)
      input.value = value
      input.dispatchEvent(new Event('keyup'))
      input.dispatchEvent(new Event('input'))
      host.detectChanges()
    },
    clickOn: (selector: string) => {
      host.nativeElement.querySelector(selector).click()
      host.detectChanges()
    },
  }
}

usage.ts

import {page, createHost, mockRoute} from './angular-spec-helpers.ts'

describe('ListComponent', () => {
  const HostModule = createHost(ListComponent, {}, {
    declarations: [ListComponent],
    imports: [fakeRoutes(ListComponent)],
    providers: [
      {provide: ActivatedRoute, useValue: mockRoute('/friends/993', {id: '993'})}
    ]
  })

  beforeEach(async(() => {
    const doneCompiling = TestBed.configureTestingModule({
      imports: [HostModule]
    }).compileComponents()

    spyOn(TestBed.get(Router), 'navigate')
    return doneCompiling
  }))

  it('PUTs the form on save', () => {
    const host = page(TestBed.createComponent(HostModule.host))
    host.detectChanges()

    expect(host.$$('table td').length).toEqual(4)

    host.fillIn('input[name="filter"]', 'Captain Kirk')
    host.clickOn('.search')

    expect(host.$$('table td').length).toEqual(1)
  })
})