FunnyGhost

SnappCar Interview

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.

City Search

FunnyGhost

  addMovie(movie: Movie): void {
    this.favoriteMovieService.addMovie(movie);
  }

FunnyGhost

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

FunnyGhost

  describe('SearchComponent', () => {
    beforeEach(() => {
      fixture.detectChanges();
    });

    it('should show the search component', () => {
      const searchComponents = fixture.debugElement.queryAll(By.directive(SearchMovieComponent));

      expect(searchComponents.length).toEqual(1);
    });

FunnyGhost

  deleteMovie(movie: Movie): void {
    this.favoriteMovieService.deleteMovie(movie);
  }

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>

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

      const movieComponentsInputs = movieComponents.map(
        htmlComponent => (htmlComponent.componentInstance as FavoriteMovieComponent).favoriteMovie
      );
      expect(movieComponentsInputs).toEqual(favoriteMoviesToUse);
    });

FunnyGhost

declarations: [FavoriteMoviesComponent, MockComponent(FavoriteMovieComponent)],