Web development testing: Cucumber & Capybara

It's taken days to get my head around these web testing tools and more to get the tools working, but I finally got cucumber and capybara to work under both Mac and Windows.

I originally thought that cucumber seemed too high level but now that I've got it running, it's actually kind of fun and nice. Here's how it works.

Cucumber (and its backengine(s)) is an integration testing tool -- that is it tests the whole chain with a simulated web browser using the capybara gem as the back-engine interface to the simulated web browser. This is in contrast to rspec which is opening the models and controllers as actual ruby objects without the browser -- thus rspec is more limited in scope but way faster. You can apparently make cucumber/capybara do ajaxy things with special flag but I haven't tried that yet -- so far I've just filled in a form and pressed buttons without ajax.

Before running cucumber there's a bunch of little details you have to get right -- gems, dev kits, and then generate cucmber blah blah blah. Too much to document here. It was a multiday pain and required that I get a Gemfile from Sarah who had versions that worked. Also, I only got it working under rails 3 so I had to install ruby version managers and other stuff. It took tons of googling to get it all working.

It works like this. The cucumber generator creates a directory under the project root called "features" and under that folders called "step_definitions" and "support".

Into the features folder you put ".feature" files. Here is an actual one I just wrote (excuse the line spacing, this blog doesn't deal with "pre" tag very well):

Feature: Create account

As a new user

In order that I be able to store programs and data permanently

I want to be able to create an account



Scenario: Create a valid account

  Given I am on /users/new

  When I fill in the following:

    | Name          | zack     |

    | Password      | password |

    | Confirmation  | password |

  And I press "Create account"

  Then I should be on /users/account_created

  And there should exist a user named "zack"



Scenario: Create a invalid account due to mismatching passwords

  Given I am on /users/new

  When I fill in the following:

    | Name          | zack     |

    | Password      | password |

    | Confirmation  | passwo   |

  And I press "Create account"

  Then I should be on /users

  And I should see "Errors"

  And there should not exist a user named "zack"

The first four lines are pure documentation, cucumber ignores them. But the madlib style is standard and quite nice.

Each scenario is what's actually parsed. Think of each line under the scenario as a function call with various parameters.

The "function call" of the line is actually a regular expression that is put into the step_definitions folder. Cucumber installs a bunch of default "steps" (think functions) that are very handy and are in the step_definitions/web_step.rb file. I'm using a bunch of them here. Here's a sampling of one:

Given /^(?:|I )am on (.+)$/ do |page_name|

    visit path_to(page_name)

end

That is a "function" definition that says: when you see the pattern "Given I am on XXX" then run the command "visit" which is a capybara command that loads that page in the simulated web browser.

You can either use their existing steps or you create your own. If the step isn't found it emits a handy regular expression that you can copy and paste into your own step file.

So the long and short of it is that cucumber is a list of actions in very readable language that drives "steps" (i.e. test functions) in the "steps_definitions" folder that calls capybara (and maybe other gems?) to do the heavy lifting of running the simulated web browser.

The output of cucumber is a fairly well formatted color output that highlights each step in green if it passed, red if it failed, and yellow if it is pending (not yet implemented).

As Sarah said to me, it's actually kind of fun. You have a sense of pseudo-programming gathering your thoughts together as you edit the feature file and obviously the feature files are easy to read by non-technical types as they have no magical code incantations.

Thanks to @fablednet for help!

Vitalism: alive and well

Yet another demonstration that the intuitive ideas of vitalism are alive and well. This NY Times article about Joyce's RNA self-replicator is dripping with vitalistic language starting with the title. For example: "They can make their own RNA and see if they can then breathe life into it."

Of course there is no bright line that separates the living from the inanimate -- at least they point out that "Biologists do not agree on what the definition of life should be or whether it is even useful to have one.". As Andy Ellington says: "'Life' is a word for poets, not scientists."

Geometric proof of the dot product

This is a geometric proof of the dot product that I submitted to Mathematics Magazine for the "Proof without words" section. They rightly rejected it because it's only valid for the first quadrant. Cynthia and I tried to rework it for the other quadrants but it lost its elegance so we gave up.

(Oldish) images of my house

These are nice pics that Bruce and Anne had taken of my house soon after it was completed.

Tutorials #10, #11, #12, #13

Tutorials #10, #11, #12, #13 are now posted on happyfuncoding.com

Enjoy.

Tutorial #9 -- arrays

Euler's equation

Vector Projection Demo

Use your mouse to move around vector A

Happyfuncoding Tutorial #8 -- for loops

Trigonometry refersher.

This is a simple little reminder of cos and sin written in happyfuncoding.com Roll your mouse over it.

Happy Fun Coding Tutorial #7 -- Operators

Tutorial #7 -- Operators

Happyfuncoding tutorial #6 -- while loops

Happy fun coding tutorial #6 -- while loops

Happyfuncoding Tutorial #5 -- if statements

If statements

happyfuncoding.com now a github project

Thanks to my visit with Sarah Gray and Corey Haines happyfuncoding is now a github project so anyone can contribute.

Embed of Happyfuncoding content!

You can now embed programs from happyfuncoding.com onto your own website as demonstrated here!

Happy Fun Coding Tutorial #4

Happyfuncoding Tutorial #4 -- Twiddlers!

Happy Fun Coding Tutorial #3

Hypatia artwork by Hollyana Melear

I commission a triptych about Hypatia from my friend Hollyana Melear for my garden. For those who don't know, Hypatia was a nerd martyr -- the only female curator of the great library of Alexandria, she was kill by an angry Christian mob for being an smart uppity female.

There are three panels shown from left to right. The center has Hypatia holding the scroll of knowledge while the angry Christian mob attacks her. Some versions of her demise have her splayed with an abalone shell so there's a real abalone shell in the center bottom. On the left panel is the light house of the Alexandria as the mob chases her down under the christian cross while on the right panel Cyril plots her demise while destroying a scroll symbolic of rationalism. Incidentally, Cyril, who many have blamed for orchestrating her murder was sainted for his troubles.

Happy Fun Coding Tutorial #2 -- Variables and animation

Happy Fun Coding Tutorial #2 -- Variables and animation

Happy Fun Coding Tutorial #1

This is the first of many tutorials I'm going to make about programming with happyfuncoding.com. If you've been curious about programming, it doesn't get any simpler than this!

More happyfuncoding!

In the last few days I've put a lot of work into happyfuncoding.com -- my collaborative online programming environment that creates a place where you can fiddle with graphics code in an easy to use Javascript environment. It includes lots of samples, tutorials and challenges as well as a wiki so more experienced programmers can write tutorials and challenges for less experienced programmers.

Please, please pass it along! It needs people using it! :-)

happyfuncoding.com

I'm please to announce the first version of my new learn-to-program environment called "happyfuncoding.com". It's a Javascript environment that allows novice programmers to create simple graphical programs with minimal fuss all from the web browser.

It also features an editable mini-browser with tutorial and challenge sections where more advanced programmers can create content to teach and challenge less experienced programmers.

I haven't added much in the way of tutorials yet, so if you're a programmer please come and help fill it out!

If you've never programed before, here's your chance to write your first "Hello world!"

Create an account to save your programs or edit the pages. Please report bugs by editing the "bugs and features" page off the home page in the mini-browser.

Traitwise, PGP, data standards and the OSI model

I spent the day with Jason Bobe of the Personal Genomes Project. PGP is a public effort sequence a large number of genomes. Traitwise has formed a partnership with them to serve as part of the phenotyping solution.

Jason's role at PGP puts him in the center of a growing number of people who have competing desires to control / provide services around personal health (or "quantified self" as some are calling it). Jason therefore is in the unique position to promote and evangelize.

An interesting part of the conversation focused around the need for open standards of public health and trait related data. I used the OSI networking protocol framework as a model of how conceptual standards can be incredibly useful to increase innovation. One of the best things about the OSI model is that it didn't attempt to actually define any standards but rather it serves as a conceptual framework that defines how standards interface with each other. From that model has emerged a number of interoperable standards at all levels and without it we certainly wouldn't live in the networked world we live in.

One of the aspects of the human data problem is privacy which has "levels of data privacy" and this, it occurred to us, was somewhat analogous to the OSI layer framework.

Layer 1 - Raw identifiable data (post-privacy)

Layer 2 - Anonymized raw data (HIPPA compliant)

Layer 3 - Algorithmically open data (sand-boxed, machine readable)

Layer 4 - Aggregated data

Layer 1 data is non-private. It requires a consent certificate of some sort to go along with the data.

Layer 2 data is considered by many scientists to be adequate for protection in many research circumstances and indeed HIPPA seems satisfied with this. However, for open projects such as Traitwise I personally don't think that it suffices as de-anonymization has been shown in many circumstances such as the infamous AOL search records scandal.

Layer 3 is perhaps the most interesting and least discussed. A Layer 3 system would allow an algorithm written by a researcher to run against raw data but within a sandbox that only allows the aggregated results to emerge. I haven't put a huge amount of thought into this, but it seems plausible to write an API that could enforce such constraints. But, even without such an API, a human code reviewer could accomplish the same thing.

Layer 4 is what Traitwise and others are currently focusing on -- aggregated data that is not deanonymizable.

This is just one aspect of the data and communications problem, but it is an important one and it was fun talking to Jason about it today.

Freshman Research Initiative -- First Semester Results

We just finished our first semester of the Freshman Research Initiative on Genetic Algorithms for Pattern Design. We paired up students from Computer Science with students from the Fashion/Textiles department and had them create algorithmic patterns that could be bred genetically. The results are on this page. Next semester we're going to print these patterns on fabric and make clothing from them.

Fire pit - Day 2

Filled in the seat corner.

Fire pit day 1

I started on the brick fire pit in the back yard. There'll be one more layer on top of this one.

Final gate installed

This is the fourth and final gate to my garden -- a project that has taken me about 3 years to complete finally done. Thanks to my mom for the help.

Tree Generator

Dan and I have been working on a new Shadow Garden piece called "tree" that generates random trees as you hold up your hands. Here's a recent screen shot.

Staircase lighting

I had grand plans for staircase lighting that illuminated whenever you stepped on the first steps. I carefully engineered a board and had it all working on the bench using IR reflecting detectors to sense the footsteps. But upon installation I discovered that the sensors sucked -- their practical range was only a few inches and they generated a lot of false positives. So, until I can find a new sensor system the lights are just boringly connected to an old-fashioned light switch. But, at least I can tread safely on the stairs at night now!

Side gate complete

Finished up the side gate. Thanks to Angel for the help!

Pics from Hawaii

Right after Spain, I flew across 12 time zones to Hawaii. Here's a few random pics.


Looking towards the caldera at Kilauea.


A lovely little fiddle head in Volcanoes National Park.


We rented a plane and flew out to see where the lava reaches the ocean.


Yes, I still remember how to fly!

Pics from Spain

A few pics from Spain...


Inside of Casa Batllo. The inside had been closed off when I lived there so that was a pleasant surprise. Bruce, just look at that staircase!


This is a scale model of the attic of La Pedrera. Each of the slats is in reality a ~14ft brick catenary arch. It's stunning inside.


Roman aqueduct still standing in Segovia.


This is a model of the roof of the school house built next to Segrada Familia. It was from this roof line that I was inspired to make my porch roof.


Oh my god, the face on mars has moved into the light fixtures at the Reina Sophia! :-)

Gate

Today I built another gate for the backyard. I don't think I could have designed a much more labor-intensive gate design; it took me about 5 hours to mill all the 2x2s. Next, trim the edges and hang it.

Sagrada Familia sketch

A little tiny piece of Sagrada Familia. There's no place to sit down outside so I had to hold the pad in one hand while drawing which made things all wobbly!

La Pedrera attic sketch

Apologies again for the bad contrast.

This is the attic of Gaudi's La Pedrera in Barcelona. It is a twisting series of hundreds of catenary aches (the shape of a hanging chain but upside down). It is a magical space, like being on the inside of snake with windows. I think it is one of the most, if not the most, beautiful space I've ever been in.

Casa Batllo sketch

Forgive the lack of cropping and contrast correction, I don't have access to my usual editor suite. This is a small section of the casa Batllo fascade. When I lived in Barcelona this house was not open to the public so today I got to see inside for the first time which didn't disappoint. Unfortunately it was so crowded that there was no place I could make a sketch.

Barcelona gothic cathedral sketches

