diffux_ci 0.3.1 → 0.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0434bae3bc243b30200763f7503dec75c2f884c1
-  data.tar.gz: fab849f9e3bad3c2286f689beca20ab2bcee7957
+  metadata.gz: e5143ca3e39e34a1ea00043f6f20814a72971b16
+  data.tar.gz: 6fced8ad6eccd338a886769b2ca755768ab9c0f9
 SHA512:
-  metadata.gz: 3cd2f4c3c22a01247ad075259954c2c8815a412b7f77fb20c201210877f826b515a6e9fdf62e660492dba84bf02ceb410c28526781485460680046306f9145ea
-  data.tar.gz: 5c516aff788a20ad96cf7e9992647940b7d481f5edc70de3dd3cf32956e708cbe57d896492144bdb5883bfae6b0b20320eb004d74cb4c55e4472b20872a4c414
+  metadata.gz: 758fe05b11a9edcc343acc0cd9988615e2035432675e88de8b2837941f2c1704de1b9d6cd2a31102df05fd1b5276dc0a7b439b83a987a7e421e0b0177e7a8679
+  data.tar.gz: feb1f5d30adea55fc3fc0f467f1079eb629d09b15a6b0248ebfe60a91d2f2679a9e086a789c5822fbac5cf7611831358090be701aaa4ea7378e97859df8fe114

data/bin/{diffux_ci → diffux}

@@ -6,6 +6,19 @@ require 'diffux_ci_uploader'
 require 'diffux_ci_version'
 require 'fileutils'
 
+help_text = <<-EOS
+Commands:
+  run (default)
+  debug
+  review
+  clean
+  approve
+  reject
+  upload_diffs
+  --help
+  --version
+  EOS
+
 action = ARGV[0] || 'run'
 case action
 when 'run'
@@ -44,18 +57,7 @@ when '--version'
   puts "diffux_ci version #{DiffuxCI::VERSION}"
 
 when '--help'
-  puts <<-EOS
-Commands:
-  run (default)
-  debug
-  review
-  clean
-  approve
-  reject
-  upload_diffs
-  --help
-  --version
-  EOS
+  puts help_text
 else
-  abort "Unknown action \"#{action}\""
+  abort "Unknown action \"#{action}\"\n\n#{help_text}"
 end

data/lib/diffux_ci_runner.rb

@@ -50,30 +50,43 @@ 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
+  all_examples = driver.execute_script('return window.diffux.getAllExamples()')
+
+  # To avoid the overhead of resizing the window all the time, we are going to
+  # render all examples for each given viewport size all in one go.
+  examples_by_viewport = {}
+
+  all_examples.each do |example|
+    viewports = resolve_viewports(example)
+
+    viewports.each do |viewport|
+      examples_by_viewport[viewport['name']] ||= {}
+      examples_by_viewport[viewport['name']][:viewport] ||= viewport
+      examples_by_viewport[viewport['name']][:examples] ||= []
+
+      examples_by_viewport[viewport['name']][:examples] << example
+    end
+  end
+
+  examples_by_viewport.each do |_, example_by_viewport|
+    viewport = example_by_viewport[:viewport]
+    examples = example_by_viewport[:examples]
+
+    puts "#{viewport['name']} (#{viewport['width']}x#{viewport['height']})"
+
+    # Resize window to the right size before rendering
+    driver.manage.window.resize_to(viewport['width'], viewport['height'])
+
+    examples.each do |example|
+      if example == examples.last
+        print '└─ '
       else
-        seen_descriptions[description][viewport['name']] = true
+        print '├─ '
       end
+      description = example['description']
+      print " #{description} "
 
-      # Resize window to the right size before rendering
-      driver.manage.window.resize_to(viewport['width'], viewport['height'])
+      print '.'
 
       # Render the example
 
@@ -84,15 +97,16 @@ begin
       # through to Rubyland), or until WebDriver's `script_timeout` is reached,
       # before continuing. Since we don't define the signature of this function,
       # we can't name the argument so we access it using JavaScript's magic
-      # arguments object and pass it down to `renderCurrent()` which calls it
+      # arguments object and pass it down to `renderExample()` which calls it
       # when it is done--either synchronously if our example doesn't take an
       # argument, or asynchronously via the Promise and `done` callback if it
       # does.
       script = <<-EOS
         var doneFunc = arguments[arguments.length - 1];
