Vue 2 - Flexgrid - vue-test-utils

Vue 2 - Flexgrid - vue-test-utils

Posted by: daryn.holmes on 10 November 2017, 12:43 am EST

• 

  daryn.holmes

  • Post Options:
  • Link
    Copy

  Posted 10 November 2017, 12:43 am EST

  Hi,

  I have tried to use the vue-test-utils (Jest) with Flexgrid for Vue 2, and it does not seem to work as expected.

  When the tests run I don’t find any elements that match ‘.wj-topleft’

  test('shows loaded data', async () => {
    const wrapper = mount(Grid)
  
    console.log('wj-topleft', wrapper.findAll('.wj-topleft').length)
  
  })
  

  The output above is 0.

  I have also placed a

  console.log

  in the registered

  initialized

  method, and that is not being called.

  If you want to try it out, here is a starting point: https://github.com/vuejs/vue-test-utils-jest-example

  Do you have any ideas of how to get the grid to behave as expected within the testing environment?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 12 November 2017, 8:46 pm EST

  Hi Daryn ,
  
  You can test with loadedRows event of FlexGrid which is the correct event for the same. Or you can wait for the data loading. In this case, it seems that rows are trying to find out before laoding data.

  Also the rows get by this method may be incorrect since this will calculate only rendered rows.

  ~Manish

• 

  daryn.holmes

  • Post Options:
  • Link
    Copy

  Posted 12 November 2017, 10:12 pm EST

  Hi,

  I am not too sure how to follow your suggestion of “You can test with loadedRows event of FlexGrid which is the correct event for the same”.

  Is there any chance you could provide some sample code?

  It would be great if you could show this in the context of Vue-Test-Utils

  test('shows loaded data', async () => {
      const wrapper = mount(Grid)
  
      console.log('wj-topleft', wrapper.findAll('.wj-topleft').length)
  
    })
  

• 

  daryn.holmes

  • Post Options:
  • Link
    Copy

  Posted 12 November 2017, 10:12 pm EST

  Hi,

  I am not too sure how to follow your suggestion of “You can test with loadedRows event of FlexGrid which is the correct event for the same”.

  Is there any chance you could provide some sample code?

  It would be great if you could show this in the context of Vue-Test-Utils

  test('shows loaded data', async () => {
      const wrapper = mount(Grid)
  
      console.log('wj-topleft', wrapper.findAll('.wj-topleft').length)
  
    })
  

• 

  daryn.holmes

  • Post Options:
  • Link
    Copy

  Posted 12 November 2017, 10:14 pm EST

  The initialized methods is not even called during the test, is it possible to use FlexGrid in these types of tests?

• 

  daryn.holmes

  • Post Options:
  • Link
    Copy

  Posted 12 November 2017, 10:59 pm EST

  I have changed the component so that the grid is initialised with headers as shown under Column Definitions here: http://demos.wijmo.com/5/vue2/flexgridintro/flexgridintro/

  I then made the test as simple as I can:

    test('shows loaded data', async () => {   
      const wrapper = mount(Grid)   
      expect(wrapper.findAll('.wj-row').length).toBe(4)
    })
  

  This fails, as wrapper.findAll(‘.wj-row’).length is 0.

  Do you think that FlexGrid can be tested this way?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 14 November 2017, 12:08 am EST

  Hi,
  
  We have forwarded this to the concerned team with tracking id 296973. We will let you know as we get any update on this.

  ~Manish

• 

  daryn.holmes

  • Post Options:
  • Link
    Copy

  Posted 30 November 2017, 9:49 pm EST

  Thank you

• 

  norbert.hegedus

  • Post Options:
  • Link
    Copy

  Posted 25 October 2020, 8:33 pm EST

  Do you have any solutions for this issue ?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 26 October 2020, 9:05 pm EST

  Hi Norbert,

  The FlexGrid requires actual DOM for rendering which the jest framework does not create. So, FlexGrid cannot be tested properly using Jest. You can use a different testing framework like Selenium or Cypress.

  Regards,
  
  Ashwin