Posted 27 September 2017, 5:52 am EST
Hi,
We are creating unit tests for wijmo flexgrid using enzyme framework.Can you please help us to simulate the grid events like - itemformatter etc?We are using react redux technologies.
Unit testing of Wijmo using enzyme framework
Posted by: mothydharan on 27 September 2017, 5:52 am EST
-
mothydharan
-
mothydharan
Posted 28 September 2017, 9:30 am EST
Adding some extra information on the issue:
When we are trying to render the wijmo flex grid in unit test , we are only able to see the first cell of the first row after mounting the component .We are injecting the htmlelement using jsDOM thereby avoiding the browser for testing.Can you please help us in identifying the issue?
Please find below the html when we are calling the wrapper.html() method where wrapper is
let wrapper=mount();Also when we are calling the find method of enzyme using wrapper.find(className), we are unable to find the class name of wijmo children (cells) , but we have achieved with wrapper.getDOMNode().querySelector(“.grid-link”) which is not the ideal solution. Can you please help us in solving these issues?
<div id="gridID" class="rr-wj-grid wj-control wj-flexgrid wj-content" style="height: 550px; widt h: 1540px;" tabindex="0"> <div style="position:relative;width:100%;height:100%;ov erflow:hidden;max-width:inherit;max-height:inherit"> <div wj-part="focus" tabinde x="0" style="position:fixed;opacity:0;pointer-events:none;left:-10px;top:-10px"></div> <div wj-part="root" tabindex="-1" style="position:absolute;width:100%;heig ht:100%;overflow:auto;-webkit-overflow-scrolling:touch;max-width:inherit;max-hei ght:inherit;box-sizing:content-box"> <div wj-part="cells" class="wj-cells" style= "position: absolute; left: 0px; top: 28px; width: 1515px; height: 50px;"> <div tabindex="0" class="wj-cell wj-state-selected" style="left: 0px; top: 0px; width: 80px; height: 25px;"><button class="grid-link">View</button></div> </div> <div wj- part="marquee" class="wj-marquee" style="display:none;pointer-events:none"> <div style="width:100%;height:100%"></div> </div> </div> <div wj-part="fcells" class="wj -cells" style="position: absolute; pointer-events: none; overflow: hidden; left: 0px; top: 28px; width: 0px; height: -28px;"></div> <div wj-part="rh" style="posi tion: absolute; overflow: hidden; outline: none; left: 0px; top: 28px; width: 0p x; height: -28px;"> <div wj-part="rhcells" class="wj-rowheaders" style="position: relative"></div> </div> <div wj-part="cf" style="position: absolute; overflow: hid den; outline: none; left: 0px; top: 78px; height: 0px; width: 0px;"> <div wj-part ="cfcells" class="wj-colfooters" style="position:relative"></div> </div> <div wj-p art="ch" style="position: absolute; overflow: hidden; outline: none; left: 0px; top: 0px; height: 28px; width: 0px;"> <div wj-part="chcells" class="wj-colheaders " style="position: relative; left: 0px;"> <div tabindex="0" draggable="true" clas s="wj-cell wj-header" style="left: 0px; top: 0px; width: 80px; height: 28px;">Pr icing File </div> </div> </div> <div wj-part="bl" style="position: absolute; overflo w: hidden; outline: none; left: 0px; top: 78px; width: 0px; height: 0px;"> <div w j-part="blcells" class="wj-bottomleft" style="position:relative"></div> </div> <di v wj-part="tl" style="position: absolute; overflow: hidden; outline: none; left: 0px; top: 0px; width: 0px; height: 28px;"> <div wj-part="tlcells" class="wj-topl eft" style="position:relative"> <div tabindex="0" class="wj-cell wj-header" style ="left: 0px; top: 0px; width: 35px; height: 25px; text-align: center;"></div> </d iv> </div> <div wj-part="sz" style="position: relative; visibility: hidden; width: 1515px; height: 78px;"></div> </div> </div> </div> <div class="hide-section"></div> <div class="grid-status-bar show-section"> <div class="grid-record-count"> <!-- re act-text: 36 -->Records: <!-- /react-text --><!-- react-text: 37 -->2<!-- /react -text --> </div> <div class="grid-change-status hide-section"> <!-- react-text: 39 -->Records Changed: <!-- /react-text --><!-- react-text: 40 -->0<!-- /react-text --> </div> </div> -
manish.gupta
Posted 29 September 2017, 1:43 am EST
Hi,
itemFormatter is a property which accepts function with predefined arguments. Please try to call invalidate method to render grid completely. You may use getCellData method for retrieving cell value.We have created a request for a sample for the unit test using enzyme with tracking id 266883.
Thanks,
Manish Kumar Gupta -
mothydharan
Posted 4 October 2017, 8:43 am EST
Hi Manish Gupta,
Thank you for your response.
I have applied the invalidate method and invalidateAll method as well within the test case.But i couldn’t find any change in the html elements when i have called the wrapper.html(). I also tried the getCellData, but it was not giving me any data. Currently my development is having a road blocker and if you could share any help on the above mentioned query that would be much appreciated!
Also can you please tell me where can I see updates on the given trackingID mentioned in your previous post?
Hoping to get a reply soon from your end
-
manish.gupta
Posted 9 October 2017, 1:07 am EST
Hi Monthy,
Thanks for you reply.
The issue id provided is an internal id for tracking issue.
~Manish K Gupta
-
mothydharan
Posted 17 October 2017, 6:34 am EST
Hi Manish,
Can you please help me with the update?
And also how will i get notified whenever there is an update happening in this card?Before the new website i was getting mails ,whenever a new reply has been posted.
Thank you
