Skip to content

Instantly share code, notes, and snippets.

@sjahandideh
Last active December 28, 2015 01:49
Show Gist options
  • Save sjahandideh/7422910 to your computer and use it in GitHub Desktop.
Save sjahandideh/7422910 to your computer and use it in GitHub Desktop.
How to demo your feature specs
# capybara setup
require 'capybara/rails'
require 'capybara/rspec'
require 'capybara/poltergeist'
Capybara.javascript_driver = :poltergeist
module Demo
TICK = "✓"
attr_accessor :last_step
def demo_step description, args={}
if demo?
page.execute_script %{
$("body").prepend("<div id='step' style='font-size: 2em' class='alert alert-info'>#{description}<button style='margin-left:15px' onclick='$(this).parent().hide()'>Go</button></div>");
}
page.execute_script %{
$("body").prepend("<div id='last-step' style='font-size: 2em' class='alert'>#{last_step} #{TICK}</div>");
} if last_step.present?
@last_step = description unless args[:title]
using_wait_time(1000) do
page.should have_no_css '#step', :visible => true
end
end
if demo_step?
puts "Step: #{description}".cyan
end
end
def demo_step?
example.metadata[:step]
end
def demo?
example.metadata[:demo]
end
def set_speed(speed)
begin
page.driver.browser.send(:bridge).speed=speed
rescue
end
end
end
RSpec.configuration.include Demo
RSpec.configure do |config|
config.before :each do
if demo?
Capybara.current_driver = :selenium
set_speed(:slow)
visit '/'
demo_step(example.description, { :title => true })
end
end
config.after :each do
if demo?
Capybara.use_default_driver
set_speed(:medium)
end
end
end
module Selenium::WebDriver::Firefox
class Bridge
attr_accessor :speed
def execute(*args)
result = raw_execute(*args)['value']
case speed
when :slow
sleep 0.3
when :medium
sleep 0.1
when :fast
sleep 0.05
end
result
end
end
end

In order to demo your feature specs, follow these steps:

  1. Add capybara, poltergeist, launchy and selenium-webdriver to your Gemfile under test and development group.
  2. Add the attached demo helper to your spec/support.
  3. Add the capybara config to your spec_helper file.
  4. Run bundle install.
  5. Write your feature with its scenario specs.
  6. Put a demo filter on each scenario you want to demo. ( refer to the example below )
  7. Run bundle exec rspec spec.

Note: you should have firefox and phantomjs installed.

If you still have any questions, you can take a look at my example blog application: example blog app

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment