Display links to compare commits that are untested when clicking on a…

… point.

#25.

Gemfile

@@ -35,6 +35,7 @@ group :test do
   gem 'capybara', '~> 2.4.4'
   gem 'capybara-webkit', '~> 1.3.1'
   gem 'launchy', '~> 2.4.3'
+  gem 'selenium-webdriver', '~> 2.44.0'
 end
 
 group :production do

Gemfile.lock

@@ -67,6 +67,8 @@ GEM
     capybara-webkit (1.3.1)
       capybara (>= 2.0.2, < 2.5.0)
       json
+    childprocess (0.5.5)
+      ffi (~> 1.0, >= 1.0.11)
     coderay (1.1.0)
     columnize (0.8.9)
     crack (0.4.2)
@@ -82,6 +84,7 @@ GEM
     erubis (2.7.0)
     excon (0.41.0)
     execjs (2.2.2)
+    ffi (1.9.6)
     globalid (0.3.0)
       activesupport (>= 4.1.0)
     haml (4.0.5)
@@ -167,6 +170,7 @@ GEM
     rake (10.4.2)
     rollbar (1.3.2)
       multi_json (~> 1.3)
+    rubyzip (1.1.7)
     safe_yaml (1.0.4)
     sass (3.4.8)
     sass-rails (5.0.1)
@@ -175,6 +179,11 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (~> 1.1)
+    selenium-webdriver (2.44.0)
+      childprocess (~> 0.5)
+      multi_json (~> 1.0)
+      rubyzip (~> 1.0)
+      websocket (~> 1.0)
     slop (3.6.0)
     spring (1.1.3)
     sprockets (2.12.3)
@@ -199,6 +208,7 @@ GEM
     webmock (1.20.4)
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
+    websocket (1.2.1)
     xpath (2.0.0)
       nokogiri (~> 1.3)
     yajl-ruby (1.1.0)
@@ -231,6 +241,7 @@ DEPENDENCIES
   rails_12factor
   rollbar (~> 1.3.1)
   sass-rails (~> 5.0.1)
+  selenium-webdriver (~> 2.44.0)
   spring
   uglifier (>= 1.3.0)
   vcr (~> 2.9.3)

app/assets/javascripts/application.js

@@ -13,6 +13,7 @@
 //= require jquery
 //= require jquery_ujs
 //= require highcharts
+//= require bootstrap/modal.js
 //= require modules/release_chart
 //= require modules/chart
 //= require_tree .

app/assets/javascripts/modules/chart.js.erb

