Drupal & JavaScript integrations: testing Drupal.behaviors

drupal_and_javascript_testing_behaviors.md

(function ($) {
  'use strict';
  Drupal.behaviors.usingcontext_one = {
    attach: function() {
    // This will execute always after a load (whole DOM) or reload (partial AJAX). 
      $("#unsplash").append('<p>Hello world by Behavior One</p>');    }
  };

  Drupal.behaviors.usingcontext_two = {
    attach: function() {
    // Same behavior than the former.
      $(document).find("#unsplash").append('<p>Hello world by Behavior Two</p>');
    }
  };

  Drupal.behaviors.usingcontext_three = {
    attach: function(context) {
    // More refined than formers using the variable 'context'. 
      $(context).find('#unsplash').append('<p>Hello world by Behavior Three</p>');
    }
  };
  
  Drupal.behaviors.usingcontext_four = {
    attach: function(context) {
    // Using context and looking for the selector through jQuery.
    // Thanks to Ramon Vilar @rvilar for the feedback. 
       $('#unsplash', context).append('<p>Hello world by Behavior Four</p>');
    }
  };
 


  Drupal.behaviors.usingcontext_five = {
    attach: function() {
    // This will work only once due to the use of jQuery.once() method but load whole DOM.
      $('#unsplash').once('cacafuti').append('<p>Hello world by Behavior Five</p>');
    }
  };

  Drupal.behaviors.usingcontext_six = {
    attach: function(context, settings) {
    // Using jQuery.once() too but calling before the append. 
      $(context).once('cacafuti2').find('#unsplash').append('<p>Hello world by Behavior Six</p>');
    }
  };

}(jQuery));