jQuery UI Widgets Forums Angular jqxListBox not updating in Unit Test

This topic contains 3 replies, has 2 voices, and was last updated by  Ivo Zhulev 5 years ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • jqxListBox not updating in Unit Test #98327


    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
         </jqxListBox> -->

    My test

    fit('should load the error listboxes with just the right errors', () => {
            let errorList = sampleErrors;
            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(); //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?

    • This topic was modified 5 years ago by  jdh. Reason: code not in code block
    jqxListBox not updating in Unit Test #98330


    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(() => {
              declarations: [EduComponent, jqxListBoxComponent, TextBoldDirective],
              providers: [],
              schemas: [],
              imports: [
    jqxListBox not updating in Unit Test #98334


    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.

    jqxListBox not updating in Unit Test #98355

    Ivo Zhulev

    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,

    jQWidgets Team

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.