kuji-mercury-rails 0.3.2

data/features/regions/editable/inserting_media.feature

@@ -0,0 +1,110 @@
+@javascript
+Feature:
+  As a content editor type person
+  In order to manage content
+  I should be able to insert different types of media
+
+  Background:
+    Given I am on an editable page
+    And the editor won't prompt when leaving the page
+
+  Scenario: A user can expect all this!
+
+
+#  Scenario: A user can insert and edit an image
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the "Insert Media" button
+    Then the modal window should be visible
+    And I should see "Insert Media (images and videos)" within the modal title
+
+    When I fill in "URL" with "/assets/mercury/temp-logo.png"
+    And press "Insert Media"
+    Then the contents of the editable region should be "this is <img src='/assets/mercury/temp-logo.png'> <b>content</b>"
+    And the modal window should not be visible
+
+    When I make a selection for "img"
+    And click on the "Insert Media" button
+    Then the "media_image_url" field should contain "/assets/mercury/temp-logo.png"
+
+    When I fill in "URL" with "/assets/mercury/default-snippet.png"
+    And press "Insert Media"
+    Then the contents of the editable region should be "this is <img src='/assets/mercury/default-snippet.png'> <b>content</b>"
+
+
+#  Scenario: A user can insert and edit an image with an alignment set
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the "Insert Media" button
+    When I fill in "media_image_url" with "/assets/mercury/temp-logo.png"
+    And select "Right" from "Alignment"
+    And press "Insert Media"
+    Then the contents of the editable region should be "this is <img src='/assets/mercury/temp-logo.png' align='right'> <b>content</b>"
+
+    When I make a selection for "img"
+    And click on the "Insert Media" button
+    And select "Absolute Middle" from "Alignment"
+    And press "Insert Media"
+    Then the contents of the editable region should be "this is <img src='/assets/mercury/temp-logo.png' align='absmiddle'> <b>content</b>"
+
+
+  Scenario: A user can edit an image by double clicking it
+    Given the content of the editable region has an image
+
+    When I double click on the first image in the editable region
+    Then the modal window should be visible
+    And I should see "Insert Media (images and videos)" within the modal title
+    And the "media_image_url" field should contain "/assets/mercury/temp-logo.png"
+
+    When I fill in "URL" with "/assets/mercury/default-snippet.png"
+    And select "Absolute Middle" from "Alignment"
+    And press "Insert Media"
+    Then the contents of the editable region should be "this is <img src='/assets/mercury/default-snippet.png' align='absmiddle'> <b>content</b>"
+
+
+  Scenario: A user can embed and edit a youtube video
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the "Insert Media" button
+    And choose "YouTube Share URL"
+    And fill in "YouTube Share URL" with "http://youtu.be/Pny4hoN8eII"
+    And fill in "Width" with "400"
+    And fill in "Height" with "200"
+    And press "Insert Media"
+    Then the contents of the editable region should be "this is <iframe allowfullscreen='true' src='http://www.youtube.com/embed/Pny4hoN8eII?wmode=transparent' style='width: 400px; height: 200px;' frameborder='0'></iframe> <b>content</b>"
+
+    When I make a selection for "iframe"
+    And click on the "Insert Media" button
+    Then the "media_youtube_url" field should contain "http://youtu.be/Pny4hoN8eII"
+
+    When I fill in "YouTube Share URL" with "http://youtu.be/Pny4hoN8eI"
+    And fill in "Width" with "500"
+    And fill in "Height" with "300"
+    And press "Insert Media"
+    Then the contents of the editable region should be "this is <iframe allowfullscreen='true' src='http://www.youtube.com/embed/Pny4hoN8eI?wmode=transparent' style='width: 500px; height: 300px;' frameborder='0'></iframe> <b>content</b>"
+
+
+#  Scenario: A user can embed and edit a vimeo video
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the "Insert Media" button
+    And choose "Vimeo URL"
+    And fill in "Vimeo URL" with "http://vimeo.com/25708134"
+    And fill in "Width" with "400"
+    And fill in "Height" with "200"
+    And press "Insert Media"
+    Then the contents of the editable region should be "this is <iframe src='http://player.vimeo.com/video/25708134?title=1&amp;byline=1&amp;portrait=0&amp;color=ffffff' style='width: 400px; height: 200px;' frameborder='0'></iframe> <b>content</b>"
+
+    When I make a selection for "iframe"
+    And click on the "Insert Media" button
+    Then the "media_vimeo_url" field should contain "http://vimeo.com/25708134"
+
+    When I fill in "Vimeo URL" with "http://vimeo.com/2570813"
+    And fill in "Width" with "500"
+    And fill in "Height" with "300"
+    And press "Insert Media"
+    Then the contents of the editable region should be "this is <iframe src='http://player.vimeo.com/video/2570813?title=1&amp;byline=1&amp;portrait=0&amp;color=ffffff' style='width: 500px; height: 300px;' frameborder='0'></iframe> <b>content</b>"

