diffux_ci 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0e45d93f1149b5ad73fe788533dc5ed95d737732
-  data.tar.gz: de408672cf9cb59e357e9f08243b7a03760c60a3
+  metadata.gz: 2670d7b6c223c5706a067d1ca10528f02a7b4e7d
+  data.tar.gz: 1192da6f79d208279ef7fba9ae5ac8339f425893
 SHA512:
-  metadata.gz: c1f8b36ff77a17db7742e695982346a7f8fc667c715888af935b3696de3bcd6ff589f37c98ca3fc28dc8c1b953929344b84d14d68222fe575374a69bd4bf04a2
-  data.tar.gz: 50f65df9ec4732dc4451002c33fdae827c872ebd49a713eaea2a8c09eea67208d4f284a251d8cba0e132fad5355d4a0de137cde60aef9cd5d4e3005a168bd47e
+  metadata.gz: d09b57e16639125db313eb1786533bc26899ac703de45d04c4aa558c33588ce6f772ceb17e3d899e5f9c36c5fbd0ec45b64bbf0f224a100b735b90941a3df56f
+  data.tar.gz: bc514a8739c934f932393b2face0dbd06f0d7a926561f526ea6baddccb8b18ee7a3f63e296bedfa760197f7e598508c9e5722abd506718983b493de7d3fcee82

data/bin/diffux_ci

@@ -15,6 +15,10 @@ when 'run'
   end
   require 'diffux_ci_server'
 
+when 'debug'
+  system 'open', DiffuxCIUtils.construct_url('/debug')
+  require 'diffux_ci_server'
+
 when 'review'
   system 'open', DiffuxCIUtils.construct_url('/review')
   require 'diffux_ci_server'
@@ -25,13 +29,27 @@ when 'clean'
   end
 
 when 'approve', 'reject'
-  abort 'Missing example name' unless example_name = ARGV[1]
-  abort 'Missing viewport name' unless viewport_name = ARGV[2]
-  DiffuxCIAction.new(example_name, viewport_name).send(action)
+  example_description = ARGV[1]
+  abort 'Missing example description' unless example_description
+  viewport_name = ARGV[2]
+  abort 'Missing viewport name' unless viewport_name
+  DiffuxCIAction.new(example_description, viewport_name).send(action)
 
 when 'upload_diffs'
   # `upload_diffs` returns a URL to a static html file
   puts DiffuxCIUploader.new.upload_diffs
+
+when '--help'
+  puts <<-EOS
+Commands:
+  run (default)
+  debug
+  review
+  clean
+  approve
+  reject
+  upload_diffs
+  EOS
 else
   abort "Unknown action \"#{action}\""
 end

data/lib/diffux_ci-diffs.html.erb

@@ -9,7 +9,7 @@
 
     <% diff_images.each do |diff| %>
       <h3>
-        <%= diff[:name] %> @ <%= diff[:viewport] %>
+        <%= diff[:description] %> @ <%= diff[:viewport] %>
       </h3>
       <p><img src="<%= diff[:url] %>"></p>
     <% end %>

data/lib/diffux_ci_action.rb

@@ -2,26 +2,28 @@ require 'diffux_ci_utils'
 require 'fileutils'
 
 class DiffuxCIAction
-  def initialize(example_name, viewport_name)
-    @example_name = example_name
+  def initialize(example_description, viewport_name)
+    @example_description = example_description
     @viewport_name = viewport_name
   end
 
   def approve
-    diff_path = DiffuxCIUtils.path_to(@example_name, @viewport_name, 'diff.png')
-    baseline_path = DiffuxCIUtils.path_to(@example_name, @viewport_name, 'baseline.png')
-    candidate_path = DiffuxCIUtils.path_to(@example_name, @viewport_name, 'candidate.png')
+    diff_path = DiffuxCIUtils.path_to(
+      @example_description, @viewport_name, 'diff.png')
+    baseline_path = DiffuxCIUtils.path_to(
+      @example_description, @viewport_name, 'baseline.png')
+    candidate_path = DiffuxCIUtils.path_to(
+      @example_description, @viewport_name, 'candidate.png')
 
     FileUtils.rm(diff_path, force: true)
-
-    if File.exist? candidate_path
-      FileUtils.mv(candidate_path, baseline_path)
-    end
+    FileUtils.mv(candidate_path, baseline_path) if File.exist? candidate_path
   end
 
   def reject
-    diff_path = DiffuxCIUtils.path_to(@example_name, @viewport_name, 'diff.png')
-    candidate_path = DiffuxCIUtils.path_to(@example_name, @viewport_name, 'candidate.png')
+    diff_path = DiffuxCIUtils.path_to(
+      @example_description, @viewport_name, 'diff.png')
+    candidate_path = DiffuxCIUtils.path_to(
+      @example_description, @viewport_name, 'candidate.png')
 
     FileUtils.rm(diff_path, force: true)
     FileUtils.rm(candidate_path, force: true)

data/lib/diffux_ci_runner.rb

@@ -5,26 +5,32 @@ require 'diffux_core/snapshot_comparison_image/gutter'
 require 'diffux_core/snapshot_comparison_image/before'
 require 'diffux_core/snapshot_comparison_image/overlayed'
 require 'diffux_core/snapshot_comparison_image/after'
-require 'chunky_png'
+require 'oily_png'
 require 'diffux_ci_utils'
 require 'fileutils'
 
 def resolve_viewports(example)
   configured_viewports = DiffuxCIUtils.config['viewports']
 
-  (example['options']['viewports'] || [configured_viewports.first.first]).map do |viewport|
+  viewports =
+    example['options']['viewports'] || [configured_viewports.first.first]
+
+  viewports.map do |viewport|
     configured_viewports[viewport].merge('name' => viewport)
   end
 end
 
+tries = 0
 begin
   driver = Selenium::WebDriver.for DiffuxCIUtils.config['driver'].to_sym
-rescue Selenium::WebDriver::Error::WebDriverError
+rescue Selenium::WebDriver::Error::WebDriverError => e
   # "unable to obtain stable firefox connection in 60 seconds"
   #
   # This seems to happen sporadically for some versions of Firefox, so we want
-  # to retry it in case it will work the second time around.
-  driver = Selenium::WebDriver.for DiffuxCIUtils.config['driver'].to_sym
+  # to retry a couple of times it in case it will work the second time around.
+  tries += 1
+  retry if tries <= 3
+  raise e
 end
 
 begin
@@ -37,8 +43,28 @@ begin
     fail "JavaScript errors found during initialization: \n#{errors.inspect}"
   end
 
+  # We use the description of the example to store the snapshot. If a
+  # description is duplicated with different code, it can cause seemingly random
+  # and confusing differences. To avoid this issue, we want to keep track of the
+  # descriptions that we've seen and fail if we come across the same description
+  # twice.
+  seen_descriptions = {}
+
   while current = driver.execute_script('return window.diffux.next()') do
+    description = current['description']
+
     resolve_viewports(current).each do |viewport|
+      # Make sure we don't have a duplicate description
+      seen_descriptions[description] ||= {}
+      if seen_descriptions[description][viewport['name']]
+        fail <<-EOS
+          Error while rendering "#{description}" @#{viewport['name']}:
+            Duplicate description detected
+        EOS
+      else
+        seen_descriptions[description][viewport['name']] = true
+      end
+
       # Resize window to the right size before rendering
       driver.manage.window.resize_to(viewport['width'], viewport['height'])
 
@@ -63,51 +89,62 @@ begin
 
       if rendered['error']
         fail <<-EOS
-          Error while rendering "#{current['name']}" @#{viewport['name']}:
+          Error while rendering "#{description}" @#{viewport['name']}:
             #{rendered['error']}
           Debug by pointing your browser to
