I have a page with sidebar section with sidebar-component and content section with a page-component. From the page-component, when I click a button, the sidebar-component toggles. Below is the code,

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

Now I want to cover the scenario where the

toggle()

is called. I tried stubing the sidebar-component,

  @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();

  });

I am getting an error "_a.toggle is not a function". Initially I tried with state and the tech guys told not to use state for this. I tried with @ViewChild and it comes undefined. Since these 2 components are completely disconnected

How else can I test this scenario?