data/features/regions/editable/inserting_snippets.feature

@@ -0,0 +1,102 @@
+@javascript
+Feature:
+  As a content editor type person
+  In order to reuse content chunks
+  I should be able to put snippets into regions
+
+  Background:
+    Given I am on an editable page
+    And the editor won't prompt when leaving the page
+
+  Scenario: A user can expect all this!
+
+
+  # todo: these can't be one scenario because snippet.load doesn't find/replace existing ones
+  Scenario: A user can drag and drop snippets into an editable region
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I open the snippet panel
+    And I drag the example snippet into the editable region
+    Then the modal window should be visible
+    And I should see "Snippet Options" within the modal title
+
+    When I fill in "First Name" with "Jeremy"
+    And fill in "Favorite Beer" with "Stella"
+    And press "Insert Snippet"
+    Then the modal window should not be visible
+    And the contents of the editable region should be "this is <div data-version='1' data-snippet='snippet_14' class='mercury-snippet example-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div><span>simple</span> <b>content</b>"
+
+
+  Scenario: A user can use the snippet toolbar to remove a snippet
+    Given the options for the example snippet "snippet_42" are first_name: "Jeremy", favorite_beer: "Stella"
+    And the content of the editable region has that snippet
+
+    When I hover over the snippet
+    Then the snippet toolbar should be visible
+
+    When I click on the remove snippet toolbar button
+    Then the contents of the editable region should be " <b>content</b>"
+
+
+  Scenario: A user can use the snippet toolbar to edit the options of a snippet
+    Given the options for the example snippet "snippet_42" are first_name: "Hipsters", favorite_beer: "PBR"
+    And the content of the editable region has that snippet
+
+    When I hover over the snippet
+    And click on the edit snippet settings toolbar button
+    Then the modal window should be visible
+    And the "First Name" field should contain "Hipsters"
+    And the "Favorite Beer" field should contain "PBR"
+
+    When I fill in "First Name" with "Jeremy"
+    And fill in "Favorite Beer" with "Stella"
+    And press "Insert Snippet"
+    Then the contents of the editable region should be "<div data-version='2' data-snippet='snippet_42' class='mercury-snippet example-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
+
+
+  Scenario: A user can make changes to a snippets options, and they'll be versioned for undo and redo
+    Given the options for the example snippet "snippet_42" are first_name: "Hipsters", favorite_beer: "PBR"
+    And the content of the editable region has that snippet
+
+    When I edit the snippet
+    And I fill in "First Name" with "Jeremy"
+    And fill in "Favorite Beer" with "Stella"
+    And press "Insert Snippet"
+    Then the contents of the editable region should be "<div data-version='2' data-snippet='snippet_42' class='mercury-snippet example-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
+
+    When I edit the snippet
+    Then the "First Name" field should contain "Jeremy"
+    And the "Favorite Beer" field should contain "Stella"
+
+    When fill in "First Name" with "Diesel"
+    And fill in "Favorite Beer" with "Bells Hopslam"
+    And press "Insert Snippet"
+    Then the content of the editable region should be "<div data-version='3' data-snippet='snippet_42' class='mercury-snippet example-snippet' contenteditable='false'><strong>Diesel</strong> likes Bells Hopslam</div> <b>content</b>"
+
+    When I click on the "Undo" button
+    Then the contents of the editable region should be "<div data-version='2' data-snippet='snippet_42' class='mercury-snippet example-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
+
+    When I edit the snippet
+    # todo: this is a bug
+#    Then the "First Name" field should contain "Jeremy"
+#    And the "Favorite Beer" field should contain "Stella"
+
+    When I close the modal
+    When I click on the "Redo" button
+    Then the contents of the editable region should be "<div data-version='3' data-snippet='snippet_42' class='mercury-snippet example-snippet' contenteditable='false'><strong>Diesel</strong> likes Bells Hopslam</div> <b>content</b>"
+
+    When I edit the snippet
+    Then the "First Name" field should contain "Diesel"
+    And the "Favorite Beer" field should contain "Bells Hopslam"
+
+    When I fill in "First Name" with "Jen"
+    And fill in "Favorite Beer" with "Miller High Life"
+    And press "Insert Snippet"
+    Then the contents of the editable region should be "<div data-version='4' data-snippet='snippet_42' class='mercury-snippet example-snippet' contenteditable='false'><strong>Jen</strong> likes Miller High Life</div> <b>content</b>"
+
+
+#  Scenario: When a user saves, the snippets should be gone from the html, but the options are serialized
+#    Given the options for the example snippet "snippet_42" are first_name: "Hipsters", favorite_beer: "PBR"
+#    And the content of the editable region has that snippet
+#    When I click on the "Save" button

