BM5 Diff | 16e-ngrx (von 16-guards)

.eslintrc.json CHANGED Viewed

@@ -42,6 +42,14 @@
         "plugin:@angular-eslint/template/accessibility"
       ],
       "rules": {}
     }
   ]
-}

         "plugin:@angular-eslint/template/accessibility"
       ],
       "rules": {}
+    },
+    {
+      "files": [
+        "*.ts"
+      ],
+      "extends": [
+        "plugin:@ngrx/recommended"
+      ]
     }
   ]
+}

angular.json CHANGED Viewed

@@ -113,7 +113,8 @@
   },
   "cli": {
     "schematicCollections": [
-      "@angular-eslint/schematics"
     ]
   }
-}

   },
   "cli": {
     "schematicCollections": [
+      "@angular-eslint/schematics",
+      "@ngrx/schematics"
     ]
   }
+}

package.json CHANGED Viewed

@@ -19,6 +19,9 @@
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
     "angular-date-value-accessor": "^3.0.0",
     "book-monkey5-styles": "^1.0.4",
     "rxjs": "~7.8.0",
@@ -34,11 +37,14 @@
     "@angular-eslint/template-parser": "17.3.0",
     "@angular/cli": "^17.3.6",
     "@angular/compiler-cli": "^17.3.0",
     "@types/jasmine": "~5.1.0",
     "@typescript-eslint/eslint-plugin": "7.2.0",
     "@typescript-eslint/parser": "7.2.0",
     "eslint": "^8.57.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",

     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
+    "@ngrx/effects": "^17.2.0",
+    "@ngrx/store": "^17.2.0",
+    "@ngrx/store-devtools": "^17.2.0",
     "angular-date-value-accessor": "^3.0.0",
     "book-monkey5-styles": "^1.0.4",
     "rxjs": "~7.8.0",
     "@angular-eslint/template-parser": "17.3.0",
     "@angular/cli": "^17.3.6",
     "@angular/compiler-cli": "^17.3.0",
+    "@ngrx/eslint-plugin": "^17.2.0",
+    "@ngrx/schematics": "^17.2.0",
     "@types/jasmine": "~5.1.0",
     "@typescript-eslint/eslint-plugin": "7.2.0",
     "@typescript-eslint/parser": "7.2.0",
     "eslint": "^8.57.0",
     "jasmine-core": "~5.1.0",
+    "jasmine-marbles": "^0.9.2",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",

src/app/admin/book-create/book-create.component.spec.ts ADDED Viewed

	@@ -0,0 +1,23 @@

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

src/app/admin/book-edit/book-edit.component.spec.ts ADDED Viewed

	@@ -0,0 +1,23 @@

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

src/app/admin/book-form/book-form.component.spec.ts ADDED Viewed

	@@ -0,0 +1,23 @@

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

src/app/admin/form-errors/form-errors.component.spec.ts ADDED Viewed

	@@ -0,0 +1,23 @@

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

src/app/admin/shared/async-validators.service.spec.ts ADDED Viewed

	@@ -0,0 +1,16 @@

+import { TestBed } from '@angular/core/testing';
+import { AsyncValidatorsService } from './async-validators.service';
+describe('AsyncValidatorsService', () => {
+  let service: AsyncValidatorsService;
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AsyncValidatorsService);
+  });
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/app.module.ts CHANGED Viewed

@@ -1,6 +1,9 @@
-import { NgModule } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -18,6 +21,9 @@ import { AuthInterceptor } from './shared/auth.interceptor';
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
   ],
   providers: [
     {

+import { NgModule, isDevMode } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { EffectsModule } from '@ngrx/effects';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
+    StoreModule.forRoot({}, {}),
+    StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: !isDevMode() }),
+    EffectsModule.forRoot([]),
   ],
   providers: [
     {

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

	@@ -0,0 +1,23 @@

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

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

@@ -7,3 +7,5 @@
     No books available.
   </li>
 </ul>

     No books available.
   </li>
 </ul>
+<div class="loader" *ngIf="loading$ | async">Loading ...</div>

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

	@@ -0,0 +1,29 @@

+import { TestBed } from '@angular/core/testing';
+import { provideMockStore } from '@ngrx/store/testing';
+import { selectAllBooks, selectBooksLoading } from '../store/book.selectors';
+import { BookListComponent } from './book-list.component';
+describe('BookListComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BookListComponent ],
+      providers: [
+        provideMockStore({
+          selectors: [
+            { selector: selectBooksLoading, value: true },
+            { selector: selectAllBooks, value: [] },
+          ]
+        })
+      ]
+    })
+    .compileComponents();
+  });
+  it('should show a loading text', () => {
+    const fixture = TestBed.createComponent(BookListComponent);
+    fixture.detectChanges();
+    const element = fixture.nativeElement;
+    expect(element.querySelector('.loader').textContent).toBe('Loading ...');
+  });
+});

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

