BookManager 1 Diff | 06-routing (from 05-filter)

src/app/app.html CHANGED Viewed

@@ -1,3 +1,15 @@
 <main>
-  <app-books-overview-page />
 </main>

 <main>
+  <nav>
+    <ul>
+      <li>
+        <a routerLink="/home" routerLinkActive="active"
+          ariaCurrentWhenActive="page">Home</a>
+      </li>
+      <li>
+        <a routerLink="/books" routerLinkActive="active"
+          ariaCurrentWhenActive="page">Books</a>
+      </li>
+    </ul>
+  </nav>
+  <router-outlet />
 </main>

src/app/app.routes.ts CHANGED Viewed

@@ -1,3 +1,10 @@
 import { Routes } from '@angular/router';
-export const routes: Routes = [];

 import { Routes } from '@angular/router';
+import { HomePage } from './home-page/home-page';
+import { booksPortalRoutes } from './books-portal/books-portal.routes';
+export const routes: Routes = [
+  { path: '', redirectTo: 'home', pathMatch: 'full' },
+  { path: 'home', component: HomePage, title: 'BookManager' },
+  ...booksPortalRoutes
+];

src/app/app.spec.ts CHANGED Viewed

@@ -1,10 +1,14 @@
 import { TestBed } from '@angular/core/testing';
 import { App } from './app';
 describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [App],
     }).compileComponents();
   });

 import { TestBed } from '@angular/core/testing';
 import { App } from './app';
+import { provideRouter } from '@angular/router';
 describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [App],
+      providers: [
+        provideRouter([]) // Verhindert: NG0201: No provider found for `ActivatedRoute`.
+      ]
     }).compileComponents();
   });

src/app/app.ts CHANGED Viewed

@@ -1,10 +1,9 @@
 import { Component } from '@angular/core';
-import { BooksOverviewPage } from './books-portal/books-overview-page/books-overview-page';
 @Component({
   selector: 'app-root',
-  imports: [BooksOverviewPage],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })

 import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 @Component({
   selector: 'app-root',
+  imports: [RouterOutlet, RouterLink, RouterLinkActive],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })

src/app/books-portal/book-card/book-card.html CHANGED Viewed

@@ -12,6 +12,7 @@
     ISBN: {{ b.isbn }}
   </div>
   <footer>
     <button type="button" class="secondary" (click)="likeBook()">Like</button>
   </footer>
 </article>

     ISBN: {{ b.isbn }}
   </div>
   <footer>
+    <a [routerLink]="['details', b.isbn]">Details</a>
     <button type="button" class="secondary" (click)="likeBook()">Like</button>
   </footer>
 </article>

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

@@ -1,8 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { BookCard } from './book-card';
 import { Book } from '../../shared/book';