data/features/regions/editable/inserting_special_characters.feature

@@ -0,0 +1,24 @@
+@javascript
+Feature:
+  As a content editor type person
+  In order to manage content
+  I should be able to insert characters that are otherwise hard
+
+  Background:
+    Given I am on an editable page
+    And the editor won't prompt when leaving the page
+
+  Scenario: A user can expect all this!
+
+
+#  Scenario: A user can insert special characters
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the "Insert Character" button
+    Then the modal window should be visible
+    And I should see "Special Characters" within the modal title
+
+    When I click on the sweet snowman
+    Then the modal window should not be visible
+    And the contents of the editable region should be "this is ☃ <b>content</b>"

data/features/regions/editable/inserting_tables.feature

@@ -0,0 +1,109 @@
+@javascript
+Feature:
+  As a content editor type person
+  In order to manage content
+  I should be able to insert and edit complex tables
+
+  Background:
+    Given I am on an editable page
+    And the editor won't prompt when leaving the page
+
+  Scenario: A user can expect all this!
+
+
+#  Scenario: A user can insert a table
+    Given the content of the editable region is simple content
+    And I make a selection
+
+    When I click on the "Insert Table" button
+    Then the modal window should be visible
+    And I should see "Insert Table" within the modal title
+
+    When I click on the third cell in the first row
+    And I add a column before it
+    Then the table column count should be 4
+    And the selected cell should be the forth cell in the first row
+
+    When I add a column after
+    Then the table column count should be 5
+    And the selected cell should be the forth cell in the first row
+
+    When I add a row after
+    Then the table row count should be 3
+    And the selected cell should be the forth cell in the first row
+
+    When I add a row before
+    Then the table row count should be 4
+    And the selected cell should be the forth cell in the second row
+
+    When I delete the column
+    Then the table column count should be 4
+    And a selected cell should not be visible
+
+    When I click on the second cell in the second row
+    And delete the row
+    Then the table row count should be 3
+    And a selected cell should not be visible
+
+    When I click on the second cell in the second row
+    And increase the colspan
+    And click on the first cell in the first row
+    And increase the rowspan
+    And select "Right" from "Alignment"
+    And fill in "Border" with "2"
+    And fill in "Spacing" with "2"
+    And press "Insert Table"
+    Then the contents of the editable region should be "this is&nbsp;<table align='right' border='2' cellspacing='2'><tbody><tr><td rowspan='2'><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td colspan='2'><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td></tr></tbody></table> <b>content</b>"
+    And the modal window should not be visible
+
+
+#  Scenario: A user can edit a table after inserting one (in an editable region)
+    Given the content of the editable region has a table
+    And I make a selection
+
+    When I click on the add row before editor button
+    Then the table row count should be 3
+    And the contents of the editable region should be "this is a <table><tbody><tr><td><br></td><td><br></td></tr><tr><td><span>1</span></td><td><span>2</span></td></tr><tr><td><span>3</span></td><td><span>4</span></td></tr></tbody></table> <b>content</b>"
+
+    When I click on the add row after editor button
+    Then the table row count should be 4
+    And the contents of the editable region should be "this is a <table><tbody><tr><td><br></td><td><br></td></tr><tr><td><span>1</span></td><td><span>2</span></td></tr><tr><td><br></td><td><br></td></tr><tr><td><span>3</span></td><td><span>4</span></td></tr></tbody></table> <b>content</b>"
+
+    When I click on the add column before editor button
+    Then the column count should be 3
+    And the contents of the editable region should be "this is a <table><tbody><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><span>1</span></td><td><span>2</span></td></tr><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><span>3</span></td><td><span>4</span></td></tr></tbody></table> <b>content</b>"
+
+    When I click on the add column after editor button
+    Then the column count should be 4
+    And the contents of the editable region should be "this is a <table><tbody><tr><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><span>1</span></td><td><br></td><td><span>2</span></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><span>3</span></td><td><br></td><td><span>4</span></td></tr></tbody></table> <b>content</b>"
+
+    When I click on the delete row editor button
+    Then the table row count should be 3
+    And the contents of the editable region should be "this is a <table><tbody><tr><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><span>3</span></td><td><br></td><td><span>4</span></td></tr></tbody></table> <b>content</b>"
+
+    When I make a selection
+    And click on the delete column editor button
+    Then the table column count should be 3
+    And the contents of the editable region should be "this is a <table><tbody><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><span>4</span></td></tr></tbody></table> <b>content</b>"
+
+
+#  Scenario: A user can adjust the colspans of a table (in an editable region)
+    Given the content of the editable region has a table
+    And I make a selection
+
+    When I click on the increase colspan editor button
+    Then the contents of the editable region should be "this is a <table><tbody><tr><td colspan='2'><span>1</span></td></tr><tr><td><span>3</span></td><td><span>4</span></td></tr></tbody></table> <b>content</b>"
+
+    When I click on the decrease colspan editor button
+    Then the contents of the editable region should be "this is a <table><tbody><tr><td><span>1</span></td><td><br></td></tr><tr><td><span>3</span></td><td><span>4</span></td></tr></tbody></table> <b>content</b>"
+
+
+#  Scenario: A user can adjust the rowspans of a table (in an editable region)
+    Given the content of the editable region has a table
+    And I make a selection
+
+    When I click on the increase rowspan editor button
+    Then the contents of the editable region should be "this is a <table><tbody><tr><td rowspan='2'><span>1</span></td><td><span>2</span></td></tr><tr><td><span>4</span></td></tr></tbody></table> <b>content</b>"
+
+    When I click on the decrease rowspan editor button
+    Then the contents of the editable region should be "this is a <table><tbody><tr><td><span>1</span></td><td><span>2</span></td></tr><tr><td><br></td><td><span>4</span></td></tr></tbody></table> <b>content</b>"

