kendo-uijasminejasmine-jquery

Mock KendoUI component using Jasmine


I have a kendo combobox. In one of the method I am fetching value from the combobox. Is it possible to mock the kendoComboBox using jasmine.

 var $categoryComboBox = $('#Category').data('kendoComboBox');
 var selectedCategory = categoryComboBox.dataItem($categoryComboBox.select());

My jasmine test case is something like

var combo = spyOn($.fn, "data").and.returnValue(dummyElement);
                        var selectedCat = spyOn($.fn, "select").and.returnValue("1");
                        var selectedItem = spyOn(combo, "dataItem").and.returnValue({ 'ID': '1', 'ClaimTypeCode': 'WW' });

I am not sure what should I specify as dummyElement for this to work.

Thanks


Solution

  • Sounds like you haven't structured your JavaScript for unit testing. You should separate the DOM from the code, so you can test the code independently of a DOM.

    Take a look at KendoUI MVVM library, as this allows you to set up a view model (which knows nothing about the DOM), bind it to the HTML elements and Kendo widgets, leaving you free to test the view model easily.

    The way you have your JavaScript set up now is going to make it extremely hard to unit test. The only thing I can think of is to separate the code that gets the value from the Kendo widget from the code that does something with that value, and then test the latter, passing in the value you want to test. Still not really the right way to structure it, but it would work for now.