lasttest.ts

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


describe('HeroComponent (integration tests)', () => {
    let fixture: ComponentFixture<HeroesComponent>;
    let mockHeroService;
    let HEROES;

    beforeEach(() => {
        HEROES = [
            {id: 1, name: 'Superman', strength: 100},
            {id: 2, name: 'Batman', strength: 9},
            {id: 3, name: 'Star Lord', strength: 5}
        ]
        mockHeroService = jasmine.createSpyObj(['getHeroes', 'deleteHero', 'addHero']);

        TestBed.configureTestingModule({
            declarations: [HeroesComponent, HeroComponent],
            providers: [
                {provide: HeroService, useValue: mockHeroService }
            ],
        })
        fixture = TestBed.createComponent(HeroesComponent);
        mockHeroService.getHeroes.and.returnValue(of(HEROES));

    })

    it('should do something', () => {
        fixture.detectChanges();

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

    it('should have 3 li tags after initialization', () => {
        fixture.detectChanges();

        expect(fixture.nativeElement.querySelectorAll('a').length).toBe(3);
    })
 
    it('should add a new hero when the add button is clicked', () => {
        mockHeroService.addHero.and.returnValue(of({id:4, name: 'Deadpool', strength: 11}))
        fixture.detectChanges();
        fixture.nativeElement.querySelector('input').value = 'Deadpool';
        fixture.debugElement.query(By.css('#addButton')).triggerEventHandler('click', null);
        fixture.detectChanges();

        expect(fixture.componentInstance.heroes.length).toBe(4);
        expect(mockHeroService.addHero).toHaveBeenCalledWith({name: 'Deadpool', strength: 11})
        expect(fixture.nativeElement.querySelectorAll('a').length).toBe(4);

    })

    it('should remove a hero from the li list when delete is clicked on one of the heroes', () => {

        expect(fixture.nativeElement.querySelectorAll('li').length).toBe(2);
    })


})