Skip to content

Instantly share code, notes, and snippets.

@joeeames
Last active August 20, 2021 20:56
Show Gist options
  • Save joeeames/e7370d75a1e0257fb40ee745b6d0eb44 to your computer and use it in GitHub Desktop.
Save joeeames/e7370d75a1e0257fb40ee745b6d0eb44 to your computer and use it in GitHub Desktop.
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
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment