benlesh · August 30, 2024 08:37
diff --git a/app.js b/app.js
 var app = angular.module('myApp', []);

 /* Set up a simple controller with a few 
 * examples of common actions a controller function
 * might set up on a $scope. */
 app.controller('MainCtrl', function($scope, someService) {
  
  //set some properties
  $scope.foo = 'foo';
  $scope.bar = 'bar';
  
  
  //add a simple function.
  $scope.test1 = function (){
    $scope.foo = $scope.foo + '!!!';
  };
  
  //set up a $watch.
  $scope.$watch('bar', function (v){
    $scope.baz = v + 'baz';
  });
  
  //make a call to an injected service.
  $scope.test2 = function (){
    //an async call returning a promise that
    //inevitably returns a value to a property.
    someService.someAsyncCall($scope.foo)
      .then(function(data) {
        $scope.fizz = data;
      });
  };
 });


 /* Simple service example. 
 * This is a service created just to use as an example of
 * some simple service that is making some asynchronous call.
 * A real-life example of something like this would be a 
 * service that is making $http or $resource calls, perhaps. */
 app.factory('someService', function ($timeout, $q){
  return {
    
    // simple method to do something asynchronously.
    someAsyncCall: function (x){
      var deferred = $q.defer();
      $timeout(function (){
        deferred.resolve(x + '_async');
      }, 100);
      return deferred.promise;
    }
  };
 });
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
  <!-- jasmine -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/1.3.1/jasmine.js"></script>
  <!-- jasmine's html reporting code and css -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/1.3.1/jasmine-html.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/jasmine/1.3.1/jasmine.css" rel="stylesheet" />
  <!-- angular itself -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js"></script>
  <!-- angular's testing helpers -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular-mocks.js"></script>
  <!-- your angular app code -->
  <script src="app.js"></script>
  <!-- your Jasmine specs (tests) -->
  <script src="specs.js"></script>
 </head>
 <body>
  <!-- bootstrap jasmine! -->
  <script>
  var jasmineEnv = jasmine.getEnv();
  
  // Tell it to add an Html Reporter
  // this will add detailed HTML-formatted results
  // for each spec ran.
  jasmineEnv.addReporter(new jasmine.HtmlReporter());
  
  // Execute the tests!
  jasmineEnv.execute();
  </script>
 </body>
 </html>
