Hard to test when using fromRoot

I am using the Angular Material side-nav. Inside the mat-sidenav-content I load up various components, some use infinite scrolling, some don’t. But to make the scrolling work properly I need to point the infinite scroller at the parent mat-sidenav-content container like so: <div infiniteScroll infiniteScrollContainer=“.mat-sidenav-content” fromRoot=“true” scrollWindow=“false” …

The problem comes when I want to write jasmine/karma tests for my component with infinite scrolling. I use the TestBed to load up my component - but since the side-nav is a parent, it’s not present in my component under test TestBed, and the infiniteScroller errors when trying to resolve the container.

I put in place a workaround that seems to work by making it fall back to the window if it can’t find the container selector, not sure if there’s a better way:

[bzeymer]

That approach still not solving the test implementation problem.

If setting it to window may cause undesired results, the container should point to defaultElement as it is the one rendered by Karma tests.

Basicaly it should look like this:

function resolveContainerElement(selector, scrollWindow, defaultElement, fromRoot) {
    const /** @type {?} */ hasWindow = window && !!window.document && window.document.documentElement;
    let /** @type {?} */ container = hasWindow && scrollWindow ? window : defaultElement;
    if (selector) {
        const /** @type {?} */ containerIsString = selector && hasWindow && typeof selector === 'string';
        container = containerIsString
            ? findElement(selector, defaultElement.nativeElement, fromRoot)
            : selector;
        if (!container) {
            container = defaultElement;
        }
    }
    return container;
}

[MichaelPruefer]

We ended up using a TestHostComponent like

@Component({
  selector: 'app-host-component',
  template: '<div class="content-wrapper" [infiniteScrollContainer]><grid></grid></div>'
})
class TestHostComponent {
  @ViewChild(GridComponent)
  public component: GridComponent;
}

let component: GridComponent;
let testHostFixture: ComponentFixture<TestHostComponent>;
let testHostComponent: TestHostComponent;

const testHelper = new TestbedHelper();
testHelper.setUpTestBed({
  declarations: [
    TestHostComponent,
    GridComponent
  ]
});

beforeEach(() => {
  testHostFixture = TestBed.createComponent(TestHostComponent);
  testHostComponent = testHostFixture.componentInstance;
  component = testHostComponent.component;


  testHostFixture.detectChanges();
});
...