How can I run an external Stencil web component in Angular under Karma so that I can access the shadow DOM and the component is rendered in the Karma runner?
Edit:
With setTimeout on 300 and a normal it the components are shown.
It dosent work with fakeAsync:
defineCustomElements(window);
describe('OverviewArea', () => {
let component: OverviewAreaComponent;
let fixture: ComponentFixture<OverviewAreaComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [UiModule, HttpClientTestingModule, RouterTestingModule, ReactiveFormsModule],
declarations: [OverviewAreaComponent, RequestLotComponent],
providers: [
{
provide: APP_INITIALIZER,
useFactory: () => defineCustomElements,
multi: true,
},
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}).compileComponents();
//
fixture = TestBed.createComponent(OverviewAreaComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', fakeAsync(() => {
expect(
fixture.nativeElement.querySelector('[test-dataid="overview-area-lot-info"] h3').innerHTML,
).toEqual('Lot Infos');
});
Can anyone help me?