jqxListBox not updating in Unit Test

[jdhParticipant]

I think I’ve finally isolated this to something having to do with the jqxListBox widget, but I have an integration test I’m trying to run, and no matter whether I use fixture.detectChanges() or fakeAsync() along with fixture.whenStable(), the listbox just will not render in the test.

Here’s the relevant template code (I just tried replacing the listbox with a simple *ngFor and THAT renders.

<div *ngIf="isOpenErrorsVisible && hasOpenErrors">
     <jqxListBox #openErrorsListBox
     (onSelect)=handleListBoxSelection($event)
     [width]="'100%'"
     [source]="openErrors"
     [displayMember]="'message'"
     [valueMember]="'errorType'">
     </jqxListBox> -->
 </div>

My test

fit('should load the error listboxes with just the right errors', () => {
        let errorList = sampleErrors;
        comp.processErrors(errorList);
        expect(comp.hasOpenErrors).toEqual(true, 'hasOpenErrors true'); //this expectation passes
        expect(comp.openErrors.length).toBe(1, 'one open error in object'); //and this one
        expect(comp.isOpenErrorsVisible).toEqual(true, 'open errors visible'); //and this one

        fixture.detectChanges();
        fixture.detectChanges();
        fixture.detectChanges(); //getting desperate here
        let openErrsListbox = fixture.debugElement.query(By.css('jqxlistbox'));
        expect(openErrsListbox).not.toBeNull('listbox exists'); //this expectation also passes
        let openErrs = openErrsListbox ? openErrsListbox.queryAll(By.css('.jqx-listitem-element')) : [];
        expect(openErrs.length).toBe(2); //this one fails
      });

I’ve verified the <jqxlistbox> element exists (but of course, it’s defined in the template), its items aren’t rendering.

Has anyone else had trouble with this, or figured out how to get the listbox (or perhaps other widgets) to render their content in a test?

[jdhParticipant]

Finally figured it out when I googled the right thing: “Angular 3rd party component not rendering during test”

Being new at this, my assumption is that if the page/component works when I do ng serve it should work in test, but you have to import and declare in your TestBed any third-party components:

import { jqxListBoxComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxlistbox';
...
      beforeEach( async(() => {
        TestBed.configureTestingModule({
          declarations: [EduComponent, jqxListBoxComponent, TextBoldDirective],
          providers: [],
          schemas: [],
          imports: [
            NgbModule.forRoot(),
            ReactiveFormsModule,
            FormsModule
          ]
        })

[jdhParticipant]

Well, so much for that. While adding the declaration was definitely needed, it seems there’s still something wonky going on with the entire component being seen by the unit test. Even though the whole thing displays on screen, with list items, querying for it in-test returns null:

let item = fixture.debugElement.query(By.css('.jqx-listitem-element')) returns null

But if I debug and pause on that line, in the Chrome console using jquery, $('.jqx-listitem-element') returns the DOM element.

[Ivo ZhulevParticipant]

Hi jdh,

Something is missing from that test, cuz as you see the element is fully working and okey.
I shall look into that. If you find an answer, please post it.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts