Differenzansicht 04-modules
im Vergleich zu 03-event-binding

← Zurück zur Übersicht | Demo | Quelltext auf GitHub
src/app/app.module.ts CHANGED
@@ -3,20 +3,16 @@ import { BrowserModule } from '@angular/platform-browser';
3
 
4
  import { AppRoutingModule } from './app-routing.module';
5
  import { AppComponent } from './app.component';
6
- import { BookListComponent } from './book-list/book-list.component';
7
- import { BookListItemComponent } from './book-list-item/book-list-item.component';
8
- import { BookDetailsComponent } from './book-details/book-details.component';
9
 
10
  @NgModule({
11
  declarations: [
12
  AppComponent,
13
- BookListComponent,
14
- BookListItemComponent,
15
- BookDetailsComponent
16
  ],
17
  imports: [
18
  BrowserModule,
19
- AppRoutingModule
 
20
  ],
21
  providers: [],
22
  bootstrap: [AppComponent]
3
 
4
  import { AppRoutingModule } from './app-routing.module';
5
  import { AppComponent } from './app.component';
6
+ import { BooksModule } from './books/books.module';
 
 
7
 
8
  @NgModule({
9
  declarations: [
10
  AppComponent,
 
 
 
11
  ],
12
  imports: [
13
  BrowserModule,
14
+ AppRoutingModule,
15
+ BooksModule
16
  ],
17
  providers: [],
18
  bootstrap: [AppComponent]
src/app/book-list/book-list.component.integration.spec.ts DELETED
@@ -1,36 +0,0 @@
1
- import { ComponentFixture, TestBed } from '@angular/core/testing';
2
-
3
- import { BookListItemComponent } from '../book-list-item/book-list-item.component';
4
- import { Book } from '../shared/book';
5
- import { BookListComponent } from './book-list.component';
6
-
7
- describe('BookListComponent', () => {
8
- let component: BookListComponent;
9
- let fixture: ComponentFixture<BookListComponent>;
10
-
11
- beforeEach(async () => {
12
- await TestBed.configureTestingModule({
13
- declarations: [
14
- BookListComponent,
15
- BookListItemComponent
16
- ]
17
- })
18
- .compileComponents();
19
-
20
- fixture = TestBed.createComponent(BookListComponent);
21
- component = fixture.componentInstance;
22
- fixture.detectChanges();
23
- });
24
-
25
- it('should trigger an event on clicking the thumbnail', () => {
26
-
27
- let receivedBook: Book | undefined;
28
- component.selectBook.subscribe(book => {
29
- receivedBook = book;
30
- });
31
-
32
- fixture.nativeElement
33
- .querySelector('img').click();
34
- expect(receivedBook?.title).toBe('Tierisch gut kochen');
35
- });
36
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/app/book-list/book-list.component.spec.ts DELETED
@@ -1,27 +0,0 @@
1
- import { BookListComponent } from './book-list.component';
2
- import { Book } from '../shared/book';
3
-
4
- describe('BookListComponent', () => {
5
-
6
- let component: BookListComponent;
7
-
8
- beforeEach(() => {
9
- component = new BookListComponent();
10
- });
11
-
12
- it('should hold a hardcoded list of 2 books', () => {
13
- expect(component.books).toHaveSize(2);
14
- });
15
-
16
- it('should trigger an event on "doSelect"', () => {
17
-
18
- const sentBook = {} as Book;
19
- let receivedBook: Book | undefined;
20
- component.selectBook.subscribe(book => {
21
- receivedBook = book;
22
- });
23
-
24
- component.doSelect(sentBook);
25
- expect(receivedBook).toBe(sentBook);
26
- });
27
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/app/book-list/book-list.component.stub.spec.ts DELETED
@@ -1,44 +0,0 @@
1
- import { ComponentFixture, TestBed } from '@angular/core/testing';
2
-
3
- import { BookListComponent } from './book-list.component';
4
- import { Book } from '../shared/book';
5
- import { Component, Input } from '@angular/core';
6
-
7
- @Component({
8
- selector: 'bm-book-list-item',
9
- template: ''
10
- })
11
- class TestBookListItemComponent {
12
- @Input() book?: Book;
13
- }
14
-
15
- describe('BookListComponent', () => {
16
- let component: BookListComponent;
17
- let fixture: ComponentFixture<BookListComponent>;
18
-
19
- beforeEach(async () => {
20
- await TestBed.configureTestingModule({
21
- declarations: [
22
- BookListComponent,
23
- TestBookListItemComponent // NEU
24
- ]
25
- })
26
- .compileComponents();
27
-
28
- fixture = TestBed.createComponent(BookListComponent);
29
- component = fixture.componentInstance;
30
- fixture.detectChanges();
31
- });
32
-
33
- it('should trigger an event on click', () => {
34
-
35
- let receivedBook: Book | undefined;
36
- component.selectBook.subscribe(book => {
37
- receivedBook = book;
38
- });
39
-
40
- fixture.nativeElement
41
- .querySelector('bm-book-list-item').click();
42
- expect(receivedBook?.title).toBe('Tierisch gut kochen');
43
- });
44
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/app/book-list/book-list.component.without-error-shallow.spec.ts DELETED
@@ -1,34 +0,0 @@
1
- import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2
- import { ComponentFixture, TestBed } from '@angular/core/testing';
3
-
4
- import { Book } from '../shared/book';
5
- import { BookListComponent } from './book-list.component';
6
-
7
- describe('BookListComponent', () => {
8
- let component: BookListComponent;
9
- let fixture: ComponentFixture<BookListComponent>;
10
-
11
- beforeEach(async () => {
12
- await TestBed.configureTestingModule({
13
- declarations: [BookListComponent],
14
- schemas: [CUSTOM_ELEMENTS_SCHEMA] // NEU
15
- })
16
- .compileComponents();
17
-
18
- fixture = TestBed.createComponent(BookListComponent);
19
- component = fixture.componentInstance;
20
- fixture.detectChanges();
21
- });
22
-
23
- it('should trigger an event on click', () => {
24
-
25
- let receivedBook: Book | undefined;
26
- component.selectBook.subscribe(book => {
27
- receivedBook = book;
28
- });
29
-
30
- fixture.nativeElement
31
- .querySelector('bm-book-list-item').click();
32
- expect(receivedBook?.title).toBe('Tierisch gut kochen');
33
- });
34
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/app/{book-details → books/book-details}/book-details.component.ts RENAMED
@@ -1,5 +1,5 @@
1
  import { Component, Input, Output, EventEmitter } from '@angular/core';
2
- import { Book } from '../shared/book';
3
 
4
  @Component({
5
  selector: 'bm-book-details',
1
  import { Component, Input, Output, EventEmitter } from '@angular/core';
2
+ import { Book } from '../../shared/book';
3
 
4
  @Component({
5
  selector: 'bm-book-details',
src/app/{book-list/book-list.component.shallow.spec.ts → books/book-list/book-list.component.spec.ts} RENAMED
@@ -1,7 +1,6 @@
1
  import { ComponentFixture, TestBed } from '@angular/core/testing';
2
 
3
  import { BookListComponent } from './book-list.component';
4
- import { Book } from '../shared/book';
5
 
6
  describe('BookListComponent', () => {
7
  let component: BookListComponent;
@@ -9,7 +8,7 @@ describe('BookListComponent', () => {
9
 
10
  beforeEach(async () => {
11
  await TestBed.configureTestingModule({
12
- declarations: [BookListComponent]
13
  })
14
  .compileComponents();
15
 
@@ -18,15 +17,7 @@ describe('BookListComponent', () => {
18
  fixture.detectChanges();
19
  });
20
 
21
- it('should trigger an event on click', () => {
22
-
23
- let receivedBook: Book | undefined;
24
- component.selectBook.subscribe(book => {
25
- receivedBook = book;
26
- });
27
-
28
- fixture.nativeElement
29
- .querySelector('bm-book-list-item').click();
30
- expect(receivedBook?.title).toBe('Tierisch gut kochen');
31
  });
32
  });
1
  import { ComponentFixture, TestBed } from '@angular/core/testing';
2
 
3
  import { BookListComponent } from './book-list.component';
 
4
 
5
  describe('BookListComponent', () => {
6
  let component: BookListComponent;
8
 
9
  beforeEach(async () => {
10
  await TestBed.configureTestingModule({
11
+ declarations: [ BookListComponent ]
12
  })
13
  .compileComponents();
14
 
17
  fixture.detectChanges();
18
  });
19
 
20
+ it('should create', () => {
21
+ expect(component).toBeTruthy();
 
 
 
 
 
 
 
 
22
  });
23
  });
src/app/{book-list → books/book-list}/book-list.component.ts RENAMED
@@ -1,6 +1,6 @@
1
  import { Component, EventEmitter, Output } from '@angular/core';
2
 
3
- import { Book } from '../shared/book';
4
 
5
  @Component({
6
  selector: 'bm-book-list',
1
  import { Component, EventEmitter, Output } from '@angular/core';
2
 
3
+ import { Book } from '../../shared/book';
4
 
5
  @Component({
6
  selector: 'bm-book-list',
src/app/{book-list-item → books/book-list-item}/book-list-item.component.ts RENAMED
@@ -1,5 +1,5 @@
1
  import { Component, Input } from '@angular/core';
2
- import { Book } from '../shared/book';
3
 
4
  @Component({
5
  selector: 'bm-book-list-item',
1
  import { Component, Input } from '@angular/core';
2
+ import { Book } from '../../shared/book';
3
 
4
  @Component({
5
  selector: 'bm-book-list-item',
src/app/books/books-routing.module.ts ADDED
@@ -0,0 +1,10 @@
 
 
 
 
 
 
 
 
 
 
1
+ import { NgModule } from '@angular/core';
2
+ import { RouterModule, Routes } from '@angular/router';
3
+
4
+ const routes: Routes = [];
5
+
6
+ @NgModule({
7
+ imports: [RouterModule.forChild(routes)],
8
+ exports: [RouterModule]
9
+ })
10
+ export class BooksRoutingModule { }
src/app/books/books.module.ts ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { NgModule } from '@angular/core';
2
+ import { CommonModule } from '@angular/common';
3
+
4
+ import { BooksRoutingModule } from './books-routing.module';
5
+ import { BookListComponent } from './book-list/book-list.component';
6
+ import { BookListItemComponent } from './book-list-item/book-list-item.component';
7
+ import { BookDetailsComponent } from './book-details/book-details.component';
8
+
9
+ @NgModule({
10
+ declarations: [
11
+ BookListComponent,
12
+ BookListItemComponent,
13
+ BookDetailsComponent
14
+ ],
15
+ imports: [
16
+ CommonModule,
17
+ BooksRoutingModule
18
+ ],
19
+ exports: [
20
+ BookListComponent,
21
+ BookDetailsComponent
22
+ ]
23
+ })
24
+ export class BooksModule { }