HTML not rendered in Karma Jasmine

It seems that the page is not rendered in my unit test, getting me a null value when doing the assert. I am using webpack, can it be related to it?

The Angular webpack result is then rendered in a tool that aggregates all the HTML, but I think the html should be displayed in my unit test. Am I missing something?

Component.spec.ts:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { AlertsLandingComponent } from 'src/shared/alerts-landing.component';
import { ExtendedRoutes } from '../fr-plus.module';
describe('FrAlertsLanding', () => {
let component: AlertsLandingComponent;
let fixture: ComponentFixture<AlertsLandingComponent>;
let router: Router;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AlertsLandingComponent ],
imports: [ RouterTestingModule.withRoutes(ExtendedRoutes) ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AlertsLandingComponent);
component = fixture.componentInstance;
router = TestBed.inject(Router);
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should display the tabs', () => {
const compiled = fixture.nativeElement;
console.warn("test",compiled)
console.log("test")
router.navigate(['']);
expect(compiled.querySelector('ln-tabbed-card')).toBeTruthy();
expect(compiled.querySelector('ln-tab[label="Saved Searches"]')).toBeTruthy();
expect(compiled.querySelector('ln-tab[label="Tracked Sources"]')).toBeTruthy();
expect(compiled.querySelector('ln-tab[label="News"]')).toBeTruthy();
});
});


Component.html:

<alert-loadbox [darkMode]="false"></alert-loadbox>


<div class="wrapper-content">
<ln-tabbed-card>
<ln-tabbed-card-header>
<ln-tabbed-card-title>{{dictionary.alerts}}</ln-tabbed-card-title>
<button class="share-btn" (click)="openLinkToPageDialog()" aria-label="Share">
<ln-icon ln-prefix name="permalink" size="md"></ln-icon>
</button>
</ln-tabbed-card-header>
<ln-tab label="{{dictionary.savedSearches}}">
<frsearch-alerts *ngIf="tabbedCard?.selectedIndex === 0"></frsearch-alerts>
</ln-tab>
<ln-tab label="{{dictionary.trackedSources}}">
</ln-tab>
<ln-tab label="{{dictionary.news}}">
<frnews-alerts *ngIf="tabbedCard?.selectedIndex === 2"></frnews-alerts>
</ln-tab>
</ln-tabbed-card>
</div>


Result in the karma console:

<div id="root32" ng-version="12.0.5"><router-outlet></router-outlet><!--container--><!--bindings={
"ng-reflect-ng-if": "true"
}--><!--bindings={
"ng-reflect-ng-if": "false"
}--></div>

Continue reading...