beckettkev/index.html

## index.html

<head>
  <meta name="description" content="Jasmine + Ajax + Async">
  <meta charset="utf-8">
  <title>Jasmine Spec Runner v2.3.4</title>

  <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.3.4/jasmine_favicon.png" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine-html.js"></script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/boot.min.js"></script>
 <script src="https://cdn.rawgit.com/velesin/jasmine-jquery/master/lib/jasmine-jquery.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine-ajax/3.1.1/mock-ajax.min.js"></script>

<script>
    /*
	  @beckettkev

      Because we have abstracted the script from the namespaces and data
      source, let's setup some mock objects.

      We are working with jasmine.jquery here, so familiarise yourself
      https://github.com/velesin/jasmine-jquery

    */
    var Example = {
        Component: {}
    };

    Example.Component.MoveYammerLinkBecauseItIsInTheWrongPlaceAndInMyFace = function() {
        var _yammerSelectorPath = '#Container h2 a.ms-displayInlineBlock';

    	var hideYammerOriginal = function ( ) {
            $(_yammerSelectorPath).hide();
    	};

    	var cloneYammerLink = function( ) {
            return $(_yammerSelectorPath).clone();
    	};

    	var applyCssStylesToYammer = function ( el ) {
    		el.css('background-color','#eeeeee');
		    el.css('border', '1px solid #cccccc');

		    el.prepend( '<span> or </span>' );

		    return el;
    	};

    	function init( ) {

            console.log('Start - undoing my shoe laces');
    		//pre-flight check
    		if ($(_yammerSelectorPath).length) {
                var el = cloneYammerLink( );

                console.log('        Taking off my shoes');
                el = applyCssStylesToYammer( el );

                console.log('        Hiding my shoes');
                hideYammerOriginal( );

                console.log('        Cloning my shoes');

                $('div.ms-srch-sbLarge:first').append( el );

                console.log('END - putting my cloned shoes back on');
    		}
    	}

        init( );
    };

    /*
	 	Time for some specs
    */
    describe("MoveYammerLinkBecauseItIsInTheWrongPlaceAndInMyFace - Spectacles", function() {

            beforeEach(function() { Example.Component.MoveYammerLinkBecauseItIsInTheWrongPlaceAndInMyFace();
            });

            it ("should hide the original, to show the new", function() {
                 var _html = $('#Container h2').html();

                 expect(_html).toHaveCss({ display: "none" });
            });

            it ("the new should be added to the DOM", function ( ) {
                expect($('div.ms-srch-sbLarge:first a.ms-displayInLineBlock')).toExist();

            });

            it ("the new should have funky new background", function() {
                 var _html = $('div.ms-srch-sbLarge:first a.ms-displayInLineBlock')[0].outerHTML;


                 //anoyingly the colours get changed to RGB!
                 expect(_html).toHaveCss({ "background-color":"rgb(238, 238, 238)" });
            });
      });

</script>

</head>
<body>
	<!--

	    The following HTML is only needed when you are running the specs outside of the SharePoint Search
		Results page(s). This is simplified HTML for the specs to run against (removed attributes).

	-->


	<!-- Yammer Link, which is the way -->
	<div id="Container">
	  <h2 class="ms-displayInline">
	      <a title="Open a new tab to search for this on Yammer" class="ms-displayInlineBlock" href="#">Search on Yammer</a>
	  </h2>
	</div>

	<!-- Search Block, where we will move the Yammer Link -->
	<div class="ms-srch-sbLarge ms-srch-sb-border" id="ctl00_ctl40_g_05c5f298_6183_4e7e_be28_f537595f2016_csr_sboxdiv">
		<input title="Search..." class="ms-textLarge ms-srch-sbLarge-fullWidth" type="text">
		<a title="Search" class="ms-srch-sb-searchLink" id="ctl00_ctl40_g_05c5f298_6183_4e7e_be28_f537595f2016_csr_SearchLink" onclick="$getClientControl(this).search($get('ctl00_ctl40_g_05c5f298_6183_4e7e_be28_f537595f2016_csr_sbox').value);" href="javascript: {}">
			<img class="ms-srch-sbLarge-searchImg" id="searchImg" alt="Search" src="/sites/search/_catalogs/theme/Themed/EAD3901A/searchresultui-61174269.themedpng?ctag=4">
		</a>
		<div class="ms-qSuggest-container ms-shadow" id="AutoCompContainer">
			<div id="ctl00_ctl40_g_05c5f298_6183_4e7e_be28_f537595f2016_csr_AutoCompList"></div>
		</div>
	</div>


