BookManager 1 Diff | 08-http (from 07-inputparams)

src/app/books-portal/book-details-page/book-details-page.html CHANGED Viewed

@@ -28,6 +28,10 @@
     <img [src]="b.imageUrl" alt="Cover" />
     <footer>
       <a routerLink="/books">Back to list</a>
     </footer>
   </article>
 }

     <img [src]="b.imageUrl" alt="Cover" />
     <footer>
       <a routerLink="/books">Back to list</a>
+      <a routerLink="/books/details/9783988890641">Angular Book</a>
+      <button type="button" (click)="removeBook(b.isbn)">
+        Delete book
+      </button>
     </footer>
   </article>
 }

src/app/books-portal/book-details-page/book-details-page.spec.ts CHANGED Viewed

@@ -1,28 +1,36 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { provideRouter, Router } from '@angular/router';
-import { provideLocationMocks } from '@angular/common/testing';
 import { Location } from '@angular/common';
 import { inputBinding, signal, WritableSignal } from '@angular/core';
-import { BookDetailsPage } from './book-details-page';
-import { booksPortalRoutes } from '../books-portal.routes';
 import { BookStore } from '../../shared/book-store';
 describe('BookDetailsPage', () => {
   let component: BookDetailsPage;
   let fixture: ComponentFixture<BookDetailsPage>;
-  let bookStore: BookStore;
   let isbn: WritableSignal<string>;
   beforeEach(async () => {
     isbn = signal('12345');
     await TestBed.configureTestingModule({
       imports: [BookDetailsPage],
       providers: [
         provideRouter(booksPortalRoutes),
         provideLocationMocks(),
       ]
     })
     .compileComponents();
@@ -31,7 +39,6 @@ describe('BookDetailsPage', () => {
       bindings: [inputBinding('isbn', isbn)]
     });
     component = fixture.componentInstance;
-    bookStore = TestBed.inject(BookStore);
     await fixture.whenStable();
   });
@@ -40,8 +47,8 @@ describe('BookDetailsPage', () => {
   });
   it('should load the correct book by ISBN', async () => {
-    const expectedBook = bookStore.getSingle('12345');
-    expect(component['book']()).toEqual(expectedBook);
   });
   it('should navigate to the details page', async () => {
@@ -54,10 +61,13 @@ describe('BookDetailsPage', () => {
   });
   it('should update the book when ISBN changes', async () => {
     isbn.set('67890');
     await fixture.whenStable();
-    const expectedBook = bookStore.getSingle('67890');
-    expect(component['book']()).toEqual(expectedBook);
   });
 });

 import { Location } from '@angular/common';
+import { provideLocationMocks } from '@angular/common/testing';
 import { inputBinding, signal, WritableSignal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter, Router } from '@angular/router';
+import { of } from 'rxjs';
+import { Mock } from 'vitest';
 import { BookStore } from '../../shared/book-store';
+import { booksPortalRoutes } from '../books-portal.routes';
+import { BookDetailsPage } from './book-details-page';
 describe('BookDetailsPage', () => {
   let component: BookDetailsPage;
   let fixture: ComponentFixture<BookDetailsPage>;
+  let getSingleMock: Mock;
   let isbn: WritableSignal<string>;
+  const testBook = { isbn: '12345', title: 'Test Book 1', authors: [] };
   beforeEach(async () => {
     isbn = signal('12345');
+    getSingleMock = vi.fn().mockReturnValue(of(testBook));
     await TestBed.configureTestingModule({
       imports: [BookDetailsPage],
       providers: [
         provideRouter(booksPortalRoutes),
         provideLocationMocks(),
+        {
+          provide: BookStore,
+          useValue: { getSingle: getSingleMock }
+        }
       ]
     })
     .compileComponents();
       bindings: [inputBinding('isbn', isbn)]
     });
     component = fixture.componentInstance;
     await fixture.whenStable();
   });
   });
   it('should load the correct book by ISBN', async () => {
+    expect(getSingleMock).toHaveBeenCalledExactlyOnceWith('12345');
+    expect(component['book']()).toEqual(testBook);
   });
   it('should navigate to the details page', async () => {
   });
   it('should update the book when ISBN changes', async () => {
+    const anotherBook = { isbn: '67890', title: 'Test Book 2', authors: [] };
+    getSingleMock.mockReturnValue(of(anotherBook));
     isbn.set('67890');
     await fixture.whenStable();
+    expect(getSingleMock).toHaveBeenCalledWith('67890');
+    expect(component['book']()).toEqual(anotherBook);
   });
 });

src/app/books-portal/book-details-page/book-details-page.ts CHANGED Viewed

@@ -1,6 +1,7 @@
-import { Component, computed, inject, input } from '@angular/core';
-import { RouterLink } from '@angular/router';
 import { BookStore } from '../../shared/book-store';
 @Component({
@@ -11,7 +12,24 @@ import { BookStore } from '../../shared/book-store';
 })
 export class BookDetailsPage {
   #bookStore = inject(BookStore);
   readonly isbn = input.required<string>();
-  protected book = computed(() => this.#bookStore.getSingle(this.isbn()));
 }

+import { Component, effect, inject, input, signal } from '@angular/core';
+import { Router, RouterLink } from '@angular/router';
+import { Book } from '../../shared/book';
 import { BookStore } from '../../shared/book-store';
 @Component({
 })
 export class BookDetailsPage {
   #bookStore = inject(BookStore);
+  #router = inject(Router);
   readonly isbn = input.required<string>();
+  protected book = signal<Book | undefined>(undefined);
+  constructor() {
+    effect(() => {
+      this.#bookStore.getSingle(this.isbn()).subscribe(book => {
+        this.book.set(book);
+      });
+    });
+  }
+  removeBook(isbn: string) {
+    if (window.confirm('Delete book?')) {
+      this.#bookStore.remove(isbn).subscribe(() => {
+        this.#router.navigateByUrl('/books');
+      });
+    }
+  }
 }

src/app/books-portal/books-overview-page/books-overview-page.spec.ts CHANGED Viewed

@@ -1,18 +1,34 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
 import { RouterTestingHarness } from '@angular/router/testing';
 import { BooksOverviewPage } from './books-overview-page';
 import { booksPortalRoutes } from '../books-portal.routes';
 describe('BooksOverviewPage', () => {
   let component: BooksOverviewPage;
   let fixture: ComponentFixture<BooksOverviewPage>;
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [BooksOverviewPage],
-      providers: [provideRouter(booksPortalRoutes)]
     })
     .compileComponents();

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
 import { RouterTestingHarness } from '@angular/router/testing';
+import { of } from 'rxjs';
 import { BooksOverviewPage } from './books-overview-page';
 import { booksPortalRoutes } from '../books-portal.routes';
+import { Book } from '../../shared/book';
+import { BookStore } from '../../shared/book-store';
 describe('BooksOverviewPage', () => {
   let component: BooksOverviewPage;
   let fixture: ComponentFixture<BooksOverviewPage>;
+  const mockBooks: Partial<Book>[] = [
+    { isbn: '1234', title: 'Tierisch gut kochen' },
+    { isbn: '5678', title: 'Backen mit Affen' }
+  ];
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [BooksOverviewPage],
+      providers: [
+        provideRouter(booksPortalRoutes),
+        {
+          provide: BookStore,
+          useValue: {
+            getAll: () => of(mockBooks)
+          }
+        }
+      ]
     })
     .compileComponents();

src/app/books-portal/books-overview-page/books-overview-page.ts CHANGED Viewed

@@ -28,7 +28,9 @@ export class BooksOverviewPage {
   });
   constructor() {
-    this.books.set(this.#bookStore.getAll());
   }
   addLikedBook(newLikedBook: Book) {

   });
   constructor() {
+    this.#bookStore.getAll().subscribe(books => {
+      this.books.set(books);
+    });
   }
   addLikedBook(newLikedBook: Book) {

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

@@ -1,21 +1,79 @@
 import { TestBed } from '@angular/core/testing';
 import { BookStore } from './book-store';
 describe('BookStore', () => {
   let service: BookStore;
   beforeEach(() => {
-    TestBed.configureTestingModule({});
     service = TestBed.inject(BookStore);
   });
   it('should be created', () => {
     expect(service).toBeTruthy();
   });
-  it('should return a list of books', () => {
-    const books = service.getAll();
-    expect(books.length).toBeGreaterThan(0);
   });
 });

+import { HttpErrorResponse } from '@angular/common/http';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
+import { Book } from './book';
 import { BookStore } from './book-store';
 describe('BookStore', () => {
   let service: BookStore;
+  let httpTesting: HttpTestingController;
   beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideHttpClientTesting()]
+    });
     service = TestBed.inject(BookStore);
+    httpTesting = TestBed.inject(HttpTestingController);
+  });
+  afterEach(() => {
+    httpTesting.verify();
   });
   it('should be created', () => {
     expect(service).toBeTruthy();
   });
+  it('should fetch all books from API', () => {
+    const mockBooks: Partial<Book>[] = [
+      { isbn: '123', title: 'Book 1' },
+      { isbn: '456', title: 'Book 2' }
+    ];
+    let receivedBooks: Book[] | undefined;
+    service.getAll().subscribe(books => receivedBooks = books);
+    const req = httpTesting.expectOne('https://api1.angular-buch.com/books');
+    expect(req.request.method).toBe('GET');
+    req.flush(mockBooks);
+    expect(receivedBooks).toEqual(mockBooks);
+  });
+  it('should fetch a single book by ISBN', () => {
+    const mockBook: Partial<Book> = { isbn: '123', title: 'Test Book' };
+    let receivedBook: Book | undefined;
+    service.getSingle('123').subscribe(book => receivedBook = book);
+    const req = httpTesting.expectOne('https://api1.angular-buch.com/books/123');
+    expect(req.request.method).toBe('GET');
+    req.flush(mockBook);
+    expect(receivedBook).toEqual(mockBook);
+  });
+  it('should delete a book', () => {
+    let success = false;
+    service.remove('123').subscribe(() => success = true);
+    const req = httpTesting.expectOne('https://api1.angular-buch.com/books/123');
+    expect(req.request.method).toBe('DELETE');
+    req.flush(null);
+    expect(success).toBe(true);
+  });
+  it('should handle server errors', () => {
+    let errorResponse: HttpErrorResponse | undefined;
+    service.getAll().subscribe({
+      error: (err: HttpErrorResponse) => errorResponse = err
+    });
+    const req = httpTesting.expectOne('https://api1.angular-buch.com/books');
+    req.flush('Server Error', { status: 500, statusText: 'Internal Server Error' });
+    expect(errorResponse?.status).toBe(500);
   });
 });

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

@@ -1,4 +1,6 @@
-import { Injectable } from '@angular/core';
 import { Book } from './book';
@@ -6,33 +8,18 @@ import { Book } from './book';
   providedIn: 'root'
 })
 export class BookStore {
-  #books: Book[] = [
-    {
-      isbn: '12345',
-      title: 'Tierisch gut kochen',
-      authors: ['Mrs Chimp', 'Mr Gorilla'],
-      subtitle: 'Rezepte von Affe bis Zebra',
-      imageUrl: 'https://cdn.ng-buch.de/kochen.jpg',
-      description: 'Immer lecker und gut',
-      createdAt: new Date().toISOString()
-    },
-    {
-      isbn: '67890',
-      title: 'Backen mit Affen',
-      subtitle: 'Bananenbrot und mehr',
-      authors: ['Orang Utan'],
-      imageUrl: 'https://cdn.ng-buch.de/backen.jpg',
-      description: 'Tolle Backtipps für Mensch und Tier',
-      createdAt: new Date().toISOString()
-    }
-  ];
-  getAll(): Book[] {
-    return this.#books;
   }
-  getSingle(isbn: string): Book | undefined {
-    return this.#books.find(book => book.isbn === isbn);
   }
 }

+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
 import { Book } from './book';
   providedIn: 'root'
 })
 export class BookStore {
+  #http = inject(HttpClient);
+  #apiUrl = 'https://api1.angular-buch.com';
+  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<void> {
+    return this.#http.delete<void>(`${this.#apiUrl}/books/${isbn}`);
   }
 }

Differenzansicht 08-httpim Vergleich zu 07-inputparams

Differenzansicht 08-http
im Vergleich zu 07-inputparams