From: Kai Moritz <kai@juplo.de>
Date: Sun, 28 Jun 2020 21:36:25 +0000 (+0200)
Subject: WIP-NG
X-Git-Url: https://juplo.de/gitweb/?a=commitdiff_plain;h=28bda4db7661a99758eef1b832d5d39da7766d2a;p=examples%2Fangular-tour-of-heroes

WIP-NG
---

diff --git a/src/app/actions/vorgang.ts b/src/app/actions/vorgang.ts
index 33a5a13..1732ab5 100644
--- a/src/app/actions/vorgang.ts
+++ b/src/app/actions/vorgang.ts
@@ -1,5 +1,4 @@
-import { createAction } from '@ngrx/store';
+import { createAction, props } from '@ngrx/store';
+import { Vorgang } from '../vorgang';
 
-export const increment = createAction('[Counter Component] Increment');
-export const decrement = createAction('[Counter Component] Decrement');
-export const reset = createAction('[Counter Component] Reset');
+export const create = createAction('[Vorgang] Create', props<{ vorgang: Vorgang }>());
diff --git a/src/app/reducers/vorgang.ts b/src/app/reducers/vorgang.ts
index 974efa5..f129156 100644
--- a/src/app/reducers/vorgang.ts
+++ b/src/app/reducers/vorgang.ts
@@ -1,22 +1,20 @@
 import { createReducer, on } from '@ngrx/store';
-import { increment, decrement, reset } from '../actions/vorgang';
+import { Vorgang } from '../vorgang';
+import { create } from '../actions/vorgang';
 
 export interface State {
-  counter: number;
+  vorgaenge: Vorgang[];
 }
 
-export const initialState: State = { counter: 0 };
+export const initialState: State = { vorgaenge : [] };
 
-const REDUCER = createReducer(initialState,
-  on(increment, state => {
-    return { counter: state.counter + 1 };
-  }),
-  on(decrement, state => {
-    return { counter: state.counter - 1 };
-  }),
-  on(reset, state => {
-    return { counter: 0 };
-  }),
+const REDUCER = createReducer(
+  initialState,
+  on(create, (state, props) => {
+    const vorgaenge: Vorgang[] = [ props.vorgang ];
+    state.vorgaenge.forEach(val => vorgaenge.push(Object.assign({}, val)));
+    return { vorgaenge };
+  })
 );
 
 export function reducer(state, action) {
diff --git a/src/app/vorgang/vorgang.component.html b/src/app/vorgang/vorgang.component.html
index b45d10d..0a27107 100644
--- a/src/app/vorgang/vorgang.component.html
+++ b/src/app/vorgang/vorgang.component.html
@@ -1,7 +1,11 @@
-<button id="increment" (click)="increment()">Increment</button>
+<div id="vorgang-component">
+  <h4><label for="vorgang-box">Vorgang</label></h4>
 
-<div>Vorgang: <span id="vorgang">{{ vorgang$ | async }}</span></div>
+  <input #vorgangBox id="vorgang-box" (input)="create(vorgangBox.value)" />
 
-<button id="decrement" (click)="decrement()">Decrement</button>
-
-<button id="reset" (click)="reset()">Reset Counter</button>
+  <ul class="vorgang-result">
+    <li *ngFor="let vorgang of vorgang$ | async" >
+      {{vorgang}}
+    </li>
+  </ul>
+</div>
diff --git a/src/app/vorgang/vorgang.component.spec.ts b/src/app/vorgang/vorgang.component.spec.ts
index 0d41cdf..9e912a8 100644
--- a/src/app/vorgang/vorgang.component.spec.ts
+++ b/src/app/vorgang/vorgang.component.spec.ts
@@ -1,19 +1,29 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
+import { MemoizedSelector, State } from '@ngrx/store';
 
 import { VorgangComponent } from './vorgang.component';
+import { VorgangService } from '../vorgang.service';
+import { Vorgang } from '../vorgang';
+import Result = jasmine.Result;
+
+class VorgangServiceStub {}
 
 describe('VorgangComponent', () => {
   let component: VorgangComponent;
   let fixture: ComponentFixture<VorgangComponent>;
   let mockStore: MockStore;
+  let mockUsernameSelector: MemoizedSelector<any, Vorgang>;
 
-  const initialState = { vorgang: { counter: 0 } };
+  const initialState = { vorgang: { vorgaenge: [] } };
 
-  beforeEach(async(() => {
+    beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ VorgangComponent ],
-      providers: [ provideMockStore({ initialState }) ]
+      providers: [
+        provideMockStore({ initialState }),
+        { provide: VorgangService, useClass: VorgangServiceStub }
+      ]
     })
     .compileComponents();
 
@@ -23,6 +33,7 @@ describe('VorgangComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(VorgangComponent);
     component = fixture.componentInstance;
+    mockUsernameSelector = mockStore.overrideSelector('vorgang', Vorgang);
     fixture.detectChanges();
   });
 
@@ -30,10 +41,19 @@ describe('VorgangComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should render vorgang', () => {
-    const fixture = TestBed.createComponent(VorgangComponent);
+  it('should render empty vorgang-list in the beginning', () => {
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('.vorgang-result')).toBeTruthy();
+    expect(compiled.querySelector('.vorgang-result > li')).toBeNull();
+  });
+
+  it('should render new vorgang-list', () => {
+    const vorgang: Vorgang = require('../../mock/vorgang.json');
+    mockStore.set
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('#vorgang').textContent).toContain('0');
+    expect(compiled.querySelector('.vorgang-result')).toBeTruthy();
+    expect(compiled.querySelector('.vorgang-result > li')).toBeNull();
   });
 });
diff --git a/src/app/vorgang/vorgang.component.ts b/src/app/vorgang/vorgang.component.ts
index 8324ca0..cfd8560 100644
--- a/src/app/vorgang/vorgang.component.ts
+++ b/src/app/vorgang/vorgang.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import { VorgangService } from '../vorgang.service';
+import { Vorgang } from '../vorgang';
 import { Store, select } from '@ngrx/store';
 import { Observable } from 'rxjs';
-import { State } from '../reducers/vorgang';
-import { increment, decrement, reset } from '../actions/vorgang';
-import { map } from 'rxjs/operators';
+import { create } from '../actions/vorgang';
 
 @Component({
   selector: 'app-vorgang',
@@ -12,24 +12,21 @@ import { map } from 'rxjs/operators';
 })
 export class VorgangComponent implements OnInit {
 
-  vorgang$: Observable<number>;
+  vorgang$: Observable<Vorgang[]>;
 
-  constructor(private store: Store<{ vorgang: State }>) {
-    this.vorgang$ = store.pipe(select('vorgang'), map(vorgang => vorgang.counter));
+  constructor(
+      private service: VorgangService,
+      private store: Store<{ vorgang: Vorgang[] }>) {
+    this.vorgang$ = store.pipe(select('vorgang'));
   }
 
   ngOnInit(): void {
   }
 
-  increment() {
-    this.store.dispatch(increment());
-  }
-
-  decrement() {
-    this.store.dispatch(decrement());
-  }
-
-  reset() {
-    this.store.dispatch(reset());
+  create(data: string) {
+    this
+      .service
+      .create({ vbId: 'peter', vorgangId: '1' , zustand: data })
+      .subscribe(result => this.store.dispatch(create( { vorgang: result })));
   }
 }