need help with a test using spectator

[bboydflo]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[x] Support request
[x] Other... Please describe:

Current behavior

currently there are no examples on how to test more complex scenarios including observables, ngAfterViewInit in combination with detectChanges set to false

Expected behavior

I would like to see a few examples on how to test components that is created with detectChanges set to false.

What I want to test

I would like test that my grid component applies a filter that comes from query parameters. Here is a minimal reproduction of the component

@Component({
    selector: 'app-component',
    template: `
        <div class="grid-wrapper">
            <input (keyup.Enter)="quickFilter($event)">
            <ag-grid-angular
                class="ag-theme-balham"
                [columnDefs]="columnDefs"
                [rowData]="rowData"
                (gridReady)="onGridReady()"
            >
            </ag-grid-angular>
        </div>
    `,
    styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnDestroy {
    alive = true;

    columnDefs = [
        { field: 'make' },
        { field: 'model' },
        { field: 'price' }
    ];

    rowData = [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 }
    ];

    constructor(
        private router: Router,
        private activatedRoute: ActivatedRoute,
    ) {}

    // called when grid is ready (after ngOnInit)
    onGridReady() {
        this.activatedRoute.queryParams
            .pipe(takeWhile(() => this.alive))
            .subscribe(queryParams => {
                if ("quickFilter" in queryParams) {
                    this.setQuickFilter();
                }
            });
    }

    quickFilter(event: any) {
        this.router.navigate(['./'], {
            relativeTo: this.activatedRoute,
            queryParams: {
                quickFilter: event.target.value,
            },
            queryParamsHandling: 'merge',
        });
    }

    setQuickFilter() {
        // ...
    }

    ngOnDestroy() {
        this.alive = false;
    }
}

and here is what I am trying to do inside my test:

describe('app component', () => {
    class MockActivatedRoute {
        queryParams = from(
            Promise.resolve({
                quickFilter: 'search term',
            })
        );
    }
    let spectator: Spectator<AppComponent>;
    const createComponent: SpectatorFactory<AppComponent> = createComponentFactory(
        {
            component: AppComponent,
            imports: [
                // ...
            ],
        }
    );

    beforeEach(() => {
        jest.clearAllMocks();
        spectator = createComponent({
            detectChanges: false,
            providers: [
                {
                    provide: ActivatedRoute,
                    useClass: MockActivatedRoute,
                },
            ],
        });
    });

    it('can trigger quick filter via url', async () => {
        const eventMock = {
            targe: {
                value: 'Toyota'
            }
        }
        const router = spectator.inject(Router);
        const navigateSpy = spyOn(router, 'navigate').and.callThrough();
        const setQuickFilterSpy = spyOn(spectator.component, 'setQuickFilter')
        // initial assertions
        expect(navigateSpy).not.toHaveBeenCalled();
        expect(setQuickFilterSpy).not.toHaveBeenCalled();

        spectator.detectChanges();
        await spectator.fixture.whenStable();

        // act
        await spectator.fixture.ngZone.run(() => {
            return spectator.component.quickFilter(
                true,
                eventMock
            );
        });
        await spectator.fixture.whenStable();

        // assert
        expect(navigateSpy).toHaveBeenCalled();
        expect(setQuickFilterSpy).toHaveBeenCalled(); // !!! this line always fails !!!
    });
});

So the flow of this components is like this:

1. when grid is ready I will setup a subscription to listen for query parameters changes
2. when I search for a new term, I will update my url state. that calls setQuickFilter

Please let me know how I can test something like this.