-import { inputBinding, outputBinding } from '@angular/core';
 describe('BookCard', () => {
   let fixture: ComponentFixture<BookCard>;
@@ -22,7 +23,10 @@ describe('BookCard', () => {
     emittedBook = undefined;
     await TestBed.configureTestingModule({
-      imports: [BookCard]
     }).compileComponents();
     fixture = TestBed.createComponent(BookCard, {

+import { inputBinding, outputBinding } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
 import { Book } from '../../shared/book';
+import { BookCard } from './book-card';
 describe('BookCard', () => {
   let fixture: ComponentFixture<BookCard>;
     emittedBook = undefined;
     await TestBed.configureTestingModule({
+      imports: [BookCard],
+      providers: [
+        provideRouter([]) // Verhindert: NG0201: No provider found for `ActivatedRoute`.
+      ]
     }).compileComponents();
     fixture = TestBed.createComponent(BookCard, {

src/app/books-portal/book-card/book-card.ts CHANGED Viewed

@@ -1,10 +1,11 @@
 import { Component, input, output } from '@angular/core';
 import { Book } from '../../shared/book';
 @Component({
   selector: 'app-book-card',
-  imports: [],
   templateUrl: './book-card.html',
   styleUrl: './book-card.scss'
 })

 import { Component, input, output } from '@angular/core';
+import { RouterLink } from '@angular/router';
 import { Book } from '../../shared/book';
 @Component({
   selector: 'app-book-card',
+  imports: [RouterLink],
   templateUrl: './book-card.html',
   styleUrl: './book-card.scss'
 })

src/app/books-portal/book-details-page/book-details-page-provide-location-mocks.spec.ts ADDED Viewed

	@@ -0,0 +1,27 @@

+import { Location } from '@angular/common';
+import { provideLocationMocks } from '@angular/common/testing';
+import { TestBed } from '@angular/core/testing';
+import { provideRouter, Router } from '@angular/router';
+import { booksPortalRoutes } from '../books-portal.routes';
+describe('BookDetailsPage Routing', () => {
+  it('should naviate to the details page', async () => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideRouter(booksPortalRoutes),
+        provideLocationMocks()
+      ]
+    });
+    const location = TestBed.inject(Location);
+    const router = TestBed.inject(Router);
+    // Hier wird später im produktiven Code eine Aktion stattfinden,
+    // z.B. das Absenden eines Formulars und eine anschließende Navigation
+    await router.navigate(['/books/details/12345']);
+    // Prüfung, ob Navigation zur erwarteten Ziel-URL stattgefunden hat
+    expect(location.path()).toBe('/books/details/12345');
+  });
+});

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

	@@ -0,0 +1,33 @@

+@if (book(); as b) {
+<article>
+  <header>
+    <h1>{{ b.title }}</h1>
+    @if (b.subtitle) {
+    <p role="doc-subtitle">{{ b.subtitle }}</p>
+    }
+    <div class="grid">
+      <div>
+        <h2>Authors</h2>
+        <ul>
+          @for (author of b.authors; track $index) {
+          <li>{{ author }}</li>
+          }
+        </ul>
+      </div>
+      <div>
+        <h2>ISBN</h2>
+        {{ b.isbn }}
+      </div>
+      <div>
+        <h2>Created at</h2>
+        {{ b.createdAt }}
+      </div>
+    </div>
+  </header>
+  <p>{{ b.description }}</p>
+  <img [src]="b.imageUrl" alt="Cover" />
+  <footer>
+    <a routerLink="/books">Back to list</a>
+  </footer>
+</article>
+}

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

	@@ -0,0 +1,26 @@

+import { TestBed } from '@angular/core/testing';
+import { RouterTestingHarness } from '@angular/router/testing';
+import { provideRouter } from '@angular/router';
+import { BookDetailsPage } from './book-details-page';
+import { booksPortalRoutes } from '../books-portal.routes';
+import { BookStore } from '../../shared/book-store';
+describe('BookDetailsPage Routing', () => {
+  it('should load the correct book by ISBN', async () => {
+    TestBed.configureTestingModule({
+      imports: [BookDetailsPage],
+      providers: [provideRouter(booksPortalRoutes)]
+    });
+    const harness = await RouterTestingHarness.create();
+    const component = await harness.navigateByUrl('/books/details/12345', BookDetailsPage);
+    const bookStore = TestBed.inject(BookStore);
+    const expectedBook = bookStore.getSingle('12345');
+    expect(component).toBeTruthy();
+    expect(component['book']()).toEqual(expectedBook);
+    expect(document.title).toBe('Book Details');
+  });
+});

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

	@@ -0,0 +1,25 @@

+import { Component, inject, signal } from '@angular/core';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { Book } from '../../shared/book';
+import { BookStore } from '../../shared/book-store';
+@Component({
+  selector: 'app-book-details-page',
+  imports: [RouterLink],
+  templateUrl: './book-details-page.html',
+  styleUrl: './book-details-page.scss'
+})
+export class BookDetailsPage {
+  #bookStore = inject(BookStore);
+  #route = inject(ActivatedRoute);
+  protected book = signal<Book | undefined>(undefined);
+  constructor() {
+    const isbn = this.#route.snapshot.paramMap.get('isbn');
+    if (isbn) {
+      this.book.set(this.#bookStore.getSingle(isbn));
+    }
+  }
+}

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

@@ -1,47 +1,21 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { BooksOverviewPage } from './books-overview-page';
-describe('BooksOverviewPage', () => {
-  let component: BooksOverviewPage;
-  let fixture: ComponentFixture<BooksOverviewPage>;
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [BooksOverviewPage]
-    }).compileComponents();
-    fixture = TestBed.createComponent(BooksOverviewPage);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-  it('should display all books if the search term is empty', () => {
-    component['searchTerm'].set('');
-    const books = component['filteredBooks']();
-    expect(books.length).toBe(2);
-  });
-  it('should filter books based on the search term', () => {
-    component['searchTerm'].set('Affe');
-    const books = component['filteredBooks']();
-    expect(books.length).toBe(1);
-    expect(books[0].title).toBe('Backen mit Affen');
-  });
-  it('should filter books ignoring case sensitivity', () => {
-    component['searchTerm'].set('AFFEN');
-    const books = component['filteredBooks']();
-    expect(books.length).toBe(1);
-    expect(books[0].title).toBe('Backen mit Affen');
-  });
-  it('should return an empty array if no book matches the search term', () => {
-    component['searchTerm'].set('unbekannter Titel');
-    const books = component['filteredBooks']();
-    expect(books.length).toBe(0);
   });
 });

+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { RouterTestingHarness } from '@angular/router/testing';
+import { booksPortalRoutes } from '../books-portal.routes';
+import { BooksOverviewPage } from './books-overview-page';
+describe('BooksOverviewPage Routing', () => {
+  it('should load the BooksOverviewPage for /books', async () => {
+    TestBed.configureTestingModule({
+      imports: [BooksOverviewPage],
+      providers: [provideRouter(booksPortalRoutes)]
+    });
+    const harness = await RouterTestingHarness.create();
+    const component = await harness.navigateByUrl('/books', BooksOverviewPage);
+    expect(component).toBeTruthy();
+    expect(document.title).toBe('Books');
   });
 });

src/app/books-portal/books-portal.routes.ts ADDED Viewed

	@@ -0,0 +1,9 @@

+import { Routes } from '@angular/router';
+import { BooksOverviewPage } from './books-overview-page/books-overview-page';
+import { BookDetailsPage } from './book-details-page/book-details-page';
+export const booksPortalRoutes: Routes = [
+  { path: 'books', component: BooksOverviewPage, title: 'Books' },
+  { path: 'books/details/:isbn', component: BookDetailsPage, title: 'Book Details' },
+];

src/app/home-page/home-page.html ADDED Viewed

	@@ -0,0 +1 @@


1	+ <h1>Welcome to the BookManager!</h1>

src/app/home-page/home-page.spec.ts ADDED Viewed

	@@ -0,0 +1,21 @@

+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { RouterTestingHarness } from '@angular/router/testing';
+import { routes } from '../app.routes';
+import { HomePage } from './home-page';
+describe('HomePage Routing', () => {
+  it('should load the HomePage component for /home', async () => {
+    TestBed.configureTestingModule({
+      imports: [HomePage],
+      providers: [provideRouter(routes)]
+    });
+    const harness = await RouterTestingHarness.create();
+    const component = await harness.navigateByUrl('/home', HomePage);
+    expect(component).toBeTruthy();
+    expect(document.title).toBe('BookManager');
+  });
+});

src/app/home-page/home-page.ts ADDED Viewed

	@@ -0,0 +1,11 @@

+import { Component } from '@angular/core';
+@Component({
+  selector: 'app-home-page',
+  imports: [],
+  templateUrl: './home-page.html',
+  styleUrl: './home-page.scss'
+})
+export class HomePage {
+}

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

@@ -31,4 +31,8 @@ export class BookStore {
   getAll(): Book[] {
     return this.#books;
   }
 }

   getAll(): Book[] {
     return this.#books;
   }
+  getSingle(isbn: string): Book | undefined {
+    return this.#books.find(book => book.isbn === isbn);
+  }
 }

Differenzansicht 06-routingim Vergleich zu 05-filter

Differenzansicht 06-routing
im Vergleich zu 05-filter