Permalink
Browse files

Implement accordion steps.

  • Loading branch information...
1 parent ec714f8 commit e3fda15c8329926ad236bea67a8b7089a1d67832 @jfirebaugh committed Oct 18, 2010
Showing with 130 additions and 4 deletions.
  1. +18 −0 features/step_definitions.feature
  2. +3 −0 features/support/selectors.rb
  3. +7 −4 lib/bermuda/cucumber.rb
  4. +40 −0 lib/bermuda/xpath.rb
  5. +62 −0 public/accordion.html
@@ -0,0 +1,18 @@
+Feature: Step definitions
+ As a developer
+ I want step definitions that allow me to interact with jQuery UI widgets
+
+ Scenario: Accordion steps
+ When I visit the accordion page
+ Then I should see the following accordion sections:
+ | Section 1 |
+ | Section 2 |
+ | Section 3 |
+ | Section 4 |
+ And the "Section 1" accordion section should be active
+ And the "Section 2" accordion section should not be active
+
+ When I activate the "Section 2" accordion section
+ And the "Section 1" accordion section should not be active
+ And the "Section 2" accordion section should be active
+ And I should see "Sed non urna" within the "Section 2" accordion section
@@ -8,6 +8,9 @@ module HtmlSelectorsHelpers
def selector_for(locator)
case locator
+ when /the "([^"]+)" accordion section/
+ [:xpath, Bermuda::XPath.accordion_content($1)]
+
else
raise "Can't find mapping from \"#{locator}\" to a selector.\n" +
"Now, go and add a mapping in #{__FILE__}"
@@ -1,19 +1,22 @@
+require 'bermuda/xpath'
+
# Accordion
Then /^I should see the following accordion sections:$/ do |titles|
- pending
+ wait_until { page.has_xpath?(Bermuda::XPath.accordion_header) }
+ titles.diff!(all(:xpath, Bermuda::XPath.accordion_header).map {|node| [node.text]})
end
Then /^the "([^"]+)" accordion section should be active$/ do |title|
- pending
+ page.should have_xpath(Bermuda::XPath.accordion_header(title, :active => true))
end
Then /^the "([^"]+)" accordion section should not be active$/ do |title|
- pending
+ page.should have_xpath(Bermuda::XPath.accordion_header(title, :active => false))
end
When /^I activate the "([^"]+)" accordion section$/ do |title|
- pending
+ find(:xpath, Bermuda::XPath.accordion_header(title).child(:a)).click
end
# Autocomplete
View
@@ -0,0 +1,40 @@
+require 'xpath'
+
+module XPath
+ class Expression
+ class Includes < Binary
+ # http://pivotallabs.com/users/alex/blog/articles/427-xpath-css-class-matching
+ def to_xpath(predicate=nil)
+ "contains(concat(' ', normalize-space(#{@left.to_xpath(predicate)}), ' '), concat(' ', #{@right.to_xpath(predicate)}, ' '))"
+ end
+ end
+
+ def includes(expression)
+ Includes.new(current, expression)
+ end
+ end
+end
+
+module Bermuda
+ module XPath
+ include ::XPath
+ extend self
+
+ def accordion_header(title = nil, options = {})
+ xpath = descendant[attr(:class).includes('ui-accordion-header')]
+
+ if options.key?(:active)
+ state = attr(:class).includes('ui-state-active')
+ state = ~state unless options[:active]
+ xpath = xpath[state]
+ end
+
+ xpath = xpath[descendant(:a).text.is title] if title
+ xpath
+ end
+
+ def accordion_content(title = nil, options = {})
+ accordion_header(title, options).next_sibling
+ end
+ end
+end
View
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Accordion</title>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css">
+ <script>
+ $(function() { $( "#accordion" ).accordion(); });
+ </script>
+</head>
+<body>
+<div id="accordion">
+ <h3><a href="#">Section 1</a></h3>
+ <div>
+ <p>
+ Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
+ ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+ amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+ odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+ </p>
+ </div>
+ <h3><a href="#">Section 2</a></h3>
+ <div>
+ <p>
+ Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
+ purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
+ velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
+ suscipit faucibus urna.
+ </p>
+ </div>
+ <h3><a href="#">Section 3</a></h3>
+ <div>
+ <p>
+ Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
+ Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
+ ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
+ lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
+ </p>
+ <ul>
+ <li>List item one</li>
+ <li>List item two</li>
+ <li>List item three</li>
+ </ul>
+ </div>
+ <h3><a href="#">Section 4</a></h3>
+ <div>
+ <p>
+ Cras dictum. Pellentesque habitant morbi tristique senectus et netus
+ et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
+ faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
+ mauris vel est.
+ </p>
+ <p>
+ Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
+ Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+ inceptos himenaeos.
+ </p>
+ </div>
+</div>
+</body>
+</html>

0 comments on commit e3fda15

Please sign in to comment.