TodoMVC - A common learning application for popular JavaScript MV* frameworks

Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing JavaScript web apps. Backbone, Spine, Ember (SproutCore 2.0), JavaScriptMVC... the list of new and stable solutions goes on and on, but just how do you decide on which to use in a sea of so many options?

To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.

Solutions look and feel the same...

Gatekeeping: Guide for developer

If your project manager wants to do gatekeeping on a project, as a developer you need to follow the following guidelines (e.g. by using something like this issue checklist template).

In order to reduce the number of rejects we get from clients, we want to review all code written before it goes to the staging server.


Note: This process is tailored to our specific needs and tools at makandra. While it will certainly not apply to all (especially larger tea...

Gatekeeping: Guide for gatekeeper

If you're responsible for gatekeeping in a projects, here is a guide, what to do.
In order to reduce the number of rejects we get from clients, we want to review all code written before it goes to the staging server.

Note: This process is tailored to our specific needs and tools at makandra. While it will certainly not apply to all (especially larger teams), we think it is a helpful starting point.


First, read the [Gatekeeping for developers](https://makandracards.com/makandra/6579-gatekeeping-guide-for...

Issues with has_select?

The handy method has_select?(field, :selected => text) does not behave as expected with Cucumber 0.10.2, Capybara 0.4.1.2 and Selenium 0.2.2. It may not recognize a select field if the selected option with the text has no value. If you don't have the possibility to upgrade these Gems, probably the best way to go is to distinguish the current Capybara driver:

Then /^"([^"]*)" should be selected for "([^"]*)"(?: within "([^\"]*)")?$/ do |value, field, selector|
  with_scope(selector) do

    # currently needed due to different behav...

Nicer alternatives to def_delegator or def_delegators

Delegating methods to other objects is often helpful but the syntax of both def_delegators and def_delegator is a complete mess that makes your code hard to read.

Consider these classes:

class Topic < ActiveRecord::Base
  def title
    "A title"
  end
  
  def category
    "Topic category"
  end
end

class Post < ActiveRecord::Base
  belongs_to :topic
  def_delegato...

Run your own code before specific RSpec examples

You probably know about the possibility to tag scenarios in Cucumber to run your own piece of code before the actual scenario is run which looks like that:

@foo
Scenario: Do something
...

and you place the following snippet into support/env.rb:

Before('@foo') do
  puts "This is run every time a @foo tagged scenario is hit"
end    

You can tag RSpec examples like this:

it 'does something', :foo => true do
  ...
end

What you need is the following within the RSpec.configure do |config| block wit...

Auto-generate Cucumber navigation paths

Don't you just hate to write Cucumber path helpers to be able to say this?

When I go to the user form for "foo@bar.de"               # goes to edit_user_path(User.find_by_anything!('foo@bar.de'))
When I go to the form for the user "foo@bar.de"           # goes to edit_user_path(User.find_by_anything!('foo@bar.de'))
When I go to the form for the user above"                 # goes to edit_user_path(User.last)
When I go to the project page for "World Domination"      # goes to project_path(Project.find_by_anything!('World Domination')
...

Find an ActiveRecord by any column (useful for Cucumber steps)

The attached patch lets you find a record by a string or number in any column:

User.find_by_anything('carla')
User.find_by_anything('email@domain.de')
User.find_by_anything(10023)

There's also a bang variant that raises ActiveRecord::NotFound if no record matches the given value:

User.find_by_anything!('carla')

Boolean and binary columns are excluded from the search because that would be crazy.

I recommend copying the attachment to features/support/find_by_anything.rb, since it is most useful in Cucumber step def...

High-level Javascript frameworks: Backbone vs. Ember vs. Knockout

This is a very general introduction to MV* Javascript frameworks. This card won't tell you anything new if you are already familiar with the products mentioned in the title.

As web applications move farther into the client, Javascript frameworks have sprung up that operate on a higher level of abstraction than DOM manipulation frameworks like jQuery and Prototype. Such high-level frameworks typically offer support for client-side view rendering, routing, data bindings, etc. This is useful, and when you write a moderately complex Javascript ...

How to overwrite and reset constants within Cucumber features

In order to save the original value of a constant, set the new value and restore the old value after a scenario was completed, you can use the following helper. It takes care of saving the old constant value, setting the new one without throwing warnings and resets the value with an After hook.

This module also enables you to introduce new global constants.
Since these newly defined constants do not have any value to be reset to,
they simply are deleted (remove_const) once the respective Cucumber step finishes.

You can copy the file at...

New cards feature: Cite other cards

We've made it easier to link other cards:

  • You can now find a button Cite other card above the main text area
  • Clicking this button lets you search for another card
  • Clicking on a search result will paste a Markdown link into the text area

New cards feature: Github-style code blocks

You can now add code blocks without indentation, by using triple-backticks:

```
Code block goes here.
```

Cucumber step to test that a tooltip text exists in the HTML

Tooltips that are delivered through HTML attributes are encoded. Decode entities before checking for their presence.

Capybara:

Then /^there should( not)? be a(n encoded)? tooltip "([^"]*)"$/ do |negate, encoded, tooltip|
  tooltip = HTMLEntities.new.encode(tooltip) if encoded
  Then "I should#{negate} see \"#{tooltip}\" in the HTML"