For me one of the pleasures of vacation is having little or no plan -- I see less but feel more relaxed about it. This morning I strolled over to the gothic cathedral in Barcelona (I've been there many times before) and just sat and drew images.

I love the intersecting lines of the arches in the gothic style. The arches in this particular church have a interesting asymmetric large-small-small-small rhythm. The intersections where the main supports hold up the central bay as well as three other smaller bays are very complicated tangles of these converging patterns. I can sit and stare at them for hours, absorbing their intricate masonry.

Traitwise Beta 2

We're pleased to announce the beta 2 version of our health-engine "Traitwise". We've simplified question making, added discussions, and generally improved a lot of things. Please come and check it out -- and tell your friends and family!

www.traitwise.com

Vent Hood 1

Today I started on a mosaic for my vent hood. I'm more or less shamelessly copying one of me favorite local artists Aly Winningham who did the candy island mosaic in the Whole Foods mother ship. Her stuff looks a hundred times better but she has, after all, been at it for years!

Final tree mural

I finished up the tree mural this weekend by painting the air duct grills and going back over it with a lighter pink to blend in the branches a bit. Thanks for Michael and Holly for the help.

Video games and person

This morning I read Alexander Nehamas' opinion piece about Plato and popular media. The piece was comparing the critical analysis of video games to the same sorts of analysis in ancient times. He lumped in video games with other popular media in a way I found to be typical of someone who doesn't play video games. As analysis by non-game players tends to, it failed to note important differences between video games and other forms of media. The most important of which is, IMHO, person.

All traditional media no matter how they are painted, written, acted, or performed are actually in the third-person. Only a psychotic person confuses actions written in a novel as "I ran" or "I said" as actions they, the reader, actually took. No matter how you try to frame a book or movie, you are not confused by who actually took the action. They took the action -- you observed it.

In all video games the opposite is true. No matter how the fiction is presented, it is actually in the first person. Only a psychotic person would say: "And then Pac Man decided to turn left". A rational person says, "I made Pac Man turn left" or more usually, "I turned left" because Pac Man is not your agent but rather your avatar.

Of course literature, movies, etc. can induce sympathy and strong emotions as if the scene were happening to you. Indeed, they are surprisingly capable of making you feel those emotions more intensely then if the situation had actually happened to you. And conversely, just because some video game is in the first person doesn't mean that you must have a deep emotional connection to it -- many video games try and fail to create such a connection.

But that said, there's a dramatic difference between games and narrative. Analysis that doesn't bother to note that games are real actions taken in a simulated world while narrative is simulated action in a simulated world is missing an enormous piece of the critical puzzle. Play is a complicated emotional state where you are taking real (but possibly attenuated) actions while staying aware of the fact that your motivations are pretend.

Regardless of where one stands in terms of video games as art, if one is going to analyze their role in society one one should at least be familiar enough with them to understand that they are a profoundly different form of art. As in the article in question, I find direct comparisons to literature and literary criticism tend to be overly simplistic.

Upstairs tree mural

With some help from Michael and Rechelle, I started on the tree mural for the upstaris landing. I've had this planned for some time and finally got around to it this weekend. There's still work remaining but pretty good for a few hours work.

Several old videos

I just discovered that someone taped my 2005 talk at the Austin Museum of Art for their 22 to Watch show. It's a 5 minute explanation of the piece I made for that show "Moderation".



Here's another art talk from a show in Sao Paulo, Brazil around 2004. This one also features my friend Adam Chapman talking about his art at the same show.

Gate support v 1.2

I had still more left over material and I felt like it needed a little more so I'm up to v 1.2 on this thing. I threw out the rest of the wood to stop the temptation of adding more!

Radio Interview on Studio 360

My friend Lindsay Patterson produced this really nice piece about my work for Studio 360 this week. Thanks Lindsay, sounds great!

Gate support v 1.1

I thought it needed a little more and I had some leftover material so I added this spiral-y bit.

Gate arch

The gate I made for the side is so heavy that it was causing the post to lean inwards making it hard to open. I couldn't put a tension wire on the opposite side because of an adjacent driveway so my only solution was to add a compression element pushing the post away from the house. To keep with the tree and vine theme I built this from a glued up laminate of 2x2s.

Traitwise coding survey

We're almost ready to release the beta version of our survey engine: Traitwise.com. As a test of the embedded private surveys, I've created this short 10 question survey for my nerd friends to resolve a couple of hypotheses I have about coding styles and coding experience. So, to all my coding friends -- please take a few seconds to honestly answer this survey and to report any bugs or problems you find in the engine.

Chemotaxis CheZ position experiments

From freeversity.org

Bacteria swim by their noses. That is, they smell food and swim towards it; they smell waste and swim away. The molecular basis of this amazing feat is the most well studied molecular signal transduction system and as such serves as a model for other lessor-studied bio-molecular signaling.

There's one little detail of the chemotaxis system that caught my attention a few years ago. The signal is transmitted from sensor to motors via a diffusing molecule called "CheY". When CheY has a phosphoryl group attached to it, it activates the motors in a certain way; when it loses that group it reverses the motors.

There's a very interesting subtlety to this system. The part of the system which "charges" the transmitter (to borrow electrical engineering terminology) is a kinase called CheA. The "discharging circuit" is the enzyme CheZ. It turns out that these two enzymes are, counter-intuitively, co-located. That is, it seems odd that the enzymes responsible for pulling-up a signal are co-located with the enzymes that pull it down. It would appear that the system is spinning it's wheels -- undoing what it just did. Why shouldn't it have the pull-down phosphatase evenly distributed or co-located with the motors?

When I first read this detail a few years ago in Eisenbach's book "Chemotaxis" it mentioned this counter-intuitive fact and I thought to myself, "I bet I know why -- it reduces saturation and evens out the signal." I wrote a little simulation years ago and convinced myself that this was indeed the case (at least for my toy simulation). Then I got distracted for years didn't get around to improving the simulations.

My hypothesis is that by co-locating CheZ and CheA the signal will saturate less near the transmitter and become more spatially uniform. My intuition is that when the external signal is rising and transmitter wishes to control the motors it needs a supply of free un-phosphorylated CheY in order to communicate this. Because CheY is produced at one end and diffuses to the other regions, there's a 1/r^2 distribution of it as it produces it. If it turns on the transmitter at some moment then a few moments later there will be an excess of CheY~P near the transmitter but a lot less further away. But, if CheZ is located nearby the transmitter then it is right where it is needed most -- where there's an excess of CheY~P.

Honestly, it's easier to see the effect than to describe it.

In the following figures, the top row has the CheZ co-located with CheA on the left side. The bottom row has the same amount of CheZ evenly distributed. These are space-time plots. Space is on the X axis with the transmitter on the left. Time progresses from the bottom of the graph towards the top. The right plot is the power spectrum of the right most spatial position which simulates the most distant motor's response. In the top row we see two things. First, the distribution is much smoother from left to right than it is in the bottom row. This is good for the bacteria as the motors are scattered throughout the cell and the controller depends on them to synchronously changing state as it switches from laminar movement to chaotic tumbling. Second, the non-linear clipping harmonic (the little spike on the right) is taller in the bottom row and the primary response (the big peak) is a little smaller. This indicates that there's a (mild) fidelity improvement in the co-location of CheA and CheZ. Given the simplicity of this argument I submit that such co-location is probably a common motif in other kinase/phosphatase (and similar pull-up/pull-down type) systems.



Caveats -- this is a scale-free simulation. I made no attempt to model actual parameters but rather went on the assumption that the bacteria probably operates near peak efficiency so I just twiddled the parameters until I saw what appeared to be peak efficiency. Of course, this is hardly rigorous so the next step will be to try to get accurate rate and diffusion constants. If anyone knows where they are conveniently located in one paper, that would be nice. :-)

2D stadium wave

I finally got around to making my previous stadium wave simulation run in 2D. It makes pretty patterns as I expected it would. The fascinating thing about it is that there's these interior waves that back propagates as the outer wave spreads out. There's some sort of instability that causes little imperfections (probably due to the imposed spatial lattice) that gets these little eddies started and once their started they tend to collide and make interesting things happen. The simulation is torodial so once the wave hits the edges it interacts with itself and then all kinds of beautiful things happen. (Note, the image looks wider than it really is -- what looks like an oval is actually a circle.)