Angular
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
});<br />
}));<br />
it("Should have an array of heros", async(()=><br />
this.fixture.whenStable().then(()=> {<br />
const cmp = this.fixture.componentInstance;<br />
expect(cmp.heroes).toBeDefined("component should have a list of heroes");<br />
expect(cmp.heroes.length).toEqual(10, "heroes list should have 10 members");<br />
cmp.heroes.map((h, i)=> {<br />
expect(h instanceof Hero).toBeTruthy(`member ${i} is not a Hero instance. ${h}`)<br />
});<br />
})));<br />
it("Should have one list item per hero", async(()=><br />
this.fixture.whenStable().then(()=> {<br />
const ul = this.fixture.nativeElement.querySelector("ul.heroes");<br />
const li = Array.prototype.slice.call(<br />
this.fixture.nativeElement.querySelectorAll("ul.heroes>li"));<br />
const cmp = this.fixture.componentInstance;<br />
expect(ul).toBeTruthy("There should be an unnumbered list for heroes");<br />
expect(li.length).toEqual(cmp.heroes.length, "there should be one li for each hero");<br />
li.forEach((li, i)=> {<br />
expect(li.querySelector("span.badge"))<br />
.toBeTruthy(`hero ${i} has to have a span for id`);<br />
expect(li.querySelector("span.badge").textContent.trim())<br />
.toEqual(cmp.heroes[i].id.toString(), `hero ${i} had wrong id displayed`);<br />
expect(li.textContent)<br />
.toMatch(cmp.heroes[i].name, `hero ${i} has wrong name displayed`);<br />
});<br />
})));<br />
it("should have correct styling of hero items", async(()=><br />
this.fixture.whenStable().then(()=> {<br />
const hero = this.fixture.nativeElement.querySelector("ul.heroes>li");<br />
const win = hero.ownerDocument.defaultView ||hero.ownerDocument.parentWindow;<br />
const styles = win.getComputedStyle(hero);<br />
expect(styles["cursor"]).toEqual("pointer", "cursor should be pointer on hero");<br />
expect(styles["borderRadius"]).toEqual("4px", "borderRadius should be 4px");<br />
})));<br />
it("should have a click handler for hero items",async(()=><br />
this.fixture.whenStable().then(()=>{<br />
const cmp = this.fixture.componentInstance;<br />
expect(cmp.onSelect)<br />
.toBeDefined("should have a click handler for heros");<br />
expect(this.fixture.nativeElement.querySelector("input.heroName"))<br />
.toBeNull("should not show the hero details when no hero has been selected");<br />
expect(this.fixture.nativeElement.querySelector("ul.heroes li.selected"))<br />
.toBeNull("Should not have any selected heroes at start");<br />
spyOn(cmp,"onSelect").and.callThrough();<br />
this.fixture.nativeElement.querySelectorAll("ul.heroes li")[5].click();<br />
});<br />
));<br />
})<br />
expect(cmp.onSelect)<br />
.toHaveBeenCalledWith(cmp.heroes[5]);<br />
expect(cmp.selectedHero)<br />
.toEqual(cmp.heroes[5], "click on hero should change hero");<br />
Noteworthy in this is how we have beforeEach() configure a test module and create the component in test, and<br />
GoalKicker.com – <strong>Angular</strong> 2 Notes for Professionals 214