diffux_ci 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2670d7b6c223c5706a067d1ca10528f02a7b4e7d
-  data.tar.gz: 1192da6f79d208279ef7fba9ae5ac8339f425893
+  metadata.gz: 792c6b08f42ae6f8715b7283bbd5e48de674281d
+  data.tar.gz: fe881d359ff8ac648c74802f0092ff862184ac1f
 SHA512:
-  metadata.gz: d09b57e16639125db313eb1786533bc26899ac703de45d04c4aa558c33588ce6f772ceb17e3d899e5f9c36c5fbd0ec45b64bbf0f224a100b735b90941a3df56f
-  data.tar.gz: bc514a8739c934f932393b2face0dbd06f0d7a926561f526ea6baddccb8b18ee7a3f63e296bedfa760197f7e598508c9e5722abd506718983b493de7d3fcee82
+  metadata.gz: 777f67034c3e7cd0bb60f246892cebebfb982602acddbd957f004f98b73cb8e06a273ae4c77002f55eca5b4128eade1b76f200a4872489f50d4dff1eee0bb105
+  data.tar.gz: ec413e930adecf64943f5f95d7f9d6bd519e63fa37c063b07297e2933249ae9ba9c328cbc0b0c40fe5f60b584eaaee91d4c2e7211475904ff6eb31b98f196692

data/bin/diffux_ci

@@ -3,6 +3,7 @@
 require 'diffux_ci_utils'
 require 'diffux_ci_action'
 require 'diffux_ci_uploader'
+require 'diffux_ci_version'
 require 'fileutils'
 
 action = ARGV[0] || 'run'
@@ -39,6 +40,9 @@ when 'upload_diffs'
   # `upload_diffs` returns a URL to a static html file
   puts DiffuxCIUploader.new.upload_diffs
 
+when '--version'
+  puts "diffux_ci version #{DiffuxCI::VERSION}"
+
 when '--help'
   puts <<-EOS
 Commands:
@@ -49,6 +53,8 @@ Commands:
   approve
   reject
   upload_diffs
+  --help
+  --version
   EOS
 else
   abort "Unknown action \"#{action}\""

data/lib/diffux_ci_runner.rb

@@ -20,21 +20,28 @@ def resolve_viewports(example)
   end
 end
 
-tries = 0
-begin
-  driver = Selenium::WebDriver.for DiffuxCIUtils.config['driver'].to_sym
-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 a couple of times it in case it will work the second time around.
-  tries += 1
-  retry if tries <= 3
-  raise e
+def init_driver
+  tries = 0
+  begin
+    driver = Selenium::WebDriver.for DiffuxCIUtils.config['driver'].to_sym
+  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 a couple of times it in case it will work the second time around.
+    tries += 1
+    retry if tries <= 3
+    raise e
+  end
+
+  driver.manage.timeouts.script_timeout = 3 # move to config?
+
+  driver
 end
 
+driver = init_driver
+
 begin
-  driver.manage.timeouts.script_timeout = 3 # move to config?
   driver.navigate.to DiffuxCIUtils.construct_url('/')
 
   # Check for errors during startup
@@ -98,10 +105,23 @@ begin
 
       # Crop the screenshot to the size of the rendered element
       screenshot = ChunkyPNG::Image.from_blob(driver.screenshot_as(:png))
+
+      # In our JavScript we are rounding up, which can sometimes give us a
+      # dimensions that are larger than the screenshot dimensions. We need to
+      # guard against that here.
+      crop_width = [
+        [rendered['width'], 1].max,
+        screenshot.width - rendered['left']
+      ].min
+      crop_height = [
+        [rendered['height'], 1].max,
+        screenshot.height - rendered['top']
+      ].min
+
       screenshot.crop!(rendered['left'],
                        rendered['top'],
-                       [rendered['width'], 1].max,
-                       [rendered['height'], 1].max)
+                       crop_width,
+                       crop_height)
 
       print "Checking \"#{description}\" at [#{viewport['name']}]... "
 
@@ -123,13 +143,13 @@ begin
           # 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)
+          comparison[:diff_image].save(diff_path, :fast_rgb)
 
           candidate_path = DiffuxCIUtils.path_to(
             description, viewport['name'], 'candidate.png')
-          screenshot.save(candidate_path)
+          screenshot.save(candidate_path, :fast_rgb)
 
-          puts "#{comparison[:diff_in_percent].round(1)}% (#{diff_output})"
+          puts "#{comparison[:diff_in_percent].round(1)}% (#{candidate_path})"
         else
           # No visual difference was found, so we don't need to do any more
           # work.
@@ -143,7 +163,7 @@ begin
         unless File.directory?(dirname = File.dirname(baseline_path))
           FileUtils.mkdir_p(dirname)
         end
-        screenshot.save(baseline_path)
+        screenshot.save(baseline_path, :fast_rgb)
         puts "First snapshot created (#{baseline_path})"
       end
     end

data/lib/diffux_ci_utils.rb

@@ -1,9 +1,9 @@
 require 'yaml'
 require 'erb'
+require 'uri'
 
 class DiffuxCIUtils
   def self.config
-    config_file_name = ENV['DIFFUX_CI_CONFIG_FILE'] || '.diffux_ci.yaml'
     @@config ||= {
       'snapshots_folder' => './snapshots',
       'source_files' => [],
@@ -24,7 +24,12 @@ class DiffuxCIUtils
           'height' => 444
         }
       }
-    }.merge(YAML.load(ERB.new(File.read(config_file_name)).result))
+    }.merge(config_from_file)
+  end
+
+  def self.config_from_file
+    config_file_name = ENV['DIFFUX_CI_CONFIG_FILE'] || '.diffux_ci.yaml'
+    YAML.load(ERB.new(File.read(config_file_name)).result)
   end
 
   def self.normalize_description(description)
@@ -41,10 +46,12 @@ class DiffuxCIUtils
   end
 
   def self.construct_url(absolute_path, params = {})
+    query = URI.encode_www_form(params) unless params.empty?
+
     URI::HTTP.build(host: 'localhost',
                     port: config['port'],
                     path: absolute_path,
-                    query: URI.encode_www_form(params))
+                    query: query).to_s
   end
 
   def self.current_snapshots

data/lib/diffux_ci_version.rb

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

data/lib/public/diffux_ci-runner.js

@@ -49,11 +49,18 @@ window.diffux = {
     }
   },
 
+  isElementVisible: function(element) {
+    // element.offsetParent is a cheap way to determine visibility for most
+    // elements, but it doesn't work for elements with fixed positioning so we
+    // will need to fall back to the more expensive getComputedStyle.
+    return element.offsetParent ||
+      window.getComputedStyle(element).display !== 'none';
+  },
+
   clearVisibleElements: function() {
     var allElements = document.querySelectorAll('body > *');
     for (var element of allElements) {
-      var style = window.getComputedStyle(element);
-      if (style.display !== 'none') {
+      if (this.isElementVisible(element)) {
         element.parentNode.removeChild(element);
       }
     }
@@ -75,7 +82,7 @@ window.diffux = {
    */
   tryAsync: function(func) {
     return new Promise(function(resolve, reject) {
-      // Saftey valve: if the function does not finish after 3s, then something
+      // Safety valve: if the function does not finish after 3s, then something
       // went haywire and we need to move on.
       var timeout = setTimeout(function() {
         reject(new Error('Async callback was not invoked within timeout.'));
@@ -131,8 +138,8 @@ window.diffux = {
   processElem: function(elem) {
     try {
       // TODO: elem.getDOMNode is deprecated in React, so we need to convert
-      // this to React.findDOMNode(elem) at some point, or push this requirement
-      // into the examples.
+      // this to ReactDOM.findDOMNode(elem) at some point, or push this
+      // requirement into the examples.
       if (elem.getDOMNode) {
         // Soft-dependency to React here. If the thing returned has a
         // `getDOMNode` method, call it to get the real DOM node.
@@ -141,23 +148,31 @@ window.diffux = {
 
       this.currentRenderedElement = elem;
 
-      var width = elem.offsetWidth;
-      var height = elem.offsetHeight;
-      var top = elem.offsetTop;
-      var left = elem.offsetLeft;
-
+      var rect;
       if (this.currentExample.options.snapshotEntireScreen) {
-        width = window.innerWidth;
-        height = window.innerHeight;
-        top = 0;
-        left = 0;
+        rect = {
+          width: window.innerWidth,
+          height: window.innerHeight,
+          top: 0,
+          left: 0,
+        };
+      } else {
+        // We use elem.getBoundingClientRect() instead of offsetTop and its ilk
+        // because elem.getBoundingClientRect() is more accurate and it also
+        // takes CSS transformations and other things of that nature into
+        // account whereas offsetTop and company do not.
+        //
+        // Note that this method returns floats, so we need to round those off
+        // to integers before returning.
+        rect = elem.getBoundingClientRect();
       }
+
       return {
         description: this.currentExample.description,
-        width: width,
-        height: height,
-        top: top,
-        left: left
+        width: Math.ceil(rect.width),
+        height: Math.ceil(rect.height),
+        top: Math.floor(rect.top),
+        left: Math.floor(rect.left),
       };
     } catch (error) {
       return this.handleError(error);

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: diffux_ci
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Henric Trotzig