manivelarjunan

import { TestBed, tick, fakeAsync } from '@angular/core/testing';
import { UserAsyncComponent } from './user-async.component';
import { UserAsyncService } from './user-async.service';
import { Observable, Observer } from 'rxjs';

describe('User Async Component:', () => {
  beforeEach(async () => {
    TestBed.configureTestingModule({
      declarations: [UserAsyncComponent]
    });

manivelarjunan

import { Component, OnInit } from '@angular/core';
import { UserAsyncService } from './user-async.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-user-async',
  templateUrl: './user-async.component.html',
  styleUrls: ['./user-async.component.scss'],
  providers: [UserAsyncService]
})

manivelarjunan

<p *ngIf="systemError">{{systemErrorMessage}}</p>
<div *ngIf="isLoggedIn && !systemError">
  <p>
    {{userDetail.name}}
  </p>
  <p>Note: Above user details returned by async call.</p>
</div>

<div *ngIf="!isLoggedIn && !systemError">
  <p>

manivelarjunan

import { async, TestBed } from '@angular/core/testing';

import { UserComponent } from './user.component';
import { UserService } from './user.service';

describe('UserComponent', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [UserComponent]

manivelarjunan

import { Injectable } from '@angular/core';

@Injectable()
export class UserService {
  user = {
    name: 'Mannie'
  };

  getUser() {
    return this.user;

manivelarjunan

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
  providers: [UserService]
})
export class UserComponent implements OnInit {

manivelarjunan

<div *ngIf="isUserLoggedIn">
  <p>
    Welcome {{user.name}}
  </p>
</div>
<div *ngIf="!isUserLoggedIn">
  <p>
    user is NOT logged In.
  </p>
</div>

manivelarjunan

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { UserAsyncComponent } from './user-async/user-async.component';

describe('App component', () => {
  beforeEach(async(() => {
    // The TestBed is the most important of the Angular testing utilities.
    // The TestBed creates a dynamically-constructed Angular test module that emulates an Angular @NgModule.
    // The TestBed.configureTestingModule() method takes a metadata object that can have most of the properties of an @NgModule.

manivelarjunan

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'Angular7-unit-testing!';

manivelarjunan

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
<app-user></app-user>
<br>
<app-user-async></app-user-async>
</div>