@@ -71,12 +71,90 @@ var drawChart = function(chartClass) {
         series: {
           point: {
             events: {
-              click: function(event) {
-                var commitHash = /^Commit: (.{7})/.exec(this.category)[1];
+              click: function() {
+                var getCommitHash = function(category) {
+                  return /^Commit: (.{7})/.exec(category)[1];
+                }
 
-                window.open("https://github.com/" + $this.data('organization') +
-                  "/" + $this.data('repo') + "/commit/" + commitHash
+                var getCommitMessage = function(category) {
+                  return /Commit Message: (.*)<br>/.exec(category)[1];
+                }
+
+                var generateCommitRow = function(commitHash, index, styleColor) {
+                  return "<tr><td><a target='_blank' style='color:" + styleColor +
+                    ";' href=" + githubCommitURL + commitHash + ">" +
+                    commitHash + " " + getCommitMessage(data[index].category) +
+                    " - " + data[index].y + " " + units + "</a></td></tr>";
+                }
+
+                var generateCompareRow = function(startCommitHash, endCommitHash) {
+                  return "<tr><td><p>~</p>" +
+                    "<a target='_blank' href='" + githubCompareURL + startCommitHash +
+                    "..." + endCommitHash + "'>" +
+                    "There may be untested commits between this range. " +
+                    "Click to view them on Github." +
+                    "</a><br>" + "<p>~</p></td></tr>";
+                }
+
+                var currentIndex = this.index;
+                var prevIndex = currentIndex - 1;
+                var nextIndex = currentIndex + 1;
+                var data = this.series.data;
+                var currentCommitHash = getCommitHash(this.category);
+                var units = this.series.yAxis.axisTitle.textStr;
+
+                var githubURL = 'https://github.com/' +
+                  $this.data('organization') + '/' + $this.data('repo') + '/';
+
+                var githubCommitURL = githubURL + "commit/";
+                var githubCompareURL = githubURL + "compare/";
+
+                if(prevIndex >= 0) {
+                  var prevCommitHash = getCommitHash(data[prevIndex].category);
+                } else {
+                  var prevCommitHash = currentCommitHash;
+                  prevIndex = currentIndex;
+                }
+
+                if(nextIndex <= (data.length -1)) {
+                  var nextCommitHash = getCommitHash(data[nextIndex].category);
+                } else {
+                  var nextCommitHash = currentCommitHash;
+                  nextIndex = currentIndex;
+                }
+
+                var $spinner = $("#chart-modal .spinner");
+                var $modalTbody = $("#chart-modal .modal-body table tbody");
+
+                $('#chart-modal .modal-title').empty().append(this.category);
+                $modalTbody.empty();
+                $spinner.toggleClass('hide');
+
+                var commitRows = "";
+
+                if(prevIndex > 0 || (data.length == 3 && currentIndex == 1)) {
+                  commitRows += generateCommitRow(
+                    prevCommitHash, prevIndex, 'black'
+                  );
+
+                  commitRows += generateCompareRow(prevCommitHash, currentCommitHash);
+                }
+
+                commitRows += generateCommitRow(
+                  currentCommitHash ,currentIndex, 'green'
                 );
+
+                if(nextIndex < (data.length - 1) || (data.length == 3 && currentIndex == 1)) {
+                  commitRows += generateCompareRow(currentCommitHash, nextCommitHash);
+
+                  commitRows += generateCommitRow(
+                    nextCommitHash ,nextIndex, 'black'
+                  );
+                }
+
+                $spinner.toggleClass('hide');
+                $modalTbody.append(commitRows);
+                $('#chart-modal').modal('show');
               }
             }
           }

app/assets/stylesheets/modules/_chart-modal.scss

@@ -0,0 +1,15 @@
+#chart-modal {
+  z-index: 9999;
+
+  a, p {
+    color: grey;
+  }
+
+  h4 {
+    color: green;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+}

app/controllers/repos_controller.rb

@@ -25,9 +25,12 @@ def show
           environment = temp
         end
 
+        commit = benchmark_run.initiator
+
         "
-          Commit: #{benchmark_run.initiator.sha1[0..6]}<br>
-          Commit Date: #{benchmark_run.initiator.created_at}<br>
+          Commit: #{commit.sha1[0..6]}<br>
+          Commit Date: #{commit.created_at}<br>
+          Commit Message: #{commit.message.truncate(30)}<br>
           #{environment}
         ".squish
       end

app/views/repos/_chart_modal.html.haml

@@ -0,0 +1,15 @@
+#chart-modal.modal{ tabindex: '-1' }
+  .modal-dialog
+    .modal-content
+      .modal-header
+        %button.close{ data: { dismiss: 'modal' }, aria: { label: 'Close' } }
+          %span{ aria: { hidden: true } }
+            ×
+
+        %h4.modal-title
+
+      .modal-body
+        %table
+          %tbody
+
+      = render 'layouts/spinner'

app/views/repos/show.html.haml

@@ -13,3 +13,5 @@
 
   #chart-container
     = render 'show_chart', chart_columns: @chart_columns, benchmark_type: @benchmark_type
+
+= render 'chart_modal'

test/acceptance/support/capybara.rb

@@ -4,14 +4,12 @@
 
 module Capybara
   module JavaScriptDriver
-    def before_setup
-      super
+    def require_js
       Capybara.current_driver = :webkit
     end
 
-    def teardown
+    def reset_driver
       Capybara.use_default_driver
-      super
     end
   end
 end

test/acceptance/view_benchmark_graph_commit_modal_test.rb

@@ -0,0 +1,136 @@
+require 'acceptance/test_helper'
+
+class ViewBenchmarkGraphCommitModalTest < AcceptanceTest
+  setup do
+    require_js
+    Net::HTTP.stubs(:get).returns("def abc\n  puts haha\nend")
+  end
+
+  teardown do
+    reset_driver
+  end
+
+  test "User should be able to view and compare adjacent commits when clicking
+    on a point".squish do
+
+    begin
+      # Clicking a point on a highchart doesn't work on other drivers. Selenium
+      # is really slow so it'll be good to fix this.
+      javascript_driver = Capybara.javascript_driver
+      default_driver = Capybara.current_driver
+      Capybara.javascript_driver = :selenium
+      Capybara.current_driver = :selenium
+
+      benchmark_run = benchmark_runs(:array_count_run4)
+      benchmark_run2 = benchmark_runs(:array_count_run)
+      benchmark_run3 = benchmark_runs(:array_count_run3)
+
+      visit '/ruby/ruby/commits'
+
+      within "form" do
+        choose(benchmark_run.benchmark_type.category)
+      end
+
+      assert page.has_content?(I18n.t("highcharts.subtitle.commit_url"))
+
+      benchmark_run3_line =
+        "#{benchmark_run3.initiator.sha1}
+        #{benchmark_run3.initiator.message} -
+        #{benchmark_run3.result["some_time"]}
+        #{benchmark_run3.benchmark_type.unit.capitalize}".squish
+
+      benchmark_run2_line =
+        "#{benchmark_run2.initiator.sha1}
+        #{benchmark_run2.initiator.message} -
+        #{benchmark_run2.result["some_time"]}
+        #{benchmark_run2.benchmark_type.unit.capitalize}".squish
+
+      benchmark_run_line =
+        "#{benchmark_run.initiator.sha1}
+        #{benchmark_run.initiator.message} -
+        #{benchmark_run.result["some_time"]}
+        #{benchmark_run.benchmark_type.unit.capitalize}".squish
+
+      markers = page.all(".highcharts-markers.highcharts-tracker path")
+      markers[0].click
+      commit = benchmark_run3.initiator
+
+      within_chart_modal_title do
+        assert page.has_content?("Commit: #{commit.sha1}")
+        assert page.has_content?("Commit Message: #{commit.message}")
+        assert page.has_content?(benchmark_run.environment)
+      end
+
+      within_chart_modal_body do
+        assert page.has_content?(benchmark_run3_line)
+        assert page.has_content?(benchmark_run2_line)
+        assert_not page.has_content?(benchmark_run_line)
+
+        assert page.has_selector?(
+          "a[href='https://github.com/ruby/ruby/compare/"\
+          "#{benchmark_run2.initiator.sha1}...#{benchmark_run3.initiator.sha1}']"
+        )
+      end
+
+      markers[2].click
+      commit = benchmark_run.initiator
+
+      within_chart_modal_title do
+        assert page.has_content?("Commit: #{commit.sha1}")
+        assert page.has_content?("Commit Message: #{commit.message}")
+        assert page.has_content?(benchmark_run.environment)
+      end
+
+      within_chart_modal_body do
+        assert_not page.has_content?(benchmark_run3_line)
+        assert page.has_content?(benchmark_run2_line)
+        assert page.has_content?(benchmark_run_line)
+
+        assert page.has_selector?(
+          "a[href='https://github.com/ruby/ruby/compare/"\
+          "#{benchmark_run.initiator.sha1}...#{benchmark_run2.initiator.sha1}']"
+        )
+      end
+
+      markers[1].click
+      commit = benchmark_run2.initiator
+
+      within_chart_modal_title do
+        assert page.has_content?("Commit: #{commit.sha1}")
+        assert page.has_content?("Commit Message: #{commit.message}")
+        assert page.has_content?(benchmark_run.environment)
+      end
+
+      within_chart_modal_body do
+        assert page.has_content?(benchmark_run3_line)
+        assert page.has_content?(benchmark_run2_line)
+        assert page.has_content?(benchmark_run_line)
+
+        assert page.has_selector?(
+          "a[href='https://github.com/ruby/ruby/compare/"\
+          "#{benchmark_run2.initiator.sha1}...#{benchmark_run3.initiator.sha1}']"
+        )
+
+        assert page.has_selector?(
+          "a[href='https://github.com/ruby/ruby/compare/"\
+          "#{benchmark_run.initiator.sha1}...#{benchmark_run2.initiator.sha1}']"
+        )
+      end
+    ensure
+      Capybara.javascript_driver = javascript_driver
+      Capybara.current_driver = default_driver
+    end
+  end
+
+  def within_chart_modal_title
+    within "#chart-modal .modal-title" do
+      yield
+    end
+  end
+
+  def within_chart_modal_body
+    within "#chart-modal .modal-body" do
+      yield
+    end
+  end
+end