end

Note

This step uses the htmlentities gem described in another card.

Ma...

nruth/show_me_the_cookies - GitHub

Some helpers for poking around at your Capybara driven browser's cookies in integration tests.

Supports Capybara's bundled drivers (rack-test, Selenium Webdriver), and adapters for other drivers may be added.

Mysql::Error: SAVEPOINT active_record_1 does not exist: ROLLBACK TO SAVEPOINT active_record_1 (ActiveRecord::StatementInvalid)

Possible Reason 1: parallel_tests - running more processes than features

If you run old versions of parallel_tests with more processes than you have Cucumber features, you will get errors like this in unexpected places:

This is a bug caused by multiple processes running the same features on the same database.

The bug is fixed in versions 0.6.18+.

Possib...

Test whether a form field exists with Cucumber and Capybara

The step definition below lets you say:

 Then I should see a field "Password"
 But I should not see a field "Role"

Here is the step definition:

Then /^I should( not)? see a field "([^"]*)"$/ do |negate, name|
  expectation = negate ? :should_not : :should
  begin
    field = find_field(name)
  rescue Capybara::ElementNotFound
    # In Capybara 0.4+ #find_field raises an error instead of returning nil
  end
  field.send(expectation, be_present)
end

Note that you might have to adapt the step defi...

HTML5 Please: Use the new and shiny responsibly

Look up HTML5 features, know if they are ready for use, and if so find out you should use them – with polyfills, fallbacks or as they are.

gammons/fake_arel - GitHub

Gem to get Rails 3's new ActiveRecord query interface (where, order) and the new scope syntax (chaining scope definitions) in Rails 2.

You also get #to_sql for scopes.

marcandre/backports - GitHub

Gem to get Ruby 1.9 features in Ruby 1.8.

How to revert features for deployment, merge back, and how to stay sane

Removing features and merging those changes back can be painful. Here is how it worked for me.\
tl;dr: Before merging back: reinstate reverted features in a temporary branch, then merge that branch.

Scenario

Consider your team has been working on several features in a branch, made many changes over time and thus several commits for each feature.\
Now your client wants you to deploy while there are still stories that were rejected previously and can't be deployed.
...

How to organize and execute cucumber features (e.g. in subdirectories)

In cucumber you are able to run features in whatever directory you like. This also includes executing features in subdirectories. There are only some things you have to take care of.

By default, cucumber loads all *.rb files it can find (recursively) within the directory you passed as argument to cucumber.

$ cucumber # defaults to directory "features"
$ cucumber features
$ cucumber my/custom/features/dir

So, if you would like to organize features in subdirectories, you won't have *any problems when running the whole test...

Fix: Cucumber won't start though cucumber.yml is correct

This is for you if you get this error:

cucumber.yml was found, but could not be parsed. Please refer to cucumber's documentation on correct profile usage.

Actually, it's likely that your cucumber.yml is just fine but not your rerun.txt.\
This sometimes happens when running multiple Cucumber workers with parallel_tests that write into rerun.txt simultaneously -- ending up with a messy, invalid file.

Just remove it and you ar...

Detect mobile or touch devices on both server and client

Although it's tempting flirt with detecting mobile/touch devices with CSS media queries or Javascript feature detection alone, this approach will be painful when heavily customizing a feature beyond just tweaking the looks. Eventually you will want want the same detection logic to be available on both server and client side.

This card shows how to get a Ruby method touch_device? for your Rails views and a method TouchDevice.isPresent() for your Javascripts.

Note that we are detecting touch devices by grepping the user agent, and the ke...

How to click hidden submit buttons with Selenium

In your Cucumber features you can't really click hidden elements when using Selenium (it does work for a plain Webrat scenario, though).

Unfortunately you need to hack around it, like this:

When /^I press the hidden "([^\"]+)" submit button$/ do |label|
  page.evaluate_script <<-JS
    $('input[type=submit][value="#{label}"]').show().click();
  JS
end

If your button is nested into a container that is hidden this will not do the trick. You need a more complex method to also show surrounding containers:

When /^I pre...