add test for AppComponent

nicobytes · nicobytes · commit 9c417d5d3ccf · 2017-09-14T23:50:21.000-05:00
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -1,32 +1,106 @@
-import { TestBed, async } from '@angular/core/testing';
+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 { TodoComponent } from './todo/todo.component';
+import { FooterComponent } from './footer/footer.component';
+import { NewTodoComponent } from './new-todo/new-todo.component';
+import { TodoListComponent } from './todo-list/todo-list.component';
 import { AppComponent } from './app.component';
 
-describe('AppComponent', () => {
+fdescribe('AppComponent', () => {
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [
-        AppComponent
+        AppComponent,
+        TodoComponent,
+        FooterComponent,
+        TodoListComponent,
+        NewTodoComponent
       ],
+      imports: [
+        ReactiveFormsModule,
+        FormsModule,
+        RouterTestingModule.withRoutes([
+          {path: '', component: TodoListComponent}
+        ]),
+        StoreModule.forRoot(rootReducer),
+      ]
     }).compileComponents();
   }));
 
-  it('should create the app', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }));
 
-  it(`should have as title 'app'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app');
-  }));
+  it('should be created', () => {
+    let store = TestBed.get(Store);
+    spyOn(store, 'dispatch').and.callThrough();
 
-  it('should render title in a h1 tag', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
+    spyOn(localStorage, 'getItem').and.returnValue('[]');
+
+    let fixture = TestBed.createComponent(AppComponent);
+    let component = fixture.componentInstance;
     fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
-  }));
+    expect(component).toBeTruthy();
+  });
+
+  describe('Test for populateTodos', () => {
+
+    it('should dispatch an action with item in localStorage', () => {
+
+      let store = TestBed.get(Store);
+      spyOn(store, 'dispatch').and.callThrough();
+  
+      spyOn(localStorage, 'getItem').and.returnValue('[]');
+  
+      let fixture = TestBed.createComponent(AppComponent);
+      let component = fixture.componentInstance;
+      fixture.detectChanges();
+
+      const action = new TodoActions.PopulateTodosAction([]);
+      expect(store.dispatch).toHaveBeenCalledWith(action);
+    });
+
+    it('should dispatch an action with null in localStorage', () => {
+      
+      let store = TestBed.get(Store);
+      spyOn(store, 'dispatch').and.callThrough();
+  
+      spyOn(localStorage, 'getItem').and.returnValue(null);
+  
+      let fixture = TestBed.createComponent(AppComponent);
+      let component = fixture.componentInstance;
+      fixture.detectChanges();
+
+      const action = new TodoActions.PopulateTodosAction([]);
+      expect(store.dispatch).toHaveBeenCalledWith(action);
+    });
+
+  });
+
+  describe('Test for updateTodos', () => {
+    
+    it('should called localStorage.setItem', () => {
+
+      let store = TestBed.get(Store);
+      spyOn(store, 'dispatch').and.callThrough();
+  
+      spyOn(localStorage, 'getItem').and.returnValue('[]');
+      spyOn(localStorage, 'setItem').and.callThrough();
+  
+      let fixture = TestBed.createComponent(AppComponent);
+      let component = fixture.componentInstance;
+      fixture.detectChanges();
+      
+      expect(localStorage.setItem).toHaveBeenCalledWith('angular-ngrx-todos', '[]');
+    });
+
+  });
 });
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -19,14 +19,14 @@ export class AppComponent {
   }
 
   private populateTodos() {
-    const todos: Todo[] = JSON.parse(localStorage.getItem('angular-todos') || '[]');
+    const todos: Todo[] = JSON.parse(localStorage.getItem('angular-ngrx-todos') || '[]');
     this.store.dispatch(new TodoActions.PopulateTodosAction(todos));
   }
 
   private updateTodos() {
     this.store.select('todos')
     .subscribe(todos => {
-      localStorage.setItem('angular-todos', JSON.stringify(todos));
+      localStorage.setItem('angular-ngrx-todos', JSON.stringify(todos));
     });
   }
 
diff --git a/src/app/todo-list/todo-list.component.spec.ts b/src/app/todo-list/todo-list.component.spec.ts
@@ -21,8 +21,7 @@ import { TodoComponent } from './../todo/todo.component';
 export class BlankCmp {
 }
 
-
-fdescribe('TodoListComponent', () => {
+describe('TodoListComponent', () => {
   let component: TodoListComponent;
   let fixture: ComponentFixture<TodoListComponent>;
   let store: Store<AppState>;

Original file line number	Diff line number	Diff line change
`@@ -19,14 +19,14 @@ export class AppComponent {`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`private populateTodos() {`
`22`		`- const todos: Todo[] = JSON.parse(localStorage.getItem('angular-todos') \|\| '[]');`
	`22`	`+ const todos: Todo[] = JSON.parse(localStorage.getItem('angular-ngrx-todos') \|\| '[]');`
`23`	`23`	`this.store.dispatch(new TodoActions.PopulateTodosAction(todos));`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`private updateTodos() {`
`27`	`27`	`this.store.select('todos')`
`28`	`28`	`.subscribe(todos => {`
`29`		`- localStorage.setItem('angular-todos', JSON.stringify(todos));`
	`29`	`+ localStorage.setItem('angular-ngrx-todos', JSON.stringify(todos));`
`30`	`30`	`});`
`31`	`31`	`}`
`32`	`32`
Original file line number	Diff line number	Diff line change
`@@ -21,8 +21,7 @@ import { TodoComponent } from './../todo/todo.component';`
`21`	`21`	`export class BlankCmp {`
`22`	`22`	`}`
`23`	`23`
`24`		`-`
`25`		`-fdescribe('TodoListComponent', () => {`
	`24`	`+describe('TodoListComponent', () => {`
`26`	`25`	`let component: TodoListComponent;`
`27`	`26`	`let fixture: ComponentFixture<TodoListComponent>;`
`28`	`27`	`let store: Store<AppState>;`