How to unit test a component to check a particular component is rendered or not

I've a very simple custom component. I call it NavbarComponent and the selector is app-navbar. It is a very basic static navbar. I'm rendering it on app.component.html:

app.component.html

<app-navbar></app-navbar>
<router-outlet></router-outlet>

I'm writing a unit test case like this: app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';

fdescribe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent,
        NavbarComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    ...
  });

  it(`should have as title 'my-app'`, () => {
    ...
  });

  fit('should display navbar', () => {
    const fixture=TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled=fixture.debugElement.nativeElement;
    expect(compiled.querySelector('app-navbar')).toBeDefined();
  })
});

It's not working properly. The test is passed eve If i remove <app-navbar></app-navbar> from the template. I've just started with Unit testing few days ago. Please correct my mistake.

2 things I would like to mention:

1. I don't have any css (as of now).
2. No *ngIf condition so NavbarComponent should be rendered all the time.