Initial testing of CSS using capybara-webkit

.gitignore

@@ -3,3 +3,4 @@
 *.DS_Store
 tmp/*
 lib/settings.yml
+capybara-*

Gemfile

@@ -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"

Gemfile.lock

@@ -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)

Rakefile

@@ -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

features/generate_stylesheets.feature

@@ -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"

features/step_definitions/blueprint_steps.rb

@@ -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

features/support/blueprint_app.rb

@@ -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