Writing Unit tests for FlexGrid in StencilJs using jest and puppeteer

Posted by: lakhawar.umakant on 3 February 2021, 3:30 am EST

  • Posted 3 February 2021, 3:30 am EST

    Hi Team,

    We are developing one web component in StencilJs using wijmo.grid and wijmo.grid.details. This component is working as expected but we are facing one issue while writing test cases using Jest and Puppeteer and It is giving error( Please find attached for the same ).

    ‚óŹ Test suite failed to run
    TypeError: document.createElement(...).focus is not a function
    > 1 | import * as wijmo from '@grapecity/wijmo';

    Could you please help me to solve this and write unit tests for wijmo grid?

    Thanks in advance for the help.

    Regards,
    Umakant
  • Replied 4 February 2021, 2:39 pm EST

    Hi Umakant,

    We are sorry for the delay in response. We will require some time to investigate this so we will update you on Tuesday.

    Regards,
    Ashwin
  • Replied 8 February 2021, 4:32 pm EST

    Hi,

    I created an application using StencilJS and was able to replicate your issue. I have forwarded this to the developers for further investigation with internal tracking id 472620. I will update you once I will hear from them.

    ~regards
  • Replied 22 February 2021, 9:19 pm EST

    Hi AShwin,

    Thanks for replicating the issue on your end. Do we have any update from developer team?

    Regards,
    Umakant
  • Replied 23 February 2021, 5:54 pm EST

    Hi,

    Wijmo controls require full-featured DOM whereas Stencil unit tests use Jest which in turn use limited DOM. Testing of applications with Wijmo controls should be done in browsers with full-featured DOM. So Wijmo-related tests should be written in e2e-files as Stencil end-to-end test use Puppeteer.

    For example, following test may be added to app-home.e2e.ts file:

    it('renders', async () => {
    const page = await newE2EPage();
    await page.setContent('<app-home></app-home>');
    const element = await page.find('.wj-colheaders .wj-row .wj-cell');
    expect(element.textContent).toEqual('ID')
    });


    The test is checking the same thing as the test in the app-home.spec.ts file and will pass during Stencil e2e testing.

    I have also attached a sample for reference.

    ~regards

    stencil.zip
Need extra support?

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

Learn More

Forum Channels