-          #{DiffuxCIUtils.construct_url('/', name: current['name'])}
+          #{DiffuxCIUtils.construct_url('/', description: description)}
         EOS
       end
-      output_file = DiffuxCIUtils.path_to(
-        current['name'], viewport['name'], 'candidate.png')
-
-      # Create the folder structure if it doesn't already exist
-      unless File.directory?(dirname = File.dirname(output_file))
-        FileUtils.mkdir_p(dirname)
-      end
 
-      # Save and crop the screenshot
-      driver.save_screenshot(output_file)
-      cropped = ChunkyPNG::Image.from_file(output_file)
-      cropped.crop!(rendered['left'],
-                    rendered['top'],
-                    [rendered['width'], 1].max,
-                    [rendered['height'], 1].max)
-      cropped.save(output_file)
+      # Crop the screenshot to the size of the rendered element
+      screenshot = ChunkyPNG::Image.from_blob(driver.screenshot_as(:png))
+      screenshot.crop!(rendered['left'],
+                       rendered['top'],
+                       [rendered['width'], 1].max,
+                       [rendered['height'], 1].max)
 
-      print "Checking \"#{current['name']}\" at [#{viewport['name']}]... "
+      print "Checking \"#{description}\" at [#{viewport['name']}]... "
 
       # Run the diff if needed
-      baseline_file = DiffuxCIUtils.path_to(current['name'], viewport['name'], 'baseline.png')
+      baseline_path = DiffuxCIUtils.path_to(
+        description, viewport['name'], 'baseline.png')
 
-      if File.exist? baseline_file
+      if File.exist? baseline_path
+        # A baseline image exists, so we want to compare the new snapshot
+        # against the baseline.
         comparison = Diffux::SnapshotComparer.new(
-          ChunkyPNG::Image.from_file(baseline_file),
-          cropped
+          ChunkyPNG::Image.from_file(baseline_path),
+          screenshot
         ).compare!
 
-        if img = comparison[:diff_image]
-          diff_output = DiffuxCIUtils.path_to(current['name'], viewport['name'], 'diff.png')
-          img.save(diff_output)
+        if comparison[:diff_image]
+          # There was a visual difference between the new snapshot and the
+          # baseline, so we want to write the diff image and the new snapshot
+          # image to disk. This will allow it to be reviewed by someone.
+          diff_path = DiffuxCIUtils.path_to(
+            description, viewport['name'], 'diff.png')
+          comparison[:diff_image].save(diff_path)
+
+          candidate_path = DiffuxCIUtils.path_to(
+            description, viewport['name'], 'candidate.png')
+          screenshot.save(candidate_path)
+
           puts "#{comparison[:diff_in_percent].round(1)}% (#{diff_output})"
         else
-          File.delete(output_file)
+          # No visual difference was found, so we don't need to do any more
+          # work.
           puts 'No diff.'
         end
       else
-        File.rename(output_file, baseline_file)
-        puts "First snapshot created (#{baseline_file})"
+        # There was no baseline image yet, so we want to start by saving a new
+        # baseline image.
+
+        # Create the folder structure if it doesn't already exist
+        unless File.directory?(dirname = File.dirname(baseline_path))
+          FileUtils.mkdir_p(dirname)
+        end
+        screenshot.save(baseline_path)
+        puts "First snapshot created (#{baseline_path})"
       end
     end
   end

data/lib/diffux_ci_server.rb

@@ -14,6 +14,11 @@ class DiffuxCIServer < Sinatra::Base
     erb :index
   end
 
+  get '/debug' do
+    @config = DiffuxCIUtils.config
+    erb :debug
+  end
+
   get '/review' do
     @snapshots = DiffuxCIUtils.current_snapshots
     erb :review
@@ -29,12 +34,12 @@ class DiffuxCIServer < Sinatra::Base
   end
 
   post '/reject' do
-    DiffuxCIAction.new(params[:name], params[:viewport]).reject
+    DiffuxCIAction.new(params[:description], params[:viewport]).reject
     redirect back
   end
 
   post '/approve' do
