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

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

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

• 

  fateh.rasul

  • Post Options:
  • Link
    Copy

  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.
• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Replied 3 July 2022, 9:23 pm EST

  HI Fateh,
  Please find the attached sample for Angular UnitTest with the Wijmo FlexGrid.
  
  Regards,
  Manish Gupta
  
  Wijmo-FlexGrid_UnitTest.zip
  
• 

  fateh.rasul

  • Post Options:
  • Link
    Copy

  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.
• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Replied 14 July 2022, 9:04 pm EST

  Hi,
  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
        ],
        imports:[
          WjGridModule
        ]
      }).compileComponents();
  
      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;
      appComponent.detectChanges();
    });

  
  
  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.
  
  Regards,
  Manish Gupta