javascript - Can't get the select object in a JQuery widget. Require.js & QUnit is used -
i have following code widget. widget searchpod. file searchpod.html
<select class="search-by" id="searchby"> <option value="search_by">search by</option> <option value="lastname">employee last name</option> <option value="ssn">employee ssn</option> <option value="eeid">employee eeid</option> <option value="claim_number">claim number</option> <option value="leave_number">leave number</option> </select>
i have file called sptest.js tries use select above. function inside test function since using qunit unit tests.
define( ['../widget/searchpod/searchpod'], function () { function checksearchby() { test('check if select has "search by" text', function () { alert($("#searchby option[value='search_by']").text()); alert($('#searchby23').find('option:selected').text()); var expected = "search by"; deepequal($("#searchby option[value='search_by']").text(), expected, "we expect dropdown text display 'search by' default"); }); } return { runny: runny, checksearchby: checksearchby, };
i can't figure out why .js file can't find select id. i'll put html output below who'd see:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>clr javascript unit test</title> <link rel="stylesheet" href="style/qunit.css"> <link rel="stylesheet" href="style/cupertino/jquery-ui-1.10.1.custom.min.css" /> <link rel="stylesheet" href="style/jquery.jscrollpane.css" /> <link rel="stylesheet" href="style/jquery.datatables.css" /> <link rel="stylesheet" href="style/report.css" /> <link rel="stylesheet" href="style/globalreportstyles_10_css.css" /> <style type="text/css"> </style> <script type="text/javascript" src="scripts/lib/qunit.js"></script> <script type="text/javascript"> qunit.config.autostart = false; </script> <script data-main="scripts/app" src="scripts/lib/require.js"></script> </head> <body> <div id="tabs"> <ul> <li><a href="#tabs-1">test results</a><button id="test">test dom</button></li> <li><a href="#tabs-2">report viewer</a><button id="btnsptest"> test search pod</button></li> <li><a href="#tabs-3">transactional</a></li> </ul> <div id="tabs-1"> testing fun! <div id="qunit"></div> <div id="qunit-fixture"></div> </div> <div id="tabs-2"> <iframe width="100%" height="600px" src="viewreportpage.aspx" id="viewreport"></iframe> </div> <div id="tabs-3"> <iframe width="100%" height="600px" src="buildreport.aspx" id=""></iframe> </div> </div> </body> </html>
any explanation help. thank you.
Comments
Post a Comment