data/features/regions/simple/basic_editing.feature

@@ -0,0 +1,5 @@
+@javascript
+Feature:
+  As a content editor type person
+  In order to manage content
+  I should be able to manipulate text

data/features/saving/saving.feature

@@ -0,0 +1,33 @@
+@javascript
+Feature:
+  As a content editor type person
+  In order to manage content
+  I should be able to save the content
+
+  Background:
+    Given I am on an editable page
+    And save results will be cached
+
+
+  Scenario: A user can change content in an editable region and save those changes
+    When I set the content of the editable region to "new content"
+    And I click on the "Save" button
+    Then the save should have "new content" for the editable region
+
+
+  Scenario: A user can change content in a markupable region and save those changes
+    When I set the content of the markupable region to "new content"
+    And I click on the "Save" button
+    Then the save should have "new content" for the markupable region
+
+
+  Scenario: A user can put snippets into an editable region and get the options on save
+    # todo: finish
+
+
+  Scenario: A user can expect the right version of the snippet options to be saved
+    # todo: finish
+
+
+  Scenario: A user can put snippets into a markupable region and get the options on save
+    # todo: finish

data/features/step_definitions/debug_steps.rb

@@ -0,0 +1,14 @@
+# DEBUG / DELAY STEPS
+#------------------------------------------------------------------------------
+
+When /^(?:|I )sleep for (\d+) seconds?$/ do |seconds|
+  sleep(seconds.to_i)
+end
+
+When /^I debug$/ do
+  puts 'Debugging...'
+  unless ENV['RUBYMINE'].present?
+    require 'debug'
+    debugger
+  end
+end

data/features/step_definitions/mercury_steps.rb

