likadan 0.0.2 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ba7c704150fa0176ec40681e44e1b605cd5dff34
-  data.tar.gz: 9ecd0dc4806257c91574b12e1d336b3c82ab60ce
+  metadata.gz: 2bdf5b94276da8220ca5344b009e26e11e900afc
+  data.tar.gz: 55145af24ef76484e796629f18a980f5c332ff38
 SHA512:
-  metadata.gz: 6862ffbbcf213a66b4c6ccc24142880ce6646f91885451eb647035558a3e1a1212e7b9f2cb2a2701fe02b1eb1b5383838d19fe104edabe71a73e3aa6276a6986
-  data.tar.gz: 2a77b00434e19e1e82094899338c3ca2ae372ae47eeab3cc28fd9d7efb7939734f299dd3d8cea9845907085eff712d8de3a3553b074e3ddaa0d9782d1c65caf3
+  metadata.gz: 8109fd809d7d81f6c99779a972446e27402a7632b8cedc4a0288eecff586e7bbb3ee7e187694b7478de00a91c94c1672fdfdc6b956516370ef003144eb0bde2b
+  data.tar.gz: 038492a9885d98a506d0279a35a20a22e6db256200e598fc7a3c9813ff707c11c637d5010c6bda27f738b34d6de313ffe0004e3a6c6ff8295adaf5fd063d3dff

data/bin/likadan

@@ -1,12 +1,30 @@
 #!/usr/bin/env ruby
 
-Thread.new do # trivial example work thread
-  begin
-    require 'likadan_runner'
-  ensure
-    exit
+require 'likadan_utils'
+
+action = ARGV[0] || 'run'
+case action
+when 'run'
+  Thread.new do # trivial example work thread
+    begin
+      require 'likadan_runner'
+    ensure
+      puts 'Press Enter to exit...'
+      gets
+      exit
+    end
   end
-end
+  require 'likadan_server'
 
-require 'likadan_server'
+when 'review'
+  system 'open', LikadanUtils.construct_url('/review')
+  require 'likadan_server'
 
+when 'approve', 'reject'
+  require 'likadan_action'
+  abort 'Missing example name' unless example_name = ARGV[1]
+  abort 'Missing viewport width' unless width = ARGV[2]
+  LikadanAction.new(example_name, width).send(action)
+else
+  abort "Unknown action \"#{action}\""
+end

data/lib/likadan_action.rb

@@ -0,0 +1,29 @@
+require 'likadan_utils'
+require 'FileUtils'
+
+class LikadanAction
+  def initialize(example_name, width)
+    @example_name = example_name
+    @width = width
+  end
+
+  def approve
+    diff_path = LikadanUtils.path_to(@example_name, @width, 'diff.png')
+    baseline_path = LikadanUtils.path_to(@example_name, @width, 'baseline.png')
+    candidate_path = LikadanUtils.path_to(@example_name, @width, 'candidate.png')
+
+    FileUtils.rm(diff_path, force: true)
+
+    if File.exist? candidate_path
+      FileUtils.mv(candidate_path, baseline_path)
+    end
+  end
+
+  def reject
+    diff_path = LikadanUtils.path_to(@example_name, @width, 'diff.png')
+    candidate_path = LikadanUtils.path_to(@example_name, @width, 'candidate.png')
+
+    FileUtils.rm(diff_path, force: true)
+    FileUtils.rm(candidate_path, force: true)
+  end
+end

data/lib/likadan_runner.rb

@@ -6,53 +6,57 @@ 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 'yaml'
+require 'likadan_utils'
 
 driver = Selenium::WebDriver.for :firefox
 begin
-  config = YAML.load_file('.likadan.yaml')
-  snapshots_folder = config['snapshots_folder'] || './snapshots'
-
-  driver.navigate.to 'http://localhost:4567/'
+  driver.navigate.to LikadanUtils.construct_url('/')
 
   while current = driver.execute_script('return window.likadan.next()') do
-    now = Time.now.to_i
-    normalized_name = current['name'].gsub(/[^a-zA-Z0-9\-_]/, '_')
-    file = "#{snapshots_folder}/#{normalized_name}/snapshot_#{now}.png"
-    dirname = File.dirname(file)
-    unless File.directory?(dirname)
-      FileUtils.mkdir_p(dirname)
-    end
-
-    previous_png = Dir.glob(File.join(dirname, 'snapshot_*.png')).max do |a,b|
-      File.ctime(a) <=> File.ctime(b)
-    end
+    current['viewportWidths'].each do |width|
+      # Resize window to the right size before rendering
+      driver.manage.window.resize_to(width, width)
 
-    driver.save_screenshot(file)
-    to_crop = ChunkyPNG::Image.from_file(file)
-    to_crop.crop!(0, 0, current['width'], current['height'])
-    to_crop.save(file)
+      # Render the example
+      rendered = driver.execute_script('return window.likadan.renderCurrent()')
+      output_file = LikadanUtils.path_to(current['name'], width, 'candidate.png')
 
-    print "Checking \"#{current['name']}\"... "
-
-    if previous_png
-      comparison = Diffux::SnapshotComparer.new(
-        ChunkyPNG::Image.from_file(previous_png),
-        ChunkyPNG::Image.from_file(file),
-      ).compare!
+      # Create the folder structure if it doesn't already exist
+      unless File.directory?(dirname = File.dirname(output_file))
+        FileUtils.mkdir_p(dirname)
+      end
 
-      if img = comparison[:diff_image]
-        diff_output = File.join(dirname, "diff_#{now}.png")
-        img.save(diff_output)
-        puts "#{comparison[:diff_in_percent]}% (#{diff_output})"
+      # Save and crop the screenshot
+      driver.save_screenshot(output_file)
+      cropped = ChunkyPNG::Image.from_file(output_file)
+      cropped.crop!(0, 0, rendered['width'], rendered['height'])
+      cropped.save(output_file)
+
+      print "Checking \"#{current['name']}\" at #{width}px... "
+
+      # Run the diff if needed
+      baseline_file = LikadanUtils.path_to(current['name'], width, 'baseline.png')
+
+      if File.exist? baseline_file
+        comparison = Diffux::SnapshotComparer.new(
+          ChunkyPNG::Image.from_file(baseline_file),
+          cropped
+        ).compare!
+
+        if img = comparison[:diff_image]
+          diff_output = LikadanUtils.path_to(current['name'], width, 'diff.png')
+          img.save(diff_output)
+          puts "#{comparison[:diff_in_percent]}% (#{diff_output})"
+        else
+          File.delete(output_file)
+          puts 'No diff.'
+        end
       else
-        puts 'No diff.'
+        File.rename(output_file, baseline_file)
+        puts "First snapshot created (#{baseline_file})"
       end
-    else
-      puts "First snapshot created (#{file})"
     end
   end
 ensure
   driver.quit
 end
-

data/lib/likadan_server.rb

@@ -1,30 +1,42 @@
 require 'sinatra/base'
 require 'yaml'
-
-def get_configuration
-  config = {
-    'source_files' => [],
-    'stylesheets' => [],
-    'port' => 4567
-  }
-  config_file = '.likadan.yaml'
-  if File.exist? config_file
-    config = config.merge(YAML.load_file(config_file))
-  end
-  config
-end
+require 'likadan_utils'
+require 'likadan_action'
 
 class LikadanServer < Sinatra::Base
   configure do
     enable :static
-    set :port, get_configuration['port']
+    set :port, LikadanUtils.config['port']
+  end
+
+  def current_snapshots
+    prepare_file = lambda do |file|
+      width_dir = File.expand_path('..', file)
+      name_dir = File.expand_path('..', width_dir)
+      {
+        name: File.basename(name_dir),
+        width: File.basename(width_dir).sub('@', '').to_i,
+        file: file,
+      }
+    end
+    diff_files = Dir.glob("#{LikadanUtils.config['snapshots_folder']}/**/diff.png")
+    baselines = Dir.glob("#{LikadanUtils.config['snapshots_folder']}/**/baseline.png")
+    {
+      diffs: diff_files.map(&prepare_file),
+      baselines: baselines.map(&prepare_file)
+    }
   end
 
   get '/' do
-    @config = get_configuration
+    @config = LikadanUtils.config
     erb :index
   end
 
+  get '/review' do
+    @snapshots = current_snapshots
+    erb :review
+  end
+
   get '/resource' do
     file = params[:file]
     if file.start_with? 'http'
@@ -34,5 +46,15 @@ class LikadanServer < Sinatra::Base
     end
   end
 
+  post '/reject' do
+    LikadanAction.new(params[:name], params[:width]).reject
+    redirect back
+  end
+
+  post '/approve' do
+    LikadanAction.new(params[:name], params[:width]).approve
+    redirect back
+  end
+
   run!
 end

data/lib/likadan_utils.rb

@@ -0,0 +1,29 @@
+require 'yaml'
+
+class LikadanUtils
+  def self.config
+    @@config ||= {
+      'snapshots_folder' => './snapshots',
+      'source_files' => [],
+      'stylesheets' => [],
+      'port' => 4567
+    }.merge(YAML.load_file('.likadan.yaml'))
+  end
+
+  def self.normalize_name(name)
+    name.gsub(/[^a-zA-Z0-9\-_]/, '_')
+  end
+
+  def self.path_to(name, width, file_name)
+    File.join(
+      config['snapshots_folder'],
+      normalize_name(name),
+      "@#{width}",
+      file_name
+    )
+  end
+
+  def self.construct_url(absolute_path)
+    return "http://localhost:#{config['port']}#{absolute_path}"
+  end
+end

data/lib/public/likadan-runner.js

