We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Testing component with Data Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

140772 Nov 6,2018 06:24 PM UTC Nov 16,2018 12:58 PM UTC Vue 1
loading
Tags: Data Grid
Stas Volyansky
Asked On November 6, 2018 06:25 PM UTC

In my project I have Vue component that contains Data Grid inside.
I need to test the behavior that is connected with onActionBegin callback of the grid.
But in the test environment my callbacks are not called.
I provided lite version of my samples in  the attachment.
Thank you for help.

PS: I faced a lot of problems mounting the component with Data Grid inside. Cause Data Grid under the hood uses some window functions and properties that are not available from the node environment.
If you have an example of testing the Data Grid, please provide it. Thanks again.


Attachment: example_3f493a92.zip

Mohammed Farook J [Syncfusion]
Replied On November 16, 2018 12:58 PM UTC

Hi Stas, 
 
Thanks for contacting Syncfusion support. 
 
Based on your request we have created and attached a sample for testing the Data Grid. In this sample, we have used the “goToPage” method of Grid to navigate to the second page. At this time the “actionBegin” event will be triggered. In the “actionBegin” event handler function we have updated the value for the “currentPage”. Please download the sample from the link below, 
 
 
Please refer the code example below, 
 
[App.vue] 
 
<template> 
  <div> 
    <div class="control-section"> 
<ejs-grid :dataSource="dataS" ref="grid"  :allowPaging='true' :actionBegin="actionBegin"></ejs-grid> 
    </div> 
  </div> 
</template> 
 
<script> 
import Vue from "vue"; 
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons'; 
import { GridComponent,GridPlugin, Page } from '@syncfusion/ej2-vue-grids'; 
 
Vue.use(GridPlugin); 
 
export default Vue.extend({ 
  name: "Default", 
  data: function() { 
    return { 
      previousPage:0, 
      currentPage:0, 
      ... 
    }; 
  }, 
  methods: { 
    actionBegin(args) { 
      switch (args.requestType) { 
        case 'paging': { 
          this.currentPage = args.currentPage; 
          this.previousPage = args.previousPage; 
          break; 
        } 
      } 
    } 
  }, 
  provide: { 
      grid: [Page] 
  } 
}); 
</script> 
 
[Default.spec.js] 
 
describe(' Button component render', () => { 
  var vm; 
  ... 
 
 it(' Test the created event', (done) => { 
    vm.$refs.grid.ej2Instances.goToPage(2); 
    expect(vm.currentPage).toBe(2); 
    done(); 
  }) 
}) 
 
Note : Use commands from the README.md file to run the test case. 
 
Please get back to us if you need further assistance. 
 
 
Regards, 
J Mohammed Farook 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;