Unit testing with Jasmine, expect().toBeVisible()

Question

I need to detect the CSS display value after a click event has been executed. I am sure it is user error, but I cannot get Jasmine.js to report if an elements visibility has been changed after the click.

Here is the codepen link: http://codepen.io/nicholasabrams/pen/dPYoJr

Here is the code itself: (this is obviously not the actual case that it is being used in however it is a very simplified version that recreates the issue I am having currently)

$('#button1').on('click', function(){

  $(this).append('<button id="#button2">!!!!!</button>');

});

Here is the test itself:

describe("button#1 click test", function(){

   beforeEach(function(){
     $('#button1').click();
   });

   it("Should inject a new button with #button2 as the id", function(){
      expect($('#button2')).toBeVisible();
   });

});

Answer 1

At first - in your pen you should add external script for jasmine-jquery. Next, button in a button, it's illegal according to W3C Phrasing content, but there must be no interactive content descendant. Jasmine is just fine, try to append to parent:

$('#button1').on('click', function(){
    $(this).parent().append('<button id="#button2">!!!!!</button>');
});

Working pen http://codepen.io/anon/pen/zxvGja?editors=101