-    DiffuxCIAction.new(params[:name], params[:viewport]).approve
+    DiffuxCIAction.new(params[:description], params[:viewport]).approve
     redirect back
   end
 

data/lib/diffux_ci_uploader.rb

@@ -19,7 +19,8 @@ class DiffuxCIUploader
     dir = SecureRandom.uuid
 
     diff_images = current_snapshots[:diffs].map do |diff|
-      image = bucket.objects.build("#{dir}/#{diff[:name]}_#{diff[:viewport]}.png")
+      image = bucket.objects.build(
+        "#{dir}/#{diff[:description]}_#{diff[:viewport]}.png")
       image.content = open(diff[:file])
       image.content_type = 'image/png'
       image.save
@@ -28,11 +29,9 @@ class DiffuxCIUploader
     end
 
     html = bucket.objects.build("#{dir}/index.html")
-    html.content =
-      ERB.new(
-        File.read(File.expand_path(
-          File.join(File.dirname(__FILE__), 'diffux_ci-diffs.html.erb')))
-      ).result(binding)
+    path = File.expand_path(
+      File.join(File.dirname(__FILE__), 'diffux_ci-diffs.html.erb'))
+    html.content = ERB.new(File.read(path)).result(binding)
     html.content_type = 'text/html'
     html.save
     html.url

data/lib/diffux_ci_utils.rb

@@ -3,6 +3,7 @@ require 'erb'
 
 class DiffuxCIUtils
   def self.config
+    config_file_name = ENV['DIFFUX_CI_CONFIG_FILE'] || '.diffux_ci.yaml'
     @@config ||= {
       'snapshots_folder' => './snapshots',
       'source_files' => [],
@@ -23,46 +24,44 @@ class DiffuxCIUtils
           'height' => 444
         }
       }
-    }.merge(YAML.load(ERB.new(File.read(
-      ENV['DIFFUX_CI_CONFIG_FILE'] || '.diffux_ci.yaml')).result))
+    }.merge(YAML.load(ERB.new(File.read(config_file_name)).result))
   end
 
-  def self.normalize_name(name)
-    name.gsub(/[^a-zA-Z0-9\-_]/, '_')
+  def self.normalize_description(description)
+    description.gsub(/[^a-zA-Z0-9\-_]/, '_')
   end
 
-  def self.path_to(name, viewport_name, file_name)
+  def self.path_to(description, viewport_name, file_name)
     File.join(
       config['snapshots_folder'],
-      normalize_name(name),
+      normalize_description(description),
       "@#{viewport_name}",
       file_name
     )
   end
 
   def self.construct_url(absolute_path, params = {})
-    params_str = params.map do |key, value|
-      "#{key}=#{URI.escape(value)}"
-    end.join('&')
-    unless params_str.empty?
-      params_str = "?#{params_str}"
-    end
-
-    return "http://localhost:#{config['port']}#{absolute_path}#{params_str}"
+    URI::HTTP.build(host: 'localhost',
+                    port: config['port'],
+                    path: absolute_path,
+                    query: URI.encode_www_form(params))
   end
 
   def self.current_snapshots
     prepare_file = lambda do |file|
       viewport_dir = File.expand_path('..', file)
-      name_dir = File.expand_path('..', viewport_dir)
+      description_dir = File.expand_path('..', viewport_dir)
       {
-        name: File.basename(name_dir),
+        description: File.basename(description_dir),
         viewport: File.basename(viewport_dir).sub('@', ''),
-        file: file,
+        file: file
       }
     end