@@ -1,8 +1,10 @@
 import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Book } from '../../shared/book';
-import { BookStoreService } from '../../shared/book-store.service';
 @Component({
   selector: 'bm-book-list',
@@ -11,8 +13,12 @@ import { BookStoreService } from '../../shared/book-store.service';
 })
 export class BookListComponent {
   books$: Observable<Book[]>;
-  constructor(private service: BookStoreService) {
-    this.books$ = this.service.getAll();
   }
 }

 import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { Book } from '../../shared/book';
+import { loadBooks } from '../store/book.actions';
+import { selectAllBooks, selectBooksLoading } from '../store/book.selectors';
 @Component({
   selector: 'bm-book-list',
 })
 export class BookListComponent {
   books$: Observable<Book[]>;
+  loading$: Observable<boolean>;
+  constructor(private store: Store) {
+    this.books$ = this.store.select(selectAllBooks);
+    this.loading$ = this.store.select(selectBooksLoading);
+    this.store.dispatch(loadBooks());
   }
 }

src/app/books/books.module.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { BooksRoutingModule } from './books-routing.module';
 import { BookListComponent } from './book-list/book-list.component';
@@ -8,6 +10,8 @@ import { BookDetailsComponent } from './book-details/book-details.component';
 import { IsbnPipe } from './shared/isbn.pipe';
 import { ConfirmDirective } from './shared/confirm.directive';
 import { LoggedinOnlyDirective } from './shared/loggedin-only.directive';
 @NgModule({
   declarations: [
@@ -20,7 +24,9 @@ import { LoggedinOnlyDirective } from './shared/loggedin-only.directive';
   ],
   imports: [
     CommonModule,
-    BooksRoutingModule
   ]
 })
 export class BooksModule { }

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
 import { BooksRoutingModule } from './books-routing.module';
 import { BookListComponent } from './book-list/book-list.component';
 import { IsbnPipe } from './shared/isbn.pipe';
 import { ConfirmDirective } from './shared/confirm.directive';
 import { LoggedinOnlyDirective } from './shared/loggedin-only.directive';
+import { BookEffects } from './store/book.effects';
+import * as fromBook from './store/book.reducer';
 @NgModule({
   declarations: [
   ],
   imports: [
     CommonModule,
+    BooksRoutingModule,
+    StoreModule.forFeature(fromBook.bookFeatureKey, fromBook.reducer),
+    EffectsModule.forFeature([BookEffects])
   ]
 })
 export class BooksModule { }

src/app/books/shared/loggedin-only.directive.spec.ts ADDED Viewed

	@@ -0,0 +1,8 @@

+import { LoggedinOnlyDirective } from './loggedin-only.directive';
+describe('LoggedinOnlyDirective', () => {
+  it('should create an instance', () => {
+    const directive = new LoggedinOnlyDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/books/store/book.actions.ts ADDED Viewed

	@@ -0,0 +1,17 @@

+import { createAction, props } from '@ngrx/store';
+import { Book } from '../../shared/book';
+export const loadBooks = createAction(
+  '[Book] Load Books'
+);
+export const loadBooksSuccess = createAction(
+  '[Book] Load Books Success',
+  props<{ data: Book[] }>()
+);
+export const loadBooksFailure = createAction(
+  '[Book] Load Books Failure',
+  props<{ error: string }>()
+);

src/app/books/store/book.effects.alternative.spec.ts ADDED Viewed

	@@ -0,0 +1,61 @@

+import { TestBed } from '@angular/core/testing';
+import { Actions } from '@ngrx/effects';
+import { provideMockActions } from '@ngrx/effects/testing';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
+import { cold, hot } from 'jasmine-marbles';
+import { of } from 'rxjs';
+import { BookStoreService } from '../../shared/book-store.service';
+import { loadBooks, loadBooksSuccess } from './book.actions';
+import { BookEffects } from './book.effects.alternative';
+import { initialState } from './book.reducer';
+import { book } from './test-helper';
+describe('BookEffects', () => {
+  let actions$: Actions;
+  let effects: BookEffects;
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        BookEffects,
+        provideMockActions(() => actions$),
+        provideMockStore({
+          initialState: { book: initialState }
+        }),
+        {
+          provide: BookStoreService,
+          useValue: {
+            getAll: () => of([])
+          }
+        }
+      ]
+    });
+    effects = TestBed.inject(BookEffects);
+  });
+  it('should fire loadBooksSuccess for loadBooks if store is empty', () => {
+    actions$ = hot('--a', { a: loadBooks() });
+    const expected = cold('--b', { b: loadBooksSuccess({ data: [] }) });
+    expect(effects.loadBooks$).toBeObservable(expected);
+  });
+  it('should do nothing if store is already filled', () => {
+    const store = TestBed.inject(MockStore);
+    store.setState({
+      book: {
+        books: [book(1)],
+        loading: false
+      }
+    });
+    actions$ =        hot('--a', { a: loadBooks() });
+    const expected = cold('---');
+    expect(effects.loadBooks$).toBeObservable(expected);
+  });
+});

