This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Favorite movies</h1> | |
<ng-container *ngIf="(favoriteMovies$ | async); let favoriteMovies"> | |
<div class="movie" *ngFor="let movie of favoriteMovies"> | |
{{ movie.title }} | |
</div> | |
</ng-container> | |
<div class="error" *ngIf="error"> | |
{{ error }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
describe('FavoriteMoviesComponent', () => { | |
let component: FavoriteMoviesComponent; | |
let fixture: ComponentFixture<FavoriteMoviesComponent>; | |
let favoriteMovieService: FavoriteMoviesService; | |
beforeEach(() => { | |
fixture = TestBed.createComponent(FavoriteMoviesComponent); | |
component = fixture.componentInstance; | |
favoriteMovieService = TestBed.get(FavoriteMoviesService); | |
jest.spyOn(favoriteMovieService, 'getFavoriteMovies').mockReturnValue(of(favoriteMoviesToUse)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class FavoriteMoviesComponent implements OnInit { | |
favoriteMovies$: Observable<Movie[]>; | |
constructor(private favoriteMovieService: FavoriteMoviesService) {} | |
ngOnInit() { | |
this.favoriteMovies$ = this.favoriteMovieService.getFavoriteMovies(); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ng-container *ngIf="(favoriteMovies$ | async); let favoriteMovies"> | |
<div class="movie" *ngFor="let movie of favoriteMovies"> | |
{{ movie.title }} | |
</div> | |
</ng-container> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('should show an error if getting the movies fail', () => { | |
const errorToThrow = 'User not found'; | |
jest | |
.spyOn(favoriteMovieService, 'getFavoriteMovies') | |
.mockReturnValue(throwError(errorToThrow)); | |
fixture.detectChanges(); | |
const errorElement = fixture.debugElement.queryAll(By.css('.error')); | |
expect(errorElement.length).toBe(1); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ngOnInit() { | |
this.favoriteMovies$ = this.favoriteMovieService.getFavoriteMovies().pipe( | |
catchError((error: any) => { | |
this.error = error; | |
return of([]); | |
}) | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="error" *ngIf="error"> | |
{{ error }} | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class FavoriteMoviesService { | |
constructor() {} | |
getFavoriteMovies(): Observable<Movie[]> { | |
return of([]); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const moviesToUse = [ | |
{ title: 'Interstellar' } as Movie, | |
{ title: 'The Green Book' } as Movie, | |
{ title: 'Dark Knight' } as Movie | |
]; | |
describe('FavoriteMoviesService', () => { | |
let serviceUnderTest: FavoriteMoviesService; | |
beforeEach(() => { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it('should return the favorite movies', () => { | |
let result: Movie[] = []; | |
serviceUnderTest.getFavoriteMovies().subscribe(data => { | |
result = data; | |
}); | |
expect(result).toEqual(moviesToUse); | |
}); |