Unable to mock WjFlexGrid while trying to unit test component in Angular

Posted by: fateh.rasul on 30 June 2022, 8:00 am EST

  • Posted 30 June 2022, 8:00 am EST

    Hi, I am trying to mock WjFlexGrid for unit testing but when I try:-

    gridDebugElement = appComDebugElement.query(By.directive(WjFlexGrid));

    It always returns null. Looking for help on this.
  • Replied 3 July 2022, 9:23 pm EST

    HI Fateh,
    Please find the attached sample for Angular UnitTest with the Wijmo FlexGrid.

    Manish Gupta

  • Replied 12 July 2022, 8:37 am EST

    Hi Manish,

    I have tried your example in my project but this line:-

    let gridDebugElement = appComDebugElement.query(By.directive(WjFlexGrid));

    always return null for me. Looking forward to any help.
  • Replied 14 July 2022, 9:04 pm EST

    Please make sure you have write the code in the following order:

    import { TestBed,ComponentFixture,async } from '@angular/core/testing';
    import { By } from '@angular/platform-browser';
    import { AppComponent } from './app.component';
    import { WjGridModule , WjFlexGrid } from '@grapecity/wijmo.angular2.grid';
    import {DebugElement} from "@angular/core";
    describe('AppComponent', () => {
    let appComponent: ComponentFixture<AppComponent>;
    let appComDebugElement: DebugElement;
    let myComponent: AppComponent;
    let myNativeElement: Element;
    let gridDebugElement: DebugElement;
    let grid: WjFlexGrid;
    let gridNativeElement: HTMLElement;

    beforeEach(async () => {
    await TestBed.configureTestingModule({
    declarations: [

    appComponent = TestBed.createComponent(AppComponent);
    appComDebugElement = appComponent.debugElement;
    myComponent = appComDebugElement.componentInstance;
    myNativeElement = appComDebugElement.nativeElement as Element;
    gridDebugElement = appComDebugElement.query(By.directive(WjFlexGrid));
    gridNativeElement = gridDebugElement.nativeElement;
    grid = gridDebugElement.componentInstance;
    gridNativeElement = gridDebugElement.nativeElement;

    Also along with the following code order,if the FlexGrid is visible on page load in project execution.

    Please modify the sample for showing your Component in the way it is showing in your application.

    Manish Gupta
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels