FunnyGhost

<ng-container *ngIf="favoriteMovies$ | async; let favoriteMovies">
  <kpd-favorite-movie *ngFor="let movie of favoriteMovies"> </kpd-favorite-movie>
</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">
  <div class="movie" *ngFor="let movie of favoriteMovies">
    {{ movie.title }}
  </div>
</ng-container>

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

@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

import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { TestBed } from '@angular/core/testing';
import { environment } from 'src/environments/environment';
import { Movie } from '../movie-list/core/models/movie';
import { FavoriteMoviesService } from './favorite-movies.service';

const moviesToUse = [
  { title: 'Interstellar' } as Movie,
  { title: 'The Green Book' } as Movie,
  { title: 'Dark Knight' } as Movie

FunnyGhost

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { retry } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
import { Movie } from '../movie-list/core/models/movie';

@Injectable()
export class FavoriteMoviesService {
  constructor(private http: HttpClient) {}

FunnyGhost

  it('should return the list of favorite movies if the backend returns an error 2 times and the succeds', () => {
    let favoriteMovies: Movie[] = [];
    serviceUnderTest.getFavoriteMovies().subscribe(data => {
      favoriteMovies = data;
    });

    const req = http.expectOne(environment.favoriteUrl, 'expected to make an initial request');
    expect(req.request.method).toEqual('GET');
    req.flush('ERROR', { status: 500, statusText: 'Internal server error' });

FunnyGhost

  getFavoriteMovies(): Observable<Movie[]> {
    return this.http.get<Movie[]>(environment.favoriteUrl).pipe(retry(2));
  }

FunnyGhost

  it('should fail if the backend returns an error 3 times in a row', done => {
    let bubblesUpTheError = false;
    serviceUnderTest.getFavoriteMovies().subscribe(() => {}, () => (bubblesUpTheError = true);

    const req = http.expectOne(environment.favoriteUrl, 'expected to make an initial request');
    expect(req.request.method).toEqual('GET');
    req.flush('ERROR', { status: 500, statusText: 'Internal server error' });

    const req2 = http.expectOne(environment.favoriteUrl, 'expected to make a second request');
    expect(req2.request.method).toEqual('GET');