title: Failing test in Angular
body: <p>I was following a video, where it talks about async testing, and I made the same code, with some differences because of Angular versions (the video is 2 years old). However, I am having a problem with asyncrounious testing.</p>
  
  <blockquote>
    <p>Expected undefined to equal 'testTtess'</p>
  </blockquote>
  
  <pre><code>import { TtessComponent } from './ttess.component'
  import { TestBed, ComponentFixture, tick, async } from '@angular/core/testing';
  import { TtessService } from './ttes.service';
  import { of } from 'rxjs'
  import { delay } from 'rxjs/operators';
  
  describe('TtesComponent', () =&gt; {
  
    let fixture: ComponentFixture&lt;TtessComponent&gt;;
    let component: TtessComponent;
    let ttessService: TtessService;
  beforeEach(() =&gt; {
    TestBed.configureTestingModule({
      declarations: [TtessComponent]
    });
    fixture = TestBed.createComponent(TtessComponent);
    component = fixture.debugElement.componentInstance;
    ttessService = fixture.debugElement.injector.get(TtessService);
  });
  
  it('should creat component instance', () =&gt; {
  expect(component).toBeTruthy();
  });
  
  
  it(`it should render h1 tag with title 'My car header'`, () =&gt; {
    fixture.detectChanges();
    const nativeEl = fixture.debugElement.nativeElement;
    expect(nativeEl.querySelector('h1').textContent).toEqual('My car header')
  })
  
  it('should inject Ttess service', () =&gt; {
    fixture.detectChanges();
    expect(component.isCarVisible).toEqual(ttessService.getVisibility());
  })
  
  
  it('should display car if is not visible', () =&gt; {
    ttessService.showTtess();
    fixture.detectChanges();
    const nativeEl = fixture.debugElement.nativeElement;
    expect(nativeEl.querySelector('span').textContent).toEqual('Car is visible');
  
  })
  
  it(`shouldn't get car name if not async`, () =&gt; {
    spyOn(ttessService, 'getTtessName')
    .and.returnValue(of('testTtess')
    .pipe(delay(100)));
    fixture.detectChanges();
    expect(component.ttessName).toBe(undefined);
  })
  
  it(`should get car name if async`, async(() =&gt; {
    spyOn(ttessService, 'getTtessName').and.returnValue(of('testTtess').pipe(delay(100)));
    fixture.detectChanges();
    fixture.whenStable().then(() =&gt; {
      expect(component.ttessName).toEqual('testTtess');
    });
  
  }));
  
  });
  
  
  \===========Service===============\
  
  export class TtessService {
      private IsCarVisible: boolean = true;
  
      showTtess() {
          this.IsCarVisible = true;
      }
      hideIttess() {
          this.IsCarVisible = false;
      }
  
      getVisibility() {
          return this.IsCarVisible;
      }
  
      getTtessName(): Observable&lt;string&gt; {
          return of('Ford').pipe(delay(100));
      }
  }
  
  \===============Component=================\
  import { Component, OnInit } from '@angular/core';
  import { TtessService } from './ttes.service';
  
  @Component({
    selector: 'app-ttess',
    templateUrl: './ttess.component.html',
    styleUrls: ['./ttess.component.scss'],
    providers: [TtessService]
  })
  export class TtessComponent implements OnInit {
    isCarVisible:boolean;
  title = 'My car header';
  ttessName: string;
    constructor(private ttess: TtessService) { }
  
    ngOnInit() {
      this.isCarVisible = this.ttess.getVisibility();
      this.ttess.getTtessName()
      .subscribe(name =&gt; this.ttessName);
    }
  
  }
  </code></pre>