Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

copious documentation and examples, following tim's lead

  • Loading branch information...
commit 6504f7ac7f25c5648696cea403783dfac07284c7 1 parent 3a278fe
Nick Kallen authored
68 EXAMPLE.html
View
@@ -0,0 +1,68 @@
+<html>
+ <!--
+ This file is a fully-functioning example test case. Try opening this file in Firefox, Safari,
+ or Internet Explorer to see what a running test looks like.
+ This file demonstrates the the components involved in writing a simple test, such as:
+ * The necessary HTML to run a test (with the required <script> and <link rel="stylesheet"> tags),
+ * A "custom matcher" (i.e., a custom assertion) to make your tests more readable,
+ * And, a simple test with the necessary boiler-plate code to get you up and running.
+ Typically, these components are separated out into multiple files. To see what a more typical suite
+ of tests look like, look at the larger example in the examples/ directory.
+ -->
+ <head>
+ <!-- These are all of the necessary javascript and css files required to run your tests -->
+ <script src="lib/jquery-1.2.3.js"></script>
+ <script src="lib/jquery.fn.js"></script>
+ <script src="lib/jquery.print.js"></script>
+ <script src="lib/screw.builder.js"></script>
+ <script src="lib/screw.matchers.js"></script>
+ <script src="lib/screw.events.js"></script>
+ <script src="lib/screw.behaviors.js"></script>
+ <link rel="stylesheet" href="lib/screw.css">
+
+ <script type="text/javascript">
+ // Here is the system under test (SUT)--that is, your application code that you would like
+ // to test.
+ function foo() {
+ return 2;
+ }
+ </script>
+
+ <script type="text/javascript">
+ // Here is a Custom Matcher. A custom matcher is a custom assertion,
+ // tailored to your application; these help to make your tests more readable.
+ Screw.Matchers["be_even"] = {
+ match: function(expected, actual) {
+ return actual % 2 == 0;
+ },
+ failure_message: function(expected, actual, not) {
+ return 'expected ' + $.print(actual) + (not ? ' not' : '') + ' to be even';
+ }
+ }
+ </script>
+
+ <script type="text/javascript">
+ // Here is a sample test. Note that all tests are wrapped in
+ // "Screw.Unit(function() { ... })".
+ Screw.Unit(function() {
+ // Tests are organized into 'describes' and 'its', following the style of RSpec.
+ describe("foo", function() {
+ it("returns 2", function() {
+ // 'equal' is one among many matchers provided with the Screw.Unit distribution. It
+ // is smart enough to compare arrays, objects, and primitives.
+ expect(foo()).to(equal, 2);
+ });
+ });
+
+ describe("an undefined variable", function() {
+ // Here is a use of the custom matcher defined above.
+ it("is not defined", function() {
+ expect(2).to(be_even);
+ expect(3).to_not(be_even);
+ });
+ });
+ });
+ </script>
+ </head>
+ <body></body>
+</html>
22 LICENSE
View
@@ -0,0 +1,22 @@
+Copyright (c) 2008 Nick Kallen
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
246 README.markdown
View
@@ -1,14 +1,14 @@
-Screw.Unit is a Behavior-Driven Testing Framework for Javascript written by Nathan Sobo and Nick Kallen. It features nested describes. Its goals are to provide:
+Screw.Unit is a Behavior-Driven Testing Framework for Javascript. It features nested describes. Its goals are to provide:
* a DSL for elegant, readable, organized specs;
-* an interactive runner which can execute focused specs and describes;
+* an interactive runner that can execute focused specs and describes;
* and brief, extensible source-code.
# What it is
![Test Runner](http://s3.amazonaws.com/assets.pivotallabs.com/87/original/runner.png)
-The testing language is inspired by JSpec (and Rspec, obviously). Consider,
+The testing language is closure-based. Consider,
describe("Matchers", function() {
it("invokes the provided matcher on a call to expect", function() {
@@ -17,7 +17,7 @@ The testing language is inspired by JSpec (and Rspec, obviously). Consider,
});
});
-A key feature of Screw.Unit are nested `describes` and the cascading `before` behavior that entails:
+A key feature of Screw.Unit are nested `describes` and the cascading `before` (and `after`) behavior that entails:
describe("a nested describe", function() {
var invocations = [];
@@ -36,12 +36,213 @@ A key feature of Screw.Unit are nested `describes` and the cascading `before` be
});
});
});
-
+
+# The Runner
+
The Screw.Unit runner is pretty fancy, supporting focused `describes` and focused `its`:
![Focused Runner](http://s3.amazonaws.com/assets.pivotallabs.com/86/original/focused.png)
-You can [download the source](http://github.com/nkallen/screw-unit/tree/master) from Github. Please see the included spec (`screwunit_spec.js`) to get up and running.
+Click on a `describe` or `it` to run just those tests.
+
+# Global Befores and Afters
+
+A global `before` is a `before` block run before all tests in a test suite, regardless of their nesting. This is often useful to reset global variables, or blank-out DOM nodes before each test is run. Put this at the top of the your suite file or in your spec helper.
+
+ Screw.Unit(function() {
+ before(function() { ... });
+ });
+
+Note that you can have any number of `Screw.Unit(...)` blocks in one file. Thus, you can have multiple global `befores` and `afters`.
+
+# Custom Matchers
+
+A custom matcher is a custom assertion specifically tailored to your application. These are helpful in increasing the readability and declarativity of your tests. To create a custom matcher, fill in the blanks for this code:
+
+ Screw.Matchers["be_even"] = {
+ match: function(expected, actual) {
+ return actual % 2 == 0;
+ },
+ failure_message: function(expected, actual, not) {
+ return 'expected ' + $.print(actual) + (not ? ' not' : '') + ' to be even';
+ }
+ }
+
+You can invoke this matcher as follows: `expect(2).to(be_even)`.
+
+# The Anatomy of Test Infrastructure
+
+Typical test infrastructure spans multiple files:
+
+* A `suite.html` file that has the necessary html, script tags, and link tags, to include your source code as well as the test infrastructure.
+* A `spec_helper.js` file with global `before` and `after` blocks.
+* A set of custom matchers.
+* Your individual tests.
+
+The file structure will typically look like:
+
+ spec/
+ suite.html
+ spec_helper.js
+ matchers/
+ a_matcher.js
+ another_matcher.js
+ models/
+ a_spec.js
+ another_spec.js
+ views/
+ yet_another_spec.js
+
+The `models` and `views` directories are here only for comparison. As a general rule, mirror the file structure of your source code in your spec directory. For example, if you have an MVC application and you organize your source code into `models`, `views`, and `controllers` directories, have parallel directories in your spec/ directory, with tests for your models, views, and controllers in their respective directories.
+
+# Writing Good Tests
+
+A great test maximizes these features:
+
+* it provides **documentation**, explaining the intended functioning of the system as well as how the source code works;
+* it supports **ongoing development**, as you bit-by-bit write a failing test and make it pass;
+* it supports **refactoring** and **prevents regression**;
+* and it **requires little modification** as the implementation of the system changes, especially changes to unrelated code.
+
+This section focuses principally on tests as documentation. **To provide documentation, as well as support future modification, a test should be readable and well organized.** Here are some recommendations on how to do it.
+
+## Use Nested Describes to Express Context
+
+Often, when you test a system (a function, an object), it behaves differently in different contexts. Use **nested** describes liberally to express the context under which you make an assertion.
+
+ describe("Caller#prioritize", function() {
+ describe("when there are two callers in the queue", function() {
+ describe("and one caller has been waiting longer than another", function() {
+ ...
+ });
+ });
+ });
+
+In addition to using nested describes to express context, use them to organize tests by the structural properties of your source code and programming language. In Javascript this is typically prototype and function. A parent describe for a prototype contains nested describes for each of its methods. If you have cross-cutting concerns (e.g., related behavior that spans across methods or prototypes), use a describe to group them conceptually.
+
+ describe("Car", function() {
+ describe("#start", function() {
+ });
+
+ describe("#stop", function() {
+ });
+
+ describe("callbacks", function() {
+ describe("after_purchase", function() {
+ });
+ });
+
+ describe("logging", function() {
+ });
+ });
+
+In this example, one parent `describe` is used for all `Car` behavior. There is a describe for each method. Finally, cross-cutting concerns like callbacks and logging are grouped because of their conceptual affinity.
+
+# Test Size
+
+Individual tests should be short and sweet. It is sometimes recommended to make only one assertion per test:
+
+ it("chooses the caller who has been waiting the longest", function() {
+ expect(Caller.prioritize()).to(equal, caller_waiting_the_longest);
+ });
+
+According to some, the ideal test is one line of code. In practice, it may be excessive to divide your tests to be this small. At ten lines of code (or more), a test is difficult to read quickly. Be pragmatic, bearing in mind the aims of testing.
+
+Although one assertion per test is a good rule of thumb, feel free to violate the rule if equal clarity and better terseness is achievable:
+
+ it("returns the string representation of the boolean", function() {
+ expect($.print(true)).to(equal, 'true');
+ expect($.print(false)).to(equal, 'false');
+ });
+
+Two tests would be overkill in this example.
+
+## Variable Naming
+
+Name variables descriptively, especially ones that will become expected values in assertions. `caller_waiting_the_longest` is better than `c1`.
+
+## Dividing code between tests and `befores`
+
+If there is only one line of setup and it is used in only one test, it may be better to include the setup in the test itself:
+
+ it("decrements the man's luck by 5", function() {
+ var man = new Man({luck: 5});
+
+ cat.cross_path(man);
+ expect(man.luck()).to(equal, 0);
+ });
+
+But in general, it's nice to keep setup code in `before` blocks, especially if the setup can be shared across tests.
+
+ describe('Man', function() {
+ var man;
+ before(function() {
+ man = new Man({luck: 5});
+ });
+
+ describe('#decrement_luck', function() {
+ it("decrements the luck field by the given amount", function() {
+ man.decrement_luck(3);
+ expect(man.luck()).to(equal, 2)
+ });
+ });
+ ...
+ });
+
+## Preconditions
+
+It is ideal, if there is any chance that your preconditions are non-obvious, to make precondition asserts in your test. The last example, were it more complicated, might be better written:
+
+ it("decrements the luck field by the given amount", function() {
+ expect(man.luck()).to(equal, 5);
+
+ man.decrement_luck(3);
+ expect(man.luck()).to(equal, 2)
+ });
+
+Whitespace, as seen here, can be helpful in distinguishing setup and preconditions from the system under test (SUT) and its assertions. It is nice to be consistent in your use of whitespace (e.g., "always follow a group of preconditions by a newline"). But it is better to use whitespace as makes the most sense given the context. As with everything in life, do it consciously and deliberately, but change your mind frequently.
+
+## Behavioral Testing
+
+Behavioral testing, that is, asserting that certain functions are called rather than certain values returned, is best done with closures. The dynamic nature of JavaScript makes mocking frameworks mostly unnecessary.
+
+ it("invokes #decrement_luck", function() {
+ var decrement_luck_was_called = false;
+ man.decrement_luck = function(amount) {
+ decrement_luck_was_called = true;
+ });
+
+ cat.cross_path(man);
+ expect(decrement_luck_was_called).to(equal, true);
+ });
+
+# How to Test the DOM
+
+The simplest way to test the DOM is to have a special DOM node in your `suite.html` file. Have all tests insert nodes into this node; have a global `before` reset the node between tests.
+
+In `suite.html`:
+
+ <div id="dom_test"></div>
+
+In `spec_helper.js`:
+
+ Screw.Unit(function() {
+ before(function() {
+ document.getElementById('dom_test').innerHTML = ''; // but use your favorite JS library here.
+ });
+ });
+
+In `some_spec.js`:
+
+ describe("something that manipulates the DOM", function() {
+ it("is effortless to test!", function() {
+ var dom_test = document.getElementById('dom_test');
+ dom_test.innerHTML = 'awesome';
+ expect(dom_test.innerHTML).to(equal, 'awesome');
+ });
+ });
+
+A Javascript library like jQuery, Prototype, or YUI is a essential for testing events.
# Implementation Details
@@ -75,22 +276,6 @@ Bind behaviors by passing a hash (see the previous example). Using CSS3 selector
$('.describe, .it').fn({...}); // applies to both describe and its
$('.describe .describe').fn({...}); // applies to nested describes only
-A typical Concrete Javascript Application is divided into 4 aspects:
-
-* a DOM data model,
-* CSS bound to DOM elements,
-* asynchronous events bound to DOM elements (`click`, `mouseover`), etc.,
-* synchronous behaviors bound to DOM elements (`run` and `parent` in the above example).
-
-The Concrete style is particularly well-suited to Screw.Unit; to add the ability to run a focused spec, we simply bind a click event to an `it` or a `describe`, which runs itself:
-
- $('.describe, .it')
- .click(function() {
- $(this).fn('run');
- })
-
-Anyway, more details about Effen / Concrete Javascript in a later post.
-
# Extensibility
Screw.Unit is designed from the ground-up to be extensible. For example, to add custom logging, simply subscribe to certain events:
@@ -101,7 +286,22 @@ Screw.Unit is designed from the ground-up to be extensible. For example, to add
.bind('passed', function() {...})
.bind('failed', function(e, reason) {...})
+There are also events for the `loading` and `loaded` test code code, as well as just `before` and just `after` all tests are run:
+
+ $(Screw)
+ .bind('loading', function() {...})
+ .bind('loaded', function() {...})
+ .bind('before', function() {...})
+ .bind('after', function() {...})
+
+# Download
+
+You can [download the source](http://github.com/nkallen/screw-unit/tree/master) from Github. There is are plenty of examples in the distribution.
+
# Thanks to
* Nathan Sobo
-* Yehuda Katz
+* Yehuda Katz
+* Brian Takita
+* Aman Gupta
+* Tim Connor
2  TODO
View
@@ -1,2 +0,0 @@
-need a way to do global before and afters
-need to investigate race condition with data store
50 base_example.html
View
@@ -1,50 +0,0 @@
-<html>
- <head>
- <script src="lib/jquery-1.2.3.js"></script>
- <script src="lib/jquery.fn.js"></script>
- <script src="lib/jquery.print.js"></script>
- <script src="lib/screw.builder.js"></script>
- <script src="lib/screw.matchers.js"></script>
- <script src="lib/screw.events.js"></script>
- <script src="lib/screw.behaviors.js"></script>
- <link rel="stylesheet" href="lib/screw.css">
- <script type="text/javascript">
- //Here be your code. Would likely be an external .js file.
- function foo(){
- return "bar";
- }
- </script>
-
- <script type="text/javascript">
- //Here be your custom matchers. Would likely be in an external file?
- //This is a sketchy example it actually chokes, but the browser returns
- //its own error message. This means the to_not case doesn't work.
- Screw.Matchers["be_defined"] = {
- match: function(expected, actual) {
- return typeof actual != "undefined"
- },
- failure_message: function(expected, actual, not) {
- return ''//No point in getting fancy, browser returns own message.
- }
- }
- //Here be your specs/behaviors. Would likely be in an external file?
- //See the full self-speccing suite.html for detailed example.
- Screw.Unit(function() {
- describe("foo", function() {
- it("is defined", function() {
- expect(foo).to(be_defined);
- });
- it("returns bar", function() {
- expect(foo()).to(equal, "bar");
- });
- });
- describe("baz", function() {
- it("is not defined", function() {
- expect(baz).to(be_defined);
- });
- });
- });
- </script>
- </head>
- <body></body>
-</html>
5 example/models/cat.js
View
@@ -0,0 +1,5 @@
+function Cat(options) {
+ this.cross_path = function(man) {
+ if (options.color == 'black') man.decrement_luck(5);
+ };
+}
17 example/models/man.js
View
@@ -0,0 +1,17 @@
+function Man(options) {
+ var luck = options.luck;
+
+ this.decrement_luck = function(delta) {
+ luck = Math.max(0, luck - delta);
+ };
+ this.luck = function() {
+ return luck;
+ };
+ this.render = function() {
+ return $('<ul class="man">')
+ .append('<li class="hair">')
+ .click(function() {
+ $(this).children('.hair').remove();
+ });
+ };
+}
8 example/spec/matchers/have.js
View
@@ -0,0 +1,8 @@
+Screw.Matchers["have"] = {
+ match: function(expected, actual) {
+ return actual.find(expected).length > 0;
+ },
+ failure_message: function(expected, actual, not) {
+ return 'expected ' + $.print(actual) + (not ? ' to not have ' : ' to have ') + $.print(expected);
+ }
+}
31 example/spec/models/cat_spec.js
View
@@ -0,0 +1,31 @@
+Screw.Unit(function() {
+ describe('Cat', function() {
+ var cat;
+
+ describe('#cross_path', function() {
+ describe('when the cat has black fur', function() {
+ before(function() {
+ cat = new Cat({color: 'black'});
+ });
+
+ it("decrements the man's luck by 5", function() {
+ var man = new Man({luck: 5});
+ cat.cross_path(man);
+ expect(man.luck()).to(equal, 0);
+ });
+ });
+
+ describe('when the cat has non-black fur', function() {
+ before(function() {
+ cat = new Cat({color: 'white'});
+ });
+
+ it("does not change the man's luck", function() {
+ var man = new Man({luck: 5});
+ cat.cross_path(man);
+ expect(man.luck()).to(equal, 5);
+ });
+ });
+ });
+ });
+});
34 example/spec/models/man_spec.js
View
@@ -0,0 +1,34 @@
+Screw.Unit(function() {
+ describe('Man', function() {
+ var man;
+ before(function() {
+ man = new Man({luck: 5});
+ });
+
+ describe('#decrement_luck', function() {
+ it("decrements the luck field by the given amount", function() {
+ man.decrement_luck(3);
+ expect(man.luck()).to(equal, 2)
+ });
+
+ describe('when the decrement exceeds the luck balance', function() {
+ it("decrements the luck field to zero", function() {
+ man.decrement_luck(10000000000);
+ expect(man.luck()).to(equal, 0);
+ });
+ });
+ });
+
+ describe('@click', function() {
+ before(function() {
+ $('#dom_test').append(man.render());
+ });
+
+ it("removes the man's hair", function() {
+ expect($('.man')).to(have, '.hair');
+ $('.man').click();
+ expect($('.man')).to_not(have, '.hair');
+ });
+ });
+ });
+});
5 example/spec/spec_helper.js
View
@@ -0,0 +1,5 @@
+Screw.Unit(function() {
+ before(function() {
+ $('dom_test').empty();
+ });
+});
25 example/spec/suite.html
View
@@ -0,0 +1,25 @@
+<html>
+ <head>
+ <script src="../../lib/jquery-1.2.3.js"></script>
+ <script src="../../lib/jquery.fn.js"></script>
+ <script src="../../lib/jquery.print.js"></script>
+ <script src="../../lib/screw.builder.js"></script>
+ <script src="../../lib/screw.matchers.js"></script>
+ <script src="../../lib/screw.events.js"></script>
+ <script src="../../lib/screw.behaviors.js"></script>
+
+ <script src="spec_helper.js"></script>
+ <script src="matchers/have.js"></script>
+
+ <script src="../models/cat.js"></script>
+ <script src="../models/man.js"></script>
+
+ <script src="models/cat_spec.js"></script>
+ <script src="models/man_spec.js"></script>
+
+ <link rel="stylesheet" href="../../lib/screw.css">
+ </head>
+ <body>
+ <div id="dom_test" style="position: absolute; left: -9999"></div>
+ </body>
+</html>
2  lib/screw.behaviors.js
View
@@ -1,5 +1,5 @@
(function($) {
- $(Screw).bind('load', function() {
+ $(Screw).bind('loaded', function() {
$('.status').fn({
display: function() {
$(this).text(
15 lib/screw.builder.js
View
@@ -18,13 +18,12 @@ var Screw = (function($) {
context: [],
describe: function(name, fn) {
- var describe = $('<li class="describe">');
- describe.append('<h1>' + name + '</h1>');
- describe
+ var describe = $('<li class="describe">')
+ .append($('<h1>').text(name))
.append('<ol class="befores">')
.append('<ul class="its">')
.append('<ul class="describes">')
- .append('<ol class="afters">')
+ .append('<ol class="afters">');
this.context.push(describe);
fn.call();
@@ -36,9 +35,9 @@ var Screw = (function($) {
},
it: function(name, fn) {
- var it = $('<li class="it">');
- it.append('<h2>' + name + '</h2>')
- it.data('screwunit.run', fn);
+ var it = $('<li class="it">')
+ .append($('<h2>').text(name))
+ .data('screwunit.run', fn);
this.context[this.context.length-1]
.children('.its')
@@ -75,7 +74,7 @@ var Screw = (function($) {
.appendTo('body');
$(screw).dequeue();
- $(screw).trigger('load');
+ $(screw).trigger('loaded');
});
return screw;
})(jQuery);
171 lib/screw.css
View
@@ -4,90 +4,87 @@ html {
background: #EDEBD5;
}
-li {
- list-style-type: none;
-}
-
-.focused {
- background-color: #F4F2E4;
-}
-
-.focused * {
- opacity: 1.0;
-}
-
-h1, h2, p {
- opacity: 0.4;
-}
-
-.describes {
- padding-left: 0;
-}
-
-.describes h1 {
- font-size: 1.1em;
- color: #877C21;
- line-height: 1.8em;
- margin: 0pt 0pt 0.6em;
- border-bottom: 1px solid transparent;
-}
-
-.describes h1:hover {
- cursor: pointer;
- color: #000;
- background-color: #F4F2E4;
- border-bottom: 1px solid #9A8E51;
-}
-
-.describes .describe {
- margin-left: 0.6em;
- padding-left: 0.6em;
- border: 1px dashed grey;
-}
-
-.describes .describe .its {}
-
-.describes .describe .its .it {
- list-style-type: lower-roman;
- list-style-position: outside;
-}
-
-.describes .describe .its .it h2 {
- font-weight: normal;
- font-style: italic;
- padding-left: 0.5em;
-}
-
-.describes .describe .its .it.enqueued h2 {
- background-color: #CC6600;
- color: white !important;
-}
-
-.describes .describe .its .it.passed h2 {
- background-color: #5A753D;
- color: white !important;
-}
-
-.describes .describe .its .it.failed h2 {
- background-color: #993300;
- color: white !important;
-}
-
-.describes .describe .its .it.failed p {
- margin-left: 1em;
- color: #993300;
-}
-
-.describes .describe .its .it h2 {
- font-size: 1.0em;
- color: #877C21;
- line-height: 1.8em;
- margin: 0 0 0.5em;
- border-bottom: 1px solid transparent;
-}
-
-.describes .describe .its .it h2:hover {
- cursor: pointer;
- color: #000;
- border-bottom: 1px solid #9A8E51;
-}
+ li {
+ list-style-type: none;
+ }
+
+ .focused {
+ background-color: #F4F2E4;
+ }
+
+ .focused * {
+ opacity: 1.0;
+ }
+
+ h1, h2, p {
+ opacity: 0.4;
+ }
+
+ .describes {
+ padding-left: 0;
+ }
+
+ .describes h1 {
+ font-size: 1.1em;
+ color: #877C21;
+ line-height: 1.8em;
+ margin: 0pt 0pt 0.6em;
+ border-bottom: 1px solid transparent;
+ }
+
+ .describes h1:hover {
+ cursor: pointer;
+ color: #000;
+ background-color: #F4F2E4;
+ border-bottom: 1px solid #9A8E51;
+ }
+
+ .describes .describe {
+ margin-left: 0.6em;
+ padding-left: 0.6em;
+ border: 1px dashed grey;
+ }
+
+ .describes .describe .its {}
+
+ .describes .describe .its .it {
+ list-style-type: lower-roman;
+ list-style-position: outside;
+ }
+
+ .describes .describe .its .it h2 {
+ font-weight: normal;
+ font-style: italic;
+ padding-left: 0.5em;
+ font-size: 1.0em;
+ color: #877C21;
+ line-height: 1.8em;
+ margin: 0 0 0.5em;
+ border-bottom: 1px solid transparent;
+ }
+
+ .describes .describe .its .it.enqueued h2 {
+ background-color: #CC6600;
+ color: white !important;
+ }
+
+ .describes .describe .its .it.passed h2 {
+ background-color: #5A753D;
+ color: white !important;
+ }
+
+ .describes .describe .its .it.failed h2 {
+ background-color: #993300;
+ color: white !important;
+ }
+
+ .describes .describe .its .it.failed p {
+ margin-left: 1em;
+ color: #993300;
+ }
+
+ .describes .describe .its .it h2:hover {
+ cursor: pointer;
+ color: #000 !important;
+ border-bottom: 1px solid #9A8E51;
+ }
9 lib/screw.events.js
View
@@ -1,6 +1,6 @@
(function($) {
$(Screw)
- .bind('load', function() {
+ .bind('loaded', function() {
$('.describe, .it')
.click(function() {
document.location = location.href.split('?')[0] + '?' + $(this).fn('selector');
@@ -24,10 +24,9 @@
$(this).addClass('passed');
})
.bind('failed', function(e, reason) {
- $(this).addClass('failed');
- $('<p class="error">')
- .text(reason.toString())
- .appendTo($(this));
+ $(this)
+ .addClass('failed')
+ .append($('<p class="error">').text(reason.toString()));
})
})
.bind('before', function() {
2  spec/suite.html
View
@@ -12,7 +12,7 @@
<script src="matchers_spec.js"></script>
<script src="print_spec.js"></script>
- <link rel="stylesheet" href="../lib/screw.css">
+ <link rel="stylesheet" href="../lib/screw.css">
</head>
<body></body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.