Karma with external stencil webcomponents

26 Views Asked by At

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?

0

There are 0 best solutions below