test.ts

import { TestBed, ComponentFixture } from "@angular/core/testing"
import { NO_ERRORS_SCHEMA } from "@angular/core";
import { HeroesComponent } from "./heroes.component";
import { HeroService } from "../hero.service";
import { of } from "rxjs";
import { HeroComponent } from "../hero/hero.component";
import { By } from "@angular/platform-browser";


describe('Hero Component', () => {
  let fixture : ComponentFixture<HeroesComponent>;
  let mockHeroSvc;
  let HEROES;

  beforeEach(() => {
    HEROES = [
      {id:1, name: 'SpiderDude', strength: 8},
      {id:2, name: 'Wonderful Woman', strength: 24},
      {id:3, name: 'SuperDude', strength: 55}
    ]
    mockHeroSvc = jasmine.createSpyObj(['deleteHero', 'addHero', 'getHeroes']);

    TestBed.configureTestingModule({
      declarations: [HeroesComponent, HeroComponent],
      providers: [
        { provide: HeroService, useValue: mockHeroSvc }
      ],
      schemas: [NO_ERRORS_SCHEMA]
    })
    fixture = TestBed.createComponent(HeroesComponent);
    
  })

  it('should delete the right hero', () => {
    mockHeroSvc.getHeroes.and.returnValue(of(HEROES))
    mockHeroSvc.deleteHero.and.returnValue(of(true))
    fixture.detectChanges();

    fixture.componentInstance.delete(HEROES[1])

    expect(fixture.componentInstance.heroes.length).toBe(2);
  })

  it('should add the right hero', () => {
    mockHeroSvc.getHeroes.and.returnValue(of(HEROES))
    mockHeroSvc.addHero.and.returnValue(of({id:4, name: 'Batman', strength: 10}))
    fixture.detectChanges();

    fixture.componentInstance.add('Batman')

    expect(fixture.componentInstance.heroes.length).toBe(4);
  })

  it('should set heroes correctly from the service', () => {
    mockHeroSvc.getHeroes.and.returnValue(of(HEROES))
    fixture.detectChanges();

    expect(fixture.componentInstance.heroes.length).toBe(3);
  })

  it('should have 3 child components', () => {
    mockHeroSvc.getHeroes.and.returnValue(of(HEROES))
    fixture.detectChanges();
    
    let heroComponents = fixture.debugElement.queryAll(By.directive(HeroComponent));

    expect(heroComponents[0].componentInstance.hero.name).toBe('SpiderDude')
  })

  
  it('should remove one when delete is clicked', () => {
    mockHeroSvc.getHeroes.and.returnValue(of(HEROES))
    fixture.detectChanges();
    
    let heroComponents = fixture.debugElement.queryAll(By.directive(HeroComponent));
    heroComponents[0].query(By.css('button')).triggerEventHandler('click', {stopPropagation: () => {} })
    fixture.detectChanges();

    expect(fixture.debugElement.queryAll(By.directive(HeroComponent)).length).toBe(2);

  })

  it('should add an item when a name is given and add is clicked', () => {

    //the easiest way to type into an input box is to grab a nativeElement reference to it and set the "value" property
    // inputElement.value = "Batman";

    // recipe
    // grab the input and give it a value
    // grab the add button and click it
    // grab the child directives, get the last one
    // get its textContent, check for the name
  })

  
})