{"id":3062,"date":"2014-01-29T00:31:00","date_gmt":"2014-01-29T00:31:00","guid":{"rendered":"https:\/\/www.htmlgoodies.com\/uncategorized\/testing-dom-events-using-jquery-and-jasmine-2-0\/"},"modified":"2021-04-23T20:38:01","modified_gmt":"2021-04-23T20:38:01","slug":"testing-dom-events-using-jquery-and-jasmine-2-0","status":"publish","type":"post","link":"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/","title":{"rendered":"Testing DOM Events Using jQuery and Jasmine 2.0"},"content":{"rendered":"<p>A lot of processes within a Web application are triggered by Document Object Model (DOM) events. These include button clicks, setting the focus on an element, document loading, unloading, and any other event resulting from a user action or the browser. That&#8217;s why any good Unit Testing Framework will provide methods to deal with DOM events. Jasmine is no exception. It makes it possible to test that a given event occurred and what the results of the event were. In today&#8217;s article, we&#8217;re going to create some tests for the button click event using Jasmine 2.0, jQuery, and an additional third-party library.<\/p>\n<h2><\/h2>\n<h2>What You&#8217;ll Need<\/h2>\n<p>The add-on library that we&#8217;ll be using is built on Jasmine 2.0 and jQuery and is called jasmine-jquery. Here are the details on it and the other two libraries:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/jasmine\/jasmine\" target=\"_blank\" rel=\"noopener\">Jasmine 2.0<\/a>: In this new major release, the makers of Jasmine have dropped the runs() and waitsFor() methods in favor of the Mocha done() callback, which has been added to beforeEach(), it() and afterEach(). If you plan on performing any tests on asynchronous processes, then this version is a must.<\/li>\n<li><a href=\"https:\/\/github.com\/velesin\/jasmine-jquery\" target=\"_blank\" rel=\"noopener\">Jasmine-jQuery<\/a>: There are a lot of third party libraries that enhance Jasmine&#8217;s basic functionality. The one we&#8217;ll be using here, jasmine-jquery, adds a set of custom matchers for jQuery as well as an API for creating and managing HTML, CSS, and JSON fixtures in your specs. All of the functionality is contained in the jasmine-jquery.js file so all you need to do is include it with your other JS files and reference it from your SpecRunner.html file using a &lt;SCRIPT&gt; tag with the SRC attribute.<\/li>\n<li><a href=\"https:\/\/jquery.com\/download\/\" target=\"_blank\" rel=\"noopener\">jQuery v1.7+<\/a>: Version 1.7 is where jQuery added the on() event handler. Without it, the jasmine-jquery script will raise errors. It should work with newer versions as well. Just don&#8217;t go back to any versions previous to 1.7 and you should not encounter any issues.<\/li>\n<\/ul>\n<h2><\/h2>\n<h2>Setting Up Your Tests<\/h2>\n<p>The tests go in an HTML file called the Spec Runner. In it, you reference the required libraries and place a local script in the document that will run your tests. In the following sample file the global setFixtures() method creates the DOM from an HTML source string. Typically, your target code will be contained in existing files. These can be loaded using the loadFixtures() method. Unlike setFixtures() (seen below), it takes a URL as an argument, rather than a string:<\/p>\n<pre class=\"brush: html\">&lt;!DOCTYPE HTML&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"&gt;\n  &lt;title&gt;Jasmine v2.0 DOM Tests Spec Runner&lt;\/title&gt;\n\n  &lt;link rel=\"shortcut icon\" type=\"image\/png\" href=\"images\/jasmine_favicon.png\"&gt;\n  &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"lib\/jasmine-core\/jasmine.css\"&gt;\n\n  &lt;script type=\"text\/javascript\" src=\"lib\/jasmine-core\/jasmine.js\"&gt;&lt;\/script&gt;\n  &lt;script type=\"text\/javascript\" src=\"lib\/jasmine-core\/jasmine-html.js\"&gt;&lt;\/script&gt;\n  &lt;script type=\"text\/javascript\" src=\"lib\/jasmine-core\/boot.js\"&gt;&lt;\/script&gt;\n  &lt;script type=\"text\/javascript\" src=\"lib\/jasmine-core\/jquery-1.7.2.js\"&gt;&lt;\/script&gt;\n  &lt;script type=\"text\/javascript\" src=\"lib\/jasmine-core\/jasmine-jquery.js\"&gt;&lt;\/script&gt;\n  \n  &lt;script type=\"text\/javascript\"&gt;\n   var MSG = \"Hello World!\";\n     \n   function hideMessage() {\n     $( \"#pMsg\" ).html(\"\");\n   }\n\t\n   function showMessage() {\n     $( \"#pMsg\" ).html(MSG); \n   }\n\t \n   function setUpHTMLFixture() {\n     setFixtures('&lt;form id=\"testForm\" action=\"\"&gt;'\n                +'  &lt;h1&gt;Test Form&lt;\/h1&gt;'\n                +'  &lt;input type=\"text\" id=\"txtMessage\"&gt;'\n                +'  &lt;br&gt;'\n                +'  &lt;button id=\"btnHideMessage\" type=\"button\" onclick=\"hideMessage()\"&gt;Hide Message&lt;\/button&gt;'\n                +'  &lt;button id=\"btnShowMessage\" type=\"button\" onclick=\"showMessage()\"&gt;Show Message&lt;\/button&gt;'\n                +'  &lt;br&gt;'\n                +'  &lt;p id=\"pMsg\"&gt;&lt;\/p&gt;'\n                +'&lt;\/form&gt;');\n      \n   }\n  &lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n<p>The HTML fixture above is comprised of a form with a text field, a button that displays the contents of the text field in a paragraph and another button that clears the message.<\/p>\n<h2><\/h2>\n<h2>Testing That A DOM Event Was Fired<\/h2>\n<p>Jasmine utilizes spies much like JUnit does Mocks, except that the former does not pretend to be a different object type. Rather, Jasmine spies simply listen for a given event and report whether or not it was triggered and, if so, by what element.<\/p>\n<p>A spy is instantiated by the spyOnEvent() method. It accepts a selector string and the name of the event, <em>sans<\/em> the &#8220;on&#8221;. We can then verify that the given event was called by invoking the toHaveBeenTriggered() method on expects(spy). It is also possible to check that the event was triggered on the correct element by applying toHaveBeenTriggeredOn() to expect(), passing in the element selector:<\/p>\n<pre class=\"brush: js\">describe(\"Button Click Event Tests\", function() {\n  var spyEvent;\n  \n  beforeEach(function() {\n    setUpHTMLFixture();\n  });\n     \n  it (\"should invoke the btnShowMessage click event.\", function() {\n    spyEvent = spyOnEvent('#btnShowMessage', 'click');\n    $('#btnShowMessage').trigger( \"click\" );\n      \n    expect('click').toHaveBeenTriggeredOn('#btnShowMessage');\n    expect(spyEvent).toHaveBeenTriggered();\n  });\n     \n  it (\"should invoke the btnHideMessage click event.\", function() {\n    spyEvent = spyOnEvent('#btnHideMessage', 'click');\n    $('#btnHideMessage').trigger( \"click\" );\n      \n    expect('click').toHaveBeenTriggeredOn('#btnHideMessage');\n    expect(spyEvent).toHaveBeenTriggered();\n  });\n});\n<\/pre>\n<h2><\/h2>\n<h2>Verifying the Results of an Action<\/h2>\n<p>Knowing that an event was triggered by the correct element a fine start, but ultimately, we&#8217;re interested in the result of the action. Did it perform as expected or blow up? That&#8217;s where jasmine-jquery&#8217;s numerous jQuery matchers come into play. In our case, we want to know if the pMsg paragraph contains our message when the Show Message button is clicked and if it&#8217;s cleared when the Hide Message button is clicked. Like the spy checkers above, the jQuery matchers are also members of the expect() return object. One that we can use is toHaveText(). It compares the element&#8217;s text to the value passed in to the function. In the example below, the Show Message and Hide Message events are separated into two describe blocks:<\/p>\n<pre class=\"brush: js\">var MSG = \"Hello World!\";\ndescribe(\"Show message tests\", function() {\n  beforeEach(function() {\n    setUpHTMLFixture();\n    $('#txtMessage').val(MSG);\n    $('#btnShowMessage').trigger( \"click\" );\n  });\n  \n  it (\"should display the message when button is clicked.\", function() {\n    expect($('#pMsg')).toHaveText($('#txtMessage').val());\n  });\n});\n \ndescribe(\"Hide message tests\", function() {\n  beforeEach(function() {\n    setUpHTMLFixture();\n    $('#pMsg').text(MSG);\n    $('#btnHideMessage').trigger( \"click\" );\n  });\n  \n  it (\"should remove the message when button is clicked.\", function() {\n    expect($('#pMsg')).toHaveText(\"\");\n  });\n});\n<\/pre>\n<p>Here is the complete source of the SpecRunner.html file that we created today:<\/p>\n<pre class=\"brush: html\">&lt;!DOCTYPE HTML&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"&gt;\n  &lt;title&gt;Jasmine v2.0 DOM Tests Spec Runner&lt;\/title&gt;\n\n  &lt;link rel=\"shortcut icon\" type=\"image\/png\" href=\"images\/jasmine_favicon.png\"&gt;\n  &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"lib\/jasmine-core\/jasmine.css\"&gt;\n\n  &lt;script type=\"text\/javascript\" src=\"lib\/jasmine-core\/jasmine.js\"&gt;&lt;\/script&gt;\n  &lt;script type=\"text\/javascript\" src=\"lib\/jasmine-core\/jasmine-html.js\"&gt;&lt;\/script&gt;\n  &lt;script type=\"text\/javascript\" src=\"lib\/jasmine-core\/boot.js\"&gt;&lt;\/script&gt;\n  &lt;script type=\"text\/javascript\" src=\"lib\/jasmine-core\/jquery-1.7.2.js\"&gt;&lt;\/script&gt;\n  &lt;script type=\"text\/javascript\" src=\"lib\/jasmine-core\/jasmine-jquery.js\"&gt;&lt;\/script&gt;\n  \n  &lt;script type=\"text\/javascript\"&gt;\n     var MSG = \"Hello World!\";\n     \n     function hideMessage() {\n       $( \"#pMsg\" ).html(\"\");\n     }\n\t\n     function showMessage() {\n       $( \"#pMsg\" ).html(MSG); \n     }\n\t \n     function setUpHTMLFixture() {\n       setFixtures('&lt;form id=\"testForm\" action=\"\"&gt;'\n                  +'  &lt;h1&gt;Test Form&lt;\/h1&gt;'\n                  +'  &lt;input type=\"text\" id=\"txtMessage\"&gt;'\n                  +'  &lt;br&gt;'\n                  +'  &lt;button id=\"btnHideMessage\" type=\"button\" onclick=\"hideMessage()\"&gt;Hide Message&lt;\/button&gt;'\n                  +'  &lt;button id=\"btnShowMessage\" type=\"button\" onclick=\"showMessage()\"&gt;Show Message&lt;\/button&gt;'\n                  +'  &lt;br&gt;'\n                  +'  &lt;p id=\"pMsg\"&gt;&lt;\/p&gt;'\n                  +'&lt;\/form&gt;');\n      \n    }\n\ndescribe(\"DOM TESTS:***************\", function() { \n  describe(\"Button Click Event Tests\", function() {\n    var spyEvent;\n\t  \n    beforeEach(function() {\n      setUpHTMLFixture();\n    });\n      \n    it (\"should invoke the btnShowMessage click event.\", function() {\n      spyEvent = spyOnEvent('#btnShowMessage', 'click');\n      $('#btnShowMessage').trigger( \"click\" );\n\t      \n      expect('click').toHaveBeenTriggeredOn('#btnShowMessage');\n      expect(spyEvent).toHaveBeenTriggered();\n    });\n      \n    it (\"should invoke the btnHideMessage click event.\", function() {\n      spyEvent = spyOnEvent('#btnHideMessage', 'click');\n      $('#btnHideMessage').trigger( \"click\" );\n\t      \n      expect('click').toHaveBeenTriggeredOn('#btnHideMessage');\n      expect(spyEvent).toHaveBeenTriggered();\n    });\n  });\n  \t  \n  describe(\"Show message tests\", function() {\n    beforeEach(function() {\n      setUpHTMLFixture();\n      $('#txtMessage').val(MSG);\n      $('#btnShowMessage').trigger( \"click\" );\n    });\n    \n    it (\"should display the message when button is clicked.\", function() {\n      expect($('#pMsg')).toHaveText($('#txtMessage').val());\n    });\n  });\n   \n  describe(\"Hide message tests\", function() {\n    beforeEach(function() {\n      setUpHTMLFixture();\n      $('#pMsg').text(MSG);\n      $('#btnHideMessage').trigger( \"click\" );\n    });\n    \n    it (\"should remove the message when button is clicked.\", function() {\n      expect($('#pMsg')).toHaveText(\"\");\n    });\n  });\n});\n&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n<h2><\/h2>\n<h2>Conclusion<\/h2>\n<p>Testing more complex events often introduces an asynchronous element, requiring the use of Jasmine 2.0&#8217;s new done() function. We&#8217;ll cover how to use it next time.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A lot of processes within a Web application are triggered by Document Object Model (DOM) events. These include button clicks, setting the focus on an element, document loading, unloading, and any other event resulting from a user action or the browser. That&#8217;s why any good Unit Testing Framework will provide methods to deal with DOM [&hellip;]<\/p>\n","protected":false},"author":90,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30620],"tags":[30720,30721,10864],"b2b_audience":[29],"b2b_industry":[52],"b2b_product":[70,68,107,98],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Testing DOM Events Using jQuery and Jasmine 2.0 | HTML Goodies<\/title>\n<meta name=\"description\" content=\"A lot of processes within a Web application are triggered by Document Object Model (DOM) events. These include button clicks, setting the focus on an\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Testing DOM Events Using jQuery and Jasmine 2.0 | HTML Goodies\" \/>\n<meta property=\"og:description\" content=\"A lot of processes within a Web application are triggered by Document Object Model (DOM) events. These include button clicks, setting the focus on an\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Goodies\" \/>\n<meta property=\"article:published_time\" content=\"2014-01-29T00:31:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-23T20:38:01+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@htmlgoodies\" \/>\n<meta name=\"twitter:site\" content=\"@htmlgoodies\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rob Gravelle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#organization\",\"name\":\"HTML Goodies\",\"url\":\"https:\/\/www.htmlgoodies.com\/\",\"sameAs\":[\"https:\/\/twitter.com\/htmlgoodies\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png\",\"contentUrl\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png\",\"width\":584,\"height\":136,\"caption\":\"HTML Goodies\"},\"image\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#website\",\"url\":\"https:\/\/www.htmlgoodies.com\/\",\"name\":\"HTML Goodies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.htmlgoodies.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/#webpage\",\"url\":\"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/\",\"name\":\"Testing DOM Events Using jQuery and Jasmine 2.0 | HTML Goodies\",\"isPartOf\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#website\"},\"datePublished\":\"2014-01-29T00:31:00+00:00\",\"dateModified\":\"2021-04-23T20:38:01+00:00\",\"description\":\"A lot of processes within a Web application are triggered by Document Object Model (DOM) events. These include button clicks, setting the focus on an\",\"breadcrumb\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.htmlgoodies.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Testing DOM Events Using jQuery and Jasmine 2.0\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/d340101131281902e682ad0190b7ac75\"},\"headline\":\"Testing DOM Events Using jQuery and Jasmine 2.0\",\"datePublished\":\"2014-01-29T00:31:00+00:00\",\"dateModified\":\"2021-04-23T20:38:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/#webpage\"},\"wordCount\":726,\"publisher\":{\"@id\":\"https:\/\/www.htmlgoodies.com\/#organization\"},\"keywords\":[\"DOM elements\",\"Jasmine\",\"jQuery\"],\"articleSection\":[\"Javascript\"],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/d340101131281902e682ad0190b7ac75\",\"name\":\"Rob Gravelle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/rob-gravelle-150x150.jpg\",\"contentUrl\":\"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/rob-gravelle-150x150.jpg\",\"caption\":\"Rob Gravelle\"},\"description\":\"Rob Gravelle resides in Ottawa, Canada, and has been an IT guru for over 20 years. In that time, Rob has built systems for intelligence-related organizations such as Canada Border Services and various commercial businesses. In his spare time, Rob has become an accomplished music artist with several CDs and digital releases to his credit.\",\"url\":\"https:\/\/www.htmlgoodies.com\/author\/rob-gravelle\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Testing DOM Events Using jQuery and Jasmine 2.0 | HTML Goodies","description":"A lot of processes within a Web application are triggered by Document Object Model (DOM) events. These include button clicks, setting the focus on an","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/","og_locale":"en_US","og_type":"article","og_title":"Testing DOM Events Using jQuery and Jasmine 2.0 | HTML Goodies","og_description":"A lot of processes within a Web application are triggered by Document Object Model (DOM) events. These include button clicks, setting the focus on an","og_url":"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/","og_site_name":"HTML Goodies","article_published_time":"2014-01-29T00:31:00+00:00","article_modified_time":"2021-04-23T20:38:01+00:00","twitter_card":"summary_large_image","twitter_creator":"@htmlgoodies","twitter_site":"@htmlgoodies","twitter_misc":{"Written by":"Rob Gravelle","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/www.htmlgoodies.com\/#organization","name":"HTML Goodies","url":"https:\/\/www.htmlgoodies.com\/","sameAs":["https:\/\/twitter.com\/htmlgoodies"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png","contentUrl":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/03\/HTMLg_weblogo_MobileLogo.png","width":584,"height":136,"caption":"HTML Goodies"},"image":{"@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/www.htmlgoodies.com\/#website","url":"https:\/\/www.htmlgoodies.com\/","name":"HTML Goodies","description":"","publisher":{"@id":"https:\/\/www.htmlgoodies.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.htmlgoodies.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/#webpage","url":"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/","name":"Testing DOM Events Using jQuery and Jasmine 2.0 | HTML Goodies","isPartOf":{"@id":"https:\/\/www.htmlgoodies.com\/#website"},"datePublished":"2014-01-29T00:31:00+00:00","dateModified":"2021-04-23T20:38:01+00:00","description":"A lot of processes within a Web application are triggered by Document Object Model (DOM) events. These include button clicks, setting the focus on an","breadcrumb":{"@id":"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.htmlgoodies.com\/"},{"@type":"ListItem","position":2,"name":"Testing DOM Events Using jQuery and Jasmine 2.0"}]},{"@type":"Article","@id":"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/#article","isPartOf":{"@id":"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/#webpage"},"author":{"@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/d340101131281902e682ad0190b7ac75"},"headline":"Testing DOM Events Using jQuery and Jasmine 2.0","datePublished":"2014-01-29T00:31:00+00:00","dateModified":"2021-04-23T20:38:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.htmlgoodies.com\/javascript\/testing-dom-events-using-jquery-and-jasmine-2-0\/#webpage"},"wordCount":726,"publisher":{"@id":"https:\/\/www.htmlgoodies.com\/#organization"},"keywords":["DOM elements","Jasmine","jQuery"],"articleSection":["Javascript"],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/d340101131281902e682ad0190b7ac75","name":"Rob Gravelle","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.htmlgoodies.com\/#\/schema\/person\/image\/","url":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/rob-gravelle-150x150.jpg","contentUrl":"https:\/\/www.htmlgoodies.com\/wp-content\/uploads\/2021\/05\/rob-gravelle-150x150.jpg","caption":"Rob Gravelle"},"description":"Rob Gravelle resides in Ottawa, Canada, and has been an IT guru for over 20 years. In that time, Rob has built systems for intelligence-related organizations such as Canada Border Services and various commercial businesses. In his spare time, Rob has become an accomplished music artist with several CDs and digital releases to his credit.","url":"https:\/\/www.htmlgoodies.com\/author\/rob-gravelle\/"}]}},"_links":{"self":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/posts\/3062"}],"collection":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/users\/90"}],"replies":[{"embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/comments?post=3062"}],"version-history":[{"count":0,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/posts\/3062\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/media?parent=3062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/categories?post=3062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/tags?post=3062"},{"taxonomy":"b2b_audience","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/b2b_audience?post=3062"},{"taxonomy":"b2b_industry","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/b2b_industry?post=3062"},{"taxonomy":"b2b_product","embeddable":true,"href":"https:\/\/www.htmlgoodies.com\/wp-json\/wp\/v2\/b2b_product?post=3062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}