Initializing WjFlexGridDetail in unit test

Posted by: jaehyun.naekko on 17 August 2021, 10:36 am EST

  • Posted 17 August 2021, 10:36 am EST

    Hi, good day. I am trying to initialize the WjFlexGridDetail in my angular unit test. I tried doing this:

    
    beforeEach(() => {
            fixture = TestBed.createComponent(ExchangeRateSourceComponent);
            component = fixture.componentInstance;
            //grid init
            appComDebugElement = fixture.debugElement;
            gridDetailDebug = appComDebugElement.query(By.directive(WjFlexGridDetail));
            gridDetail = gridDetailDebug.componentInstance;
            fixture.detectChanges();
        });
    
    

    but i got this error

    
    TypeError: Cannot read property 'componentInstance' of null
    

    may i know if this is the right approach to initialized the WjFlexGridDetail for unit test?

  • Posted 17 August 2021, 10:43 am EST - Updated 3 October 2022, 12:16 pm EST

    I have this function to test

    toggleDetail(row, dp) {
            console.log("toggle detail row", row);
            console.log("toggle detail dp", dp);
            
            
            if (dp.isDetailVisible(row)) {
                dp.hideDetail(row);
            } else {
                dp.showDetail(row);
            }
        }
    

    where ihave a dp parameter that is from this html side

    <ng-template
                wjFlexGridDetail
                #dp="wjFlexGridDetail"
                [detailVisibilityMode]="'Code'"
                let-item="item"
            >
    
  • Posted 18 August 2021, 2:22 am EST

    Hi Jaehyun,

    From the error, it seems that the fixture itself is not created. Please make sure you have correctly configured the test module and imported all of the required modules/dependencies like:

    TestBed.configureTestingModule({
          imports: [
            BrowserModule,
            FormsModule,
            WjInputModule, 
            WjGridModule,
            WjGridDetailModule
          ],
          declarations: [
            AppComponent
          ],
          providers: [DataService]      
        }).compileComponents();
    

    If the issue persists, please share a small sample replicating the issue so that we could further investigate it and assist you accordingly.

    ~Sharad

  • Posted 23 August 2021, 8:25 am EST - Updated 3 October 2022, 12:43 pm EST

    hi Sharad,

    yes, the error still occurring please see below my code

    code to test

    toggleDetail(row, dp) {
            console.log("toggle detail row", row);
            console.log("toggle detail dp", dp);
            
            
            if (dp.isDetailVisible(row)) {
                dp.hideDetail(row);
            } else {
                dp.showDetail(row);
            }
        }
    

    test code

    
    import { WjFlexGrid, WjGridModule } from '@grapecity/wijmo.angular2.grid';
    import {
        WjGridDetailModule,
        WjFlexGridDetail,
    } from '@grapecity/wijmo.angular2.grid.detail';
    import * as wjcCore from '@grapecity/wijmo';
    
    describe('mycomponent', () => {
        let component: ExchangeRateSourceComponent;
        let fixture: ComponentFixture<ExchangeRateSourceComponent>;
        let gridDetail: WjFlexGridDetail;
        let gridDetailDebug: DebugElement;
    beforeEach(async () => {
            await TestBed.configureTestingModule({
                imports: [
                    BrowserModule,
                    FormsModule,
                    RouterTestingModule,
                    TranslateModule.forRoot({}),
                    HttpClientModule,
                    WjGridModule,
                    WjGridDetailModule,
                ],
                declarations: [ExchangeRateSourceComponent],
                providers: [
                    ExchangeRateSourceComponent,
                    FlexgridsetupService,
                    PlatformConfigService,
                    BentoModalConfirmationService,
                    ModalsService,
                    TranslateService,
                    { provide: ActivatedRoute, useValue: activatedRouteMock },
                    { provide: Router, useValue: mockRouter },
                ],
            }).compileComponents();
        });
    beforeEach(() => {
            fixture = TestBed.createComponent(ExchangeRateSourceComponent);
            component = fixture.componentInstance;
            //grid init
            appComDebugElement = fixture.debugElement;
            gridDetailDebug = appComDebugElement.query(By.directive(WjFlexGridDetail));
            gridDetail = gridDetailDebug.componentInstance;
            //end grid init
    
            fixture.detectChanges();
        });
    
       describe('toggleDetail', () => {
            it('should be able to toggle details', () => {
                let row = {
                    index: 0,
                    size: null
                }
                component.toggleDetail(row,gridDetail);
            });
        });
    })
    
    

    grid detaikl on HTML

    
    <ng-template
                wjFlexGridDetail
                #dp="wjFlexGridDetail"
                [detailVisibilityMode]="'Code'"
                let-item="item"
            >
                <div class="table-cell width-full">
                    <p class="wrap-description">
                        {{ item.description }}
                    </p>
                </div>
            </ng-template>
    
    

    but the error occurrs on the part for the debug element

  • Posted 24 August 2021, 3:01 am EST

    Thank you for the code snippet.

    The issue is arising because you are trying to get the gridDetailProvider instance using the debugElement.query() method. It is used to query DOM elements and since gridDetailProvider is applied on the template, a valid instance is not found.

    To get the detail provider instance, we could use @viewChild on the component and then use the debugElement.componentInstance.gridDetailInsanceName to get the detail provider instance. I’ve prepared a sample to demonstrate the same. Please refer to the attached sample.

    angular-wijmo-testing.zip

Need extra support?

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

Learn More

Forum Channels