petebacondarwin/app.js

## app.js
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

## appSpec.js
describe('Testing a Hello World controller', function() {
  var $scope, ctrl;

  //you need to indicate your module in a test
  beforeEach(module('plunker'));
  beforeEach(inject(function($rootScope, $controller) {
    $scope = $rootScope.$new();
    ctrl = $controller('MainCtrl', {
      $scope: $scope
    });
  }));

  it('should say hallo to the World', function() {
    expect($scope.name).toEqual('World');
  });
});

## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngularJS test</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://raw.github.com/pivotal/jasmine/master/lib/jasmine-core/jasmine.js"></script>
  <script src="https://raw.github.com/pivotal/jasmine/master/lib/jasmine-core/jasmine-html.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="http://code.angularjs.org/1.0.2/angular-mocks.js"></script>
  <script src="app.js"></script>
  <script src="appSpec.js"></script>
</head>
<body>
<script>

// KICK OFF JASMINE
var jasmineEnv = jasmine.getEnv();
var trivialReporter = new jasmine.TrivialReporter();

jasmineEnv.addReporter(trivialReporter);

jasmineEnv.specFilter = function(spec) {
  return trivialReporter.specFilter(spec);
};

jasmineEnv.execute();
</script>

</body>
</html>

## plunker.json
{
  "tags": ["angularjs", "jasmine"]
}

