Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                



              
            
!

CSS

              
                input {
  width: 350px;
  margin: 4px;
}

div.menu_info {
  display: none;
}
              
            
!

JS

              
                /*
See https://github.com/velesin/jasmine-jquery for more info 
on the excellent jasmine-jquery library.
*/
describe("Asynchronous Processes Test Suite.", function() {
  //var fixtures = '', menuDivSelector = 'div#1520_1';
  //jasmine.getFixtures().fixturesPath = 'https://codepen.io/';
  
  beforeAll(function(done) {
    $.get(
      "https://codepen.io/blackjacques/pen/Vydeyj.html",
      function(html) {
        var tempDom   = $('<output>').append($.parseHTML(html, null, true)),
            content   = tempDom.find('div#wpbody-content'),
            script    = content.find('script').remove(),
            scrCode   = script.html(),
            readyBody = scrCode.substring(scrCode.indexOf("{") + 1, 
                                          scrCode.lastIndexOf("}"));
        
        window.content = content;
        window.readyScript = script.html(readyBody);
        
        done();
      }
    );
    // store the original AJAX function in a variable before overwriting it
    //window.jqAjax = $.ajax;
  });
  
  beforeEach(function() {
    setFixtures( window.content );
    appendSetFixtures( window.readyScript );
  });
  
  it ("Verify that jQuery.ready() functions are accessible by jasmine.", function() {
    //debugger;
    expect(window['setMenuInputNames']).toBeDefined();
    expect(window['displayAdminMessage']).toBeDefined(); 
    expect(window['createLocationDiv']).toBeDefined(); 

    expect(typeof setMenuInputNames).toEqual('function');
    expect(typeof displayAdminMessage).toEqual('function'); 
    expect(typeof createLocationDiv).toEqual('function'); 

    //you can even check that event handlers are bound!
    expect('click' in $._data( $('#btnAddNewMenu').get(0), "events" ) ).toBe(true);
  });

  describe("Test using Spies.", function() {
    //var spyEvent;
    it("should execute the callback function on success", function (done) {
      spyOn($, 'ajax').and.callFake(function(req) {
        setTimeout(function() {
            req.success( 'Menus added successfully.' ); 
            expect(window.displayAdminMessage).toHaveBeenCalled();
            expect(window.displayAdminMessage.calls.argsFor(0))
              .toEqual(['Menus added successfully.','green','top']);
            done();
        }, 500);
      });
     // debugger;
      var spyEvent = spyOnEvent('button[type="button"][id^="btnSave"]', 'click');
      spyOn(window, 'displayAdminMessage').and.callThrough();
      $('#btnSaveTop').trigger('click');
      expect('click').toHaveBeenTriggeredOn('button[type="button"][id^="btnSave"]');
      expect(spyEvent).toHaveBeenTriggered();
      //the success handler can be set after the fact as well:
      //window.success = $.ajax.calls.mostRecent().args[0].success;
    });

    it("should display the admin success message.", function () {
      expect($('div.error')[0]).toBeInDOM();
      expect($('div.error').length).toEqual(1);
    });
  });
  
   describe("Test using Custom Callback Function.", function() {
    // creates a new callback function that also executes the original callback
    var SuccessCallback = function(origCallback){
      return function(data, textStatus, jqXHR) {
        console.log("Calling original callback function...");
        if (typeof origCallback === "function") {
          origCallback('Menus successfully saved.', textStatus, jqXHR);
        }
        console.log("Finished executing original callback function.");
      };
    };
     
    beforeEach(function() {
      setFixtures( window.content );
      appendSetFixtures( window.readyScript );
      
      $.ajax = function(settings){
        // override the callback function, then execute the original AJAX function
        settings.success = new SuccessCallback(settings.success);
        return $.Deferred(settings.success).promise();
      };
      spyOn($, 'ajax').and.callThrough();
    });

    String.prototype.deserialize = function() {
      var split = this.split('&'),
          obj   = {};
      for(var i = 0; i < split.length; i++){
          var kv = split[i].split('=');
          obj[kv[0]] = decodeURIComponent(kv[1] ? kv[1].replace(/\+/g, ' ') : kv[1]);
      }
      return obj;
    }
    
    it("should submit all of the form fields via ajax.", function () {
      $('#btnSaveTop').trigger('click');
      var req        = $.ajax.calls.mostRecent().args[0],
          data       = req.data;
      //console.log(formFields); //.data.menuData.deserialize());
      expect(req.method).toEqual('POST');
      expect(data.action).toEqual('save_menus');
    });
    
    it("should display the admin success message.", function () {
      //console.log($('form').serialize());
      //debugger;
      $('#btnSaveTop').trigger('click');
      console.log($('div.error'));
      expect($('div.error')[0]).toBeInDOM();
      expect($('div.error').length).toBeGreaterThan($.ajax.calls.count());
    });
    
    it("should add the new menu fields under the existing ones.", function () {
      var newEustonMenu = 
        '<div class="add-new-menu">'
        +  '<label for="locations_1">Locations: </label>'
        +  '<input type="text" id="locations_1" value="new location 1" />'
        +  '<br>'
        +  '<label for="menu_name_1">Menu Name: </label>'
        +  '<input id="menu_name_1"  name="menu_name_1174100_2" type="text" value="new menu name 1"/>'
        +  '<br>'
        +  '<label for="menu_url_1">Source URL: </label>'
        +  '<input id="menu_url_1" name="menu_url_1174100_2" type="url" value="http://new.url.1" />'
        + '</div>';
      $('form').append(newEustonMenu);
      //only 1 menu for Euston
      expect($('div#1174100_1')).toBeInDOM();
      expect($('div#1174100_2')).not.toBeInDOM();
      
      $('#btnSaveTop').trigger('click');

      var formFields = $.ajax.calls.mostRecent().args[0].data.menuData.deserialize();
      //should be 10 new fields
      console.log(formFields);
      var fieldNames = Object.keys(formFields);
      //each menu has 2 fields, the name and URL
      expect(fieldNames.length/2).toEqual(10);
      //new fields are menu_name_1174100_2 and menu_url_1174100_2
      expect(fieldNames).toContain("menu_name_1174100_2");
      expect(formFields.menu_name_1174100_2).toEqual("new menu name 1");
      expect(fieldNames).toContain("menu_url_1174100_2");
      expect(formFields.menu_url_1174100_2).toEqual("http://new.url.1");
      var newDiv = $('div#1174100_2');
      expect(newDiv).toBeInDOM();
      //the new div should have been added immediately following the first 
      //(and only) Euston menu
      expect(newDiv.prev()).toHaveId('1174100_1');
      expect(newDiv).toContainElement('input[type="text"]');
      expect(newDiv.find('input[type="text"]')).toHaveValue("new menu name 1");
      expect(newDiv).toContainElement('input[type="url"]');
      expect(newDiv.find('input[type="url"]')).toHaveValue("http://new.url.1");
      //the add-new-menu div should have been removed
      expect($('div#add-new-menu')).not.toBeInDOM();
    });
  }); 
});


