FunnyGhost

@Component({
  selector: "kpd-favorite-movie",
  templateUrl: "./favorite-movie.component.html",
  styleUrls: ["./favorite-movie.component.scss"],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class FavoriteMovieComponent {

  @Input() favoriteMovie: Movie;
  @Output() deleteMovie = new EventEmitter<Movie>();

FunnyGhost

@Component({
  selector: "kpd-search-movie",
  templateUrl: "./search-movie.component.html",
  styleUrls: ["./search-movie.component.scss"]
})
export class SearchMovieComponent {
  @Output() addMovie = new EventEmitter<Movie>();

  constructor() {}
}

FunnyGhost

<ng-container *ngIf="(favoriteMovies$ | async); let favoriteMovies">
  <div class="movie" *ngFor="let movie of favoriteMovies">
    {{ movie.title }}
  </div>
</ng-container>

FunnyGhost

    it('should show all the favorite movies', () => {
      const movieComponents = fixture.debugElement.queryAll(By.directive(FavoriteMovieComponent));

      expect(movieComponents.length).toEqual(favoriteMoviesToUse.length);
    });

FunnyGhost

<ng-container *ngIf="favoriteMovies$ | async; let favoriteMovies">
  <kpd-favorite-movie *ngFor="let movie of favoriteMovies"> </kpd-favorite-movie>
</ng-container>

FunnyGhost

declarations: [FavoriteMoviesComponent, MockComponent(FavoriteMovieComponent)],

FunnyGhost

    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);
    });

FunnyGhost

<ng-container *ngIf="favoriteMovies$ | async; let favoriteMovies">
  <kpd-favorite-movie *ngFor="let movie of favoriteMovies" [favoriteMovie]="movie">
  </kpd-favorite-movie>
</ng-container>

FunnyGhost

    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);

FunnyGhost

<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>