-    diff_files = Dir.glob("#{DiffuxCIUtils.config['snapshots_folder']}/**/diff.png")
-    baselines = Dir.glob("#{DiffuxCIUtils.config['snapshots_folder']}/**/baseline.png")
+
+    snapshots_folder = DiffuxCIUtils.config['snapshots_folder']
+    diff_files = Dir.glob("#{snapshots_folder}/**/diff.png")
+    baselines = Dir.glob("#{snapshots_folder}/**/baseline.png")
+
     {
       diffs: diff_files.map(&prepare_file),
       baselines: baselines.map(&prepare_file)

data/lib/diffux_ci_version.rb

@@ -0,0 +1,4 @@
+# Defines the gem version.
+module DiffuxCI
+  VERSION = '0.2.0'
+end

data/lib/public/diffux_ci-runner.js

@@ -1,3 +1,5 @@
+'use strict';
+
 window.diffux = {
   defined: [],
   currentIndex: 0,
@@ -5,9 +7,9 @@ window.diffux = {
   currentRenderedElement: undefined,
   errors: [],
 
-  define: function(name, func, options) {
+  define: function(description, func, options) {
     this.defined.push({
-      name: name,
+      description: description,
       func: func,
       options: options || {}
     });
@@ -24,7 +26,8 @@ window.diffux = {
       if (window.React) {
         window.React.unmountComponentAtNode(document.body.lastChild);
       } else {
-        this.currentRenderedElement.parentNode.removeChild(this.currentRenderedElement);
+        this.currentRenderedElement.parentNode
+          .removeChild(this.currentRenderedElement);
       }
     }
     this.currentExample = this.defined[this.currentIndex];
@@ -35,31 +38,31 @@ window.diffux = {
     return this.currentExample;
   },
 
-  setCurrent: function(exampleName) {
+  setCurrent: function(exampleDescription) {
     this.defined.forEach(function(example, index) {
-      if (example.name === exampleName) {
+      if (example.description === exampleDescription) {
         this.currentExample = example;
       }
     }.bind(this));
     if (!this.currentExample) {
-      throw 'No example found with name "' + exampleName + '"';
+      throw 'No example found with description "' + exampleDescription + '"';
     }
   },
 
   clearVisibleElements: function() {
-    var allElements = Array.prototype.slice.call(document.querySelectorAll('body > *'));
-    allElements.forEach(function(element) {
+    var allElements = document.querySelectorAll('body > *');
+    for (var element of allElements) {
       var style = window.getComputedStyle(element);
       if (style.display !== 'none') {
         element.parentNode.removeChild(element);
       }
-    });
+    }
   },
 
   handleError: function(error) {
     console.error(error);
     return {
-      name: this.currentExample.name,
+      description: this.currentExample.description,
       error: error.message
     };
   },
@@ -150,7 +153,7 @@ window.diffux = {
         left = 0;
       }
       return {
-        name: this.currentExample.name,
+        description: this.currentExample.description,
         width: width,
         height: height,
         top: top,
@@ -163,13 +166,13 @@ window.diffux = {
 };
 
 window.addEventListener('load', function() {
-  var matches = window.location.search.match(/name=([^&]*)/);
+  var matches = window.location.search.match(/description=([^&]*)/);
   if (!matches) {
     return;
   }
   var example = decodeURIComponent(matches[1]);
   window.diffux.setCurrent(example);
-  window.diffux.renderCurrent();
+  window.diffux.renderCurrent(function() {});
 });
 
 // We need to redefine a few global functions that halt execution. Without this,
@@ -177,15 +180,21 @@ window.addEventListener('load', function() {
 window.alert = function(message) {
   console.log('`window.alert` called', message);
 };
+
 window.confirm = function(message) {
   console.log('`window.confirm` called', message);
   return true;
 };
+
 window.prompt = function(message, value) {
   console.log('`window.prompt` called', message, value);
   return null;
 };
 
 window.onerror = function(message, url, lineNumber) {
-  window.diffux.errors.push({ message: message, url: url, lineNumber: lineNumber });
+  window.diffux.errors.push({
+    message: message,
+    url: url,
+    lineNumber: lineNumber
+  });
 }

data/lib/public/diffux_ci-styles.css

@@ -0,0 +1,8 @@
+body {
+  background-color: #f0f0f0;
+  font-family: helvetica, arial;
+}
+
+form {
+  display: inline-block;
+}

data/lib/views/debug.erb

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="/diffux_ci-styles.css"></link>
+    <script src="/diffux_ci-runner.js"></script>
+    <% @config['source_files'].each do |source_file| %>
+      <script src="/resource?file=<%= ERB::Util.url_encode(source_file) %>"></script>
+    <% end %>
+    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+  </head>
+  <body>
+    <h1>Diffux-CI Debug Tool</h1>
+    <p>Click on an item to render that example in isolation.</p>
+    <script>
+      (function() {
+        var ul = $('<ul>');
+        $('body').append(ul);
+        $.each(diffux.defined, function(_, example) {
+          ul.append($('<li>').append(
+            $('<a>', {
+              href: '/?description=' + encodeURIComponent(example.description)
+            }).text(example.description)
+          ));
+        });
+      }());
+    </script>
+  </body>
+</html>

data/lib/views/review.erb

@@ -1,31 +1,23 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <style type="text/css">
-      body {
-        background-color: #f0f0f0;
-        font-family: helvetica, arial;
-      }
-      form {
-        display: inline-block;
-      }
-    </style>
+    <link rel="stylesheet" href="/diffux_ci-styles.css"></link>
   </head>
   <body>
     <h1>Diffux-CI Review Tool</h1>
     <h2>DIFFS</h2>
     <% @snapshots[:diffs].each do |diff| %>
       <h3>
-        <%= diff[:name] %> @ <%= diff[:viewport] %>
+        <%= diff[:description] %> @ <%= diff[:viewport] %>
       </h3>
       <p><img src="/resource?file=<%= ERB::Util.url_encode(diff[:file]) %>"></p>
       <form style="display: inline-block"
-            action="/approve?name=<%= diff[:name] %>&viewport=<%= diff[:viewport] %>"
+            action="/approve?description=<%= diff[:description] %>&viewport=<%= diff[:viewport] %>"
             method="POST">
         <button type="submit">Approve</button>
       </form>
       <form style="display: inline-block"
-            action="/reject?name=<%= diff[:name] %>&viewport=<%= diff[:viewport] %>"
+            action="/reject?description=<%= diff[:description] %>&viewport=<%= diff[:viewport] %>"
             method="POST">
         <button type="submit">Reject</button>
       </form>
@@ -36,7 +28,7 @@
     <h2>BASELINES</h2>
     <% @snapshots[:baselines].each do |baseline| %>
       <h3>
-        <%= baseline[:name] %> @ <%= baseline[:viewport] %>
+        <%= baseline[:description] %> @ <%= baseline[:viewport] %>
       </h3>
       <p><img src="/resource?file=<%= ERB::Util.url_encode(baseline[:file]) %>"></p>
     <% end %>

metadata

@@ -1,10 +1,11 @@
 --- !ruby/object:Gem::Specification
 name: diffux_ci
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Henric Trotzig
+- Joe Lencioni
 autorequire: 
 bindir: bin
 cert_chain: []
@@ -31,25 +32,19 @@ dependencies:
       - !ruby/object:Gem::Version
         version: 0.0.2
 - !ruby/object:Gem::Dependency
-  name: chunky_png
+  name: oily_png
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.3'
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 1.3.4
+        version: '1.1'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.3'
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 1.3.4
+        version: '1.1'
 - !ruby/object:Gem::Dependency
   name: selenium-webdriver
   requirement: !ruby/object:Gem::Requirement
@@ -144,7 +139,10 @@ files:
 - lib/diffux_ci_server.rb
 - lib/diffux_ci_uploader.rb
 - lib/diffux_ci_utils.rb
+- lib/diffux_ci_version.rb
 - lib/public/diffux_ci-runner.js
+- lib/public/diffux_ci-styles.css
+- lib/views/debug.erb
 - lib/views/index.erb
 - lib/views/review.erb
 homepage: http://rubygems.org/gems/diffux_ci