Writing Unit tests for FlexGrid in StencilJs using jest and puppeteer

Writing Unit tests for FlexGrid in StencilJs using jest and puppeteer

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

• 

  lakhawar.umakant

  • Post Options:
  • Link
    Copy

  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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  lakhawar.umakant

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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