@@ -1,28 +1,73 @@
 window.likadan = {
   defined: [],
+  currentIndex: 0,
+  currentExample: undefined,
 
-  define: function(name, func) {
+  define: function(name, func, viewportWidths, options) {
     this.defined.push({
       name: name,
-      func: func
+      func: func,
+      viewportWidths: viewportWidths || [1024],
+      options: options || {
+        snapshotEntireScreen: false
+      }
     });
   },
 
   next: function() {
-    var next = this.defined.shift();
-    if (!next) {
+    this.currentExample = this.defined[this.currentIndex];
+    if (!this.currentExample) {
       return;
     }
-    var out = document.getElementById('likadan-output');
+    this.currentIndex++;
+    return this.currentExample;
+  },
+
+  getOutputElement: function() {
+    return document.getElementById('likadan-output');
+  },
+
+  clearVisibleElements: function() {
+    var out = this.getOutputElement();
+    var allElements = Array.prototype.slice.call(document.querySelectorAll('body > *'));
+    allElements.forEach(function(element) {
+      if (element === out) {
+        return;
+      }
+      var style = window.getComputedStyle(element);
+      if (style.display !== 'none') {
+        element.parentNode.removeChild(element);
+      }
+    });
+  },
+
+  renderCurrent: function() {
+    var out = this.getOutputElement();
     out.innerHTML = '';
-    next.func(out);
 
-    var elem = out.firstChild;
+    // We need to clear out anything currently visible. There's no guarantee
+    // that examples only render inside the .likadan-output container.
+    this.clearVisibleElements();
+
+    var elem = this.currentExample.func();
+    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();
+    }
+    out.appendChild(elem);
 
+    var width = elem.offsetWidth;
+    var height = elem.offsetHeight;
+
+    if (this.currentExample.options.snapshotEntireScreen) {
+      width = window.innerWidth;
+      height = window.innerHeight;
+    }
     return {
-      name: next.name,
-      width: elem.offsetWidth,
-      height: elem.offsetHeight
+      name: this.currentExample.name,
+      width: width,
+      height: height
     };
   }
 };

data/lib/views/index.erb

@@ -1,12 +1,23 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <style type="text/css">
+      * {
+        -webkit-transition: none !important;
+        -moz-transition: none !important;
+        transition: none !important;
+        -webkit-animation-duration: 0 !important;
+        -moz-animation-duration: 0s !important;
+        animation-duration: 0s !important;
+      }
+    </style>
+
     <% @config['stylesheets'].each do |stylesheet| %>
       <link rel="stylesheet" type="text/css"
         href="/resource?file=<%= ERB::Util.url_encode(stylesheet) %>">
     <% end %>
   </head>
-  <body style="margin: 0;">
+  <body style="margin: 0; background-color: #fff;">
     <div id="likadan-output"/>
     <script src="/likadan-runner.js"></script>
     <% @config['source_files'].each do |source_file| %>

data/lib/views/review.erb

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style type="text/css">
+      body {
+        background-color: #f0f0f0;
+        font-family: helvetica, arial;
+      }
+      form {
+        display: inline-block;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Likadan Review Tool</h1>
+    <h2>DIFFS</h2>
+    <% @snapshots[:diffs].each do |diff| %>
+      <h3>
+        <%= diff[:name] %> @ <%= diff[:width] %>
+      </h3>
+      <p><img src="/resource?file=<%= ERB::Util.url_encode(diff[:file]) %>"></p>
+      <form style="display: inline-block"
+            action="/approve?name=<%= diff[:name] %>&width=<%= diff[:width] %>"
+            method="POST">
+        <button type="submit">Approve</button>
+      </form>
+      <form style="display: inline-block"
+            action="/reject?name=<%= diff[:name] %>&width=<%= diff[:width] %>"
+            method="POST">
+        <button type="submit">Reject</button>
+      </form>
+    <% end %>
+
+    <hr>
+
+    <h2>BASELINES</h2>
+    <% @snapshots[:baselines].each do |baseline| %>
+      <h3>
+        <%= baseline[:name] %> @ <%= baseline[:width] %>
+      </h3>
+      <p><img src="/resource?file=<%= ERB::Util.url_encode(baseline[:file]) %>"></p>
+    <% end %>
+  </body>
+</html>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: likadan
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - Henric Trotzig
@@ -118,10 +118,13 @@ extensions: []
 extra_rdoc_files: []
 files:
 - bin/likadan
+- lib/likadan_action.rb
 - lib/likadan_runner.rb
 - lib/likadan_server.rb
+- lib/likadan_utils.rb
 - lib/public/likadan-runner.js
 - lib/views/index.erb
+- lib/views/review.erb
 homepage: http://rubygems.org/gems/likadan
 licenses:
 - MIT
@@ -142,7 +145,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.2.2
+rubygems_version: 2.4.5
 signing_key: 
 specification_version: 4
 summary: Likadan