Failing test in Angular. Expected undefined to equal 'testTtess'

The problem with asyncrounious testing in Angular 8. I was watching a video, where talks about async testing, and i did the same code, with a little defferences which come from Angular versions(because video was 2 years old) So in code my TtessComponent gets undefined. Actually I don't undestand completely cuz I'm just junior in Angular. Just take attention on last testing.

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', () => {

  let fixture: ComponentFixture<TtessComponent>;
  let component: TtessComponent;
  let ttessService: TtessService;
beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [TtessComponent]
  });
  fixture = TestBed.createComponent(TtessComponent);
  component = fixture.debugElement.componentInstance;
  ttessService = fixture.debugElement.injector.get(TtessService);
});

it('should creat component instance', () => {
expect(component).toBeTruthy();
});


it(`it should render h1 tag with title 'My car header'`, () => {
  fixture.detectChanges();
  const nativeEl = fixture.debugElement.nativeElement;
  expect(nativeEl.querySelector('h1').textContent).toEqual('My car header')
})

it('should inject Ttess service', () => {
  fixture.detectChanges();
  expect(component.isCarVisible).toEqual(ttessService.getVisibility());
})


it('should display car if is not visible', () => {
  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`, () => {
  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(() => {
  spyOn(ttessService, 'getTtessName').and.returnValue(of('testTtess').pipe(delay(100)));
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    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<string> {
        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 => this.ttessName);
  }

}