Unit Testing Karma notes

it('should create the app', async(() => { 
    let fixture = TestBed.createComponent(AppComponent); 
    let app = fixture.debugElement.componentInstance; 
    expect(app).toBeTruthy();
}));

it('should have a title `app works!`', async(() => { 
    let fixture = TestBed.createComponent(AppComponent); 
    let app = fixture.debugElement.componentInstance; 
    expect(app.title).toEqual('app works!');
}));

it('should render title in a h1 tag', async(() => { 
    let fixture = TestBed.createComponent(AppComponent); 
    fixture.detectChanges();
    let compiled = fixture.debugElement.nativeElement; 
    expect(compiled.querySelector('h1').textContent).toContain('app works!');
}));

it('should use the user name from the service', () => { 
    let fixture = TestBed.createComponent(UserComponent); 
    let app = fixture.debugElement.componentInstance; 
    let userService = fixture.debugElement.injector.get(UserService); 
    fixture.detectChanges(); 
    expect(userService.user.name).toEqual(app.user.name);
});

it('should display the user name if user is logged in', () => { 
    let fixture = TestBed.createComponent(UserComponent); 
    let app = fixture.debugElement.componentInstance; 
    app.isLoggedIn = true
    fixture.detectChanges(); 
    let compiled = fixture.debugElement.nativeElement; 
    expect(compiled.querySelector('p').textContent).toContain(app.user.name);
});

it('should not display the user name if user is not logged in', () => { 
    let fixture = TestBed.createComponent(UserComponent); 
    let app = fixture.debugElement.componentInstance; 
    fixture.detectChanges(); 
    let compiled = fixture.debugElement.nativeElement; 
    expect(compiled.querySelector('p').textContent).not.toContain(app.user.name);
});

// Expecting undefined
it('should not fetch data successfully if not called asynchronously', async(() => { 
    let fixture = TestBed.createComponent(UserComponent);
    let app = fixture.debugElement.componentInstance; 
    let dataService = fixture.debugElement.injector.get(DataService); 
    let spy = spyOn(dataService, 'getDetails') //getDetails is a function in dataService
        .and.returnValue(Promise.resolve('Data'));
    fixture.detectChanges(); 
    expect(app.data).toBe(undefined);
}));


// Expecting proper data v1
it('should fetch data successfully if called asynchronously', async(() => { 
    let fixture = TestBed.createComponent(UserComponent);
    let app = fixture.debugElement.componentInstance; 
    let dataService = fixture.debugElement.injector.get(DataService); 
    let spy = spyOn(dataService, 'getDetails') //getDetails is a function in dataService
        .and.returnValue(Promise.resolve('Data'));
    fixture.detectChanges(); 
    fixture.whenStable().then(() => { 
        expect(app.data).toBe('Data');
    });
}));

// Expecting proper data v2
it('should fetch data successfully if called asynchronously', fakeAsync(() => { 
    let fixture = TestBed.createComponent(UserComponent);
    let app = fixture.debugElement.componentInstance; 
    let dataService = fixture.debugElement.injector.get(DataService); 
    let spy = spyOn(dataService, 'getDetails') //getDetails is a function in dataService
        .and.returnValue(Promise.resolve('Data'));
    fixture.detectChanges(); 
    tick();
    expect(app.data).toBe('Data');
}));

it('should test isolated function (not rely on angular)', () => {
    let reversePipe = new ReversePipe(); 
    expect(reversePipe.transform('hello').toEqual('olleh'));
})