add test for TodoListComponent

Author: nicobytes

src/app/new-todo/new-todo.component.spec.ts

@@ -17,7 +17,7 @@ import { NewTodoComponent } from './new-todo.component';
 export class BlankCmp {
 }
 
-fdescribe('NewTodoComponent', () => {
+describe('NewTodoComponent', () => {
   let component: NewTodoComponent;
   let fixture: ComponentFixture<NewTodoComponent>;
   let store: Store<AppState>;

src/app/todo-list/todo-list.component.spec.ts

@@ -1,19 +1,59 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component } from '@angular/core';
+import { RouterModule, Routes, ActivatedRoute } from '@angular/router';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { StoreModule, Store } from '@ngrx/store';
+import { RouterTestingModule } from '@angular/router/testing';
+import { Observable } from 'rxjs';
+import 'rxjs/add/observable/of';
+
+import { rootReducer, AppState } from './../../redux/app.reducer';
+import * as TodoActions from './../../redux/todo/todo.actions';
+import * as FilterActions from './../../redux/filter/filter.actions';
 
 import { TodoListComponent } from './todo-list.component';
+import { TodoComponent } from './../todo/todo.component';
+
+@Component({
+  selector: 'blank-cmp',
+  template: ``
+})
+export class BlankCmp {
+}
 
-describe('TodoListComponent', () => {
+
+fdescribe('TodoListComponent', () => {
   let component: TodoListComponent;
   let fixture: ComponentFixture<TodoListComponent>;
+  let store: Store<AppState>;
+  let route: ActivatedRoute;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ TodoListComponent ]
+      declarations: [ 
+        TodoListComponent,
+        TodoComponent,
+        BlankCmp
+      ],
+      imports: [
+        ReactiveFormsModule,
+        FormsModule,
+        RouterTestingModule.withRoutes([
+          {path: '', component: BlankCmp}
+        ]),
+        StoreModule.forRoot(rootReducer),
+      ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
+
+    store = TestBed.get(Store);
+    spyOn(store, 'dispatch').and.callThrough();
+
+    route = TestBed.get(ActivatedRoute);
+
     fixture = TestBed.createComponent(TodoListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -22,4 +62,108 @@ describe('TodoListComponent', () => {
   it('should be created', () => {
     expect(component).toBeTruthy();
   });
+
+  describe("Test for checkField", ()=>{
+    
+    it("should checkField be defined", ()=>{
+      expect(component.checkField).toBeDefined();
+    });
+
+    it("should checkField be true with new stateCompleted", ()=>{
+      const todos = [
+        { id: 1, text: 'todo', completed: true },
+        { id: 2, text: 'todo', completed: true },
+        { id: 3, text: 'todo', completed: true },
+      ];
+      const action = new TodoActions.PopulateTodosAction(todos);
+      store.dispatch(action);
+      expect(component.checkField.value).toBeTruthy();
+    });
+
+    it("should checkField be false with new readStateCompleted", ()=>{
+      const todos = [
+        { id: 1, text: 'todo', completed: true },
+        { id: 2, text: 'todo', completed: false },
+        { id: 3, text: 'todo', completed: true },
+      ];
+      const action = new TodoActions.PopulateTodosAction(todos);
+      store.dispatch(action);
+      expect(component.checkField.value).toBeFalsy();
+    });
+
+  });
+
+  describe("Test for toggleAll", ()=>{
+    
+    it("should dispatch an action", ()=>{
+      component.toggleAll();
+      const action = new TodoActions.CompletedAllAction();
+      expect(store.dispatch).toHaveBeenCalledWith(action);
+    });
+
+  });
+
+  describe("Test for readTodosState", ()=>{
+    
+    it("should todos be equal that new todos", ()=>{
+      const todos = [
+        { id: 1, text: 'todo', completed: true },
+        { id: 2, text: 'todo', completed: false },
+        { id: 3, text: 'todo', completed: true },
+      ];
+      const action = new TodoActions.PopulateTodosAction(todos);
+      store.dispatch(action);
+      expect(component.todos).toEqual(todos);
+    });
+
+  });
+
+  describe("Test for readParams", ()=>{
+    
+    it("should dispatch an action when filter is unknown", ()=> {
+
+      route = TestBed.get(ActivatedRoute);
+      route.params = Observable.of({
+        'filter': 'what'
+      });
+
+      fixture = TestBed.createComponent(TodoListComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+
+      const action = new FilterActions.SetFilterAction('SHOW_ALL');
+      expect(store.dispatch).toHaveBeenCalledWith(action);
+    });
+
+    it('should dispatch an action when filter is "active"', ()=>{
+
+      route = TestBed.get(ActivatedRoute);
+      route.params = Observable.of({
+        'filter': 'active'
+      });
+
+      fixture = TestBed.createComponent(TodoListComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+
+      const action = new FilterActions.SetFilterAction('SHOW_ACTIVE');
+      expect(store.dispatch).toHaveBeenCalledWith(action);
+    });
+
+    it('should dispatch an action when filter is "completed"', ()=>{
+      
+      route = TestBed.get(ActivatedRoute);
+      route.params = Observable.of({
+        'filter': 'completed'
+      });
+
+      fixture = TestBed.createComponent(TodoListComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+
+      const action = new FilterActions.SetFilterAction('SHOW_COMPLETED');
+      expect(store.dispatch).toHaveBeenCalledWith(action);
+    });
+
+  });
 });

src/app/todo-list/todo-list.component.ts

@@ -22,28 +22,15 @@ export class TodoListComponent implements OnInit {
     private store: Store<AppState>,
     private route: ActivatedRoute
   ) {
-    this.route.params
-    .subscribe(params => {
-      this.setFilter(params.filter);
-    });
     this.checkField = new FormControl();
-    this.store.select(getStateCompleted)
-    .subscribe(status => {
-      this.checkField.setValue(status);
-    });
+    this.readParams();
+    this.readStateCompleted();
     this.readTodosState();
   }
 
   ngOnInit() {
   }
 
-  readTodosState() {
-    this.store.select(getVisibleTodos)
-    .subscribe(todos => {
-      this.todos = todos;
-    });
-  }
-
   toggleAll() {
     this.store.dispatch(new TodoActions.CompletedAllAction());
   }
@@ -64,4 +51,25 @@ export class TodoListComponent implements OnInit {
       }
     }
   }
+
+  private readTodosState() {
+    this.store.select(getVisibleTodos)
+    .subscribe(todos => {
+      this.todos = todos;
+    });
+  }
+
+  private readStateCompleted() {
+    this.store.select(getStateCompleted)
+    .subscribe(status => {
+      this.checkField.setValue(status);
+    });
+  }
+
+  private readParams() {
+    this.route.params
+    .subscribe(params => {
+      this.setFilter(params.filter);
+    });
+  }
 }

src/app/todo/todo.component.spec.ts

@@ -1,25 +1,139 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, tick, fakeAsync } from '@angular/core/testing';
+import { Component } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { StoreModule, Store } from '@ngrx/store';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { rootReducer, AppState } from './../../redux/app.reducer';
+import * as TodoActions from './../../redux/todo/todo.actions';
 
 import { TodoComponent } from './todo.component';
 
+@Component({
+  selector: 'blank-cmp',
+  template: ``
+})
+export class BlankCmp {
+}
+
+
 describe('TodoComponent', () => {
   let component: TodoComponent;
   let fixture: ComponentFixture<TodoComponent>;
+  let store: Store<AppState>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ TodoComponent ]
+      declarations: [ 
+        TodoComponent,
+        BlankCmp
+      ],
+      imports: [
+        ReactiveFormsModule,
+        FormsModule,
+        RouterTestingModule.withRoutes([
+          {path: '', component: BlankCmp}
+        ]),
+        StoreModule.forRoot(rootReducer),
+      ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
+
+    store = TestBed.get(Store);
+    spyOn(store, 'dispatch').and.callThrough();
+
     fixture = TestBed.createComponent(TodoComponent);
     component = fixture.componentInstance;
+    component.todo = {
+      id: 1,
+      text: 'test todo',
+      completed: true
+    };
     fixture.detectChanges();
   });
 
   it('should be created', () => {
     expect(component).toBeTruthy();
   });
+
+  describe("Test for textField", ()=>{
+    
+    it("should textField be defined", ()=>{
+      expect(component.textField).toBeDefined();
+    });
+
+    it("should textField be valid", ()=>{
+      component.textField.setValue('new todo');
+      expect(component.textField.valid).toBeTruthy();
+    });
+
+    it("should textField be invalid", ()=>{
+      component.textField.setValue('');
+      expect(component.textField.invalid).toBeTruthy();
+    });
+
+  });
+
+  describe("Test for checkField", ()=>{
+    
+    it("should checkField be defined", ()=>{
+      expect(component.checkField).toBeDefined();
+    });
+
+    it("should dispatch an action when checkField change state", ()=>{
+      component.checkField.setValue(true);
+      const action = new TodoActions.ToggleAction(component.todo.id);
+      expect(store.dispatch).toHaveBeenCalledWith(action);
+    });
+
+  });
+
+  describe("Test for updateText", ()=>{
+  
+    it("should dispatch an action if textField is valid and editing is true", ()=>{
+      component.editing = true;
+      component.textField.setValue('update todo', { emitEvent: false });
+      component.updateText();
+      const action = new TodoActions.UpdateAction(component.todo.id, component.textField.value);
+      expect(store.dispatch).toHaveBeenCalledWith(action);
+    });
+
+    it("should editing be false after send dispatch", ()=>{
+      component.editing = true;
+      component.textField.setValue('update todo', { emitEvent: false });
+      component.updateText();
+      expect(component.editing).toBeFalsy();
+    });
+
+  });
+
+  describe("Test for activeEditMode", ()=>{
+    
+    it("should editing be true", ()=>{
+      component.activeEditMode();
+      expect(component.editing).toBeTruthy();
+    });
+
+    it("should textInput call focus", fakeAsync(()=>{
+      spyOn(component.textInput.nativeElement, 'focus').and.callThrough();
+      component.activeEditMode();
+      tick(1000);
+      expect(component.textInput.nativeElement.focus).toHaveBeenCalled();
+    }));
+
+  });
+
+  describe("Test for deleteTodo", ()=>{
+    
+    it("should dispatch an action", ()=>{
+      component.deleteTodo();
+      const action = new TodoActions.DeleteTodoAction(component.todo.id);
+      expect(store.dispatch).toHaveBeenCalledWith(action);
+    });
+
+  });
 });