-        window.diffux.renderCurrent(doneFunc);
+        window.diffux.renderExample(arguments[0], doneFunc);
       EOS
-      rendered = driver.execute_async_script(script)
+      rendered = driver.execute_async_script(script, description)
+      print '.'
 
       if rendered['error']
         fail <<-EOS
@@ -105,6 +119,7 @@ begin
 
       # Crop the screenshot to the size of the rendered element
       screenshot = ChunkyPNG::Image.from_blob(driver.screenshot_as(:png))
+      print '.'
 
       # In our JavScript we are rounding up, which can sometimes give us a
       # dimensions that are larger than the screenshot dimensions. We need to
@@ -122,8 +137,7 @@ begin
                        rendered['top'],
                        crop_width,
                        crop_height)
-
-      print "Checking \"#{description}\" at [#{viewport['name']}]... "
+      print '.'
 
       # Run the diff if needed
       baseline_path = DiffuxCIUtils.path_to(
@@ -136,6 +150,7 @@ begin
           ChunkyPNG::Image.from_file(baseline_path),
           screenshot
         ).compare!
+        print '.'
 
         if comparison[:diff_image]
           # There was a visual difference between the new snapshot and the
@@ -144,16 +159,18 @@ begin
           diff_path = DiffuxCIUtils.path_to(
             description, viewport['name'], 'diff.png')
           comparison[:diff_image].save(diff_path, :fast_rgba)
+          print '.'
 
           candidate_path = DiffuxCIUtils.path_to(
             description, viewport['name'], 'candidate.png')
           screenshot.save(candidate_path, :fast_rgba)
+          print '.'
 
-          puts "#{comparison[:diff_in_percent].round(1)}% (#{candidate_path})"
+          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.
-          puts 'No diff.'
+          puts ' No diff.'
         end
       else
         # There was no baseline image yet, so we want to start by saving a new
@@ -164,7 +181,8 @@ begin
           FileUtils.mkdir_p(dirname)
         end
         screenshot.save(baseline_path, :fast_rgba)
-        puts "First snapshot created (#{baseline_path})"
+        print '.'
+        puts " First snapshot created (#{baseline_path})"
       end
     end
   end

data/lib/diffux_ci_version.rb

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

data/lib/public/diffux_ci-runner.js

