BM5 Diff | 08-rxjs (von 07-http)

src/app/app.module.ts CHANGED Viewed

@@ -6,11 +6,13 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BooksModule } from './books/books.module';
 import { HomeComponent } from './home/home.component';
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
   ],
   imports: [
     BrowserModule,

 import { AppComponent } from './app.component';
 import { BooksModule } from './books/books.module';
 import { HomeComponent } from './home/home.component';
+import { SearchComponent } from './search/search.component';
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
+    SearchComponent,
   ],
   imports: [
     BrowserModule,

src/app/books/book-details/book-details.component.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<div class="details" *ngIf="book">
   <h1>{{ book.title }}</h1>
   <p role="doc-subtitle" *ngIf="book.subtitle">{{ book.subtitle }}</p>
   <div class="header">

+<div class="details" *ngIf="book$ | async as book">
   <h1>{{ book.title }}</h1>
   <p role="doc-subtitle" *ngIf="book.subtitle">{{ book.subtitle }}</p>
   <div class="header">

src/app/books/book-details/book-details.component.spec.ts ADDED Viewed

	@@ -0,0 +1,23 @@

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BookDetailsComponent } from './book-details.component';
+describe('BookDetailsComponent', () => {
+  let component: BookDetailsComponent;
+  let fixture: ComponentFixture<BookDetailsComponent>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BookDetailsComponent ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(BookDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/books/book-details/book-details.component.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BookStoreService } from '../../shared/book-store.service';
 import { Book } from '../../shared/book';
@@ -10,16 +11,15 @@ import { Book } from '../../shared/book';
   styleUrls: ['./book-details.component.css']
 })
 export class BookDetailsComponent {
-  book?: Book;
   constructor(
     private service: BookStoreService,
     private route: ActivatedRoute,
     private router: Router
   ) {
     const isbn = this.route.snapshot.paramMap.get('isbn')!;
-    this.service.getSingle(isbn).subscribe(book => {
-      this.book = book;
-    });
   }
   removeBook(isbn: string) {

 import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Observable } from 'rxjs';
 import { BookStoreService } from '../../shared/book-store.service';
 import { Book } from '../../shared/book';
   styleUrls: ['./book-details.component.css']
 })
 export class BookDetailsComponent {
+  book$: Observable<Book>;
   constructor(
     private service: BookStoreService,
     private route: ActivatedRoute,
     private router: Router
   ) {
     const isbn = this.route.snapshot.paramMap.get('isbn')!;
+    this.book$ = this.service.getSingle(isbn);
   }
   removeBook(isbn: string) {

src/app/books/book-list/book-list.component.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <h1>Books</h1>
-<ul class="book-list">
   <li *ngFor="let book of books">
     <bm-book-list-item [book]="book"></bm-book-list-item>
   </li>

 <h1>Books</h1>
+<ul class="book-list" *ngIf="books$ | async as books">
   <li *ngFor="let book of books">
     <bm-book-list-item [book]="book"></bm-book-list-item>
   </li>

src/app/books/book-list/book-list.component.spec.ts ADDED Viewed

	@@ -0,0 +1,23 @@

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BookListComponent } from './book-list.component';
+describe('BookListComponent', () => {
+  let component: BookListComponent;
+  let fixture: ComponentFixture<BookListComponent>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BookListComponent ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(BookListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/books/book-list/book-list.component.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 import { Component } from '@angular/core';
-import { BookStoreService } from '../../shared/book-store.service';
 import { Book } from '../../shared/book';
 @Component({
   selector: 'bm-book-list',
@@ -9,11 +10,9 @@ import { Book } from '../../shared/book';
   styleUrls: ['./book-list.component.css']
 })
 export class BookListComponent {
-  books: Book[] = [];
   constructor(private service: BookStoreService) {
-    this.service.getAll().subscribe(books => {
-      this.books = books;
-    });
   }
 }

 import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
 import { Book } from '../../shared/book';
+import { BookStoreService } from '../../shared/book-store.service';
 @Component({
   selector: 'bm-book-list',
   styleUrls: ['./book-list.component.css']
 })
 export class BookListComponent {
+  books$: Observable<Book[]>;
   constructor(private service: BookStoreService) {
+    this.books$ = this.service.getAll();
   }
 }

src/app/home/home.component.html CHANGED Viewed

@@ -3,3 +3,6 @@
 <a routerLink="/books" class="button red">
   Show book list
 </a>

 <a routerLink="/books" class="button red">
   Show book list
 </a>
+<h2>Search</h2>
+<bm-search></bm-search>

src/app/search/search.component.html ADDED Viewed

	@@ -0,0 +1,16 @@

+<input type="search"
+  autocomplete="off"
+  aria-label="Search"
+  [class.loading]="isLoading"
+  #searchInput
+  (input)="input$.next(searchInput.value)">
+<ul class="search-results" *ngIf="results$ | async as results">
+  <li *ngFor="let book of results">
+    <a [routerLink]="['/books', book.isbn]">
+      {{ book.title }}
+      <p role="doc-subtitle">{{ book.subtitle }}</p>
+    </a>
+  </li>
+  <li *ngIf="!results.length">No results</li>
+</ul>

src/app/search/search.component.spec.ts ADDED Viewed

	@@ -0,0 +1,23 @@

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SearchComponent } from './search.component';
+describe('SearchComponent', () => {
+  let component: SearchComponent;
+  let fixture: ComponentFixture<SearchComponent>;
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SearchComponent ]
+    })
+    .compileComponents();
+    fixture = TestBed.createComponent(SearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/search/search.component.ts ADDED Viewed

	@@ -0,0 +1,28 @@

+import { Component } from '@angular/core';
+import { Subject, debounceTime, distinctUntilChanged, filter, switchMap, tap, Observable } from 'rxjs';
+import { Book } from '../shared/book';
+import { BookStoreService } from '../shared/book-store.service';
+@Component({
+  selector: 'bm-search',
+  templateUrl: './search.component.html',
+  styleUrls: ['./search.component.css']
+})
+export class SearchComponent {
+  input$ = new Subject<string>();
+  isLoading = false;
+  results$: Observable<Book[]>;
+  constructor(private service: BookStoreService) {
+    this.results$ = this.input$.pipe(
+      filter(term => term.length >= 3),
+      debounceTime(500),
+      distinctUntilChanged(),
+      tap(() => this.isLoading = true),
+      switchMap(term => this.service.getAllSearch(term)),
+      tap(() => this.isLoading = false)
+    );
+  }
+}

src/app/shared/book-store.service.http-testing-controller.spec.ts DELETED Viewed

@@ -1,66 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { Book } from './book';
-import { BookStoreService } from './book-store.service';
-import { HttpErrorResponse } from '@angular/common/http';
-describe('BookStoreService', () => {
-  let service: BookStoreService;
-  let httpMock: HttpTestingController;
-  const expectedBooks = [
-    { isbn: '111', title: 'Book 1', authors: [] },
-    { isbn: '222', title: 'Book 2', authors: [] }
-  ];
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule]
-    });
-    service = TestBed.inject(BookStoreService);
-    httpMock = TestBed.inject(HttpTestingController);
-  });
-  it('should GET a list of all books', () => {
-    let receivedBooks!: Book[];
-    service.getAll().subscribe(books => receivedBooks = books);
-    // Request aus der Warteschlange holen
-    const req = httpMock.expectOne(
-      'https://api5.angular-buch.com/books');
-    expect(req.request.method).toEqual('GET');
-    // flush -- jetzt werden die Bücher emittiert
-    req.flush(expectedBooks);
-    expect(receivedBooks).toHaveSize(2);
-    expect(receivedBooks[0].isbn).toBe('111');
-    expect(receivedBooks[1].isbn).toBe('222');
-  });
-  it('should throw a HttpErrorResponse on server errors', () => {
-    let errorResponse!: HttpErrorResponse;
-    service.getAll().subscribe({
-      error: (error: any) => errorResponse = error
-    });
-    const req = httpMock.expectOne('https://api5.angular-buch.com/books');
-    req.flush('Fehler!', {
-      status: 500,
-      statusText: 'Internal Server Error'
-    });
-    expect(errorResponse.status).toBe(500);
-    expect(errorResponse.statusText).toBe('Internal Server Error');
-  });
-  afterEach(() => {
-    // prüfen, ob kein Request übrig geblieben ist
-    httpMock.verify();
-  });
-});