</body>
</html>

	<head>
	<meta name="description" content="Jasmine + Ajax + Async">
	<meta charset="utf-8">
	<title>Jasmine Spec Runner v2.3.4</title>

	<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.3.4/jasmine_favicon.png" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine-html.js"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/boot.min.js"></script>
	<script src="https://cdn.rawgit.com/velesin/jasmine-jquery/master/lib/jasmine-jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine-ajax/3.1.1/mock-ajax.min.js"></script>

	<script>
	/*
	@beckettkev

	Because we have abstracted the script from the namespaces and data
	source, let's setup some mock objects.

	We are working with jasmine.jquery here, so familiarise yourself
	https://github.com/velesin/jasmine-jquery

	*/
	var Example = {
	Component: {}
	};

	Example.Component.MoveYammerLinkBecauseItIsInTheWrongPlaceAndInMyFace = function() {
	var _yammerSelectorPath = '#Container h2 a.ms-displayInlineBlock';

	var hideYammerOriginal = function ( ) {
	$(_yammerSelectorPath).hide();
	};

	var cloneYammerLink = function( ) {
	return $(_yammerSelectorPath).clone();
	};

	var applyCssStylesToYammer = function ( el ) {
	el.css('background-color','#eeeeee');
	el.css('border', '1px solid #cccccc');

	el.prepend( '<span> or </span>' );

	return el;
	};

	function init( ) {

	console.log('Start - undoing my shoe laces');
	//pre-flight check
	if ($(_yammerSelectorPath).length) {
	var el = cloneYammerLink( );

	console.log(' Taking off my shoes');
	el = applyCssStylesToYammer( el );

	console.log(' Hiding my shoes');
	hideYammerOriginal( );

	console.log(' Cloning my shoes');

	$('div.ms-srch-sbLarge:first').append( el );

	console.log('END - putting my cloned shoes back on');
	}
	}

	init( );
	};

	/*
	Time for some specs
	*/
	describe("MoveYammerLinkBecauseItIsInTheWrongPlaceAndInMyFace - Spectacles", function() {

	beforeEach(function() { Example.Component.MoveYammerLinkBecauseItIsInTheWrongPlaceAndInMyFace();
	});

	it ("should hide the original, to show the new", function() {
	var _html = $('#Container h2').html();

	expect(_html).toHaveCss({ display: "none" });
	});

	it ("the new should be added to the DOM", function ( ) {
	expect($('div.ms-srch-sbLarge:first a.ms-displayInLineBlock')).toExist();

	});

	it ("the new should have funky new background", function() {
	var _html = $('div.ms-srch-sbLarge:first a.ms-displayInLineBlock')[0].outerHTML;


	//anoyingly the colours get changed to RGB!
	expect(_html).toHaveCss({ "background-color":"rgb(238, 238, 238)" });
	});
	});

	</script>

	</head>
	<body>
	<!--

	The following HTML is only needed when you are running the specs outside of the SharePoint Search
	Results page(s). This is simplified HTML for the specs to run against (removed attributes).

	-->


	<!-- Yammer Link, which is the way -->
	<div id="Container">
	<h2 class="ms-displayInline">
	<a title="Open a new tab to search for this on Yammer" class="ms-displayInlineBlock" href="#">Search on Yammer</a>
	</h2>
	</div>

	<!-- Search Block, where we will move the Yammer Link -->
	<div class="ms-srch-sbLarge ms-srch-sb-border" id="ctl00_ctl40_g_05c5f298_6183_4e7e_be28_f537595f2016_csr_sboxdiv">
	<input title="Search..." class="ms-textLarge ms-srch-sbLarge-fullWidth" type="text">
	<a title="Search" class="ms-srch-sb-searchLink" id="ctl00_ctl40_g_05c5f298_6183_4e7e_be28_f537595f2016_csr_SearchLink" onclick="$getClientControl(this).search($get('ctl00_ctl40_g_05c5f298_6183_4e7e_be28_f537595f2016_csr_sbox').value);" href="javascript: {}">
	<img class="ms-srch-sbLarge-searchImg" id="searchImg" alt="Search" src="/sites/search/_catalogs/theme/Themed/EAD3901A/searchresultui-61174269.themedpng?ctag=4">
	</a>
	<div class="ms-qSuggest-container ms-shadow" id="AutoCompContainer">
	<div id="ctl00_ctl40_g_05c5f298_6183_4e7e_be28_f537595f2016_csr_AutoCompList"></div>
	</div>
	</div>


	</body>
	</html>