Skip to content

Commit e803d38

Browse files
joeeamesjoeeames
committed
creating input/output tests for heroes component
1 parent 2b1c161 commit e803d38

8 files changed

Lines changed: 167 additions & 56 deletions

File tree

‎tour-of-heroes/src/app/app.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { InMemoryDataService } from './shared/in-memory-data.service';
1313
import { AppComponent } from './app.component/app.component';
1414
import { DashboardComponent } from './dashboard.component/dashboard.component';
1515
import { HeroesComponent } from './heroes.component/heroes.component';
16+
import { HeroComponent } from './hero.component/hero.component';
1617
import { HeroDetailComponent } from './hero-detail.component/hero-detail.component';
1718
import { HeroService } from './hero.service/hero.service';
1819
import { HeroSearchComponent } from './hero-search.component/hero-search.component';
@@ -32,6 +33,7 @@ import { routing } from './app.routing';
3233
DashboardComponent,
3334
HeroDetailComponent,
3435
HeroesComponent,
36+
HeroComponent,
3537
HeroSearchComponent,
3638
ExponentialStrengthPipe
3739
],

‎tour-of-heroes/src/app/hero.component/hero.component.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.selected {
2+
background-color: #CFD8DC !important;
3+
color: white;
4+
}
5+
.text {
6+
position: relative;
7+
top: -3px;
8+
}
9+
.badge {
10+
display: inline-block;
11+
font-size: small;
12+
color: white;
13+
padding: 0.8em 0.7em 0 0.7em;
14+
background-color: #607D8B;
15+
line-height: 1em;
16+
position: relative;
17+
left: -1px;
18+
top: -4px;
19+
height: 1.8em;
20+
margin-right: .8em;
21+
border-radius: 4px 0 0 4px;
22+
}
23+
button {
24+
font-family: Arial;
25+
background-color: #eee;
26+
border: none;
27+
padding: 5px 10px;
28+
border-radius: 4px;
29+
cursor: pointer;
30+
cursor: hand;
31+
}
32+
button:hover {
33+
background-color: #cfd8dc;
34+
}
35+
button.delete {
36+
float:right;
37+
margin-top: 2px;
38+
margin-right: .8em;
39+
background-color: gray !important;
40+
color:white;
41+
}
42+
43+
44+
/*
45+
Copyright 2016 Google Inc. All Rights Reserved.
46+
Use of this source code is governed by an MIT-style license that
47+
can be found in the LICENSE file at http://angular.io/license
48+
*/

‎tour-of-heroes/src/app/hero.component/hero.component.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<span class="badge">{{hero.id}}</span>
2+
<span>{{hero.name}}</span>
3+
<button class="delete"
4+
(click)="onButtonClick(); $event.stopPropagation()">x</button>

‎tour-of-heroes/src/app/hero.component/hero.component.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
2+
import { Router } from '@angular/router';
3+
4+
import { Hero } from '../shared/hero';
5+
6+
@Component({
7+
selector: 'app-hero',
8+
templateUrl: './hero.component.html',
9+
styleUrls: ['./hero.component.css']
10+
})
11+
export class HeroComponent implements OnInit {
12+
@Input() hero: Hero;
13+
@Output() delete = new EventEmitter();
14+
15+
constructor() {
16+
console.log(4);
17+
}
18+
19+
ngOnInit(): void {
20+
console.log(4.5);
21+
}
22+
23+
onButtonClick(): void {
24+
this.delete.next(this.hero);
25+
}
26+
27+
}

‎tour-of-heroes/src/app/heroes.component/heroes.component.css‎

Lines changed: 1 addition & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.selected {
1+
/deep/ .selected {
22
background-color: #CFD8DC !important;
33
color: white;
44
}
@@ -27,44 +27,6 @@
2727
background-color: #BBD8DC !important;
2828
color: white;
2929
}
30-
.heroes .text {
31-
position: relative;
32-
top: -3px;
33-
}
34-
.heroes .badge {
35-
display: inline-block;
36-
font-size: small;
37-
color: white;
38-
padding: 0.8em 0.7em 0 0.7em;
39-
background-color: #607D8B;
40-
line-height: 1em;
41-
position: relative;
42-
left: -1px;
43-
top: -4px;
44-
height: 1.8em;
45-
margin-right: .8em;
46-
border-radius: 4px 0 0 4px;
47-
}
48-
button {
49-
font-family: Arial;
50-
background-color: #eee;
51-
border: none;
52-
padding: 5px 10px;
53-
border-radius: 4px;
54-
cursor: pointer;
55-
cursor: hand;
56-
}
57-
button:hover {
58-
background-color: #cfd8dc;
59-
}
60-
button.delete {
61-
float:right;
62-
margin-top: 2px;
63-
margin-right: .8em;
64-
background-color: gray !important;
65-
color:white;
66-
}
67-
6830