src/app/shared/book-store.service.mock.spec.ts DELETED Viewed

@@ -1,48 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { TestBed } from '@angular/core/testing';
-import { Observable, of } from 'rxjs';
-import { Book } from '../shared/book';
-import { BookStoreService } from './book-store.service';
-describe('BookStoreService', () => {
-  let service: BookStoreService;
-  let httpMock: {
-    get: (url: string) => Observable<Book[]>;
-  };
-  beforeEach(() => {
-    const expectedBooks: Book[] = [
-      { isbn: '111', title: 'Book 1', authors: [] },
-      { isbn: '222', title: 'Book 2', authors: [] }
-    ];
-    httpMock = {
-      get: () => of(expectedBooks)
-    };
-    spyOn(httpMock, 'get').and.callThrough();
-    TestBed.configureTestingModule({
-      providers: [
-        {  provide: HttpClient, useValue: httpMock },
-        BookStoreService
-      ]
-    });
-    service = TestBed.inject(BookStoreService);
-  });
-  it('should GET a list of all books', () => {
-      let receivedBooks!: Book[];
-      service.getAll().subscribe(b => receivedBooks = b);
-      expect(receivedBooks).toHaveSize(2);
-      expect(receivedBooks[0].isbn).toBe('111');
-      expect(receivedBooks[1].isbn).toBe('222');
-      // NEU
-      expect(httpMock.get).toHaveBeenCalledOnceWith('https://api5.angular-buch.com/books');
-    });
-});

