mercury-rails 0.5.0 → 0.6.0

data/features/regions/{editable → full}/inserting_links.feature

@@ -12,7 +12,7 @@ Feature:
 
 
  Scenario: A user can insert and edit a link to an external site
-    Given the content of the editable region is simple content
+    Given the content of the full region is simple content
     And I make a selection
 
     When I click on the "Insert Link" button
@@ -21,7 +21,7 @@ Feature:
 
     When I fill in "URL" with "http://google.com"
     And press "Insert Link"
-    Then the contents of the editable region should be "this is <a href='http://google.com'>simple</a> <b>content</b>"
+    Then the contents of the full region should be "this is <a href='http://google.com'>simple</a> <b>content</b>"
     And the modal window should not be visible
 
     When I click on the "Insert Link" button
@@ -29,27 +29,27 @@ Feature:
 
     When I fill in "URL" with "http://cnn.com"
     And press "Insert Link"
-    Then the contents of the editable region should be "this is <a href='http://cnn.com'>simple</a> <b>content</b>"
+    Then the contents of the full region should be "this is <a href='http://cnn.com'>simple</a> <b>content</b>"
 
 
  Scenario: A user can insert and edit a link with a target set
-    Given the content of the editable region is simple content
+    Given the content of the full region is simple content
     And I make a selection
 
     When I click on the "Insert Link" button
     And fill in "URL" with "http://google.com"
     And select "Blank (a new window or tab)" from "Link Target"
     And press "Insert Link"
-    Then the contents of the editable region should be "this is <a target='_blank' href='http://google.com'>simple</a> <b>content</b>"
+    Then the contents of the full region should be "this is <a target='_blank' href='http://google.com'>simple</a> <b>content</b>"
 
     When I click on the "Insert Link" button
     And select "Top (removes any frames)" from "Link Target"
     And press "Insert Link"
-    Then the contents of the editable region should be "this is <a target='_top' href='http://google.com'>simple</a> <b>content</b>"
+    Then the contents of the full region should be "this is <a target='_top' href='http://google.com'>simple</a> <b>content</b>"
 
 
  Scenario: A user can insert a link to an external site and open it in a popup
-    Given the content of the editable region is simple content
+    Given the content of the full region is simple content
     And I make a selection
 
     When I click on the "Insert Link" button
@@ -58,7 +58,7 @@ Feature:
     And I fill in "Popup Width" with "500"
     And fill in "Popup Height" with "200"
     And press "Insert Link"
-    Then the contents of the editable region should be "this is <a href='javascript:void(window.open('http://google.com', 'popup_window', 'width=500,height=200,menubar=no,toolbar=no'))'>simple</a> <b>content</b>"
+    Then the contents of the full region should be "this is <a href='javascript:void(window.open('http://google.com', 'popup_window', 'width=500,height=200,menubar=no,toolbar=no'))'>simple</a> <b>content</b>"
 
     When I click on the "Insert Link" button
     Then the "Popup Width" field should contain "500"
@@ -66,21 +66,21 @@ Feature:
 
 
  Scenario: A user can insert a bookmark and then link to it
-    Given the content of the editable region is simple content
+    Given the content of the full region is simple content
     And I make a selection
 
     When I click on the "Insert Link" button
     And I choose "Bookmark"
     And fill in "Bookmark" with "test-bookmark1"
     And press "Insert Link"
-    Then the contents of the editable region should be "this is <a name='test-bookmark1'>simple</a> <b>content</b>"
+    Then the contents of the full region should be "this is <a name='test-bookmark1'>simple</a> <b>content</b>"
 
     When I make a selection for "b"
     And click on the "Insert Link" button
     And I choose "Existing Links"
     And select "simple" from "Existing Links"
     And press "Insert Link"
-    Then the contents of the editable region should be "this is <a name='test-bookmark1'>simple</a> <a href='#test-bookmark1'>content</a>"
+    Then the contents of the full region should be "this is <a name='test-bookmark1'>simple</a> <a href='#test-bookmark1'>content</a>"
 
     When I make a selection for "a"
     And click on the "Insert Link" button
@@ -89,7 +89,7 @@ Feature:
     And I choose "Bookmark"
     And fill in "Bookmark" with "test-bookmark2"
     And press "Insert Link"
-    Then the contents of the editable region should be "this is <a name='test-bookmark2'>simple</a> <a href='#test-bookmark1'>content</a>"
+    Then the contents of the full region should be "this is <a name='test-bookmark2'>simple</a> <a href='#test-bookmark1'>content</a>"
 
     # todo: when I change the name of a bookmark, and bookmarks that are pointing to me should also be updated (on this page)
 

data/features/regions/{editable → full}/inserting_media.feature

@@ -12,7 +12,7 @@ Feature:
 
 
 #  Scenario: A user can insert and edit an image