6931
/*
7032
Copyright 2016 Google Inc. All Rights Reserved.

‎tour-of-heroes/src/app/heroes.component/heroes.component.deep.spec.ts‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { TestBed, fakeAsync, tick, async, ComponentFixture, inject } from '@angular/core/testing';
2+
import { HeroComponent } from '../hero.component/hero.component';
3+
import { HeroesComponent } from './heroes.component';
4+
import { HeroService } from '../hero.service/hero.service';
5+
import { Router } from '@angular/router';
6+
import { By } from '@angular/platform-browser';
7+
8+
describe('HeroDetailComponent (shallow tests)', () => {
9+
let fixture: ComponentFixture<HeroesComponent>;
10+
let component: HeroesComponent;
11+
let element;
12+
let heroes = [
13+
{id: 3, name: 'Magneta', strength: 4},
14+
{id: 4, name: 'Dynama', strength: 2}
15+
];
16+
17+
beforeEach(() => {
18+
19+
const mockHeroService = {
20+
getHeros: () => Promise.resolve(heroes),
21+
delete: () => Promise.resolve()
22+
};
23+
24+
const mockRouter = {};
25+
26+
TestBed.configureTestingModule({
27+
imports: [
28+
],
29+
declarations: [
30+
HeroComponent,
31+
HeroesComponent
32+
],
33+
providers: [
34+
{ provide: HeroService, useValue: mockHeroService },
35+
{ provide: Router, useValue: mockRouter },
36+
],
37+
schemas: [
38+
// NO_ERRORS_SCHEMA will hide that angular doesn't know about ngModel
39+
]
40+
});
41+
42+
fixture = TestBed.createComponent(HeroesComponent);
43+
component = fixture.componentInstance;
44+
element = fixture.nativeElement;
45+
});
46+
47+
describe('initial display', () => {
48+
it('should show the hero id and name for each hero', fakeAsync(() => {
49+
console.log(2.5);
50+
expect(3).toBe(3);
51+
}))
52+
});
53+
54+
it('should select the hero when the hero is clicked');
55+
56+
it('should delete the hero when the delete button is clicked');
57+
58+
});
59+
60+
function createEvent(eventName: string, bubbles = false, cancelable = false) {
61+
let evt = document.createEvent('CustomEvent'); // MUST be 'CustomEvent'
62+
evt.initCustomEvent(eventName, bubbles, cancelable, null);
63+
return evt;
64+
}
65+
66+
function getHeadingText(fixture) {
67+
return fixture.debugElement.query(By.css('h2')).nativeElement.textContent;
68+
}
69+

‎tour-of-heroes/src/app/heroes.component/heroes.component.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,7 @@ <h2>My Heroes</h2>
88
<ul class="heroes">
99
<li *ngFor="let hero of heroes" (click)="onSelect(hero)"
1010
[class.selected]="hero === selectedHero">
11-
<span class="badge">{{hero.id}}</span>
12-
<span>{{hero.name}}</span>
13-
<button class="delete"
14-
(click)="delete(hero); $event.stopPropagation()">x</button>
11+
<app-hero [hero]="hero" (delete)="delete(hero)"></app-hero>
1512
</li>
1613
</ul>
1714
<div *ngIf="selectedHero">

‎tour-of-heroes/src/app/heroes.component/heroes.component.ts‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
11
import { Component, OnInit } from '@angular/core';
2-
import { Router } from '@angular/router';
3-
4-
import { Hero } from '../shared/hero';
5-
import { HeroService } from '../hero.service/hero.service';
2+
import { Router } from '@angular/router';
3+
import { Hero } from '../shared/hero';
4+
import { HeroService } from '../hero.service/hero.service';
65

76
@Component({
87
selector: 'app-heroes',
98
templateUrl: './heroes.component.html',
10-
styleUrls: ['./heroes.component.css']
9+
styleUrls: ['./heroes.component.css']
1110
})
1211
export class HeroesComponent implements OnInit {
1312
heroes: Hero[];
1413
selectedHero: Hero;
1514

1615
constructor(
1716
private heroService: HeroService,
18-
private router: Router) { }
17+
private router: Router) {
18+
console.log(1.5);
19+
}
1920

2021
getHeroes(): void {
22+
console.log(2)
2123
this.heroService
22-
.getHeroes()
23-
.then(heroes => this.heroes = heroes);
24+
.getHeroes()
25+
.then(heroes => this.heroes = heroes);
2426
}
2527

2628
add(name: string): void {
@@ -35,11 +37,11 @@ export class HeroesComponent implements OnInit {
3537

3638
delete(hero: Hero): void {
3739
this.heroService
38-
.delete(hero.id)
39-
.then(() => {
40-
this.heroes = this.heroes.filter(h => h !== hero);
41-
if (this.selectedHero === hero) { this.selectedHero = null; }
42-
});
40+
.delete(hero.id)
41+
.then(() => {
42+
this.heroes = this.heroes.filter(h => h !== hero);
43+
if (this.selectedHero === hero) { this.selectedHero = null; }
44+
});
4345
}
4446

4547
ngOnInit(): void {

0 commit comments

Comments
 (0)