Permalink
Browse files

Initial testing of CSS using capybara-webkit

  • Loading branch information...
1 parent 3075ffe commit bd1f0b504c8c941ac23b4f898971a132ef2b75a8 @joshuaclayton committed May 17, 2011
View
@@ -3,3 +3,4 @@
*.DS_Store
tmp/*
lib/settings.yml
+capybara-*
View
@@ -0,0 +1,7 @@
+source "http://rubygems.org"
+
+gem "cucumber", "0.10.2"
+gem "aruba", "0.3.6"
+gem "rspec", "2.6.0"
+gem "capybara", "0.4.1.2"
+gem "capybara-webkit", "0.3.0"
View
@@ -0,0 +1,67 @@
+GEM
+ remote: http://rubygems.org/
+ specs:
+ aruba (0.3.6)
+ childprocess (>= 0.1.7)
+ cucumber (>= 0.10.0)
+ rspec (>= 2.5.0)
+ builder (3.0.0)
+ capybara (0.4.1.2)
+ celerity (>= 0.7.9)
+ culerity (>= 0.2.4)
+ mime-types (>= 1.16)
+ nokogiri (>= 1.3.3)
+ rack (>= 1.0.0)
+ rack-test (>= 0.5.4)
+ selenium-webdriver (>= 0.0.27)
+ xpath (~> 0.1.3)
+ capybara-webkit (0.3.0)
+ capybara (~> 0.4.1)
+ celerity (0.8.9)
+ childprocess (0.1.9)
+ ffi (~> 1.0.6)
+ cucumber (0.10.2)
+ builder (>= 2.1.2)
+ diff-lcs (>= 1.1.2)
+ gherkin (>= 2.3.5)
+ json (>= 1.4.6)
+ term-ansicolor (>= 1.0.5)
+ culerity (0.2.15)
+ diff-lcs (1.1.2)
+ ffi (1.0.8)
+ gherkin (2.3.7)
+ json (>= 1.4.6)
+ json (1.5.1)
+ json_pure (1.5.1)
+ mime-types (1.16)
+ nokogiri (1.4.4)
+ rack (1.2.2)
+ rack-test (0.6.0)
+ rack (>= 1.0)
+ rspec (2.6.0)
+ rspec-core (~> 2.6.0)
+ rspec-expectations (~> 2.6.0)
+ rspec-mocks (~> 2.6.0)
+ rspec-core (2.6.0)
+ rspec-expectations (2.6.0)
+ diff-lcs (~> 1.1.2)
+ rspec-mocks (2.6.0)
+ rubyzip (0.9.4)
+ selenium-webdriver (0.2.0)
+ childprocess (>= 0.1.7)
+ ffi (>= 1.0.7)
+ json_pure
+ rubyzip
+ term-ansicolor (1.0.5)
+ xpath (0.1.4)
+ nokogiri (~> 1.3)
+
+PLATFORMS
+ ruby
+
+DEPENDENCIES
+ aruba (= 0.3.6)
+ capybara (= 0.4.1.2)
+ capybara-webkit (= 0.3.0)
+ cucumber (= 0.10.2)
+ rspec (= 2.6.0)
View
@@ -0,0 +1,8 @@
+require "bundler/setup"
+require "cucumber/rake/task"
+
+Cucumber::Rake::Task.new(:features) do |t|
+ t.cucumber_opts = "features --format pretty"
+end
+
+task :default => :features
@@ -0,0 +1,217 @@
+Feature: Generate default Blueprint stylesheets from the command line
+ In order to use Blueprint on a project
+ As a developer
+ I should be able to generate Blueprint stylesheets from the command line
+
+ Scenario: Prints out helpful information
+ When I generate Blueprint stylesheets
+ Then the output should contain "Grid Settings"
+ And the output should contain "Column Count: 24"
+ And the output should contain "Column Width: 30px"
+ And the output should contain "Gutter Width: 10px"
+ And the output should contain "Total Width : 950px"
+ And the output should not contain "Loaded from settings.yml"
+ And the output should not contain "Namespace:"
+
+ Scenario: Prints out helpful information with custom settings
+ Given a file named "custom_settings.yml" with:
+ """
+ my_awesome_project:
+ custom_layout:
+ column_count: 12
+ column_width: 50
+ gutter_width: 20
+ """
+ When I generate Blueprint stylesheets with the options "-s custom_settings.yml -p my_awesome_project"
+ Then the output should contain "Column Count: 12"
+ And the output should contain "Column Width: 50px"
+ And the output should contain "Gutter Width: 20px"
+ And the output should contain "Total Width : 820px"
+ And the output should contain "Loaded from settings.yml"
+
+ @javascript
+ Scenario: Generates the correct default styles
+ When I generate Blueprint stylesheets
+ And I open the HTML page using the styles with the content:
+ """
+ <div class="container">
+ <section class="standard">
+ <div class="span-12"></div>
+ <div class="span-12 last"></div>
+ </section>
+ <section class="overflowed">
+ <div class="span-12"></div>
+ <div class="span-12"></div>
+ </section>
+ </div>
+ """
+ Then the ".overflowed .span-12:last" should be below ".overflowed .span-12:first"
+ And the ".overflowed .span-12:last" should have a right margin of 10px
+ And the ".standard .span-12:first" should have a width of 470px
+ And the ".standard .span-12:first" should have a right margin of 10px
+ And the ".standard .span-12:last" should have a right margin of 0px
+
+ @javascript
+ Scenario: Generates the correct custom styles
+ Given a file named "custom_settings.yml" with:
+ """
+ my_awesome_project:
+ custom_layout:
+ column_count: 12
+ column_width: 50
+ gutter_width: 10
+ """
+ When I generate Blueprint stylesheets with the options "-s custom_settings.yml -p my_awesome_project"
+ And I open the HTML page using the styles with the content:
+ """
+ <div class="container">
+ <section class="standard">
+ <div class="span-6"></div>
+ <div class="span-6 last"></div>
+ </section>
+ <section class="overflowed">
+ <div class="span-6"></div>
+ <div class="span-6"></div>
+ </section>
+ </div>
+ """
+ Then the ".overflowed .span-6:last" should be below ".overflowed .span-6:first"
+ And the ".overflowed .span-6:last" should have a right margin of 10px
+ And the ".standard .span-6:first" should have a width of 350px
+ And the ".standard .span-6:first" should have a right margin of 10px
+ And the ".standard .span-6:last" should have a right margin of 0px
+
+ @javascript
+ Scenario: Generates the custom styles with a namespace
+ Given a file named "custom_settings.yml" with:
+ """
+ my_awesome_project:
+ namespace: custom-namespace-
+ """
+ When I generate Blueprint stylesheets with the options "-s custom_settings.yml -p my_awesome_project"
+ And I open the HTML page using the styles with the content:
+ """
+ <div class="container">
+ <section class="non-namespaced">
+ <div class="span-12"></div>
+ <div class="span-12 last"></div>
+ </section>
+ <section class="namespaced">
+ <div class="custom-namespace-span-12"></div>
+ <div class="custom-namespace-span-12 custom-namespace-last"></div>
+ </section>
+ </div>
+ """
+ Then the ".non-namespaced .span-12:first" should have a width of 0px
+ And the ".non-namespaced .span-12:last" should have a width of 0px
+ And the ".namespaced .custom-namespace-span-12:first" should have a width of 470px
+ And the ".namespaced .custom-namespace-span-12:first" should have a right margin of 10px
+ And the ".namespaced .custom-namespace-span-12:last" should have a right margin of 0px
+
+ @javascript
+ Scenario: Includes plugins when generating custom styles
+ Given a file named "custom_settings.yml" with:
+ """
+ my_awesome_project:
+ plugins:
+ - link-icons
+ """
+ When I generate Blueprint stylesheets with the options "-s custom_settings.yml -p my_awesome_project"
+ And I open the HTML page using the styles with the content:
+ """
+ <div class="container">
+ <a href="mailto:person@example.com">Send an email</a>
+ </div>
+ """
+ Then the ".container a:first" should have a background image matching "email.png"
+
+ @javascript
+ Scenario: Includes custom CSS when generating custom styles
+ Given a file named "custom_path/my-custom-css.css" with:
+ """
+ .awesome { background-color: #000; }
+ """
+ And a file named "custom_settings.yml" with:
+ """
+ my_awesome_project:
+ custom_css:
+ screen.css:
+ - my-custom-css.css
+ """
+ When I generate Blueprint stylesheets with the options "-s custom_settings.yml -p my_awesome_project"
+ And I open the HTML page using the styles with the content:
+ """
+ <div class="container">
+ <div class="awesome"></div>
+ </div>
+ """
+ Then the ".awesome:first" should have a background color of "rgb(0, 0, 0)"
+
+ @javascript
+ Scenario: Includes default-named custom CSS when generating custom styles
+ Given a file named "custom_path/my-screen.css" with:
+ """
+ .awesome { background-color: #000; }
+ """
+ When I generate Blueprint stylesheets
+ And I open the HTML page using the styles with the content:
+ """
+ <div class="container">
+ <div class="awesome"></div>
+ </div>
+ """
+ Then the ".awesome:first" should have a background color of "rgb(0, 0, 0)"
+
+ @javascript
+ Scenario: Includes default-named custom CSS and additional custom CSS when generating custom styles
+ Given a file named "custom_path/my-screen.css" with:
+ """
+ .awesome { background-color: #000; }
+ """
+ And a file named "custom_path/my-custom-css.css" with:
+ """
+ .lame { background-color: #fff; }
+ """
+ And a file named "custom_settings.yml" with:
+ """
+ my_awesome_project:
+ custom_css:
+ screen.css:
+ - my-custom-css.css
+ """
+ When I generate Blueprint stylesheets with the options "-s custom_settings.yml -p my_awesome_project"
+ And I open the HTML page using the styles with the content:
+ """
+ <div class="container">
+ <div class="awesome"></div>
+ <div class="lame"></div>
+ </div>
+ """
+ Then the ".awesome:first" should have a background color of "rgb(0, 0, 0)"
+ And the ".lame:first" should have a background color of "rgb(255, 255, 255)"
+
+ @javascript
+ Scenario: Generate semantic selectors
+ Given a file named "custom_settings.yml" with:
+ """
+ my_awesome_project:
+ semantic_classes:
+ "#footer, #header": ".span-24"
+ ".primary-content": ".span-18"
+ ".secondary-content": ".span-6 .last"
+ """
+ When I generate Blueprint stylesheets with the options "-s custom_settings.yml -p my_awesome_project"
+ And I open the HTML page using the styles with the content:
+ """
+ <div class="container">
+ <div id="header"></div>
+ <div class="primary-content"></div>
+ <div class="secondary-content"></div>
+ <div id="footer"></div>
+ </div>
+ """
+ Then the "#header" should have a width of 950px
+ And the "#footer" should have a width of 950px
+ And the ".primary-content:first" should have a width of 710px
+ And the ".secondary-content:first" should have a width of 230px
+ And the ".primary-content:first" should be next to ".secondary-content:first"
@@ -0,0 +1,37 @@
+When /^I generate Blueprint stylesheets$/ do
+ When %{I run `#{blueprint_command}`}
+end
+
+When /^I generate Blueprint stylesheets with the options "([^"]*)"$/ do |options|
+ When %{I run `#{blueprint_command(options)}`}
+end
+
+When /^I open the HTML page using the styles with the content:$/ do |string|
+ BlueprintApp.current_response = html_page_content { string }
+ visit("/")
+end
+
+Then /^the "([^"]*)" should be below "([^"]*)"$/ do |selector_1, selector_2|
+ element(selector_1).height.should >= element(selector_2).top
+end
+
+Then /^the "([^"]*)" should be next to "([^"]*)"$/ do |selector_1, selector_2|
+ element(selector_1).top.should >= element(selector_2).top &&
+ element(selector_1).top.should <= element(selector_2).bottom
+end
+
+Then /^the "([^"]*)" should have a width of (\d+)px$/ do |selector, width|
+ element(selector).width.should == width.to_i
+end
+
+Then /^the "([^"]*)" should have a right margin of (\d+)px$/ do |selector, margin|
+ element(selector).margin.right.should == margin.to_i
+end
+
+Then /^the "([^"]*)" should have a background image matching "([^"]*)"$/ do |selector, image|
+ element(selector).background.image.should =~ %r{#{image}}
+end
+
+Then /^the "([^"]*)" should have a background color of "([^"]*)"$/ do |selector, rgb|
+ element(selector).background.color.should == rgb
+end
@@ -0,0 +1,13 @@
+class BlueprintApp
+ def self.current_response=(resp)
+ @@current_response = resp
+ end
+
+ def self.current_response
+ @@current_response || ""
+ end
+
+ def call(env)
+ [200, { "Content-Type" => "text/html" }, self.class.current_response]
+ end
+end
Oops, something went wrong.

0 comments on commit bd1f0b5

Please sign in to comment.