//this code appends my blurb after the Jasmine report is loaded!
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
// define a new observer
var obs = new MutationObserver(function(mutations, observer) {
    // look through all mutations that just occured
    for(var i=0; i<mutations.length; ++i) {
        // look through all added nodes of this mutation
        for(var j=0; j<mutations[i].addedNodes.length; ++j) {
            var addedNode = mutations[i].addedNodes[j];
            if(addedNode.className == "jasmine_html-reporter") {
                $(addedNode).after(
                  $('<br>'),
                  $('<p>')
                    .css("text-align", "left")
                      .html('If you found this demo useful, consider helping out this struggling writer by '
                           +'<a href="https://www.paypal.me/RobertGravelle/1" target="_blank">donating $1 dollar</a> '
                           +'(secure PayPal link) for a coffee or purchasing one of my songs from '
                           +'<a href="https://ax.itunes.apple.com/WebObjects/MZSearch.woa/wa/search?term=rob%20gravelle" target="_blank">'
                           +'iTunes.com</a> or <a href="http://www.amazon.com/s/ref=ntt_srch_drd_B001ES9TTK?ie=UTF8&'
                           +'field-keywords=Rob%20Gravelle&index=digital-music&search-type=ss" target="_blank">'
                           +'Amazon.com</a> for only 0.99 cents each.</p>'),
                  $('<p>')
                    .css("text-align", "left")
                      .html('Rob uses and recommends <a href="http://www.mochahost.com/2425.html" target="_blank">MochaHost</a>,'
                           +' which provides Web Hosting for as low as $1.95 per month, as well as unlimited emails and disk space!')
                 );
            }
        }
    }
});

// have the observer observe foo for changes in children
obs.observe(document.body, {
  childList: true
});


              
            
!
999px

Console