## style.css
body { background-color: #eeeeee; padding: 0; margin: 5px; overflow-y: scroll; }

#TrivialReporter { padding: 8px 13px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow-y: scroll; background-color: white; font-family: "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif; /*.resultMessage {*/ /*white-space: pre;*/ /*}*/ }
#TrivialReporter a:visited, #TrivialReporter a { color: #303; }
#TrivialReporter a:hover, #TrivialReporter a:active { color: blue; }
#TrivialReporter .run_spec { float: right; padding-right: 5px; font-size: .8em; text-decoration: none; }
#TrivialReporter .banner { color: #303; background-color: #fef; padding: 5px; }
#TrivialReporter .logo { float: left; font-size: 1.1em; padding-left: 5px; }
#TrivialReporter .logo .version { font-size: .6em; padding-left: 1em; }
#TrivialReporter .runner.running { background-color: yellow; }
#TrivialReporter .options { text-align: right; font-size: .8em; }
#TrivialReporter .suite { border: 1px outset gray; margin: 5px 0; padding-left: 1em; }
#TrivialReporter .suite .suite { margin: 5px; }
#TrivialReporter .suite.passed { background-color: #dfd; }
#TrivialReporter .suite.failed { background-color: #fdd; }
#TrivialReporter .spec { margin: 5px; padding-left: 1em; clear: both; }
#TrivialReporter .spec.failed, #TrivialReporter .spec.passed, #TrivialReporter .spec.skipped { padding-bottom: 5px; border: 1px solid gray; }
#TrivialReporter .spec.failed { background-color: #fbb; border-color: red; }
#TrivialReporter .spec.passed { background-color: #bfb; border-color: green; }
#TrivialReporter .spec.skipped { background-color: #bbb; }
#TrivialReporter .messages { border-left: 1px dashed gray; padding-left: 1em; padding-right: 1em; }
#TrivialReporter .passed { background-color: #cfc; display: none; }
#TrivialReporter .failed { background-color: #fbb; }
#TrivialReporter .skipped { color: #777; background-color: #eee; display: none; }
#TrivialReporter .resultMessage span.result { display: block; line-height: 2em; color: black; }
#TrivialReporter .resultMessage .mismatch { color: black; }
#TrivialReporter .stackTrace { white-space: pre; font-size: .8em; margin-left: 10px; max-height: 5em; overflow: auto; border: 1px inset red; padding: 1em; background: #eef; }
#TrivialReporter .finished-at { padding-left: 1em; font-size: .6em; }
#TrivialReporter.show-passed .passed, #TrivialReporter.show-skipped .skipped { display: block; }
#TrivialReporter #jasmine_content { position: fixed; right: 100%; }
#TrivialReporter .runner { border: 1px solid gray; display: block; margin: 5px 0; padding: 2px 0 2px 10px; }
	var app = angular.module('plunker', []);

	app.controller('MainCtrl', function($scope) {
	$scope.name = 'World';
	});
	describe('Testing a Hello World controller', function() {
	var $scope, ctrl;

	//you need to indicate your module in a test
	beforeEach(module('plunker'));
	beforeEach(inject(function($rootScope, $controller) {
	$scope = $rootScope.$new();
	ctrl = $controller('MainCtrl', {
	$scope: $scope
	});
	}));

	it('should say hallo to the World', function() {
	expect($scope.name).toEqual('World');
	});
	});
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>AngularJS test</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://raw.github.com/pivotal/jasmine/master/lib/jasmine-core/jasmine.js"></script>
	<script src="https://raw.github.com/pivotal/jasmine/master/lib/jasmine-core/jasmine-html.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
	<script src="http://code.angularjs.org/1.0.2/angular-mocks.js"></script>
	<script src="app.js"></script>
	<script src="appSpec.js"></script>
	</head>
	<body>
	<script>

	// KICK OFF JASMINE
	var jasmineEnv = jasmine.getEnv();
	var trivialReporter = new jasmine.TrivialReporter();

	jasmineEnv.addReporter(trivialReporter);

	jasmineEnv.specFilter = function(spec) {
	return trivialReporter.specFilter(spec);
	};

	jasmineEnv.execute();
	</script>

	</body>
	</html>
	body { background-color: #eeeeee; padding: 0; margin: 5px; overflow-y: scroll; }

	#TrivialReporter { padding: 8px 13px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow-y: scroll; background-color: white; font-family: "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif; /.resultMessage {/ /white-space: pre;/ /}/ }
	#TrivialReporter a:visited, #TrivialReporter a { color: #303; }
	#TrivialReporter a:hover, #TrivialReporter a:active { color: blue; }
	#TrivialReporter .run_spec { float: right; padding-right: 5px; font-size: .8em; text-decoration: none; }
	#TrivialReporter .banner { color: #303; background-color: #fef; padding: 5px; }
	#TrivialReporter .logo { float: left; font-size: 1.1em; padding-left: 5px; }
	#TrivialReporter .logo .version { font-size: .6em; padding-left: 1em; }
	#TrivialReporter .runner.running { background-color: yellow; }
	#TrivialReporter .options { text-align: right; font-size: .8em; }
	#TrivialReporter .suite { border: 1px outset gray; margin: 5px 0; padding-left: 1em; }
	#TrivialReporter .suite .suite { margin: 5px; }
	#TrivialReporter .suite.passed { background-color: #dfd; }
	#TrivialReporter .suite.failed { background-color: #fdd; }
	#TrivialReporter .spec { margin: 5px; padding-left: 1em; clear: both; }
	#TrivialReporter .spec.failed, #TrivialReporter .spec.passed, #TrivialReporter .spec.skipped { padding-bottom: 5px; border: 1px solid gray; }
	#TrivialReporter .spec.failed { background-color: #fbb; border-color: red; }
	#TrivialReporter .spec.passed { background-color: #bfb; border-color: green; }
	#TrivialReporter .spec.skipped { background-color: #bbb; }
	#TrivialReporter .messages { border-left: 1px dashed gray; padding-left: 1em; padding-right: 1em; }
	#TrivialReporter .passed { background-color: #cfc; display: none; }
	#TrivialReporter .failed { background-color: #fbb; }
	#TrivialReporter .skipped { color: #777; background-color: #eee; display: none; }
	#TrivialReporter .resultMessage span.result { display: block; line-height: 2em; color: black; }
	#TrivialReporter .resultMessage .mismatch { color: black; }
	#TrivialReporter .stackTrace { white-space: pre; font-size: .8em; margin-left: 10px; max-height: 5em; overflow: auto; border: 1px inset red; padding: 1em; background: #eef; }
	#TrivialReporter .finished-at { padding-left: 1em; font-size: .6em; }
	#TrivialReporter.show-passed .passed, #TrivialReporter.show-skipped .skipped { display: block; }
	#TrivialReporter #jasmine_content { position: fixed; right: 100%; }
	#TrivialReporter .runner { border: 1px solid gray; display: block; margin: 5px 0; padding: 2px 0 2px 10px; }