From 602d8e4c47cdfb90c52268c99b72d403774b9f51 Mon Sep 17 00:00:00 2001 From: Christian Williams Date: Wed, 22 Sep 2010 00:25:34 -0700 Subject: [PATCH] Add js syntax highlighting. --- async.html.md | 150 +++++++++++++++++++++------------------ before-and-after.html.md | 125 ++++++++++++++++---------------- css/screen.css | 5 ++ index.html.md | 6 +- matchers.md | 21 +++--- spies.html.md | 100 +++++++++++++------------- 6 files changed, 218 insertions(+), 189 deletions(-) diff --git a/async.html.md b/async.html.md index ba9f851..ecde94a 100644 --- a/async.html.md +++ b/async.html.md @@ -15,87 +15,97 @@ Jasmine allows you to do this with `runs()`, `waits()` and `waitsFor()` blocks. `runs()` blocks by themselves simply run as if they were called directly. The following snippets of code provide similar results: - it('should be a test', function () { - var foo = 0 - foo++; +{% highlight javascript %} +it('should be a test', function () { + var foo = 0 + foo++; - expect(foo).toEqual(1); - }); + expect(foo).toEqual(1); +}); +{% endhighlight %} and - it('should be a test', function () { - runs( function () { - var foo = 0 - foo++; +{% highlight javascript %} +it('should be a test', function () { + runs( function () { + var foo = 0 + foo++; - expect(foo).toEqual(1); - }); - }); + expect(foo).toEqual(1); + }); +}); +{% endhighlight %} Multiple `runs()` blocks in a spec will run serially. For example, - it('should be a test', function () { - runs( function () { - var foo = 0 - foo++; +{% highlight javascript %} +it('should be a test', function () { + runs( function () { + var foo = 0 + foo++; - expect(foo).toEqual(1); - }); - runs( function () { - var bar = 0 - bar++; + expect(foo).toEqual(1); + }); + runs( function () { + var bar = 0 + bar++; - expect(bar).toEqual(1); - }); - }); + expect(bar).toEqual(1); + }); +}); +{% endhighlight %} `runs()` blocks share functional scope -- `this` properties will be common to all blocks, but declared `var`'s will not! - it('should be a test', function () { - runs( function () { - this.foo = 0 - this.foo++; - var bar = 0; - bar++; +{% highlight javascript %} +it('should be a test', function () { + runs( function () { + this.foo = 0 + this.foo++; + var bar = 0; + bar++; - expect(this.foo).toEqual(1); - expect(bar).toEqual(1); - }); - runs( function () { - this.foo++; - var bar = 0 - bar++; + expect(this.foo).toEqual(1); + expect(bar).toEqual(1); + }); + runs( function () { + this.foo++; + var bar = 0 + bar++; - expect(foo).toEqual(2); - expect(bar).toEqual(1); - }); - }); + expect(foo).toEqual(2); + expect(bar).toEqual(1); + }); +}); +{% endhighlight %} #### `waits(timeout)` `runs()` blocks exist so you can test asynchronous processes. The function `waits()` works with `runs()` to provide a naive timeout before the next block is run. You supply a time to wait before the next `runs()` function is executed. For example: - it('should be a test', function () { - runs(function () { - this.foo = 0; - var that = this; - setTimeout(function () { - that.foo++; - }, 250); - }); +{% highlight javascript %} +it('should be a test', function () { + runs(function () { + this.foo = 0; + var that = this; + setTimeout(function () { + that.foo++; + }, 250); + }); - runs(function () { - expect(this.foo).toEqual(0); - }); + runs(function () { + expect(this.foo).toEqual(0); + }); - waits(500); + waits(500); - runs(function () { - expect(this.foo).toEqual(1); - }); - }); + runs(function () { + expect(this.foo).toEqual(1); + }); +}); +{% endhighlight %} What's happening here? @@ -113,21 +123,23 @@ some other operation. But what if you don't know exactly how long you need to wa the provided function returns `true` before continuing with the next block. This may mean waiting an arbitrary period of time, or you may specify a maxiumum period in milliseconds before timing out: - describe('Spreadsheet', function() { - it('should calculate the total asynchronously', function () { - var spreadsheet = new Spreadsheet(); - spreadsheet.fillWith(lotsOfFixureDataValues()); - spreadsheet.asynchronouslyCalculateTotal(); +{% highlight javascript %} +describe('Spreadsheet', function() { + it('should calculate the total asynchronously', function () { + var spreadsheet = new Spreadsheet(); + spreadsheet.fillWith(lotsOfFixureDataValues()); + spreadsheet.asynchronouslyCalculateTotal(); - waitsFor(function() { - return spreadsheet.calculationIsComplete(); - }, "Spreadsheet calculation never completed", 10000); + waitsFor(function() { + return spreadsheet.calculationIsComplete(); + }, "Spreadsheet calculation never completed", 10000); - runs(function () { - expect(spreadsheet.total).toEqual(123456); - }); - }); + runs(function () { + expect(spreadsheet.total).toEqual(123456); }); + }); +}); +{% endhighlight %} In this example, we create a spreadsheet and fill it with some sample data. We then ask the spreadsheet to start calculating its total, which presumably is a slow operation and therefore happens asynchronously. We ask Jasmine to wait until the diff --git a/before-and-after.html.md b/before-and-after.html.md index d72ef02..209aa4c 100644 --- a/before-and-after.html.md +++ b/before-and-after.html.md @@ -7,90 +7,95 @@ A suite can have a `beforeEach()` declaration. It takes a function that is run before each spec. For example: - describe('some suite', function () { +{% highlight javascript %} +describe('some suite', function () { + var suiteWideFoo; - var suiteWideFoo; + beforeEach(function () { + suiteWideFoo = 1; + }); - beforeEach(function () { - suiteWideFoo = 1; - }); - - it('should equal bar', function () { - expect(suiteWideFoo).toEqual(1); - }); - }); + it('should equal bar', function () { + expect(suiteWideFoo).toEqual(1); + }); +}); +{% endhighlight %} A runner can also have `beforeEach()` declarations. Runner `beforeEach()` functions are executed before every spec in all suites, and execute BEFORE suite `beforeEach()` functions. For example: - var runnerWideFoo = []; +{% highlight javascript %} +var runnerWideFoo = []; - beforeEach(function () { - runnerWideFoo.push('runner'); - }); +beforeEach(function () { + runnerWideFoo.push('runner'); +}); - describe('some suite', function () { +describe('some suite', function () { + beforeEach(function () { + runnerWideFoo.push('suite'); + }); - beforeEach(function () { - runnerWideFoo.push('suite'); - }); - - it('should equal bar', function () { - expect(runnerWideFoo).toEqual(['runner', 'suite']); - }); - }); + it('should equal bar', function () { + expect(runnerWideFoo).toEqual(['runner', 'suite']); + }); +}); +{% endhighlight %} #### afterEach Similarly, there is an `afterEach()` declaration. It takes a function that is run after each spec. For example: - describe('some suite', function () { +{% highlight javascript %} +describe('some suite', function () { + var suiteWideFoo; + afterEach(function () { + suiteWideFoo = 0; + }); - var suiteWideFoo; - afterEach(function () { - suiteWideFoo = 0; - }); + it('should equal 1', function () { + expect(suiteWideFoo).toEqual(1); + }); - it('should equal 1', function () { - expect(suiteWideFoo).toEqual(1); - }); - - it('should equal 0 after', function () { - expect(suiteWideFoo).toEqual(0); - }; - }); + it('should equal 0 after', function () { + expect(suiteWideFoo).toEqual(0); + }; +}); +{% endhighlight %} A runner can also have an `afterEach()` declarations. Runner `afterEach()` functions are executed after every spec in all suites, and execute AFTER suite `afterEach()` functions. For example: - var runnerWideFoo = []; +{% highlight javascript %} +var runnerWideFoo = []; - afterEach(function () { - runnerWideFoo.push('runner'); - }); +afterEach(function () { + runnerWideFoo.push('runner'); +}); - describe('some suite', function () { +describe('some suite', function () { + afterEach(function () { + runnerWideFoo.push('suite'); + }); - afterEach(function () { - runnerWideFoo.push('suite'); - }); + it('should be empty', function () { + expect(runnerWideFoo).toEqual([]); + }); - it('should be empty', function () { - expect(runnerWideFoo).toEqual([]); - }); - - it('should be populated after', function () { - expect(runnerWideFoo).toEqual(['suite', 'runner']); - }; - }); + it('should be populated after', function () { + expect(runnerWideFoo).toEqual(['suite', 'runner']); + }; +}); +{% endhighlight %} ### Single-spec After functions A spec may ask Jasmine to execute some code after the spec has finished running; the code will run whether the spec finishes successfully or not. Multiple after functions may be given. - describe('some suite', function () { - it(function () { - var originalTitle = window.title; - this.after(function() { window.title = originalTitle; }); - MyWindow.setTitle("new value"); - expect(window.title).toEqual("new value"); - }); - +{% highlight javascript %} +describe('some suite', function () { + it(function () { + var originalTitle = window.title; + this.after(function() { window.title = originalTitle; }); + MyWindow.setTitle("new value"); + expect(window.title).toEqual("new value"); + }); +{% endhighlight %} diff --git a/css/screen.css b/css/screen.css index c37c00d..5a08a87 100644 --- a/css/screen.css +++ b/css/screen.css @@ -81,6 +81,11 @@ pre,code /* font-size: 1.142em; */ } +pre { + border-left: 2px solid #55862e; + padding-left: 1em; +} + .noul { border-bottom: 0; diff --git a/index.html.md b/index.html.md index 82e0fb5..1a45e2c 100644 --- a/index.html.md +++ b/index.html.md @@ -19,9 +19,9 @@ describe("Jasmine", function() { ## Adding Jasmine to your Rails project {% highlight sh %} - $ gem install jasmine - $ script/generate jasmine - $ rake spec +$ gem install jasmine +$ script/generate jasmine +$ rake spec {% endhighlight %} Jasmine can be run by on a static web page, on your Continuous Integration environment, or with [node.js](http://nodejs.org). diff --git a/matchers.md b/matchers.md index 42251c7..284350c 100644 --- a/matchers.md +++ b/matchers.md @@ -43,15 +43,18 @@ It's extremely easy to create new matchers for your app. A matcher function rece Here's the definition of `toBeLessThan()`: - toBeLessThan: function(expected) { - return this.actual < expected; - }; +{% highlight javascript %} +toBeLessThan: function(expected) { + return this.actual < expected; +}; +{% endhighlight %} To add the matcher to your suite, call `this.addMatchers()` from within a `before` or `it` block. Call it with an object mapping matcher name to function: - beforeEach(function() { - this.addMatchers({ - toBeVisible: function() { return this.actual.isVisible(); } - }); - }); - +{% highlight javascript %} +beforeEach(function() { + this.addMatchers({ + toBeVisible: function() { return this.actual.isVisible(); } + }); +}); +{% endhighlight %} diff --git a/spies.html.md b/spies.html.md index dfb5314..ca52e18 100644 --- a/spies.html.md +++ b/spies.html.md @@ -9,74 +9,78 @@ Jasmine integrates 'spies' that permit many spying, mocking, and faking behavior Here are a few examples: - var Klass = function () { - }; +{% highlight javascript %} +var Klass = function () { +}; - Klass.staticMethod = function (arg) { - return arg; - }; +Klass.staticMethod = function (arg) { + return arg; +}; - Klass.prototype.method = function (arg) { - return arg; - }; +Klass.prototype.method = function (arg) { + return arg; +}; - Klass.prototype.methodWithCallback = function (callback) { - return callback('foo'); - }; +Klass.prototype.methodWithCallback = function (callback) { + return callback('foo'); +}; - ... +... - describe("spy behavior", function() { - it('should spy on a static method of Klass', function() { - spyOn(Klass, 'staticMethod'); - Klass.staticMethod('foo argument'); +describe("spy behavior", function() { + it('should spy on a static method of Klass', function() { + spyOn(Klass, 'staticMethod'); + Klass.staticMethod('foo argument'); - expect(Klass.staticMethod).toHaveBeenCalledWith('foo argument'); - }); + expect(Klass.staticMethod).toHaveBeenCalledWith('foo argument'); + }); - it('should spy on an instance method of a Klass', function() { - var obj = new Klass(); - spyOn(obj, 'method'); - obj.method('foo argument'); + it('should spy on an instance method of a Klass', function() { + var obj = new Klass(); + spyOn(obj, 'method'); + obj.method('foo argument'); - expect(obj.method).toHaveBeenCalledWith('foo argument'); + expect(obj.method).toHaveBeenCalledWith('foo argument'); - var obj2 = new Klass(); - spyOn(obj2, 'method'); - expect(obj2.method).not.toHaveBeenCalled(); - }); + var obj2 = new Klass(); + spyOn(obj2, 'method'); + expect(obj2.method).not.toHaveBeenCalled(); + }); - it('should spy on Klass#methodWithCallback', function() { - var callback = jasmine.createSpy(); - new Klass().methodWithCallback(callback); + it('should spy on Klass#methodWithCallback', function() { + var callback = jasmine.createSpy(); + new Klass().methodWithCallback(callback); - expect(callback).toHaveBeenCalledWith('foo'); - }); - }); + expect(callback).toHaveBeenCalledWith('foo'); + }); +}); +{% endhighlight %} Spies can be very useful for testing AJAX or other asynchronous behaviors that take callbacks by faking the method firing an async call. - var Klass = function () { - }; +{% highlight javascript %} +var Klass = function () { +}; - var Klass.prototype.asyncMethod = function (callback) { - someAsyncCall(callback); - }; +var Klass.prototype.asyncMethod = function (callback) { + someAsyncCall(callback); +}; - ... +... - it('should test async call') { - spyOn(Klass, 'asyncMethod'); - var callback = jasmine.createSpy(); +it('should test async call') { + spyOn(Klass, 'asyncMethod'); + var callback = jasmine.createSpy(); - Klass.asyncMethod(callback); - expect(callback).not.toHaveBeenCalled(); + Klass.asyncMethod(callback); + expect(callback).not.toHaveBeenCalled(); - var someResponseData = 'foo'; - Klass.asyncMethod.mostRecentCall.args[0](someResponseData); - expect(callback).toHaveBeenCalledWith(someResponseData); + var someResponseData = 'foo'; + Klass.asyncMethod.mostRecentCall.args[0](someResponseData); + expect(callback).toHaveBeenCalledWith(someResponseData); - }); +}); +{% endhighlight %} There are spy-specfic matchers that are very handy.