lib/testable/extensions/dom_observer.js in testable-0.3.0 vs lib/testable/extensions/dom_observer.js in testable-0.4.0

- old
+ new

@@ -1,10 +1,37 @@ -// WebDriver arguments -var element = arguments[0]; -var delay = arguments[1] * 1000; +/* +This functionality will only work for browsers that support it. +See: http://caniuse.com/#feat=mutationobserver +*/ + +// WebDriver arguments, which are passed to the MutationObserver. +var element = arguments[0]; +var delay = arguments[1] * 1000; var callback = arguments[2]; +/* +The two functions below are similar in what they are doing. Both are +disconneting the observer. Both are also invoking WebDriver's callback +function. + +notStartedUpdating passes true to the callback, which indicates that the +DOM has not yet begun updating. + +startedUpdating passes false to the callback, which indicates that the +DOM has begun updating. + +The disconnect is important. You only want to be listening (observing) for the +period required, removing the listeners when done. Since there be many DOM +operations, you want to disconnet when there is interaction with the page by +the automated scripts. + +When observing a node for changes, the callback will not be fired until the +DOM has finished changing. That is the only granularity that is required for +the Cogent implementation. What specific events occurred is not important +because the goal is not to conditionally respond to them; rather just to know +when the process has completed. +*/ var notStartedUpdating = function() { return setTimeout(function() { observer.disconnect(); callback(true); }, 1000); @@ -14,10 +41,37 @@ clearTimeout(notStartedUpdating); observer.disconnect(); callback(false); }; -// Observer +/* +Mutation Observer +The W3C DOM4 specification initially introduced mutation observers as a +replacement for the deprecated mutation events. + +The MutationObserver is a JavaScript native object that allows for observing +a change on any node-like DOM Element. "Mutation" means the addition or the +removal of a node as well as changes to the node's attribute and data. + +The general approach is to create a MutationObserver object with a defined +callback function. The function will execute on every mutation observed by +the MutationObserver. The MutationObserver must be bound to a target, which +for Cogent would mean the element whose context it is being called upon. + +A MutationObserver can be provided with a set of options, which indicate +what kind of events should be observed. + +The childList option checks for additions and removals of the target node's +child elements, including text nodes. This is basically looking for any +nodes added or removed from documentElement. + +The subtree option checks for mutations to the target as well the target's +descendants. So that means every child node of documentElement. + +The attribute option checks for mutations to the target's attributes. + +The characterData option checks for mutations to the target's data. +*/ var observer = new MutationObserver(startedUpdating); var config = { attributes: true, childList: true, characterData: true, subtree: true }; observer.observe(element, config); var notStartedUpdating = notStartedUpdating();