Vue 2 - Flexgrid - vue-test-utils

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

  • 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?
  • Replied 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
  • Replied 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)

    })
  • Replied 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)

    })
  • Replied 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?
  • Replied 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?
  • Replied 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
  • Replied 30 November 2017, 9:49 pm EST

    Thank you
  • Replied 25 October 2020, 8:33 pm EST

    Do you have any solutions for this issue ?
  • Replied 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
Need extra support?

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

Learn More

Forum Channels