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);

  })
  
  describe('add method', () => {
    let sampleName = 'Batman'
    let SAMPLEHERO = {id: 1, name: 'Batman', strength: 15}
    let fakeHeroSvc
    let mockObservable
    
    beforeEach(() => {
      fakeHeroSvc = jasmine.createSpyObj(['addHero'])
      mockObservable = jasmine.createSpyObj(['subscribe'])
    })

    it('should add the hero to the heroes array', () => {
      fakeHeroSvc.addHero.and.returnValue(of(SAMPLEHERO))
      let heroesCmp = new HeroesComponent(fakeHeroSvc)
      heroesCmp.heroes = [];
      
     //act
      heroesCmp.add(sampleName)
      
      //assert
      expect(heroesCmp.heroes[0]).toBe(SAMPLEHERO)
      expect(heroesCmp.heroes.length).toBe(1);    
    })

    it('should call addHero with correct parameters', () => {
      //arrange
      fakeHeroSvc.addHero.and.returnValue(mockObservable)
      
      let heroesCmp = new HeroesComponent(fakeHeroSvc)
      heroesCmp.heroes = [];
     
      //act
      heroesCmp.add(sampleName)
      
      //assert
      const expectedParams = {name: 'Batman', strength: 11};
      
       expect(fakeHeroSvc.addHero).toHaveBeenCalledWith(expectedParams);
      expect(mockObservable.subscribe).toHaveBeenCalled();

    
    })

    it('should not call addHero if the name is blank', () => {
      let name = ' '
      
      fakeHeroSvc.addHero
      
      let heroesCmp = new HeroesComponent(fakeHeroSvc)
      heroesCmp.heroes = [];
      
      //act
      heroesCmp.add(name)
      
      //assert
      expect(fakeHeroSvc.addHero).not.toHaveBeenCalled();
      expect(heroesCmp.length).toBe(0);
    })
  })

  describe('delete method', () =>{
    let SAMPLEHERO = {id: 1, name: 'Spiderman', strength: 15}
    let fakeHeroSvc
    let mockObservable

    beforeEach(() => {
      fakeHeroSvc = jasmine.createSpyObj(['deleteHero'])
      mockObservable = jasmine.createSpyObj(['subscribe'])
    })

    it('should remove hero from the heroes list', () => {
      let hero = {id: 1, name: 'Spiderman', strength: 15}

      let fakeHeroSvc = jasmine.createSpyObj(['deleteHero'])
      fakeHeroSvc.deleteHero.and.returnValue(of(hero))

      let heroesCmp = new HeroesComponent(fakeHeroSvc)
      heroesCmp.heroes = [hero];

      // act
      heroesCmp.delete(hero)

      //assert
      expect(heroesCmp.heroes.length).toBe(0);

    })

    it('should remove call the heroService correctly', () => {
      // ARRANGE
      fakeHeroSvc.deleteHero.and.returnValue(mockObservable)

      let heroesCmp = new HeroesComponent(fakeHeroSvc)
      heroesCmp.heroes = [SAMPLEHERO];

      // ACT
      heroesCmp.delete(SAMPLEHERO)

      //ASSERT
      expect(fakeHeroSvc.deleteHero).toHaveBeenCalledWith(SAMPLEHERO);
      expect(mockObservable.subscribe).toHaveBeenCalled();


    })
  })
})
  

  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
  })

  
})