Mocking and Stubbing in jQuery Tests
In this chapter, we will explore the concepts of mocking and stubbing in the context of testing jQuery applications. Mocking and stubbing are essential techniques in unit testing, allowing you to isolate and test specific parts of your code without relying on external dependencies or side effects. We'll cover everything from the basics to advanced topics, with detailed examples and explanations.
Introduction to Mocking and Stubbing
What is Mocking?
Mocking is the process of creating a fake version of an object or function that mimics the behavior of the real object or function. Mocks are used to test interactions and behaviors without relying on actual implementations.
What is Stubbing?
Stubbing is a technique used to replace a function with a custom implementation that returns a predefined result. Stubs are used to control the behavior of dependencies during tests.
Why Use Mocking and Stubbing?
- Isolation: Isolate the unit under test from external dependencies.
- Control: Control the behavior of dependencies to test specific scenarios.
- Performance: Improve test performance by avoiding time-consuming operations.
- Reliability: Make tests more reliable by eliminating variability from external dependencies.
Setting Up the Testing Environment
Choosing a Testing Framework
Several testing frameworks can be used with jQuery, including QUnit, Jasmine, and Mocha. For this chapter, we’ll use QUnit, a powerful and easy-to-use testing framework for JavaScript.
Installing QUnit
To get started with QUnit, you can include it in your project using a CDN or by downloading it.
Example: Including QUnit via CDN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.17.2.css">
</head>
<body> <script type="litespeed/javascript" data-src="https://code.jquery.com/qunit/qunit-2.17.2.js"></script> <script type="litespeed/javascript" data-src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="litespeed/javascript" data-src="tests.js"></script> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://diginode.in/wp-content/litespeed/js/96d0e6d4ba93134cbdab615e06eb2824.js?ver=a1a89"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>
Explanation:
- QUnit CSS and JS: Include QUnit’s CSS and JavaScript files.
- jQuery: Include jQuery as the library we are testing.
- tests.js: This file will contain our test cases.
Basic Mocking and Stubbing
Creating a Simple Stub
We’ll start by creating a simple stub for a jQuery function using QUnit.
Example: Stubbing a jQuery AJAX Call
// tests.js
QUnit.test('AJAX call stub', function(assert) {
var done = assert.async();
// Original AJAX function
var originalAjax = $.ajax;
// Stub the $.ajax function
$.ajax = function(options) {
setTimeout(function() {
options.success({ message: 'Stubbed response' });
done();
}, 100);
};
// Function to test
function fetchData(callback) {
$.ajax({
url: 'fake-url',
success: callback
});
}
// Test the function
fetchData(function(data) {
assert.equal(data.message, 'Stubbed response', 'Received the stubbed response');
});
// Restore the original $.ajax function
$.ajax = originalAjax;
});
Explanation:
- Original AJAX Function: Store the original
$.ajaxfunction to restore it later. - Stubbed
$.ajaxFunction: Replace$.ajaxwith a custom implementation that simulates a successful response. - Function to Test:
fetchDatamakes an AJAX call. - Test the Function: Verify that the function receives the stubbed response.
- Restore Original Function: Restore the original
$.ajaxfunction after the test.
Mocking a Function
Mocking involves creating a mock object with expectations about how it should be used during the test.
Example: Mocking a jQuery Function
// tests.js
QUnit.test('jQuery function mock', function(assert) {
var mockHtml = '<div class="mock">Mocked HTML</div>';
// Mock the jQuery function
var mockJQuery = function(selector) {
if (selector === '.mock') {
return $(mockHtml);
}
return $(selector);
};
// Replace global jQuery with the mock
var originalJQuery = window.jQuery;
window.jQuery = mockJQuery;
// Function to test
function getMockHtml() {
return $('.mock').html();
}
// Test the function
assert.equal(getMockHtml(), 'Mocked HTML', 'Returned the mocked HTML content');
// Restore the original jQuery function
window.jQuery = originalJQuery;
});
Explanation:
- Mock HTML: Define the mocked HTML content.
- Mock jQuery Function: Replace the global jQuery function with a mock that returns the mocked HTML for a specific selector.
- Function to Test:
getMockHtmlretrieves the HTML content of the mock element. - Test the Function: Verify that the function returns the mocked HTML content.
- Restore Original Function: Restore the original jQuery function after the test.
Advanced Mocking and Stubbing
Using Spies
Spies are functions that record information about how they were called. Spies can be used to verify that a function was called with specific arguments.
Example: Using Spies with Sinon.js
<script type="litespeed/javascript" data-src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/11.1.2/sinon.min.js"></script>
// tests.js
QUnit.test('Using spies', function(assert) {
var spy = sinon.spy($, 'ajax');
// Function to test
function fetchData() {
$.ajax({
url: 'fake-url'
});
}
// Call the function
fetchData();
// Check that the spy was called
assert.ok(spy.calledOnce, 'AJAX function was called once');
assert.equal(spy.getCall(0).args[0].url, 'fake-url', 'AJAX call was made with the correct URL');
// Restore the original function
spy.restore();
});
Explanation:
- Include Sinon.js: Include the Sinon.js library for spies, stubs, and mocks.
- Spy on
$.ajax: Create a spy that wraps the$.ajaxfunction. - Function to Test:
fetchDatamakes an AJAX call. - Call the Function: Call the function to trigger the spy.
- Check the Spy: Verify that the spy was called and check the arguments of the call.
- Restore Original Function: Restore the original
$.ajaxfunction after the test.
Using Mock Servers
Mock servers simulate server responses for AJAX calls, allowing you to test how your application handles different server responses.
Example: Using Sinon.js Fake Server
// tests.js
QUnit.test('Using mock server', function(assert) {
var done = assert.async();
var server = sinon.createFakeServer();
server.respondWith('GET', 'fake-url', [
200,
{ 'Content-Type': 'application/json' },
JSON.stringify({ message: 'Mocked server response' })
]);
// Function to test
function fetchData(callback) {
$.ajax({
url: 'fake-url',
success: callback
});
}
// Call the function
fetchData(function(data) {
assert.equal(data.message, 'Mocked server response', 'Received the mocked server response');
done();
});
// Respond to the AJAX call
server.respond();
// Restore the server
server.restore();
});
Explanation:
- Create Fake Server: Use Sinon.js to create a fake server.
- Define Response: Define the response for a specific URL.
- Function to Test:
fetchDatamakes an AJAX call. - Call the Function: Call the function to trigger the AJAX call.
- Respond to AJAX Call: Use the fake server to respond to the AJAX call.
- Check the Response: Verify that the function received the mocked server response.
- Restore the Server: Restore the server after the test.
Testing jQuery Plugins
Mocking and Stubbing in jQuery Plugins
When testing jQuery plugins, you may need to mock or stub specific jQuery methods or plugin methods.
Example: Mocking Plugin Methods
// tests.js
QUnit.test('Mocking plugin methods', function(assert) {
// Define the plugin
$.fn.myPlugin = function() {
this.html('Original content');
};
// Mock the plugin method
var mockPlugin = sinon.stub($.fn, 'myPlugin').callsFake(function() {
this.html('Mocked content');
});
// Function to test
function applyPlugin() {
$('#element').myPlugin();
}
// Test the function
$('#element').html('Initial content');
applyPlugin();
assert.equal($('#element').html(), '
assert.equal($('#element').html(), 'Mocked content', 'Plugin applied mocked content');
// Restore the original plugin method
mockPlugin.restore();
});
Explanation:
- Define the Plugin: Create a simple jQuery plugin that sets the HTML content.
- Mock the Plugin Method: Use Sinon.js to stub the plugin method and replace it with a mock implementation.
- Function to Test:
applyPluginapplies the plugin to an element. - Test the Function: Verify that the plugin sets the mocked content.
- Restore Original Method: Restore the original plugin method after the test.
Combining Mocking and Stubbing Techniques
Complex Scenarios
In real-world applications, you might need to combine multiple mocking and stubbing techniques to test complex scenarios.
Example: Combining Spies, Stubs, and Mock Servers
// tests.js
QUnit.test('Complex mocking and stubbing', function(assert) {
var done = assert.async();
// Spy on a function
var logSpy = sinon.spy(console, 'log');
// Stub a jQuery method
var mockJQuery = sinon.stub($, 'ajax').callsFake(function(options) {
options.success({ message: 'Stubbed AJAX response' });
});
// Create a fake server
var server = sinon.createFakeServer();
server.respondWith('GET', 'fake-url', [
200,
{ 'Content-Type': 'application/json' },
JSON.stringify({ message: 'Mocked server response' })
]);
// Function to test
function fetchData(callback) {
$.ajax({
url: 'fake-url',
success: function(data) {
console.log('AJAX success:', data.message);
callback(data);
}
});
}
// Call the function
fetchData(function(data) {
assert.ok(logSpy.calledWith('AJAX success:', 'Stubbed AJAX response'), 'Log called with stubbed response');
assert.equal(data.message, 'Stubbed AJAX response', 'Received the stubbed AJAX response');
done();
});
// Respond to the AJAX call
server.respond();
// Restore the spies, stubs, and server
logSpy.restore();
mockJQuery.restore();
server.restore();
});
Explanation:
- Spy on a Function: Spy on
console.logto verify that it logs the correct message. - Stub a jQuery Method: Stub
$.ajaxto return a stubbed response. - Create a Fake Server: Create a fake server to simulate a server response.
- Function to Test:
fetchDatamakes an AJAX call and logs the response. - Call the Function: Call the function to trigger the AJAX call.
- Check the Spy and Stub: Verify that the function logs the correct message and receives the stubbed response.
- Restore Original Functions: Restore the original functions and server after the test.
Best Practices for Mocking and Stubbing
Keep Tests Independent
Ensure that tests are independent of each other. Avoid relying on the state or data modified by other tests.
Restore Original Functions
Always restore the original functions after mocking or stubbing to avoid side effects in other tests.
Use Descriptive Test Names
Use descriptive names for your test cases to make it clear what each test is verifying.
Mock and Stub Only What is Necessary
Mock and stub only the dependencies that are necessary for the test. Over-mocking can make tests harder to understand and maintain.
Mocking and stubbing are powerful techniques for testing jQuery applications. By isolating the code under test from its dependencies, you can create more reliable, maintainable, and performant tests. In this chapter, we covered the basics of mocking and stubbing, explored advanced techniques, and combined multiple approaches to handle complex scenarios. Adhering to best practices will help you build robust test suites that ensure your jQuery applications function as expected. Happy coding !❤️