kiteditor 1.0.11 → 1.0.12

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,48 @@ 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 insert and edit an image with an explicit float setting
+    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 "Float"
+    And press "Insert Media"
+    Then the contents of the full region should be "this is <img style='float: right;' src='/assets/mercury/temp-logo.png'> <b>content</b>"
+
+    When I make a selection for "img"
+    And click on the "Insert Media" button
+    And select "Absolute Middle" from "Alignment"
+    And select "None" from "Float"
+    And press "Insert Media"
+    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,34 +79,34 @@ 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
-    And choose "YouTube Share URL"
-    And fill in "YouTube Share URL" with "http://youtu.be/Pny4hoN8eII"
+    And choose "YouTube URL"
+    And fill in "YouTube 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>"
+    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
     Then the "media_youtube_url" field should contain "http://youtu.be/Pny4hoN8eII"
 
-    When I fill in "YouTube Share URL" with "http://youtu.be/Pny4hoN8eI"
+    When I fill in "YouTube 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>"
+    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 +115,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 +125,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,34 @@ 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' 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 drag and drop snippets with no options 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 snippet with no options into the full region
+    Then the modal window should not be visible
+
+    And the contents of the full region should be "this is <div data-version='1' data-snippet='snippet_14' class='no_options-snippet' contenteditable='false'><strong>No Option Snippet</strong></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 +63,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' 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' 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,19 +83,18 @@ 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' 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' 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
-#    Then the "First Name" field should contain "Jeremy"
-#    And the "Favorite Beer" field should contain "Stella"
+    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' 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 +103,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' 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/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

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

data/features/step_definitions/custom_web_steps.rb

@@ -0,0 +1,22 @@
+## 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