beckettkev/gist:d008d560f9c3dfe91176

## gistfile1.html
<!DOCTYPE html>
<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="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
  <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://cdnjs.cloudflare.com/ajax/libs/jasmine-ajax/3.1.1/mock-ajax.min.js"></script>

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

	The value of Example.Component.Context.ClientID would normally be obtained from our QueryString
	parameters, but we will use this object to do some success and failure spec cases.
    */
    var Example = {
      Component: {}
    };
    Example.Component.Context = {
      ClientID: 12345
    };

    /*
    	Ok, that's enough setting things up, here we will
    	write a quick script, which uses Knockout to write out
    	a business description to a view model.
    */
    Example.Component.BusinessDescription = function() {
	    var _config = {
	        source:'Example.Component.BusinessDescription'
	    };

 	    /*
 	    	Simple Knockout view model object that shows if we have an error
 	    	or a description if not.
	    */
	    var _viewModel = {
	    	error:ko.observable(false),
	    	description:ko.observable("")
	    };

	    // these functions are PRIVATE
	    // data comes from the AJAX callback
	    var succeedCallback = function(data) {
	        if (data === null || data === undefined || data.value === undefined || data.value === null) {
	          _viewModel.error(true);
	          return;
	        }

	 	// the data is good, save the description
	        _viewModel.description(data.value);
	    };

	    var errorCallback = function(err) {
	        _viewModel.error(true);
	    };

	    var composeDescriptionEndpointUrl = function() {
            	// we don't actually call this in our spec, but we do when we normally run this script
	        var endpointUrl = "http://localhost/api/values";

	        return endpointUrl;
	    };

	    function init() {
	        if (Example.Component.Context.ClientID === "") {
	          _viewModel.error(true);

	          return;
            	}

	        _viewModel.error(false);

	        $.ajax({
	                url: composeDescriptionEndpointUrl(),
	                data: {
	                      clientId: 12345
	                }
        	})
	        .done(function(data) {
	               if (console && console.log)
	                   console.log("half way there, living on a prayer");

	               succeedCallback(data);
	        })
	        .fail(function(data) {
	               if (console && console.log)
	                   console.log("you've got to hold on, to what you've got");

	               errorCallback(data);
	        });
	     }

	     init();

	     return _viewModel;
	};

    /*
    Now are script is finished, we can start looking at the Jasmine
    Suite's and Specs.

    So let's start, with a mock data response, which we use in our
    fake Async Request.
    */

    var mockResponse = {
      clientID12345: {
        success: {
          status: 200,
          responseText: {
            clientID: 12345,
            value: "This business was first founded in 1945. Originally based in a small mining town outside of Sheffield, it quickly grew to a dedicated team of 500."
          }
        }
      },
      clientID54321: {
        success: {
          status: 200,
          responseText: {
            clientID: 54321,
            value: ""
          }
        }
      },
      clientID90210: {
        success: {
          status: 200,
          responseText: {
            clientID: 90210,
            value: null
          }
        }
      },
      error: {
          status: 500,
          responseText: {
            clientID: 11111,
            value: null
          }
        }
    };

    /*
    	Jasmine Suite Number One - Showing how to work with a Mock Ajax Call
    */
    describe('Business Description - Ajax Suite', function() {
      var request, bd;

      // First of all setup a fake ajax call and initiate the Business Description
      beforeEach(function() {
        jasmine.Ajax.install();
        bd = Example.Component.BusinessDescription();
        request = jasmine.Ajax.requests.mostRecent();
      });

      afterEach(function() {
        jasmine.Ajax.uninstall();
      });

      // Spec Number 1 - Ajax URL validation
      it("should use the correct url", function() {
        expect(request.url).toBe('http://localhost/api/values?clientId=12345');
      });

      // Spec Number 2 - checking the mock data object, so that Client 12345 has a description
      it("should respond with the right data for 12345", function() {
        request.respondWith(mockResponse.clientID12345.success);
        expect(request.responseText.clientID).toBe(12345);
        expect(request.responseText.value).not.toBeNull();
      });

      // Spec Number 3 - checking the mock data object, so that Client 54321 has an empty description
      it("Should respond with empty data for 54321", function() {
        request.respondWith(mockResponse.clientID54321.success);
        expect(request.responseText.clientID).toBe(54321);
        expect(request.responseText.value).toBe("");
      });

      // Spec Number 4 - checking the mock data object, so that Client 90210 has a null description
      it("Should respond with null data for 90210", function() {
        request.respondWith(mockResponse.clientID90210.success);
        expect(request.responseText.clientID).toBe(90210);
        expect(request.responseText.value).toBeNull();
      });

      // Spec Number 5 - checking the mock data object, handling error responses
      it("Should handle failure", function() {
        request.respondWith(mockResponse.error);
        expect(request.responseText.clientID).toBe(11111);
        expect(request.status).toEqual(500);
      });

    });

    /*
    	Jasmine Suite Number Two - Showing how to work with Knockout
    */
    describe('Business Description - Knockout Suite', function() {

      var d, bd;

      beforeEach(function() {
      	//Use the jQuery deferred object to mock into the ajax call
        d = $.Deferred();
        spyOn($, 'ajax').and.returnValue(d.promise());
        //Initiate the script
        bd = Example.Component.BusinessDescription();
      });

      it("Should have not have a null description", function() {
      	//The equivilent of parsing in this JSON object, into our script at the Ajax success delegate
        d.resolve(mockResponse.clientID12345.success.responseText);

        //Now our script description should have a value (because we are using clientID12345)
        expect(bd.description()).not.toBeNull();
      });

      it("Should have have a null description", function() {
        d.resolve(mockResponse.clientID90210.success.responseText);

        expect(bd.description()).not.toBeNull();
      });

      it("Should have have a value in the description", function() {
        d.resolve(mockResponse.clientID12345.success.responseText);

        expect(bd.description()).not.toBe("");
      });

    })

  </script>


