Unit Testing with new features from 6.2.0

package.json

@@ -15,9 +15,9 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-redux/form": "^6.1.1",
-    "@angular-redux/router": "^6.1.0",
-    "@angular-redux/store": "^6.1.0",
+    "@angular-redux/form": "^6.2.0",
+    "@angular-redux/router": "^6.2.0",
+    "@angular-redux/store": "^6.2.0",
     "@angular/common": "^4.0.0",
     "@angular/compiler": "^4.0.0",
     "@angular/core": "^4.0.0",

src/app/elephants/elephant-page.container.spec.ts

@@ -0,0 +1,101 @@
+import { TestBed, async } from '@angular/core/testing';
+import { NgReduxTestingModule, MockNgRedux } from '@angular-redux/store/testing';
+
+import { Component, Input } from '@angular/core';
+import { NgRedux } from '@angular-redux/store';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/toArray';
+import 'rxjs/add/operator/do';
+
+import { ElephantPageComponent } from './elephant-page.container';
+import { AnimalActions } from '../animals/animal.actions';
+import { ANIMAL_TYPES } from '../animals/animal.types';
+
+@Component({
+  selector: 'zoo-animal-list',
+  template: 'Mock Animal List',
+})
+class MockAnimalListComponent {
+  @Input() animalsName: string;
+  @Input() animals: Observable<any>;
+  @Input() loading: Observable<boolean>;
+  @Input() error: Observable<any>;
+};
+
+describe('Elephant Page Container', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ElephantPageComponent, MockAnimalListComponent],
+      imports: [NgReduxTestingModule],
+      providers: [AnimalActions],
+    }).compileComponents();
+
+    MockNgRedux.reset();
+  });
+
+  it('should select some elephants from the Redux store', done => {
+    const fixture = TestBed.createComponent(ElephantPageComponent);
+    const elephantPage = fixture.debugElement.componentInstance;
+    const expectedSequence = [
+      [ { name: 'I am an Elephant!' } ],
+      [ { name: 'I am an Elephant!' }, { name: 'I am a second Elephant!' } ]
+    ];
+
+    const elephantItemStub = MockNgRedux.getSelectorStub(['elephants', 'items']);
+    expectedSequence.forEach(value => elephantItemStub.next(value));
+    elephantItemStub.complete();
+
+    elephantPage.animals$
+      .toArray()
+      .subscribe(
+        actualSequence => expect(actualSequence).toEqual(expectedSequence),
+        null,
+        done);
+  });
+
+  it('should know when the animals are loading', done => {
+    const fixture = TestBed.createComponent(ElephantPageComponent);
+    const elephantPage = fixture.debugElement.componentInstance;
+
+    const stub = MockNgRedux.getSelectorStub(['elephants', 'loading']);
+    stub.next(false);
+    stub.next(true);
+    stub.complete();
+
+    elephantPage.loading$
+      .toArray()
+      .subscribe(
+        actualSequence => expect(actualSequence).toEqual([ false, true ]),
+        null,
+        done);
+  });
+
+  it('should know when there\'s an error', done => {
+    const fixture = TestBed.createComponent(ElephantPageComponent);
+    const elephantPage = fixture.debugElement.componentInstance;
+
+    const stub = MockNgRedux.getSelectorStub(['elephants', 'error']);
+    stub.next(false);
+    stub.next(true);
+    stub.complete();
+
+    elephantPage.error$
+      .toArray()
+      .subscribe(
+        actualSequence => expect(actualSequence).toEqual([ false, true ]),
+        null,
+        done);
+  });
+
+  it('should load elephants on creation', () => {
+    const spy = spyOn(MockNgRedux.mockInstance, 'dispatch');
+    const fixture = TestBed.createComponent(ElephantPageComponent);
+
+    expect(spy).toHaveBeenCalledWith({
+      type: AnimalActions.LOAD_STARTED,
+      meta: { animalType: ANIMAL_TYPES.ELEPHANT },
+    });
+  });
+});

src/app/feedback/feedback-form/feedback-form.component.ts

@@ -1,6 +1,6 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { Connect } from '@angular-redux/form';
-import { NgRedux } from '@angular-redux/store';
+import { NgRedux, select } from '@angular-redux/store';
 import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';
 import { IAppState } from '../../store/root.types';

src/app/feedback/feedback-form/feedback-form.spec.ts