@@ -0,0 +1,438 @@
+## Generic web steps
+#------------------------------------------------------------------------------
+When /^(?:|I )click on (.+)$/ do |locator|
+  selector = selector_for(locator)
+  find(selector, :message => "Unable to locate the element '#{selector}' to click on").click
+end
+
+Then /^(.+) should (not )?be visible$/ do |locator, boolean|
+  selector = selector_for(locator)
+  if boolean == 'not '
+    page.has_no_css?("#{selector}")
+  else
+    page.has_css?("#{selector}", :visible => true)
+  end
+end
+
+# scoping step for different windows
+When /^(.*) in the "([^"]*)" window$/ do |s, window|
+  page.driver.within_window(window) do
+    step(s)
+  end
+end
+
+
+## Mercury general steps
+#------------------------------------------------------------------------------
+Given /^(?:|I )adjust the configuration to have: \{([^\}]*)\}$/ do |javascript|
+  Rails.application.config.mercury_config = JSON.parse("{#{javascript}}")
+end
+
+# scoping step for the mercury content frame
+When /^(.*) in the content frame$/ do |s|
+  page.driver.within_frame('mercury_iframe') do
+    step(s)
+  end
+end
+
+# silence mercury's onbeforeunload confirmation
+Given /^the editor won't prompt when leaving the page$/ do
+  page.driver.execute_script('Mercury.silent = true;')
+end
+
+
+## Toolbar specific steps
+#------------------------------------------------------------------------------
+# for the select dropdowns
+When /^(?:|I )select (.*?) from the dropdown$/ do |locator|
+  selector = selector_for(locator)
+  find(selector, :message => "Unable to locate the element '#{selector}' to click on").click
+end
+
+
+## Panel specific steps
+#------------------------------------------------------------------------------
+When /^(?:I )(?:open|close|toggle) the (.*?) panel$/ do |panel_locator|
+  step(%Q{I click on the "#{panel_locator}" button})
+end
+
+
+## Modal specific steps
+#------------------------------------------------------------------------------
+When /^(?:I )close the modal(?: window)?$/ do
+  step(%Q{I click on the modal close button})
+end
+
+
+## Region specific steps
+#------------------------------------------------------------------------------
+# setting content
+Given /^the content of (.*?) (?:is|are|has|includes) (.*?)$/ do |region_locator, contents|
+  step(%Q{I set the contents of #{region_locator} to #{contents}})
+end
+
+When /^(?:|I )(?:change|set) the contents? of (.*?) to (.*?)$/ do |region_locator, contents|
+  region_id = region_selector_for(region_locator).gsub('#', '')
+  content = contents[0] == '"' ? contents : "\"#{contents_for(contents)}\""
+  page.driver.within_frame('mercury_iframe') do
+    find("##{region_id}", :message => "Unable to locate a region matching '##{region_id}'")
+    page.driver.execute_script <<-JAVASCRIPT
+      var element = top.jQuery(document).find('##{region_id}');
+      if (element.data('type') == 'markupable') {
+        element.find('textarea').val(#{content});
+      } else {
+        var region = top.mercuryInstance.getRegionByName('#{region_id}');
+        region.content(#{content});
+      }
+    JAVASCRIPT
+  end
+end
+
+# setting/making selections
+When /^(?:|I )(?:make|have) a selection$/ do
+  step(%Q{I have a selection for "span"})
+end
+
+When /^(?:|I )(?:make|have) a selection (?:in (.*?) )?for "([^"]*)"$/ do |region_locator, selector|
+  step(%Q{I can simulate complex javascript events})
+  # assume the first editable region if one wasn't provided'
+  region_selector = region_selector_for(region_locator || 'the editable region')
+  page.driver.within_frame('mercury_iframe') do
+    find("#{region_selector}", :message => "Unable to locate a region matching '#{region_selector}'")
+    find("#{region_selector} #{selector}", :message => "Unable to locate a match for '#{selector}' inside '#{region_locator}'")
+    page.driver.execute_script <<-JAVASCRIPT
+      var element = top.jQuery(document).find('#{region_selector}');
+      if (element.data('type') == 'markupable') {
+        alert('unimplemented');
+        throw('unimplemented');
+      } else {
+        var selectedElement = element.find('#{selector}');
+        var selection = new top.Mercury.Regions.Editable.Selection(window.getSelection(), document);
+        selection.selectNode(selectedElement.get(0));
+        selectedElement.simulate('mouseup');
+      }
+    JAVASCRIPT
+  end
+end
+
+# other events
+When /^(?:|I )double click on (.*?) in (.*?)$/ do |locator, region_locator|
+  step(%Q{I can simulate complex javascript events})
+  selector = selector_for(locator)
+  # assume the first editable region if one wasn't provided'
+  region_selector = region_selector_for(region_locator || 'the editable region')
+  page.driver.within_frame('mercury_iframe') do
+    find("#{region_selector}", :message => "Unable to locate a region matching '#{region_selector}'")
+    find("#{region_selector} #{selector}", :message => "Unable to locate a match for '#{selector}' inside '#{region_locator}'")
+    page.driver.execute_script <<-JAVASCRIPT
+      top.jQuery(document).find('#{region_selector} #{selector}').simulate('dblclick');
+    JAVASCRIPT
+  end
+end
+
+# getting contents
+Then /^the contents? of (.*?) should be "([^"]*)"$/ do |region_locator, content|
+  region_selector = region_selector_for(region_locator)
+  page.driver.within_frame('mercury_iframe') do
+    find("#{region_selector}", :message => "Unable to locate a region matching '#{region_selector}'")
+    results = page.driver.execute_script <<-JAVASCRIPT
+      var element = top.jQuery(document).find('#{region_selector}');
+      if (element.data('type') == 'markupable') {
+        return element.find('textarea').val();
+      } else {
+        return element.html();
+      }
+    JAVASCRIPT
+    assert_equal content, results.gsub('"', "'").gsub("\n", '')
+  end
+end
+
+
+## Saving specific steps
+#------------------------------------------------------------------------------
+# caching for the last save -- a request will still be made
+Given /^save results will be cached$/ do
+  page.driver.execute_script <<-JAVASCRIPT
+    Mercury.PageEditor.prototype.save = function() {
+      window.cachedResults = this.serialize();
+    }
+  JAVASCRIPT
+end
+
+# check for the last save cached results
+Then /^the save should have (.*?) for (.*?)$/ do |contents, region_locator|
+  region_id = region_selector_for(region_locator).gsub('#', '')
+  content = contents[0] == '"' ? contents : "\"#{contents_for(contents)}\""
+  results = page.driver.execute_script <<-JAVASCRIPT
+    return (window.cachedResults['#{region_id}']) ?
+      window.cachedResults['#{region_id}']['value'] : null;
+  JAVASCRIPT
+  assert_equal content, "\"#{results}\""
+end
+
+
+## Table editing specific steps
+#------------------------------------------------------------------------------
+# in the modal window
+When /^(?:|I )(?:add|insert) a (row|column) (before|after)(?: it)?$/ do |row_or_column, before_or_after|
+  name = "insert_#{row_or_column}_#{before_or_after}".camelcase(:lower)
+  step(%Q{I click on ".mercury-modal-content input[name=#{name}]"})
+end
+
+When /^(?:|I )delete the(?: current)? (row|column)$/ do |row_or_column|
+  name = "delete_#{row_or_column}".camelcase(:lower)
+  step(%Q{I click on ".mercury-modal-content input[name=#{name}]"})
+end
+
+When /^(?:|I )(increase|decrease) the (rowspan|colspan)$/ do |increase_or_decrease, rowspan_or_colspan|
+  name = "#{increase_or_decrease}_#{rowspan_or_colspan}".camelcase(:lower)
+  step(%Q{I click on ".mercury-modal-content input[name=#{name}]"})
+end
+
+Then /^the selected cell should be (.*?)$/ do |locator|
+  selector = selector_for(locator).gsub('td:', 'td.selected:')
+  find("#{selector}", :message => "Unable to locate the selected cell for '#{selector}'")
+end
+
+# in general
+Then /^the(?: table)? (row|column) count should be (\d+)$/ do |row_or_column, expected_count|
+  method = "get_#{row_or_column}_count".camelcase(:lower)
+  actual_count = page.driver.execute_script("return Mercury.tableEditor.#{method}()")
+  assert_equal expected_count.to_i, actual_count.to_i
+end
+
+
+## Snippet specific steps
+#------------------------------------------------------------------------------
+# setting snippet options
+Given /^the options for the (.*?) snippet "([^"]*)" are (.*?)$/ do |snippet_name, snippet_id, options|
+  @snippet_id = snippet_id
+  options_json = parse_snippet_options_from(options)
+  page.driver.execute_script <<-JAVASCRIPT
+    Mercury.Snippet.load({#{snippet_id}: {name: '#{snippet_name}', options: #{options_json}}});
+  JAVASCRIPT
+end
+
+# dragging/dropping
+When /^(?:|I )(?:drag|drop) (.*?) (?:into|on) (.*?)$/ do |snippet_locator, region_locator|
+  snippet_name = snippet_name_for(snippet_locator)
+  region_id = region_selector_for(region_locator).gsub('#', '')
+  page.driver.within_frame('mercury_iframe') do
+    find("##{region_id}", :message => "Unable to locate a region matching '##{region_id}'")
+    page.driver.execute_script <<-JAVASCRIPT
+      var element = top.jQuery(document).find('##{region_id}');
+      if (element.data('type') == 'markupable') {
+        alert('unimplemented');
+        throw('unimplemented');
+      } else {
+        var region = top.mercuryInstance.getRegionByName('#{region_id}');
+        region.selection().range.collapse(true);
+        document.execCommand('insertHTML', false, '<img data-snippet="#{snippet_name}" src="/assets/mercury/default-snippet.png">');
+        element.trigger('possible:drop');
+      }
+    JAVASCRIPT
+  end
+end
+
+When /^(?:|I )hover over (.*?)(?: in (.*?))?$/ do |locator, region_locator|
+  step(%Q{I can simulate complex javascript events})
+  selector = selector_for(locator)
+  region_selector = region_selector_for(region_locator || 'the editable region')
+  page.driver.within_frame('mercury_iframe') do
+    find("#{region_selector}", :message => "Unable to locate a region matching '#{region_selector}'")
+    page.driver.execute_script <<-JAVASCRIPT
+      var element = top.jQuery(document).find('#{region_selector}');
+      if (element.data('type') == 'markupable') {
+        alert('unimplemented');
+        throw('unimplemented');
+      } else {
+        element.find('#{selector}').simulate('mousemove');
+      }
+    JAVASCRIPT
+  end
+end
+
+When /^(?:|I )edit the snippet$/ do
+  step(%{I hover over the snippet})
+  step(%{click on the edit snippet settings toolbar button})
+end
+
+
+## Dropping image specific steps
+#------------------------------------------------------------------------------
+#When /^(?:|I )drop an image into (.*?) from a different browser/ do |region_locator|
+#  Given(%Q{I can simulate complex javascript events})
+#  region_selector = region_selector_for(region_locator || 'the editable region')
+#  page.driver.within_frame('mercury_iframe') do
+#    find("#{region_selector}", :message => "Unable to locate a region matching '#{region_selector}'")
+#    page.driver.execute_script <<-JAVASCRIPT
+#      var element = top.jQuery(document).find('#{region_selector}');
+#      if (element.data('type') == 'markupable') {
+#        alert('unimplemented');
+#        throw('unimplemented');
+#      } else {
+#        element.find('#{region_selector}').simulate('drop', {'text/html': '<img src="testing.gif"/>'});
+#      }
+#    JAVASCRIPT
+#  end
+#end
+
+
+## Javascript event simulation steps
+#------------------------------------------------------------------------------
+Given /^(?:|I )can simulate complex javascript events$/ do
+  page.driver.execute_script(EVENT_SIMULATION_JAVASCRIPT)
+end
+
+#------------------------------------------------------------------------------
+
+EVENT_SIMULATION_JAVASCRIPT = <<-JAVASCRIPT
+  /*
+   * jquery.simulate - simulate browser mouse and keyboard events
+   *
+   * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+   * Dual licensed under the MIT or GPL Version 2 licenses.
+   * http://jquery.org/license
+   *
+   */
+  ;(function($) {
+
+  $.fn.extend({
+    simulate: function(type, options) {
+      return this.each(function() {
+        var opt = $.extend({}, $.simulate.defaults, options || {});
+        new $.simulate(this, type, opt);
+      });
+    }
+  });
+
+  $.simulate = function(el, type, options) {
+    this.target = el;
+    this.options = options;
+
+    if (/^drag$/.test(type)) {
+      this[type].apply(this, [this.target, options]);
+    } else {
+      this.simulateEvent(el, type, options);
+    }
+  }
+
+  $.extend($.simulate.prototype, {
+    simulateEvent: function(el, type, options) {
+      var evt = this.createEvent(type, options);
+      this.dispatchEvent(el, type, evt, options);
+      return evt;
+    },
+    createEvent: function(type, options) {
+      if (/^mouse(over|out|down|up|move)|(dbl)?click$/.test(type)) {
+        return this.mouseEvent(type, options);
+      } else if (/^key(up|down|press)$/.test(type)) {
+        return this.keyboardEvent(type, options);
+      }
+    },
+    mouseEvent: function(type, options) {
+      var evt;
+      var e = $.extend({
+        bubbles: true, cancelable: (type != "mousemove"), view: window, detail: 0,
+        screenX: 0, screenY: 0, clientX: 0, clientY: 0,
+        ctrlKey: false, altKey: false, shiftKey: false, metaKey: false,
+        button: 0, relatedTarget: undefined
+      }, options);
+
+      var relatedTarget = $(e.relatedTarget)[0];
+
+      if ($.isFunction(document.createEvent)) {
+        evt = document.createEvent("MouseEvents");
+        evt.initMouseEvent(type, e.bubbles, e.cancelable, e.view, e.detail,
+          e.screenX, e.screenY, e.clientX, e.clientY,
+          e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
+          e.button, e.relatedTarget || document.body.parentNode);
+      } else if (document.createEventObject) {
+        evt = document.createEventObject();
+        $.extend(evt, e);
+        evt.button = { 0:1, 1:4, 2:2 }[evt.button] || evt.button;
+      }
+      return evt;
+    },
+    keyboardEvent: function(type, options) {
+      var evt;
+
+      var e = $.extend({ bubbles: true, cancelable: true, view: window,
+        ctrlKey: false, altKey: false, shiftKey: false, metaKey: false,
+        keyCode: 0, charCode: 0
+      }, options);
+
+      if ($.isFunction(document.createEvent)) {
+        try {
+          evt = document.createEvent("KeyEvents");
+          evt.initKeyEvent(type, e.bubbles, e.cancelable, e.view,
+            e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
+            e.keyCode, e.charCode);
+        } catch(err) {
+          evt = document.createEvent("Events");
+          evt.initEvent(type, e.bubbles, e.cancelable);
+          $.extend(evt, { view: e.view,
+            ctrlKey: e.ctrlKey, altKey: e.altKey, shiftKey: e.shiftKey, metaKey: e.metaKey,
+            keyCode: e.keyCode, charCode: e.charCode
+          });
+        }
+      } else if (document.createEventObject) {
+        evt = document.createEventObject();
+        $.extend(evt, e);
+      }
+      if ($.browser.msie || $.browser.opera) {
+        evt.keyCode = (e.charCode > 0) ? e.charCode : e.keyCode;
+        evt.charCode = undefined;
+      }
+      return evt;
+    },
+    dispatchEvent: function(el, type, evt) {
+      if (el.dispatchEvent) {
+        el.dispatchEvent(evt);
+      } else if (el.fireEvent) {
+        el.fireEvent('on' + type, evt);
+      }
+      return evt;
+    },
+    drag: function(el) {
+      var self = this, center = this.findCenter(this.target),
+        options = this.options,	x = Math.floor(center.x), y = Math.floor(center.y),
+        dx = options.dx || 0, dy = options.dy || 0, target = this.target;
+      var coord = { clientX: x, clientY: y };
+      this.simulateEvent(target, "mousedown", coord);
+      coord = { clientX: x + 1, clientY: y + 1 };
+      this.simulateEvent(document, "mousemove", coord);
+      coord = { clientX: x + dx, clientY: y + dy };
+      this.simulateEvent(document, "mousemove", coord);
+      this.simulateEvent(document, "mousemove", coord);
+      this.simulateEvent(target, "mouseup", coord);
+      this.simulateEvent(target, "click", coord);
+    },
+    findCenter: function(el) {
+      var el = $(this.target), o = el.offset(), d = $(document);
+      return {
+        x: o.left + el.outerWidth() / 2 - d.scrollLeft(),
+        y: o.top + el.outerHeight() / 2 - d.scrollTop()
+      };
+    }
+  });
+
+  $.extend($.simulate, {
+    defaults: {
+      speed: 'sync'
+    },
+    VK_TAB: 9,
+    VK_ENTER: 13,
+    VK_ESC: 27,
+    VK_PGUP: 33,
+    VK_PGDN: 34,
+    VK_END: 35,
+    VK_HOME: 36,
+    VK_LEFT: 37,
+    VK_UP: 38,
+    VK_RIGHT: 39,
+    VK_DOWN: 40
+  });
+
+  })(jQuery);
+JAVASCRIPT