{"id":3059,"date":"2016-01-25T14:19:59","date_gmt":"2016-01-25T14:19:59","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=3059"},"modified":"2016-01-25T14:19:59","modified_gmt":"2016-01-25T14:19:59","slug":"jquery-multiple-version-testing","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/jquery-multiple-version-testing\/","title":{"rendered":"Testing against multiple jQuery versions"},"content":{"rendered":"

I recently took over maintenance of a jQuery UI plugin that lets you highlight bits of a textarea<\/a>. Since it’s a UI plugin, most of the testing is done by visual inspection, and supporting different versions of jQuery presents an interesting testing challenge, since jQuery is one of the first things to load on the page.<\/p>\n

\"jquery-highlight\"<\/p>\n

This is the code that generates the above example:<\/p>\n

\nfunction runTest() {\n  $('#demo1').highlightTextarea({\n      words: {\n        color: '#ADF0FF',\n        words: ['Lorem ipsum','vulputate']\n      },\n      debug: true\n  });\n}\n<\/pre>\n
It turns out that you can dynamically add scripts to a page, so rather than including jQuery in a script tag, we can import it after the page loads.<\/p>\n
Normally you might use “$(document).ready” to run initialization code, but you can use window.onload directly instead:<\/p>\n
\nwindow.onload = loadJavascript;\n<\/pre>\n
Inside the runTests function, you need the ability to append a script, and call a callback once it loads, since this is an asynchronous process.<\/p>\n
\nfunction appendScript(src, callback) {\n  var head = document.getElementsByTagName('head')[0];\n\n  var elt = document.createElement(\"script\");\n  elt.type = \"text\/javascript\";\n  elt.src = src;\n\n  elt.onload = function() {\n    callback();\n  }\n\n  head.appendChild(elt);\n}\n<\/pre>\n
To make the page load correctly, I’ve set this up so you can specify the jQuery version on the URL. Once jQuery loads, it triggers jQuery UI loading, and then finally our own scritpts.<\/p>\n
\nfunction loadJavascript() {\n  \/\/ this sets the default\n  var jqv = \"jquery-1.11.1.min.js\";\n\n  try {\n    jqv = window.location.search.split('?')[1].split('=')[1];\n  } catch (e) {}\n\n  appendScript(\"http:\/\/code.jquery.com\/\" + jqv,\n    function() {\n      $('#jqv').val(jqv);\n\n      appendScript(\n        \"http:\/\/code.jquery.com\/ui\/1.10.4\/jquery-ui.min.js\",\n      function() {\n        appendScript(\"..\/jquery.highlighttextarea.js\",\n        runTest\n      )})});\n}\n<\/pre>\n
Once this works, you can add a dropdown with all the jQuery versions you want to support, and set the page to refresh when one is selected:<\/p>\n
\nfunction setJQuery(newVersion) {\n  var jqv = $('#jqv').val();\n\n  window.location = 'index.html?jqv=' + jqv;\n}\n<\/pre>\n
For completeness, here is the dropdown:<\/p>\n
\n