</head>

<body>
</body>

</html>
	<!DOCTYPE html>
	<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="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
	<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://cdnjs.cloudflare.com/ajax/libs/jasmine-ajax/3.1.1/mock-ajax.min.js"></script>

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

	The value of Example.Component.Context.ClientID would normally be obtained from our QueryString
	parameters, but we will use this object to do some success and failure spec cases.
	*/
	var Example = {
	Component: {}
	};
	Example.Component.Context = {
	ClientID: 12345
	};

	/*
	Ok, that's enough setting things up, here we will
	write a quick script, which uses Knockout to write out
	a business description to a view model.
	*/
	Example.Component.BusinessDescription = function() {
	var _config = {
	source:'Example.Component.BusinessDescription'
	};

	/*
	Simple Knockout view model object that shows if we have an error
	or a description if not.
	*/
	var _viewModel = {
	error:ko.observable(false),
	description:ko.observable("")
	};

	// these functions are PRIVATE
	// data comes from the AJAX callback
	var succeedCallback = function(data) {
	if (data === null \|\| data === undefined \|\| data.value === undefined \|\| data.value === null) {
	_viewModel.error(true);
	return;
	}

	// the data is good, save the description
	_viewModel.description(data.value);
	};

	var errorCallback = function(err) {
	_viewModel.error(true);
	};

	var composeDescriptionEndpointUrl = function() {
	// we don't actually call this in our spec, but we do when we normally run this script
	var endpointUrl = "http://localhost/api/values";

	return endpointUrl;
	};

	function init() {
	if (Example.Component.Context.ClientID === "") {
	_viewModel.error(true);

	return;
	}

	_viewModel.error(false);

	$.ajax({
	url: composeDescriptionEndpointUrl(),
	data: {
	clientId: 12345
	}
	})
	.done(function(data) {
	if (console && console.log)
	console.log("half way there, living on a prayer");

	succeedCallback(data);
	})
	.fail(function(data) {
	if (console && console.log)
	console.log("you've got to hold on, to what you've got");

	errorCallback(data);
	});
	}

	init();

	return _viewModel;
	};

	/*
	Now are script is finished, we can start looking at the Jasmine
	Suite's and Specs.

	So let's start, with a mock data response, which we use in our
	fake Async Request.
	*/

	var mockResponse = {
	clientID12345: {
	success: {
	status: 200,
	responseText: {
	clientID: 12345,
	value: "This business was first founded in 1945. Originally based in a small mining town outside of Sheffield, it quickly grew to a dedicated team of 500."
	}
	}
	},
	clientID54321: {
	success: {
	status: 200,
	responseText: {
	clientID: 54321,
	value: ""
	}
	}
	},
	clientID90210: {
	success: {
	status: 200,
	responseText: {
	clientID: 90210,
	value: null
	}
	}
	},
	error: {
	status: 500,
	responseText: {
	clientID: 11111,
	value: null
	}
	}
	};

	/*
	Jasmine Suite Number One - Showing how to work with a Mock Ajax Call
	*/
	describe('Business Description - Ajax Suite', function() {
	var request, bd;

	// First of all setup a fake ajax call and initiate the Business Description
	beforeEach(function() {
	jasmine.Ajax.install();
	bd = Example.Component.BusinessDescription();
	request = jasmine.Ajax.requests.mostRecent();
	});

	afterEach(function() {
	jasmine.Ajax.uninstall();
	});

	// Spec Number 1 - Ajax URL validation
	it("should use the correct url", function() {
	expect(request.url).toBe('http://localhost/api/values?clientId=12345');
	});

	// Spec Number 2 - checking the mock data object, so that Client 12345 has a description
	it("should respond with the right data for 12345", function() {
	request.respondWith(mockResponse.clientID12345.success);
	expect(request.responseText.clientID).toBe(12345);
	expect(request.responseText.value).not.toBeNull();
	});

	// Spec Number 3 - checking the mock data object, so that Client 54321 has an empty description
	it("Should respond with empty data for 54321", function() {
	request.respondWith(mockResponse.clientID54321.success);
	expect(request.responseText.clientID).toBe(54321);
	expect(request.responseText.value).toBe("");
	});

	// Spec Number 4 - checking the mock data object, so that Client 90210 has a null description
	it("Should respond with null data for 90210", function() {
	request.respondWith(mockResponse.clientID90210.success);
	expect(request.responseText.clientID).toBe(90210);
	expect(request.responseText.value).toBeNull();
	});

	// Spec Number 5 - checking the mock data object, handling error responses
	it("Should handle failure", function() {
	request.respondWith(mockResponse.error);
	expect(request.responseText.clientID).toBe(11111);
	expect(request.status).toEqual(500);
	});

	});

	/*
	Jasmine Suite Number Two - Showing how to work with Knockout
	*/
	describe('Business Description - Knockout Suite', function() {

	var d, bd;

	beforeEach(function() {
	//Use the jQuery deferred object to mock into the ajax call
	d = $.Deferred();
	spyOn($, 'ajax').and.returnValue(d.promise());
	//Initiate the script
	bd = Example.Component.BusinessDescription();
	});

	it("Should have not have a null description", function() {
	//The equivilent of parsing in this JSON object, into our script at the Ajax success delegate
	d.resolve(mockResponse.clientID12345.success.responseText);

	//Now our script description should have a value (because we are using clientID12345)
	expect(bd.description()).not.toBeNull();
	});

	it("Should have have a null description", function() {
	d.resolve(mockResponse.clientID90210.success.responseText);

	expect(bd.description()).not.toBeNull();
	});

	it("Should have have a value in the description", function() {
	d.resolve(mockResponse.clientID12345.success.responseText);

	expect(bd.description()).not.toBe("");
	});

	})

	</script>


	</head>

	<body>
	</body>

	</html>