Enable multiline select for blobs.

Holding shift will allow users to click and select multiple lines.
The behavior is similar to GitHub.
Complete with tests.

2 files changed, 144 insertions, 0 deletions

diff --git a/features/project/source/multiselect_blob.feature b/features/project/source/multiselect_blob.feature
new file mode 100644
index 00000000000..3038c0814ad
--- /dev/null
+++ b/features/project/source/multiselect_blob.feature
@@ -0,0 +1,86 @@
+Feature: Project Multiselect Blob
+  Background:
+    Given I sign in as a user
+    And I own project "Shop"
+    And I visit project source page
+    And I click on "Gemfile.lock" file in repo
+
+  @javascript
+  Scenario: I click line 1 in file
+    When I click line 1 in file
+    Then I should see "L1" as URI fragment
+    And I should see line 1 highlighted
+
+  @javascript
+  Scenario: I shift-click line 1 in file
+    When I shift-click line 1 in file
+    Then I should see "L1" as URI fragment
+    And I should see line 1 highlighted
+
+  @javascript
+  Scenario: I click line 1 then click line 2 in file
+    When I click line 1 in file
+    Then I should see "L1" as URI fragment
+    And I should see line 1 highlighted
+    Then I click line 2 in file
+    Then I should see "L2" as URI fragment
+    And I should see line 2 highlighted
+
+  @javascript
+  Scenario: I click various line numbers to test multiselect
+    Then I click line 1 in file
+    Then I should see "L1" as URI fragment
+    And I should see line 1 highlighted
+    Then I shift-click line 2 in file
+    Then I should see "L1-2" as URI fragment
+    And I should see lines 1-2 highlighted
+    Then I shift-click line 3 in file
+    Then I should see "L1-3" as URI fragment
+    And I should see lines 1-3 highlighted
+    Then I click line 3 in file
+    Then I should see "L3" as URI fragment
+    And I should see line 3 highlighted
+    Then I shift-click line 1 in file
+    Then I should see "L1-3" as URI fragment
+    And I should see lines 1-3 highlighted
+    Then I shift-click line 5 in file
+    Then I should see "L1-5" as URI fragment
+    And I should see lines 1-5 highlighted
+    Then I shift-click line 4 in file
+    Then I should see "L1-4" as URI fragment
+    And I should see lines 1-4 highlighted
+    Then I click line 5 in file
+    Then I should see "L5" as URI fragment
+    And I should see line 5 highlighted
+    Then I shift-click line 3 in file
+    Then I should see "L3-5" as URI fragment
+    And I should see lines 3-5 highlighted
+    Then I shift-click line 1 in file
+    Then I should see "L1-3" as URI fragment
+    And I should see lines 1-3 highlighted
+    Then I shift-click line 1 in file
+    Then I should see "L1" as URI fragment
+    And I should see line 1 highlighted
+
+  @javascript
+  Scenario: I multiselect lines 1-5 and then go back and forward in history
+    When I click line 1 in file
+    And I shift-click line 3 in file
+    And I shift-click line 2 in file
+    And I shift-click line 5 in file
+    Then I should see "L1-5" as URI fragment
+    And I should see lines 1-5 highlighted
+    Then I go back in history
+    Then I should see "L1-2" as URI fragment
+    And I should see lines 1-2 highlighted
+    Then I go back in history
+    Then I should see "L1-3" as URI fragment
+    And I should see lines 1-3 highlighted
+    Then I go back in history
+    Then I should see "L1" as URI fragment
+    And I should see line 1 highlighted
+    Then I go forward in history
+    And I go forward in history
+    And I go forward in history
+    Then I should see "L1-5" as URI fragment
+    And I should see lines 1-5 highlighted
\ No newline at end of file
diff --git a/features/steps/project/project_multiselect_blob.rb b/features/steps/project/project_multiselect_blob.rb
new file mode 100644
index 00000000000..3d330e837c1
--- /dev/null
+++ b/features/steps/project/project_multiselect_blob.rb
@@ -0,0 +1,58 @@
+class ProjectMultiselectBlob < Spinach::FeatureSteps
+  include SharedAuthentication
+  include SharedProject
+  include SharedPaths
+
+  class << self
+    def click_line_steps(*line_numbers)
+      line_numbers.each do |line_number|
+        step "I click line #{line_number} in file" do
+          find("#L#{line_number}").click
+        end
+
+        step "I shift-click line #{line_number} in file" do
+          script = "$('#L#{line_number}').trigger($.Event('click', { shiftKey: true }));"
+          page.evaluate_script(script)
+        end
+      end
+    end
+
+    def check_state_steps(*ranges)
+      ranges.each do |range|
+        fragment = range.kind_of?(Array) ? "L#{range.first}-#{range.last}" : "L#{range}"
+        pluralization = range.kind_of?(Array) ? "s" : ""
+
+        step "I should see \"#{fragment}\" as URI fragment" do
+          URI.parse(current_url).fragment.should == fragment
+        end
+
+        step "I should see line#{pluralization} #{fragment[1..-1]} highlighted" do
+          ids = Array(range).map { |n| "LC#{n}" }
+          extra = false
+
+          highlighted = all("#tree-content-holder .highlight .line.hll")
+          highlighted.each do |element|
+            extra ||= ids.delete(element[:id]).nil?
+          end
+
+          extra.should be_false and ids.should be_empty
+        end
+      end
+    end
+  end
+
+  click_line_steps *Array(1..5)
+  check_state_steps *Array(1..5), Array(1..2), Array(1..3), Array(1..4), Array(1..5), Array(3..5)
+
+  step 'I go back in history' do
+    page.evaluate_script("window.history.back()")
+  end
+
+  step 'I go forward in history' do
+    page.evaluate_script("window.history.forward()")
+  end
+
+  step 'I click on "Gemfile.lock" file in repo' do
+    click_link "Gemfile.lock"
+  end
+end
\ No newline at end of file