src/app/books/store/book.effects.alternative.ts ADDED Viewed

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

+import { Injectable } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Actions, concatLatestFrom, createEffect, ofType } from '@ngrx/effects';
+import { catchError, filter, map, switchMap } from 'rxjs/operators';
+import { of } from 'rxjs';
+import * as BookActions from './book.actions';
+import { BookStoreService } from '../../shared/book-store.service';
+import { selectAllBooks } from './book.selectors';
+@Injectable()
+export class BookEffects {
+  loadBooks$ = createEffect(() => {
+    return this.actions$.pipe(
+      ofType(BookActions.loadBooks),
+      concatLatestFrom(() => this.store.select(selectAllBooks)),
+      filter(([action, books]) => !books.length),
+      switchMap(() =>
+        this.service.getAll().pipe(
+          map(data => BookActions.loadBooksSuccess({ data })),
+          catchError(error => of(BookActions.loadBooksFailure({ error: error.message })))
+        )
+      )
+    );
+  });
+  constructor(
+    private actions$: Actions,
+    private service: BookStoreService,
+    private store: Store
+  ) {}
+}

src/app/books/store/book.effects.marble.spec.ts ADDED Viewed

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

+import { TestBed } from '@angular/core/testing';
+import { provideMockActions } from '@ngrx/effects/testing';
+import { Action } from '@ngrx/store';
+import { Observable, of } from 'rxjs';
+import { BookStoreService } from '../../shared/book-store.service';
+import { loadBooks, loadBooksSuccess } from './book.actions';
+import { hot, cold } from 'jasmine-marbles';
+import { BookEffects } from './book.effects';
+import { book } from './test-helper';
+describe('BookEffects', () => {
+  let actions$: Observable<any>;
+  let effects: BookEffects;
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        BookEffects,
+        provideMockActions(() => actions$),
+        {
+          provide: BookStoreService,
+          useValue: { getAll: () => of([]) }
+        }
+      ]
+    });
+    effects = TestBed.inject(BookEffects);
+  });
+  it('should fire loadBooksSuccess for loadBooks', () => {
+    const books = [book(1), book(2), book(3)];
+    // Implementierung von getAll() ersetzen
+    const bs = TestBed.inject(BookStoreService);
+    spyOn(bs, 'getAll').and.callFake(() => of(books));
+    // Action auslösen
+    actions$ = hot('--a', { a: loadBooks() });
+    const expected = cold('--b', { b: loadBooksSuccess({ data: books }) });
+    // Datenströme vergleichen
+    expect(effects.loadBooks$).toBeObservable(expected);
+    // Serviceaufruf prüfen
+    expect(bs.getAll).toHaveBeenCalled();
+  });
+});

src/app/books/store/book.effects.spec.ts ADDED Viewed

	@@ -0,0 +1,53 @@

+import { TestBed } from '@angular/core/testing';
+import { provideMockActions } from '@ngrx/effects/testing';
+import { Action } from '@ngrx/store';
+import { Observable, of } from 'rxjs';
+import { BookStoreService } from '../../shared/book-store.service';
+import { loadBooks, loadBooksSuccess } from './book.actions';
+import { BookEffects } from './book.effects';
+import { book } from './test-helper';
+describe('BookEffects', () => {
+  let actions$: Observable<any>;
+  let effects: BookEffects;
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        BookEffects,
+        provideMockActions(() => actions$),
+        {
+          provide: BookStoreService,
+          useValue: { getAll: () => of([]) }
+        }
+      ]
+    });
+    effects = TestBed.inject(BookEffects);
+  });
+  it('should fire loadBooksSuccess for loadBooks', () => {
+    const books = [book(1), book(2), book(3)];
+    // Implementierung von getAll() ersetzen
+    const bs = TestBed.inject(BookStoreService);
+    spyOn(bs, 'getAll').and.callFake(() => of(books));
+    // Action auslösen
+    actions$ = of(loadBooks());
+    // Actions aus Effect empfangen
+    let dispatchedAction: Action | undefined;
+    effects.loadBooks$.subscribe(action => {
+      dispatchedAction = action;
+    });
+    // Actions vergleichen
+    const expectedAction = loadBooksSuccess({ data: books });
+    expect(dispatchedAction).toEqual(expectedAction);
+    // Serviceaufruf prüfen
+    expect(bs.getAll).toHaveBeenCalled();
+  });
+});

