Tengo una página con una sección de barra lateral con un componente de barra lateral y una sección de contenido con un componente de página. Desde el componente de la página, cuando hago clic en un botón, el componente de la barra lateral cambia. A continuación se muestra el código,

 async onSidebarButtonPressed() { const sidebar = document.querySelector('#filter-sidebar'); console.log(sidebar); (sidebar as any)?.toggle(); }

Ahora quiero cubrir el escenario donde el

palanca()

se llama. Intenté stubing el componente de la barra lateral,

 @Component({ selector: 'cf-wc-sidebar-filter-v9', template: '' }) class SidebarStubComponent { toggle() { /* */} } .. .. .. it('should toggle sidebar action', async () => { const sidebarSpy= spyOn(document,'querySelector').and.callFake(()=>SidebarStubComponent); fixture.detectChanges(); await component.onSidebarButtonPressed(); });

Recibo un error " _a.toggle no es una función ". Inicialmente probé con el estado y los técnicos me dijeron que no usara el estado para esto. Probé con @ViewChild y no está definido. Dado que estos 2 componentes están completamente desconectados

¿De qué otra manera puedo probar este escenario?