diff --git a/specs.js b/specs.js
 describe('Testing a controller', function() {
  var $scope, ctrl, $timeout;
  
  /* declare our mocks out here
   * so we can use them through the scope 
   * of this describe block.
   */
  var someServiceMock;
  
 
  // This function will be called before every "it" block.
  // This should be used to "reset" state for your tests.
  beforeEach(function (){
    // Create a "spy object" for our someService.
    // This will isolate the controller we're testing from
    // any other code.
    // we'll set up the returns for this later 
    someServiceMock = jasmine.createSpyObj('someService', ['someAsyncCall']);
    
    // load the module you're testing.
    module('myApp');
    
    // INJECT! This part is critical
    // $rootScope - injected to create a new $scope instance.
    // $controller - injected to create an instance of our controller.
    // $q - injected so we can create promises for our mocks.
    // _$timeout_ - injected to we can flush unresolved promises.
    inject(function($rootScope, $controller, $q, _$timeout_) {
      // create a scope object for us to use.
      $scope = $rootScope.$new();
  
      // set up the returns for our someServiceMock
      // $q.when('weee') creates a resolved promise to "weee".
      // this is important since our service is async and returns
      // a promise.
      someServiceMock.someAsyncCall.andReturn($q.when('weee'));
      
      // assign $timeout to a scoped variable so we can use 
      // $timeout.flush() later. Notice the _underscore_ trick
      // so we can keep our names clean in the tests.
      $timeout = _$timeout_;
      
      // now run that scope through the controller function,
      // injecting any services or other injectables we need.
      // **NOTE**: this is the only time the controller function
      // will be run, so anything that occurs inside of that
      // will already be done before the first spec.
      ctrl = $controller('MainCtrl', {
        $scope: $scope,
        someService: someServiceMock
      });
    });
  });


  /* Test 1: The simplest of the simple.
   * here we're going to test that some things were 
   * populated when the controller function whas evaluated. */
  it('should start with foo and bar populated', function() {
    
    //just assert. $scope was set up in beforeEach() (above)
    expect($scope.foo).toEqual('foo');
    expect($scope.bar).toEqual('bar');
  });
  
  
  /* Test 2: Still simple.
   * Now let's test a simple function call. */
  it('should add !!! to foo when test1() is called', function (){
    //set up.
    $scope.foo = 'x';
    
    //make the call.
    $scope.test1();
    
    //assert
    expect($scope.foo).toEqual('x!!!');
  });
  
  
  /* Test 3: Testing a $watch()
   * The important thing here is to call $apply() 
   * and THEN test the value it's supposed to update. */
  it('should update baz when bar is changed', function (){
    //change bar
    $scope.bar = 'test';
    
    //$apply the change to trigger the $watch.
    $scope.$apply();
    
    //assert
    expect($scope.baz).toEqual('testbaz');
  });
  
  
  /* Test 4: Testing an asynchronous service call.
     Since we've mocked the service to return a promise
     (just like the original service did), we need to do a little
     trick with $timeout.flush() here to resolve our promise so the
     `then()` clause in our controller function fires. 
     
     This will test to see if the `then()` from the promise is wired up
     properly. */
  it('should update fizz asynchronously when test2() is called', function (){
    // just make the call
    $scope.test2();
    
    // asser that it called the service method.
    expect(someServiceMock.someAsyncCall).toHaveBeenCalled();  
    
    // call $timeout.flush() to flush the unresolved dependency from our
    // someServiceMock.
    $timeout.flush();
    
    // assert that it set $scope.fizz
    expect($scope.fizz).toEqual('weee');    
  });
 });
	var app = angular.module('myApp', []);

	/* Set up a simple controller with a few
	* examples of common actions a controller function
	* might set up on a $scope. */
	app.controller('MainCtrl', function($scope, someService) {

	//set some properties
	$scope.foo = 'foo';
	$scope.bar = 'bar';


	//add a simple function.
	$scope.test1 = function (){
	$scope.foo = $scope.foo + '!!!';
	};

	//set up a $watch.
	$scope.$watch('bar', function (v){
	$scope.baz = v + 'baz';
	});

	//make a call to an injected service.
	$scope.test2 = function (){
	//an async call returning a promise that
	//inevitably returns a value to a property.
	someService.someAsyncCall($scope.foo)
	.then(function(data) {
	$scope.fizz = data;
	});
	};
	});


	/* Simple service example.
	* This is a service created just to use as an example of
	* some simple service that is making some asynchronous call.
	* A real-life example of something like this would be a
	* service that is making $http or $resource calls, perhaps. */
	app.factory('someService', function ($timeout, $q){
	return {

	// simple method to do something asynchronously.
	someAsyncCall: function (x){
	var deferred = $q.defer();
	$timeout(function (){
	deferred.resolve(x + '_async');
	}, 100);
	return deferred.promise;
	}
	};
	});
	<!DOCTYPE html>
	<html>

	<head>
	<!-- jasmine -->
	<script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/1.3.1/jasmine.js"></script>
	<!-- jasmine's html reporting code and css -->
	<script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/1.3.1/jasmine-html.js"></script>
	<link href="//cdnjs.cloudflare.com/ajax/libs/jasmine/1.3.1/jasmine.css" rel="stylesheet" />
	<!-- angular itself -->
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js"></script>
	<!-- angular's testing helpers -->
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular-mocks.js"></script>
	<!-- your angular app code -->
	<script src="app.js"></script>
	<!-- your Jasmine specs (tests) -->
	<script src="specs.js"></script>
	</head>
	<body>
	<!-- bootstrap jasmine! -->
	<script>
	var jasmineEnv = jasmine.getEnv();

	// Tell it to add an Html Reporter
	// this will add detailed HTML-formatted results
	// for each spec ran.
	jasmineEnv.addReporter(new jasmine.HtmlReporter());

	// Execute the tests!
	jasmineEnv.execute();
	</script>
	</body>
	</html>
	describe('Testing a controller', function() {
	var $scope, ctrl, $timeout;

	/* declare our mocks out here
	* so we can use them through the scope
	* of this describe block.
	*/
	var someServiceMock;


	// This function will be called before every "it" block.
	// This should be used to "reset" state for your tests.
	beforeEach(function (){
	// Create a "spy object" for our someService.
	// This will isolate the controller we're testing from
	// any other code.
	// we'll set up the returns for this later
	someServiceMock = jasmine.createSpyObj('someService', ['someAsyncCall']);

	// load the module you're testing.
	module('myApp');

	// INJECT! This part is critical
	// $rootScope - injected to create a new $scope instance.
	// $controller - injected to create an instance of our controller.
	// $q - injected so we can create promises for our mocks.
	// _$timeout_ - injected to we can flush unresolved promises.
	inject(function($rootScope, $controller, $q, _$timeout_) {
	// create a scope object for us to use.
	$scope = $rootScope.$new();

	// set up the returns for our someServiceMock
	// $q.when('weee') creates a resolved promise to "weee".
	// this is important since our service is async and returns
	// a promise.
	someServiceMock.someAsyncCall.andReturn($q.when('weee'));

	// assign $timeout to a scoped variable so we can use
	// $timeout.flush() later. Notice the _underscore_ trick
	// so we can keep our names clean in the tests.
	$timeout = _$timeout_;

	// now run that scope through the controller function,
	// injecting any services or other injectables we need.
	// NOTE: this is the only time the controller function
	// will be run, so anything that occurs inside of that
	// will already be done before the first spec.
	ctrl = $controller('MainCtrl', {
	$scope: $scope,
	someService: someServiceMock
	});
	});
	});


	/* Test 1: The simplest of the simple.
	* here we're going to test that some things were
	* populated when the controller function whas evaluated. */
	it('should start with foo and bar populated', function() {

	//just assert. $scope was set up in beforeEach() (above)
	expect($scope.foo).toEqual('foo');
	expect($scope.bar).toEqual('bar');
	});


	/* Test 2: Still simple.
	* Now let's test a simple function call. */
	it('should add !!! to foo when test1() is called', function (){
	//set up.
	$scope.foo = 'x';

	//make the call.
	$scope.test1();

	//assert
	expect($scope.foo).toEqual('x!!!');
	});


	/* Test 3: Testing a $watch()
	* The important thing here is to call $apply()
	* and THEN test the value it's supposed to update. */
	it('should update baz when bar is changed', function (){
	//change bar
	$scope.bar = 'test';

	//$apply the change to trigger the $watch.
	$scope.$apply();

	//assert
	expect($scope.baz).toEqual('testbaz');
	});


	/* Test 4: Testing an asynchronous service call.
	Since we've mocked the service to return a promise
	(just like the original service did), we need to do a little
	trick with $timeout.flush() here to resolve our promise so the
	`then()` clause in our controller function fires.

	This will test to see if the `then()` from the promise is wired up
	properly. */
	it('should update fizz asynchronously when test2() is called', function (){
	// just make the call
	$scope.test2();

	// asser that it called the service method.
	expect(someServiceMock.someAsyncCall).toHaveBeenCalled();

	// call $timeout.flush() to flush the unresolved dependency from our
	// someServiceMock.
	$timeout.flush();

	// assert that it set $scope.fizz
	expect($scope.fizz).toEqual('weee');
	});
	});