@@ -0,0 +1,49 @@
+import { TestBed, async } from '@angular/core/testing';
+import { NgReduxTestingModule, MockNgRedux } from '@angular-redux/store/testing';
+import { NgRedux } from '@angular-redux/store';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/toArray';
+import 'rxjs/add/operator/do';
+
+import { FeedbackFormComponent } from './feedback-form.component';
+
+describe('Feedback Form Component', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [FeedbackFormComponent],
+      imports: [NgReduxTestingModule],
+    }).compileComponents();
+
+    MockNgRedux.reset();
+  });
+
+  it('should keep track of the number of remaining characters left', (done) => {
+    const fixture = TestBed.createComponent(FeedbackFormComponent);
+    const form = fixture.debugElement.componentInstance;
+
+    const expectedCharsLeftSequence = [
+      form.MAX_COMMENT_CHARS - 1,
+      form.MAX_COMMENT_CHARS - 2,
+      form.MAX_COMMENT_CHARS - 3,
+      form.MAX_COMMENT_CHARS - 4,
+      form.MAX_COMMENT_CHARS - 5,
+    ];
+
+    const feedbackCommentsStub = MockNgRedux.getSelectorStub(['feedback', 'comments']);
+    feedbackCommentsStub.next('h');
+    feedbackCommentsStub.next('he');
+    feedbackCommentsStub.next('hel');
+    feedbackCommentsStub.next('hell');
+    feedbackCommentsStub.next('hello');
+    feedbackCommentsStub.complete();
+
+    form.charsLeft$
+      .toArray()
+      .subscribe(
+        actualSequence => expect(actualSequence).toEqual(expectedCharsLeftSequence),
+        null,
+        done);
+  });
+});

src/app/lions/lion-page.container.spec.ts

@@ -0,0 +1,102 @@
+import { TestBed, async } from '@angular/core/testing';
+import { NgReduxTestingModule, MockNgRedux } from '@angular-redux/store/testing';
+
+import { Component, Input } from '@angular/core';
+import { NgRedux } from '@angular-redux/store';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/toArray';
+import 'rxjs/add/operator/do';
+
+import { LionPageComponent } from './lion-page.container';
+import { AnimalActions } from '../animals/animal.actions';
+import { ANIMAL_TYPES } from '../animals/animal.types';
+
+@Component({
+  selector: 'zoo-animal-list',
+  template: 'Mock Animal List',
+})
+class MockAnimalListComponent {
+  @Input() animalsName: string;
+  @Input() animals: Observable<any>;
+  @Input() loading: Observable<boolean>;
+  @Input() error: Observable<any>;
+};
+
+describe('Lion Page Container', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [LionPageComponent, MockAnimalListComponent],
+      imports: [NgReduxTestingModule],
+      providers: [AnimalActions],
+    }).compileComponents();
+
+    MockNgRedux.reset();
+  });
+
+  it('should select some lions from the Redux store', done => {
+    const fixture = TestBed.createComponent(LionPageComponent);
+    const lionPage = fixture.debugElement.componentInstance;
+    const expectedSequence = [
+      [ { name: 'I am a Lion!' } ],
+      [ { name: 'I am a Lion!' }, { name: 'I am a second Lion!' } ]
+    ];
+
+    const lionItemsStub = MockNgRedux.getSelectorStub(['lions', 'items']);
+    expectedSequence.forEach(value => lionItemsStub.next(value));
+    lionItemsStub.complete();
+
+    lionPage.animals$
+      .toArray()
+      .subscribe(
+        actualSequence => expect(actualSequence).toEqual(expectedSequence),
+        null,
+        done);
+  });
+
+  it('should know when the animals are loading', done => {
+    const fixture = TestBed.createComponent(LionPageComponent);
+    const lionPage = fixture.debugElement.componentInstance;
+
+    const lionsLoadingStub = MockNgRedux.getSelectorStub(['lions', 'loading']);
+    lionsLoadingStub.next(false);
+    lionsLoadingStub.next(true);
+    lionsLoadingStub.complete();
+
+    lionPage.loading$
+      .toArray()
+      .subscribe(
+        actualSequence => expect(actualSequence).toEqual([ false, true ]),
+        null,
+        done);
+  });
+
+  it('should know when there\'s an error', done => {
+    const fixture = TestBed.createComponent(LionPageComponent);
+    const lionPage = fixture.debugElement.componentInstance;
+    const expectedSequence = [ true ];
+
+    const lionsErrorStub = MockNgRedux.getSelectorStub(['lions', 'error']);
+    lionsErrorStub.next(false);
+    lionsErrorStub.next(true);
+    lionsErrorStub.complete();
+
+    lionPage.error$
+      .toArray()
+      .subscribe(
+        actualSequence => expect(actualSequence).toEqual([ false, true ]),
+        null,
+        done);
+  });
+
+  it('should load lions on creation', () => {
+    const spy = spyOn(MockNgRedux.mockInstance, 'dispatch');
+    const fixture = TestBed.createComponent(LionPageComponent);
+
+    expect(spy).toHaveBeenCalledWith({
+      type: AnimalActions.LOAD_STARTED,
+      meta: { animalType: ANIMAL_TYPES.LION },
+    });
+  });
+});