src/app/shared/book-store.service.spec.ts ADDED Viewed

	@@ -0,0 +1,16 @@

+import { TestBed } from '@angular/core/testing';
+import { BookStoreService } from './book-store.service';
+describe('BookStoreService', () => {
+  let service: BookStoreService;
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(BookStoreService);
+  });
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/book-store.service.stub.spec.ts DELETED Viewed

@@ -1,39 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { TestBed } from '@angular/core/testing';
-import { of } from 'rxjs';
-import { Book } from './book';
-import { BookStoreService } from './book-store.service';
-describe('BookStoreService', () => {
-  let service: BookStoreService;
-  beforeEach(() => {
-    const expectedBooks: Book[] = [
-      { isbn: '111', title: 'Book 1', authors: [] },
-      { isbn: '222', title: 'Book 2', authors: [] }
-    ];
-    const httpStub = {
-      get: () => of(expectedBooks)
-    };
-    TestBed.configureTestingModule({
-      providers: [
-        { provide: HttpClient, useValue: httpStub }
-      ]
-    });
-    service = TestBed.inject(BookStoreService);
-  });
-  it('should GET a list of all books', () => {
-    let receivedBooks!: Book[];
-    service.getAll().subscribe(b => receivedBooks = b);
-    expect(receivedBooks).toHaveSize(2);
-    expect(receivedBooks[0].isbn).toBe('111');
-    expect(receivedBooks[1].isbn).toBe('222');
-  });
-});

src/app/shared/book-store.service.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
 import { Book } from './book';
@@ -13,7 +13,12 @@ export class BookStoreService {
   constructor(private http: HttpClient) {}
   getAll(): Observable<Book[]> {
-    return this.http.get<Book[]>(`${this.apiUrl}/books`);
   }
   getSingle(isbn: string): Observable<Book> {
@@ -23,4 +28,13 @@ export class BookStoreService {
   remove(isbn: string): Observable<unknown> {
     return this.http.delete(`${this.apiUrl}/books/${isbn}`);
   }
 }

 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { Observable, catchError, of } from 'rxjs';
 import { Book } from './book';
   constructor(private http: HttpClient) {}
   getAll(): Observable<Book[]> {
+    return this.http.get<Book[]>(`${this.apiUrl}/books`).pipe(
+      catchError(err => {
+        console.error(err);
+        return of([]);
+      })
+    );
   }
   getSingle(isbn: string): Observable<Book> {
   remove(isbn: string): Observable<unknown> {
     return this.http.delete(`${this.apiUrl}/books/${isbn}`);
   }
+  getAllSearch(term: string): Observable<Book[]> {
+    return this.http.get<Book[]>(`${this.apiUrl}/books/search/${term}`).pipe(
+      catchError(err => {
+        console.error(err);
+        return of([]);
+      })
+    );
+  }
 }

Differenzansicht 08-rxjsim Vergleich zu 07-http

Differenzansicht 08-rxjs
im Vergleich zu 07-http