Permalink
Browse files

Completed BDD pipe dream article and improved blog readability

  • Loading branch information...
twolfson committed Sep 10, 2012
1 parent 25f71e8 commit 9acfeb82cf8d3c94fc967b50832f01096da6f8e1
Showing with 85 additions and 16 deletions.
  1. +46 −7 articles/bdd-pipe-dreams.md
  2. +15 −2 dist/css/index.css
  3. +5 −3 dist/css/index.min.css
  4. +17 −2 public/css/specific/blog.less
  5. +2 −2 views/pages/article.ejs
@@ -4,7 +4,7 @@
"date": "2012/09/09"
}
-Below are my most recent pipe dreams for BDD. While the example is based on testing a UI, it is applicable to anything as does BDD.
+Below are my most recent pipe dreams for BDD. While the example is based on testing a UI, it is applicable to anything as does BDD. Also, I did make a point to mention these thoughts while at NodeConf SummerCamp 2012, so hopefully these thoughts will start spreading more prevalently.
The following would be a set of files located inside of the `tests` directory of an application. Each JSON file acts as a set of BDD tests but does not actually contain any of the driving/testing responsibilities. This is the purest separation that BDD can give us -- separating behavior from implementation.
@@ -23,7 +23,9 @@ There is also a `commands.js` which acts as the implementation side of the house
}
}
}
+```
+```js
// tests/commands.js - the language-specific and driver specific tests
module.exports = {
'A normal user': function () {
@@ -49,8 +51,8 @@ module.exports = {
// Attempt to navigate to the admin page
var page = '/admin';
window.location = page;
-
- // Return the page for proper topic binding
+ 
+ // Return the page proper topic binding
return page;
},
'is redirected': function (page) {
@@ -62,9 +64,41 @@ module.exports = {
};
```
-These two files will compile during the cycle of the test to
+These two files will compile during the testing to
```js
-
+{
+ 'A normal user': {
+ topic: function () {
+ return {'username': 'myuser', 'password': 12345};
+ },
+ 'logging into its account': {
+ topic: function (user) {
+ $('#username').val(user.username);
+ $('#password').val(user.password);
+ $('#loginform').submit();
+ },
+ 'successfully logs in': function () {
+ assert(window.loggedIn);
+ },
+ 'has edit permissions': function () {
+ var editDisabled = $('#editbutton').prop('disabled');
+ assert.fail(editDisabled);
+ },
+ 'attempting to access the admin page': {
+ topic: function () {
+ var page = '/admin';
+ window.location = page;
+ return page;
+ },
+ 'is redirected': function (page) {
+ var location = window.location,
+ onPage = location.indexOf(page) === -1;
+ assert.fail(onPage);
+ }
+ }
+ }
+ }
+}
```
The beauty
@@ -73,5 +107,10 @@ This separation allows for not only a proper separation of behavior and implemen
Backstory and attribution
--------------------------------
-// @fat's talk 2012
-// [Behance/Dan Chan syntax for testing](http://blog.behance.net/dev/testing-simplified-page-objects)
+I have been thinking about how to make my JS tests framework agnostic for a while now. I boiled it down to writing a normal set of tests (in Vows format of course) and a facade for interactions. Then, that would hook up to a proper engine for the test framework I wanted -- e.g. Mocha, Testling, JSTestDriver.
+
+Additionally, while watching the [JS Conf 2012 talks](http://2012.jsconf.us/), I watched the one by [Jacob Thorton (@fat)](https://twitter.com/fat). There was a part in there that stuck to me -- [Mustache's tests](https://github.com/janl/mustache.js/tree/master/test/_files) uses input/output files. This means, you take test1.input, process it, and if it matches test1.output then the test passes.
+
+The consequence that @fat mentioned was this made the tests agnostic to the module itself. This leads to anyone being able to rewrite the module as long as they kept the same API. However, a corollary that I came to and was in awe of was *these tests are agnostic to the language*.
+
+The last piece of attribution comes from [Behance](http://www.behance.net/) and [Dan Chan](https://twitter.com/brokenthumbs). One day, Dan released this [blog post](http://blog.behance.net/dev/testing-simplified-page-objects) which gave a slick syntax for testing out UI's. This syntax works very nice with BDD context changes and allows for the separation used in the initial code example.
View
@@ -775,10 +775,15 @@ pre .tex .formula {
/* Blog formatting */
.blogpost {
line-height: 1.4em;
+ font-size: 1.2em;
margin-top: 0.3em;
}
/* Bad technique but it is appropriate */
-.blogpost > * {
+.blogpost p,
+.blogpost pre,
+.blogpost iframe,
+.blogpost ol,
+.blogpost ul {
margin-bottom: .7em;
}
.blogpost h1 {
@@ -799,11 +804,14 @@ pre .tex .formula {
position: absolute;
margin-left: -25px;
}
+.blogpost ul,
+.blogpost ol {
+ list-style: none;
+}
.blogpost ul > li:before {
content: "\2022";
}
.blogpost ol {
- list-style: none;
counter-reset: ol;
}
.blogpost ol > li {
@@ -820,6 +828,11 @@ pre .tex .formula {
padding: 1em;
border-radius: 10px;
}
+.blogpostDate {
+ font-size: 1.2em;
+ margin-top: 15px;
+ padding-top: 0.4em;
+}
/* Main page formatting */
#articles .post .content h1,
#articles .post .content h2 {
View
@@ -175,17 +175,19 @@ pre .tex .formula{opacity:0.5;}
.dsq-comment-message{line-height:1em !important;}
.dsq-comment{margin-bottom:0.5em !important;}
#dsq-subscribe{float:right;}
-.blogpost{line-height:1.4em;margin-top:0.3em;}
-.blogpost>*{margin-bottom:.7em;}
+.blogpost{line-height:1.4em;font-size:1.2em;margin-top:0.3em;}
+.blogpost p,.blogpost pre,.blogpost iframe,.blogpost ol,.blogpost ul{margin-bottom:.7em;}
.blogpost h1{font-size:1.4em;line-height:1.7em;margin-bottom:0.2em;}
.blogpost h2{font-size:1.1em;line-height:1.4em;}
.blogpost ul>li,.blogpost ol>li{margin-left:25px;}
.blogpost ul>li:before,.blogpost ol>li:before{position:absolute;margin-left:-25px;}
+.blogpost ul,.blogpost ol{list-style:none;}
.blogpost ul>li:before{content:"\2022";}
-.blogpost ol{list-style:none;counter-reset:ol;}
+.blogpost ol{counter-reset:ol;}
.blogpost ol>li{counter-increment:ol;}
.blogpost ol>li:before{content:counter(ol) ".";}
.blogpost pre{display:block;overflow:auto;white-space:pre;word-wrap:normal;padding:1em;border-radius:10px;}
+.blogpostDate{font-size:1.2em;margin-top:15px;padding-top:0.4em;}
#articles .post .content h1,#articles .post .content h2{display:none;}
.contactRow{margin-bottom:20px;}.contactRow >label{line-height:44px;}
.contactRow >input{height:40px;}
@@ -1,11 +1,16 @@
/* Blog formatting */
.blogpost {
line-height: 1.4em;
+ font-size: 1.2em;
margin-top: 0.3em;
}
/* Bad technique but it is appropriate */
-.blogpost > * {
+.blogpost p,
+.blogpost pre,
+.blogpost iframe,
+.blogpost ol,
+.blogpost ul {
margin-bottom: .7em;
}
@@ -32,12 +37,16 @@
margin-left: @listItemIndent * -1;
}
+.blogpost ul,
+.blogpost ol {
+ list-style: none;
+}
+
.blogpost ul > li:before {
content: "\2022";
}
.blogpost ol {
- list-style: none;
counter-reset: ol;
}
@@ -56,4 +65,10 @@
word-wrap: normal;
padding: 1em;
border-radius: 10px;
+}
+
+.blogpostDate {
+ font-size: 1.2em;
+ margin-top: 15px;
+ padding-top: 0.4em;
}
View
@@ -4,7 +4,7 @@
<div class="l_span">
<h1 class="headerMega superComfyText"><%= title %></h1>
</div>
- <div class="l_spanRight">
+ <div class="l_spanRight date blogpostDate">
<%
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
day = rawDate.getDay() + 1 + "";
@@ -14,7 +14,7 @@
var articleDate = MONTHS[rawDate.getMonth()] + " " + day + ", " + (rawDate.getYear() + 1900);
%>
- <span class="date superComfyText fluffToHeaderMega"><%= articleDate %></span>
+ <%= articleDate %>
</div>
</header>

0 comments on commit 9acfeb8

Please sign in to comment.