FunnyGhost

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

FunnyGhost

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

FunnyGhost

export class FavoriteMoviesComponent implements OnInit {
  favoriteMovies$: Observable<Movie[]>;
  constructor(private favoriteMovieService: FavoriteMoviesService) {}

  ngOnInit() {
    this.favoriteMovies$ = this.favoriteMovieService.getFavoriteMovies();
  }
}

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

FunnyGhost

  ngOnInit() {
    this.favoriteMovies$ = this.favoriteMovieService.getFavoriteMovies().pipe(
      catchError((error: any) => {
        this.error = error;

        return of([]);
      })
    );
  }

FunnyGhost

<div class="error" *ngIf="error">
  {{ error }}
</div>

FunnyGhost

export class FavoriteMoviesService {
  constructor() {}

  getFavoriteMovies(): Observable<Movie[]> {
    return of([]);
  }
}

FunnyGhost

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

describe('FavoriteMoviesService', () => {
  let serviceUnderTest: FavoriteMoviesService;

  beforeEach(() => {

FunnyGhost

  it('should return the favorite movies', () => {
    let result: Movie[] = [];
    serviceUnderTest.getFavoriteMovies().subscribe(data => {
      result = data;
    });

    expect(result).toEqual(moviesToUse);
  });