@@ -1,52 +1,52 @@
 'use strict';
 
 window.diffux = {
-  defined: [],
-  currentIndex: 0,
-  currentExample: undefined,
+  defined: {},
+  fdefined: [],
   currentRenderedElement: undefined,
   errors: [],
 
   define: function(description, func, options) {
-    this.defined.push({
+    // Make sure we don't have a duplicate description
+    if (this.defined[description]) {
+      throw 'Error while defining "' + description +
+        '": Duplicate description detected'
+    }
+    this.defined[description] = {
       description: description,
       func: func,
       options: options || {}
-    });
+    };
   },
 
-  fdefine: function() {
-    this.defined = []; // clear out all previously added examples
-    this.define.apply(this, arguments); // add the example
-    this.define = function() {}; // make `define` a no-op from now on
+  fdefine: function(description, func, options) {
+    this.define(description, func, options); // add the example
+    this.fdefined.push(description);
   },
 
-  next: function() {
-    if (this.currentRenderedElement) {
-      if (window.React) {
-        window.React.unmountComponentAtNode(document.body.lastChild);
-      } else {
-        this.currentRenderedElement.parentNode
-          .removeChild(this.currentRenderedElement);
-      }
-    }
-    this.currentExample = this.defined[this.currentIndex];
-    if (!this.currentExample) {
-      return;
+  /**
+   * @return {Array.<Object>}
+   */
+  getAllExamples: function() {
+    var descriptions = Object.keys(this.defined);
+
+    if (this.fdefined.length) {
+      // Some examples have been focused, so we want to filter out anything that
+      // has not been focused.
+      descriptions = descriptions.filter(function(description) {
+        return this.fdefined.indexOf(description) !== -1;
+      }.bind(this));
     }
-    this.currentIndex++;
-    return this.currentExample;
-  },
 
-  setCurrent: function(exampleDescription) {
-    this.defined.forEach(function(example, index) {
-      if (example.description === exampleDescription) {
-        this.currentExample = example;
-      }
+    return descriptions.map(function(description) {
+      var example = this.defined[description];
+      // We return a subset of the properties of an example (only those relevant
+      // for diffux_runner.rb).
+      return {
+        description: example.description,
+        options: example.options,
+      };
     }.bind(this));
-    if (!this.currentExample) {
-      throw 'No example found with description "' + exampleDescription + '"';
-    }
   },
 
   isElementVisible: function(element) {
@@ -66,10 +66,10 @@ window.diffux = {
     }
   },
 
-  handleError: function(error) {
+  handleError: function(currentExample, error) {
     console.error(error);
     return {
-      description: this.currentExample.description,
+      description: currentExample.description,
       error: error.message
     };
   },
@@ -107,49 +107,58 @@ window.diffux = {
   },
 
   /**
+   * Clean up the DOM for a rendered element that has already been processed.
+   *
+   * @param {Object} renderedElement
+   */
+  cleanOutElement: function(renderedElement) {
+    renderedElement.parentNode.removeChild(renderedElement);
+  },
+
+  /**
+   * @param {String} exampleDescription
    * @param {Function} doneFunc injected by driver.execute_async_script in
    *   diffux_ci_runner.rb
    */
-  renderCurrent: function(doneFunc) {
+  renderExample: function(exampleDescription, doneFunc) {
+    var currentExample = this.defined[exampleDescription];
+    if (!currentExample) {
+      throw 'No example found with description "' + exampleDescription + '"';
+    }
+
     try {
+      if (this.currentRenderedElement) {
+        this.cleanOutElement(this.currentRenderedElement);
+      }
       this.clearVisibleElements();
 
-      var func = this.currentExample.func;
+      var func = currentExample.func;
       if (func.length) {
         // The function takes an argument, which is a callback that is called
         // once it is done executing. This can be used to write functions that
         // have asynchronous code in them.
         this.tryAsync(func).then(function(elem) {
-          doneFunc(this.processElem(elem));
+          doneFunc(this.processElem(currentExample, elem));
         }.bind(this)).catch(function(error) {
-          doneFunc(this.handleError(error));
+          doneFunc(this.handleError(currentExample, error));
         }.bind(this));
       } else {
         // The function does not take an argument, so we can run it
         // synchronously.
         var elem = func();
-        doneFunc(this.processElem(elem));
+        doneFunc(this.processElem(currentExample, elem));
       }
     } catch (error) {
-      doneFunc(this.handleError(error));
+      doneFunc(this.handleError(currentExample, error));
     }
   },
 
-  processElem: function(elem) {
+  processElem: function(currentExample, elem) {
     try {
-      // TODO: elem.getDOMNode is deprecated in React, so we need to convert
-      // 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.
-        elem = elem.getDOMNode();
-      }
-
       this.currentRenderedElement = elem;
 
       var rect;
-      if (this.currentExample.options.snapshotEntireScreen) {
+      if (currentExample.options.snapshotEntireScreen) {
         rect = {
           width: window.innerWidth,
           height: window.innerHeight,
@@ -168,14 +177,14 @@ window.diffux = {
       }
 
       return {
-        description: this.currentExample.description,
+        description: currentExample.description,
         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);
+      return this.handleError(currentExample, error);
     }
   }
 };
@@ -186,8 +195,7 @@ window.addEventListener('load', function() {
     return;
   }
   var example = decodeURIComponent(matches[1]);
-  window.diffux.setCurrent(example);
-  window.diffux.renderCurrent(function() {});
+  window.diffux.renderExample(example, function() {});
 });
 
 // We need to redefine a few global functions that halt execution. Without this,

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: diffux_ci
 version: !ruby/object:Gem::Version
-  version: 0.3.1
+  version: 0.3.2
 platform: ruby
 authors:
 - Henric Trotzig
@@ -130,11 +130,11 @@ email:
 - henric.trotzig@gmail.com
 - joe.lencioni@gmail.com
 executables:
-- diffux_ci
+- diffux
 extensions: []
 extra_rdoc_files: []
 files:
-- bin/diffux_ci
+- bin/diffux
 - lib/diffux_ci-diffs.html.erb
 - lib/diffux_ci_action.rb
 - lib/diffux_ci_runner.rb
@@ -167,7 +167,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.5
+rubygems_version: 2.4.5.1
 signing_key: 
 specification_version: 4
 summary: Diffux-CI