Evaluating template bindings during tests not working in Angular 2

can you please help me understand why this test of this little component does not work?

Here is the HTML template:

<p-overlayPanel [appendTo]="'body'" class="inv select-overlay checkbox" #mOverlay>
<div class="over-c">
    <h3 class="title">TITLE</h3>
    <div class="overflow">
        <div *ngIf="loading">
            <i class="fa loading"></i>
        </div>
        <div *ngIf="!loading">
            <div class="ui-g-12 ui-g-nopad" *ngFor="let item of items">
                <p-radioButton class="align-select" name="check" [label]="item.description.title"
                    [value]="{name: item.description.title, id: item.id}" [(ngModel)]="selected" data-testid="checkbox-invite">
                </p-radioButton>
            </div>
        </div>
    </div>
    <div class="ui-g column-filters">
        <button type="button" (click)="onAdd($event)" pButton label="LINK"
            data-testid="invite"></button>
    </div>
</div>
</p-overlayPanel>

Here is the component:

export class Component {
@Output() onComplete = new EventEmitter<any>();
@ViewChild('mOverlay') overlay: any;

public items: any[] = [];
public selected: any;
public loading: boolean;
private subscriptions: Subscription[] = [];

constructor(
    private mService: MService,
    public translate: TranslateService,
) { }

ngOnDestroy() {
    this.subscriptions.forEach((subscription) => {
        subscription.unsubscribe();
    })
}

public refreshM(uId, brId) {
    this.loading = true;
    this.items = null;
    this.subscriptions.push(this.mService.getUserM(uId, bId).subscribe(result => {
        this.items = result;
        this.loading = false;
    }));
}

public onAdd(event) {
    if (this.selected) {
        this.overlay.hide(event);
        this.onComplete.emit(this.selected);
    }
}

public toggle(event) {
    this.overlay.toggle(event);
}
}

As you can see it's a really simple component (a bit censured but that's the main logic).

Here are the tests i try to run:

describe("Component", () => {
beforeEach(() => {
    TestBed.configureTestingModule({
        declarations,
        providers,
        imports
    })
    fixture = TestBed.createComponent(Component);
    component = fixture.componentInstance;
});

it("should render radio button for each item", async () => {
    const items = [
        { description: { title: "title 0" }, id: 1 },
        { description: { title: "title 2" }, id: 2 },
    ];

    component.items = missions
    component.loading = true
    await fixture.whenStable();
    const btns = fixture.debugElement.nativeElement.querySelectorAll("[data-testid='checkbox-mission']")
    expect(btns).toBe(items.length)
});
})

As you can see it's a pretty straight forward test, however if a print fixture.debugElement.nativeElement the result is:

<div id="root3" ng-version="2.4.6"><p-overlaypanel class="inv select-overlay checkbox">
        <div>
            <div class="p-overlayPanel">

    <div class="overlay-c">
        <h3 class="title" />
        <div class="overflow">
            <!--template bindings={}-->
            <!--template bindings={}-->
        </div>
        <div class="ui-g column-filters">
            <button data-testid="invite" pbutton="" type="button" />
        </div>
    </div>

            </div>
            <!--template bindings={}-->
        </div>
    </p-overlaypanel></div>

I would really appreciate if any of you could help me understand what i'm doing wrong here. How can i get the correct bindings instead of <!--template bindings={}-->?

P.s. to debug the tests and print the value fixture.debugElement.nativeElement i'm placing expect(fixture.debugElement.nativeElement).toBeFalsy() which makes the tests fail and notify me of the "Received" value, i hope it's fine.