Challenge: Build a client that allows the user to search for cars in a city.
The user can select the maximum distance and they can change the sorting order.
The results should be refreshed automatically when a parameter is changed.
addMovie(movie: Movie): void { | |
this.favoriteMovieService.addMovie(movie); | |
} |
<h1>Favorite movies</h1> | |
<kpd-search-movie (addMovie)="addMovie($event)"></kpd-search-movie> | |
<ng-container *ngIf="favoriteMovies$ | async; let favoriteMovies"> | |
<kpd-favorite-movie | |
*ngFor="let movie of favoriteMovies" | |
[favoriteMovie]="movie" | |
(deleteMovie)="deleteMovie($event)" | |
> |
describe('SearchComponent', () => { | |
beforeEach(() => { | |
fixture.detectChanges(); | |
}); | |
it('should show the search component', () => { | |
const searchComponents = fixture.debugElement.queryAll(By.directive(SearchMovieComponent)); | |
expect(searchComponents.length).toEqual(1); | |
}); |
deleteMovie(movie: Movie): void { | |
this.favoriteMovieService.deleteMovie(movie); | |
} |
<ng-container *ngIf="favoriteMovies$ | async; let favoriteMovies"> | |
<kpd-favorite-movie | |
*ngFor="let movie of favoriteMovies" | |
[favoriteMovie]="movie" | |
(deleteMovie)="deleteMovie($event)" | |
> | |
</kpd-favorite-movie> | |
</ng-container> |
it('should delete a favorite movie when the user wants to', () => { | |
jest.spyOn(favoriteMovieService, 'deleteMovie'); | |
const favoriteMovieToDelete = favoriteMoviesToUse[0]; | |
const componentToDelete = fixture.debugElement.queryAll( | |
By.directive(FavoriteMovieComponent) | |
)[0].componentInstance as FavoriteMovieComponent; | |
componentToDelete.deleteMovie.emit(favoriteMovieToDelete); | |
expect(favoriteMovieService.deleteMovie).toHaveBeenCalledWith(favoriteMovieToDelete); |
<ng-container *ngIf="favoriteMovies$ | async; let favoriteMovies"> | |
<kpd-favorite-movie *ngFor="let movie of favoriteMovies" [favoriteMovie]="movie"> | |
</kpd-favorite-movie> | |
</ng-container> |
it('should show all the favorite movies', () => { | |
const movieComponents = fixture.debugElement.queryAll(By.directive(FavoriteMovieComponent)); | |
expect(movieComponents.length).toEqual(favoriteMoviesToUse.length); | |
const movieComponentsInputs = movieComponents.map( | |
htmlComponent => (htmlComponent.componentInstance as FavoriteMovieComponent).favoriteMovie | |
); | |
expect(movieComponentsInputs).toEqual(favoriteMoviesToUse); | |
}); |
declarations: [FavoriteMoviesComponent, MockComponent(FavoriteMovieComponent)], |