tests.

app/assets/javascripts/timelines.js

@@ -4079,7 +4079,7 @@ Timeline = {
   rebuildTree: function() {
     var where = this.getUiRoot().find('.tl-left-main');
     var tree = this.getLefthandTree();
-    var table = jQuery('<table></table>');
+    var table = jQuery('<table class="tl-main-table"></table>');
     var body = jQuery('<tbody></tbody>');
     var head = jQuery('<thead></thead>');
     var row, cell, link, span, text;

features/step_definitions/timelines_then_steps.rb

@@ -16,6 +16,21 @@ Then /^I should see a modal window with selector "(.*?)"$/ do |selector|
 
   dialog["class"].include?("ui-dialog-content").should be_true
 end
+Then(/^I should see the column "(.*?)" before the column "(.*?)" in the timelines table$/) do |content1, content2|
+  steps %Q{
+    Then I should see the column "#{content1}" before the column "#{content2}" in ".tl-main-table"
+  }
+end
+Then(/^I should see the column "(.*?)" before the column "(.*?)" in "(.*?)"$/) do |content1, content2, table|
+  #Check that the things really exist and wait until the exist
+  steps %Q{
+    Then I should see "#{content1}" within "#{table}"
+    Then I should see "#{content2}" within "#{table}"
+  }
+
+  elements = find_lowest_containing_element content2, table
+  elements[-1].should have_xpath("preceding::th/descendant-or-self::*[text()='#{content1}']")
+end
 Then /^I should see a modal window$/ do
   steps 'Then I should see a modal window with selector "#modalDiv"'
 end

features/step_definitions/timelines_when_steps.rb

@@ -86,7 +86,28 @@ When (/^I set the second level grouping criteria to "(.*?)" for the timeline "(.
   page.execute_script("jQuery('#timeline_options_grouping_two_selection').val('#{project_type.id}')")
   page.execute_script("jQuery('#content form').submit()")
 end
+When(/^I set the columns shown in the timeline to:$/) do |table|
+  timeline_name = @timeline_name
+  project_name = @project.name
+  steps %Q{
+    When I go to the edit page of the timeline "#{timeline_name}" of the project called "#{project_name}"
+  }
+  result = []
+  table.raw.each do |_perm|
+    perm = _perm.first
+    unless perm.blank?
+      result.push(perm)
+    end
+  end
+  results = result.join(",");
+
+  #we need to wait for our submit form to load ...
+  page.should have_selector("#timeline_options_columns_", :visible => false)
+
+  page.execute_script("jQuery('#timeline_options_columns_').val('#{results}')")
 
+  page.execute_script("jQuery('#content form').submit()")
+end
 When (/^I set the first level grouping criteria to:$/) do |table|
   timeline_name = @timeline_name
   project_name = @project.name

features/timelines/timeline_view.feature

@@ -47,6 +47,19 @@ Feature: Timeline View Tests
       And I wait for timeline to load table
      Then the first table column should not take more than 25% of the space
 
+  @javascript
+  Scenario: Select columns
+    Given I am working in the timeline "Testline" of the project called "ecookbook"
+    When there is a timeline "Testline" for project "ecookbook"
+      And I set the columns shown in the timeline to:
+        | start_date  |
+        | type        |
+        | end_date    |
+      Then I should see the column "Start date" before the column "End date" in the timelines table
+        And I should see the column "Start date" before the column "Type" in the timelines table
+        And I should see the column "Type" before the column "End date" in the timelines table
+
+
   @javascript
   Scenario: switch timeline
     When there is a timeline "Testline" for project "ecookbook"