Service is getting data before async is used

I am creating a component that has an embedded component that use the same service. I am creating a jasmine unit test for this component and I am encountering a weird behavior. I have been following: http://ift.tt/2rVFUZB but I am encountering an issue when I want to detect changes but NOT receive any info (since the observable has yet to resolve.)

When I run:

it('during init it should call getCommentsByThreadId', () => {
    fixture.detectChanges();
    expect(getCommentsSpy).toHaveBeenCalled();
    expect(el.textContent).toBe("");
 });

The text content is all of the mock data I have set up instead of it being blank. Only AFTER I use the async call should it be displaying that information.

How do I get my test to NOT get information until after the async is used, similar to the twain component in the angular testing tutorial.

My Component and full test spec look as follows:

Component -

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

import { CommentsService } from './comments/comments.service';
import { Comment } from './comments/comment';

import 'rxjs/add/operator/first';

@Component({
  selector: 'thread',
  templateUrl: './thread.component.html',
  styleUrls: ['./thread.component.css']
})
export class ThreadComponent implements OnInit {

  @Input() public threadId: number; //curently getting an undefined value
  public comments: Comment[];
  public newComment: Comment;

  constructor(
    private commentService: CommentsService,
  ) { }

  ngOnInit() {
    this.newComment = new Comment();
    this.threadId = 1;              //Change later. Idk why it is not getting the proper value from app
    this.commentService.getCommentsByThreadId(this.threadId, true).first().subscribe(
      comments => {
        if (comments) {
          this.comments = comments;
          //console.log(this.comments);
        }
      },
      error => console.log(error)
    );
  }

  addCommentToThread(): void {
    this.commentService.addCommentToThread(this.threadId, this.newComment, true).first().subscribe(
      comment => {
        if (comment) {
          this.comments.push(comment);
        }
      }
    );
  }

}

Test Spec -

//Angular Testing Imports
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { DebugElement } from '@angular/core';
import { By } from "@angular/platform-browser";
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs';

//Tested Components dependencies (Application)
import { CommentsComponent } from './comments/comments.component';
import { ThreadComponent } from './thread.component';
import { CommentsService } from './comments/comments.service';
import { TestComments, TestComment } from './comments/test-comments';


describe('ThreadComponent', () => {
  let component: ThreadComponent;
  let fixture: ComponentFixture<ThreadComponent>;
  let commentService: CommentsService;
  let getCommentsSpy: jasmine.Spy;
  let de: DebugElement;
  let el: HTMLElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [HttpModule, FormsModule],
      providers: [CommentsService],
      declarations: [ThreadComponent, CommentsComponent]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ThreadComponent);
    component = fixture.componentInstance;
    commentService = fixture.debugElement.injector.get(CommentsService);
    getCommentsSpy = spyOn(commentService, 'getCommentsByThreadId').and.returnValue(Observable.of(TestComments));

    de = fixture.debugElement.query(By.css(".threads"));

    el = de.nativeElement;
  });

  it('should be created', () => {
    expect(component).toBeTruthy();
  });

  it('should not display any comments from the thread before ngOnInit()', () => {
    expect(el.textContent).toBe("\n  \n");
    expect(getCommentsSpy.calls.any()).toBe(false);
  });
  //Problem Test
  it('during init it should call getCommentsByThreadId', () => {
    fixture.detectChanges();
    expect(getCommentsSpy).toHaveBeenCalled();
    expect(el.textContent).toBe("");
  });
});