BM5 Diff | 07-http (von 06-routing)

src/app/app.module.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
@@ -14,6 +15,7 @@ import { HomeComponent } from './home/home.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
     BooksModule
   ],
   providers: [],

 import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
   imports: [
     BrowserModule,
     AppRoutingModule,
+    HttpClientModule,
     BooksModule
   ],
   providers: [],

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

@@ -23,4 +23,7 @@
     [src]="book.thumbnailUrl"
     alt="Cover">
   <a class="button arrow-left" routerLink="..">Back to list</a>
 </div>

     [src]="book.thumbnailUrl"
     alt="Cover">
   <a class="button arrow-left" routerLink="..">Back to list</a>
+  <button class="red" (click)="removeBook(book.isbn)">
+    Remove book
+  </button>
 </div>

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { BookStoreService } from '../../shared/book-store.service';
 import { Book } from '../../shared/book';
@@ -14,8 +14,19 @@ export class BookDetailsComponent {
   constructor(
     private service: BookStoreService,
     private route: ActivatedRoute,
   ) {
     const isbn = this.route.snapshot.paramMap.get('isbn')!;
-    this.book = this.service.getSingle(isbn);
   }
 }

 import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { BookStoreService } from '../../shared/book-store.service';
 import { Book } from '../../shared/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) {
+    if (window.confirm('Remove book?')) {
+      this.service.remove(isbn).subscribe(() => {
+        this.router.navigateByUrl('/books');
+      });
+    }
   }
 }

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

@@ -1,23 +0,0 @@
-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

@@ -12,6 +12,8 @@ export class BookListComponent {
   books: Book[] = [];
   constructor(private service: BookStoreService) {
-    this.books = this.service.getAll();
   }
 }

   books: Book[] = [];
   constructor(private service: BookStoreService) {
+    this.service.getAll().subscribe(books => {
+      this.books = books;
+    });
   }
 }

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

@@ -1,42 +1,23 @@
-import { Location } from '@angular/common';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
 import { BookListItemComponent } from './book-list-item.component';
 describe('BookListItemComponent', () => {
   let component: BookListItemComponent;
   let fixture: ComponentFixture<BookListItemComponent>;
-  let location: Location;
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [BookListItemComponent],
-      imports: [
-        RouterTestingModule.withRoutes([
-          { path: ':isbn', children: [] }
-        ])
-      ]
     })
     .compileComponents();
-    location = TestBed.inject(Location);
     fixture = TestBed.createComponent(BookListItemComponent);
     component = fixture.componentInstance;
-    // Buch zum Anzeigen
-    component.book = {
-      isbn: '111',
-      title: 'Book 1',
-      authors: [],
-      thumbnailUrl: 'https://cdn.ng-buch.de/kochen.png'
-    };
     fixture.detectChanges();
   });
-  it('should navigate to details page by ISBN', async () => {
-    fixture.nativeElement.querySelector('img').click();
-    await fixture.whenStable();
-    expect(location.path()).toEqual('/111');
   });
 });

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

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

	@@ -0,0 +1,66 @@

+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 ADDED Viewed

	@@ -0,0 +1,48 @@

+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 DELETED Viewed

@@ -1,16 +0,0 @@
-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 ADDED Viewed

	@@ -0,0 +1,39 @@

+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,4 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Book } from './book';
@@ -6,36 +8,19 @@ import { Book } from './book';
   providedIn: 'root'
 })
 export class BookStoreService {
-  private books: Book[] = [];
-  constructor() {
-    this.books = [
-      {
-        isbn: '12345',
-        title: 'Tierisch gut kochen',
-        authors: ['Mrs Chimp', 'Mr Gorilla'],
-        published: '2022-06-20',
-        subtitle: 'Rezepte von Affe bis Zebra',
-        thumbnailUrl: 'https://cdn.ng-buch.de/kochen.png',
-        description: 'Immer lecker und gut'
-      },
-      {
-        isbn: '67890',
-        title: 'Backen mit Affen',
-        authors: ['Orang Utan'],
-        published: '2022-07-15',
-        subtitle: 'Bananenbrot und mehr',
-        thumbnailUrl: 'https://cdn.ng-buch.de/backen.png',
-        description: 'Tolle Backtipps für Mensch und Tier'
-      }
-    ];
   }
-  getAll(): Book[] {
-    return this.books;
   }
-  getSingle(isbn: string): Book | undefined {
-    return this.books.find(book => book.isbn === isbn);
   }
 }

+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
 import { Book } from './book';
   providedIn: 'root'
 })
 export class BookStoreService {
+  private apiUrl = 'https://api5.angular-buch.com';
+  constructor(private http: HttpClient) {}
+  getAll(): Observable<Book[]> {
+    return this.http.get<Book[]>(`${this.apiUrl}/books`);
   }
+  getSingle(isbn: string): Observable<Book> {
+    return this.http.get<Book>(`${this.apiUrl}/books/${isbn}`);
   }
+  remove(isbn: string): Observable<unknown> {
+    return this.http.delete(`${this.apiUrl}/books/${isbn}`);
   }
 }

Differenzansicht 07-httpim Vergleich zu 06-routing

Differenzansicht 07-http
im Vergleich zu 06-routing