-    Given the content of the editable region is simple content
+    Given the content of the full region is simple content
     And I make a selection
 
     When I click on the "Insert Media" button
@@ -21,7 +21,7 @@ Feature:
 
     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>"
+    Then the contents of the full 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"
@@ -30,30 +30,30 @@ Feature:
 
     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>"
+    Then the contents of the full 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
+    Given the content of the full 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>"
+    Then the contents of the full 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>"
+    Then the contents of the full 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
+    Given the content of the full region has an image
 
-    When I double click on the first image in the editable region
+    When I double click on the first image in the full 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"
@@ -61,11 +61,11 @@ Feature:
     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>"
+    Then the contents of the full 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
+    Given the content of the full region is simple content
     And I make a selection
 
     When I click on the "Insert Media" button
@@ -74,7 +74,7 @@ Feature:
     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>"
+    Then the contents of the full 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
@@ -84,11 +84,11 @@ Feature:
     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>"
+    Then the contents of the full 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
+    Given the content of the full region is simple content
     And I make a selection
 
     When I click on the "Insert Media" button
@@ -97,7 +97,7 @@ Feature:
     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>"
+    Then the contents of the full 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
@@ -107,4 +107,4 @@ Feature:
     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>"
+    Then the contents of the full 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 → full}/inserting_snippets.feature

@@ -12,12 +12,12 @@ Feature:
 
 
   # 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
+  Scenario: A user can drag and drop snippets into a full region
+    Given the content of the full 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
+    And I drag the example snippet into the full region
     Then the modal window should be visible
     And I should see "Snippet Options" within the modal title
 
@@ -25,23 +25,23 @@ Feature:
     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>"
+    And the contents of the full region should be "this is <div data-version='1' data-snippet='snippet_14' class='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
+    And the content of the full 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>"
+    Then the contents of the full 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
+    And the content of the full region has that snippet
 
     When I hover over the snippet
     And click on the edit snippet settings toolbar button
@@ -52,18 +52,18 @@ Feature:
     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>"
+    Then the contents of the full region should be "<div data-version='2' data-snippet='snippet_42' class='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
+    And the content of the full 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>"
+    Then the contents of the full region should be "<div data-version='2' data-snippet='snippet_42' class='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"
@@ -72,10 +72,10 @@ Feature:
     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>"
+    Then the content of the full region should be "<div data-version='3' data-snippet='snippet_42' class='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>"
+    Then the contents of the full region should be "<div data-version='2' data-snippet='snippet_42' class='example-snippet' contenteditable='false'><strong>Jeremy</strong> likes Stella</div> <b>content</b>"
 
     When I edit the snippet
     # todo: this is a bug
@@ -84,7 +84,7 @@ Feature:
 
     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>"
+    Then the contents of the full region should be "<div data-version='3' data-snippet='snippet_42' class='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"
@@ -93,10 +93,10 @@ Feature:
     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>"
+    Then the contents of the full region should be "<div data-version='4' data-snippet='snippet_42' class='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
+#    And the content of the full region has that snippet
 #    When I click on the "Save" button

data/features/regions/{editable → full}/inserting_special_characters.feature

@@ -12,7 +12,7 @@ Feature:
 
 
 #  Scenario: A user can insert special characters
-    Given the content of the editable region is simple content
+    Given the content of the full region is simple content
     And I make a selection
 
     When I click on the "Insert Character" button
@@ -21,4 +21,4 @@ Feature:
 
     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>"
+    And the contents of the full region should be "this is ☃ <b>content</b>"

data/features/regions/full/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 full 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 full 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 a full region)
+    Given the content of the full 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 full 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 full 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 full 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 full 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 full 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 full 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 a full region)
+    Given the content of the full region has a table
+    And I make a selection
+
+    When I click on the increase colspan editor button
+    Then the contents of the full 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 full 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 a full region)
+    Given the content of the full region has a table
+    And I make a selection
+
+    When I click on the increase rowspan editor button
+    Then the contents of the full 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 full 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/saving/saving.feature

@@ -9,19 +9,19 @@ Feature:
     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"
+  Scenario: A user can change content in a full region and save those changes
+    When I set the content of the full region to "new content"
     And I click on the "Save" button
-    Then the save should have "new content" for the editable region
+    Then the save should have "new content" for the full 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"
+  Scenario: A user can change content in a markdown region and save those changes
+    When I set the content of the markdown region to "new content"
     And I click on the "Save" button
-    Then the save should have "new content" for the markupable region
+    Then the save should have "new content" for the markdown region
 
 
-  Scenario: A user can put snippets into an editable region and get the options on save
+  Scenario: A user can put snippets into a full region and get the options on save
     # todo: finish
 
 
@@ -29,5 +29,5 @@ Feature:
     # todo: finish
 
 
-  Scenario: A user can put snippets into a markupable region and get the options on save
+  Scenario: A user can put snippets into a markdown region and get the options on save
     # todo: finish