src/app/books/store/book.effects.ts ADDED Viewed

	@@ -0,0 +1,28 @@

+import { Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { catchError, map, switchMap } from 'rxjs/operators';
+import { of } from 'rxjs';
+import * as BookActions from './book.actions';
+import { BookStoreService } from '../../shared/book-store.service';
+@Injectable()
+export class BookEffects {
+  loadBooks$ = createEffect(() => {
+    return this.actions$.pipe(
+      ofType(BookActions.loadBooks),
+      switchMap(() =>
+        this.service.getAll().pipe(
+          map(data => BookActions.loadBooksSuccess({ data })),
+          catchError(error => of(BookActions.loadBooksFailure({ error: error.message })))
+        )
+      )
+    );
+  });
+  constructor(
+    private actions$: Actions,
+    private service: BookStoreService
+  ) {}
+}

src/app/books/store/book.reducer.spec.ts ADDED Viewed

	@@ -0,0 +1,15 @@

+import { loadBooks } from './book.actions';
+import { reducer } from './book.reducer';
+describe('Book Reducer', () => {
+  it('should enable the loading flag for loadBooks', () => {
+    const state = {
+      books: [],
+      loading: false
+    };
+    const action = loadBooks();
+    const newState = reducer(state, action);
+    expect(newState.loading).toBe(true);
+  });
+});

src/app/books/store/book.reducer.ts ADDED Viewed

	@@ -0,0 +1,36 @@

+import { createReducer, on } from '@ngrx/store';
+import { Book } from '../../shared/book';
+import * as BookActions from './book.actions';
+export const bookFeatureKey = 'book';
+export interface State {
+  books: Book[];
+  loading: boolean;
+}
+export const initialState: State = {
+  books: [],
+  loading: false
+};
+export const reducer = createReducer(
+  initialState,
+  on(BookActions.loadBooks, (state): State => {
+    return { ...state, loading: true };
+  }),
+  on(BookActions.loadBooksSuccess, (state, action): State => {
+    return {
+      ...state,
+      books: action.data,
+      loading: false
+    };
+  }),
+  on(BookActions.loadBooksFailure, (state, action): State => {
+    return { ...state, loading: false };
+  }),
+);

src/app/books/store/book.selectors.1.spec.ts ADDED Viewed

	@@ -0,0 +1,12 @@

+import { selectAllBooks } from './book.selectors';
+import { book } from './test-helper';
+describe('Book Selectors', () => {
+  it('should select all books', () => {
+    const books = [book(1), book(2), book(3)];
+    const bookState = { books, loading: false };
+    const result = selectAllBooks.projector(bookState);
+    expect(result).toEqual(books);
+  });
+});

src/app/books/store/book.selectors.spec.ts ADDED Viewed

	@@ -0,0 +1,14 @@

+import { selectAllBooks } from './book.selectors';
+import { book } from './test-helper';
+describe('Book Selectors', () => {
+  it('should select all books', () => {
+    const books = [book(1), book(2), book(3)];
+    const state = {
+      book: { books, loading: false }
+    };
+    const result = selectAllBooks(state);
+    expect(result).toEqual(books);
+  });
+});

src/app/books/store/book.selectors.ts ADDED Viewed

	@@ -0,0 +1,16 @@

+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import * as fromBook from './book.reducer';
+export const selectBookState = createFeatureSelector<fromBook.State>(
+  fromBook.bookFeatureKey
+);
+export const selectBooksLoading = createSelector(
+  selectBookState,
+  state => state.loading
+);
+export const selectAllBooks = createSelector(
+  selectBookState,
+  state => state.books
+);

src/app/books/store/test-helper.ts ADDED Viewed

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

+import { Book } from '../../shared/book';
+export function book(i: number): Book {
+  return {
+    isbn: 'isbn' + i,
+    title: 'title' + i,
+    authors: []
+  };
+}

src/app/home/home.component.spec.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HomeComponent } from './home.component';
@@ -9,8 +8,7 @@ describe('HomeComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ HomeComponent ],
-      schemas: [NO_ERRORS_SCHEMA]
     })
     .compileComponents();

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HomeComponent } from './home.component';
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
     })
     .compileComponents();

src/app/search/search.component.spec.ts ADDED Viewed

	@@ -0,0 +1,23 @@

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

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

	@@ -0,0 +1,16 @@

+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();
+  });
+});

Differenzansicht 16e-ngrxim Vergleich zu 16-guards

Differenzansicht 16e-ngrx
im Vergleich zu 16-guards