Differenzansicht 07-inputparams
im Vergleich zu 06-routing

Zurück zur Ãœbersicht | ← Vorherige | Nächste → | Demo | Quelltext auf GitHub
src/app/app.config.ts CHANGED
@@ -1,11 +1,11 @@
1
  import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
2
- import { provideRouter } from '@angular/router';
3
 
4
  import { routes } from './app.routes';
5
 
6
  export const appConfig: ApplicationConfig = {
7
  providers: [
8
  provideBrowserGlobalErrorListeners(),
9
- provideRouter(routes)
10
  ]
11
  };
 
1
  import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
2
+ import { provideRouter, withComponentInputBinding } from '@angular/router';
3
 
4
  import { routes } from './app.routes';
5
 
6
  export const appConfig: ApplicationConfig = {
7
  providers: [
8
  provideBrowserGlobalErrorListeners(),
9
+ provideRouter(routes, withComponentInputBinding())
10
  ]
11
  };
src/app/app.spec.ts CHANGED
@@ -1,14 +1,10 @@
1
  import { TestBed } from '@angular/core/testing';
2
  import { App } from './app';
3
- import { provideRouter } from '@angular/router';
4
 
5
  describe('App', () => {
6
  beforeEach(async () => {
7
  await TestBed.configureTestingModule({
8
  imports: [App],
9
- providers: [
10
- provideRouter([]) // Verhindert: NG0201: No provider found for `ActivatedRoute`.
11
- ]
12
  }).compileComponents();
13
  });
14
 
 
1
  import { TestBed } from '@angular/core/testing';
2
  import { App } from './app';
 
3
 
4
  describe('App', () => {
5
  beforeEach(async () => {
6
  await TestBed.configureTestingModule({
7
  imports: [App],
 
 
 
8
  }).compileComponents();
9
  });
10
 
src/app/books-portal/book-card/book-card.spec.ts CHANGED
@@ -1,50 +1,23 @@
1
- import { inputBinding, outputBinding } from '@angular/core';
2
  import { ComponentFixture, TestBed } from '@angular/core/testing';
3
- import { provideRouter } from '@angular/router';
4
 
5
- import { Book } from '../../shared/book';
6
  import { BookCard } from './book-card';
7
 
8
  describe('BookCard', () => {
 
9
  let fixture: ComponentFixture<BookCard>;
10
- let emittedBook: Book | undefined;
11
-
12
- const testBook: Book = {
13
- isbn: '1111',
14
- title: 'Testbuch',
15
- subtitle: 'Test',
16
- authors: ['Author 1', 'Author 2'],
17
- imageUrl: 'https://cdn.ng-buch.de/test.png',
18
- description: 'Dies ist ein Testbuch',
19
- createdAt: new Date().toISOString()
20
- };
21
 
22
  beforeEach(async () => {
23
- emittedBook = undefined;
24
-
25
  await TestBed.configureTestingModule({
26
- imports: [BookCard],
27
- providers: [
28
- provideRouter([]) // Verhindert: NG0201: No provider found for `ActivatedRoute`.
29
- ]
30
- }).compileComponents();
31
-
32
- fixture = TestBed.createComponent(BookCard, {
33
- bindings: [
34
- inputBinding('book', () => testBook),
35
- outputBinding('like', (book: Book) => emittedBook = book)
36
- ]
37
- });
38
 
 
 
39
  fixture.detectChanges();
40
  });
41
 
42
- it('should emit the like event with the correct book', () => {
43
- // Event manuell auslösen
44
- fixture.componentInstance.likeBook();
45
-
46
- // Prüfen, ob das Event ausgelöst wurde
47
- expect(emittedBook).toBeDefined();
48
- expect(emittedBook).toEqual(testBook);
49
  });
50
  });
 
 
1
  import { ComponentFixture, TestBed } from '@angular/core/testing';
 
2
 
 
3
  import { BookCard } from './book-card';
4
 
5
  describe('BookCard', () => {
6
+ let component: BookCard;
7
  let fixture: ComponentFixture<BookCard>;
 
 
 
 
 
 
 
 
 
 
 
8
 
9
  beforeEach(async () => {
 
 
10
  await TestBed.configureTestingModule({
11
+ imports: [BookCard]
12
+ })
13
+ .compileComponents();
 
 
 
 
 
 
 
 
 
14
 
15
+ fixture = TestBed.createComponent(BookCard);
16
+ component = fixture.componentInstance;
17
  fixture.detectChanges();
18
  });
19
 
20
+ it('should create', () => {
21
+ expect(component).toBeTruthy();
 
 
 
 
 
22
  });
23
  });
src/app/books-portal/book-details-page/book-details-page-provide-location-mocks.spec.ts DELETED
@@ -1,27 +0,0 @@
1
- import { Location } from '@angular/common';
2
- import { provideLocationMocks } from '@angular/common/testing';
3
- import { TestBed } from '@angular/core/testing';
4
- import { provideRouter, Router } from '@angular/router';
5
-
6
- import { booksPortalRoutes } from '../books-portal.routes';
7
-
8
- describe('BookDetailsPage Routing', () => {
9
- it('should naviate to the details page', async () => {
10
- TestBed.configureTestingModule({
11
- providers: [
12
- provideRouter(booksPortalRoutes),
13
- provideLocationMocks()
14
- ]
15
- });
16
-
17
- const location = TestBed.inject(Location);
18
- const router = TestBed.inject(Router);
19
-
20
- // Hier wird später im produktiven Code eine Aktion stattfinden,
21
- // z.B. das Absenden eines Formulars und eine anschließende Navigation
22
- await router.navigate(['/books/details/12345']);
23
-
24
- // Prüfung, ob Navigation zur erwarteten Ziel-URL stattgefunden hat
25
- expect(location.path()).toBe('/books/details/12345');
26
- });
27
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/app/books-portal/book-details-page/book-details-page.spec.ts CHANGED
@@ -1,26 +1,23 @@
1
- import { TestBed } from '@angular/core/testing';
2
- import { RouterTestingHarness } from '@angular/router/testing';
3
- import { provideRouter } from '@angular/router';
4
 
5
  import { BookDetailsPage } from './book-details-page';
6
- import { booksPortalRoutes } from '../books-portal.routes';
7
- import { BookStore } from '../../shared/book-store';
8
 
9
- describe('BookDetailsPage Routing', () => {
10
- it('should load the correct book by ISBN', async () => {
11
- TestBed.configureTestingModule({
12
- imports: [BookDetailsPage],
13
- providers: [provideRouter(booksPortalRoutes)]
14
- });
15
 
16
- const harness = await RouterTestingHarness.create();
17
- const component = await harness.navigateByUrl('/books/details/12345', BookDetailsPage);
18
- const bookStore = TestBed.inject(BookStore);
 
 
19
 
20
- const expectedBook = bookStore.getSingle('12345');
 
 
 
21
 
 
22
  expect(component).toBeTruthy();
23
- expect(component['book']()).toEqual(expectedBook);
24
- expect(document.title).toBe('Book Details');
25
  });
26
  });
 
1
+ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 
2
 
3
  import { BookDetailsPage } from './book-details-page';
 
 
4
 
5
+ describe('BookDetailsPage', () => {
6
+ let component: BookDetailsPage;
7
+ let fixture: ComponentFixture<BookDetailsPage>;
 
 
 
8
 
9
+ beforeEach(async () => {
10
+ await TestBed.configureTestingModule({
11
+ imports: [BookDetailsPage]
12
+ })
13
+ .compileComponents();
14
 
15
+ fixture = TestBed.createComponent(BookDetailsPage);
16
+ component = fixture.componentInstance;
17
+ fixture.detectChanges();
18
+ });
19
 
20
+ it('should create', () => {
21
  expect(component).toBeTruthy();
 
 
22
  });
23
  });
src/app/books-portal/book-details-page/book-details-page.ts CHANGED
@@ -1,7 +1,6 @@
1
- import { Component, inject, signal } from '@angular/core';
2
- import { ActivatedRoute, RouterLink } from '@angular/router';
3
 
4
- import { Book } from '../../shared/book';
5
  import { BookStore } from '../../shared/book-store';
6
 
7
  @Component({
@@ -12,14 +11,7 @@ import { BookStore } from '../../shared/book-store';
12
  })
13
  export class BookDetailsPage {
14
  #bookStore = inject(BookStore);
15
- #route = inject(ActivatedRoute);
16
 
17
- protected book = signal<Book | undefined>(undefined);
18
-
19
- constructor() {
20
- const isbn = this.#route.snapshot.paramMap.get('isbn');
21
- if (isbn) {
22
- this.book.set(this.#bookStore.getSingle(isbn));
23
- }
24
- }
25
  }
 
1
+ import { Component, computed, inject, input } from '@angular/core';
2
+ import { RouterLink } from '@angular/router';
3
 
 
4
  import { BookStore } from '../../shared/book-store';
5
 
6
  @Component({
 
11
  })
12
  export class BookDetailsPage {
13
  #bookStore = inject(BookStore);
 
14
 
15
+ readonly isbn = input.required<string>();
16
+ protected book = computed(() => this.#bookStore.getSingle(this.isbn()));
 
 
 
 
 
 
17
  }
src/app/books-portal/books-overview-page/books-overview-page.spec.ts CHANGED
@@ -1,21 +1,23 @@
1
- import { TestBed } from '@angular/core/testing';
2
- import { provideRouter } from '@angular/router';
3
- import { RouterTestingHarness } from '@angular/router/testing';
4
 
5
- import { booksPortalRoutes } from '../books-portal.routes';
6
  import { BooksOverviewPage } from './books-overview-page';
7
 
8
- describe('BooksOverviewPage Routing', () => {
9
- it('should load the BooksOverviewPage for /books', async () => {
10
- TestBed.configureTestingModule({
11
- imports: [BooksOverviewPage],
12
- providers: [provideRouter(booksPortalRoutes)]
13
- });
14
 
15
- const harness = await RouterTestingHarness.create();
16
- const component = await harness.navigateByUrl('/books', BooksOverviewPage);
 
 
 
17
 
 
 
 
 
 
 
18
  expect(component).toBeTruthy();
19
- expect(document.title).toBe('Books');
20
  });
21
  });
 
1
+ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 
2
 
 
3
  import { BooksOverviewPage } from './books-overview-page';
4
 
5
+ describe('BooksOverviewPage', () => {
6
+ let component: BooksOverviewPage;
7
+ let fixture: ComponentFixture<BooksOverviewPage>;
 
 
 
8
 
9
+ beforeEach(async () => {
10
+ await TestBed.configureTestingModule({
11
+ imports: [BooksOverviewPage]
12
+ })
13
+ .compileComponents();
14
 
15
+ fixture = TestBed.createComponent(BooksOverviewPage);
16
+ component = fixture.componentInstance;
17
+ fixture.detectChanges();
18
+ });
19
+
20
+ it('should create', () => {
21
  expect(component).toBeTruthy();
 
22
  });
23
  });
src/app/home-page/home-page.spec.ts CHANGED
@@ -1,21 +1,23 @@
1
- import { TestBed } from '@angular/core/testing';
2
- import { provideRouter } from '@angular/router';
3
- import { RouterTestingHarness } from '@angular/router/testing';
4
 
5
- import { routes } from '../app.routes';
6
  import { HomePage } from './home-page';
7
 
8
- describe('HomePage Routing', () => {
9
- it('should load the HomePage component for /home', async () => {
10
- TestBed.configureTestingModule({
11
- imports: [HomePage],
12
- providers: [provideRouter(routes)]
13
- });
14
 
15
- const harness = await RouterTestingHarness.create();
16
- const component = await harness.navigateByUrl('/home', HomePage);
 
 
 
17
 
 
 
 
 
 
 
18
  expect(component).toBeTruthy();
19
- expect(document.title).toBe('BookManager');
20
  });
21
  });
 
1
+ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 
2
 
 
3
  import { HomePage } from './home-page';
4
 
5
+ describe('HomePage', () => {
6
+ let component: HomePage;
7
+ let fixture: ComponentFixture<HomePage>;
 
 
 
8
 
9
+ beforeEach(async () => {
10
+ await TestBed.configureTestingModule({
11
+ imports: [HomePage]
12
+ })
13
+ .compileComponents();
14
 
15
+ fixture = TestBed.createComponent(HomePage);
16
+ component = fixture.componentInstance;
17
+ fixture.detectChanges();
18
+ });
19
+
20
+ it('should create', () => {
21
  expect(component).toBeTruthy();
 
22
  });
23
  });