lookbook_visual_tester 0.1.6 → 0.3.0

data/lib/lookbook_visual_tester/runner.rb

@@ -0,0 +1,192 @@
+require 'lookbook'
+require_relative 'configuration'
+require_relative 'scenario_run'
+require_relative 'services/image_comparator'
+require_relative 'drivers/ferrum_driver'
+
+module LookbookVisualTester
+  class Runner
+    Result = Struct.new(:scenario_name, :status, :mismatch, :diff_path, :error, :baseline_path,
+                        :current_path, keyword_init: true)
+
+    def initialize(config = LookbookVisualTester.config, pattern: nil)
+      @config = config
+      @pattern = pattern
+      @driver_pool = Queue.new
+      init_driver_pool
+      @results = []
+    end
+
+    def run
+      previews = Lookbook.previews
+
+      if @pattern.present?
+        previews = previews.select do |preview|
+          preview.label.downcase.include?(@pattern.downcase) ||
+            preview.name.downcase.include?(@pattern.downcase)
+        end
+      end
+
+      puts "Found #{previews.count} previews matching '#{@pattern}'."
+
+      if @config.threads > 1
+        run_concurrently(previews)
+      else
+        run_sequentially(previews)
+      end
+
+      @results
+    ensure
+      cleanup_drivers
+    end
+
+    private
+
+    def run_sequentially(previews)
+      previews.each do |preview|
+        group = preview.respond_to?(:scenarios) ? preview.scenarios : preview.examples
+        group.each do |scenario|
+          driver = checkout_driver
+          begin
+            @results << run_scenario(scenario, driver)
+          ensure
+            return_driver(driver)
+          end
+        end
+      end
+    end
+
+    def run_concurrently(previews)
+      require 'concurrent-ruby'
+      pool = Concurrent::FixedThreadPool.new(@config.threads)
+      promises = []
+
+      previews.each do |preview|
+        group = preview.respond_to?(:scenarios) ? preview.scenarios : preview.examples
+        group.each do |scenario|
+          promises << Concurrent::Promises.future_on(pool) do
+            driver = checkout_driver
+            begin
+              run_scenario(scenario, driver)
+            ensure
+              return_driver(driver)
+            end
+          end
+        end
+      end
+
+      @results = Concurrent::Promises.zip(*promises).value
+      pool.shutdown
+      pool.wait_for_termination
+    end
+
+    def init_driver_pool
+      # Create N drivers where N = threads
+      # If sequential, we only need 1, but we can just simplify and create as many as updated threads config says
+      # Or just 1 if not concurrent?
+      # Actually, let's just stick to @config.threads.
+      # Even for sequential run, if threads was configured to 4, we might create 4 but only use 1.
+      # Optimization: if sequential, only create 1.
+
+      count = @config.threads > 1 ? @config.threads : 1
+      count.times do
+        @driver_pool << LookbookVisualTester::Drivers::FerrumDriver.new(@config)
+      end
+    end
+
+    def checkout_driver
+      @driver_pool.pop
+    end
+
+    def return_driver(driver)
+      @driver_pool << driver
+    end
+
+    def cleanup_drivers
+      until @driver_pool.empty?
+        driver = @driver_pool.pop
+        driver.cleanup
+      end
+    end
+
+    def run_scenario(scenario, driver)
+      run_data = ScenarioRun.new(scenario)
+      puts "Running visual test for: #{run_data.name}"
+
+      begin
+        driver.resize_window(1280, 800) # Default or config
+        driver.visit(run_data.preview_url)
+
+        # Determine paths
+        current_path = run_data.current_path
+        baseline_path = run_data.baseline_path
+        diff_path = @config.diff_dir.join(run_data.diff_filename)
+
+        FileUtils.mkdir_p(File.dirname(current_path))
+
+        driver.save_screenshot(current_path.to_s)
+
+        # Trimming (Feature parity with legacy ScreenshotTaker)
+        if File.exist?(current_path)
+          system("convert #{current_path} -trim -bordercolor white -border 10x10 #{current_path}")
+        end
+
+        comparator = LookbookVisualTester::ImageComparator.new(
+          baseline_path.to_s,
+          current_path.to_s,
+          diff_path.to_s
+        )
+
+        result = comparator.call
+
+        status = :passed
+        mismatch = 0.0
+        error = nil
+
+        if result[:error]
+          if result[:error] == 'Baseline not found'
+            # First run, maybe auto-approve or just report
+            puts '  [NEW] Baseline not found. Saved current as potential baseline.'
+            status = :new
+          else
+            puts "  [ERROR] #{result[:error]}"
+            status = :error
+            error = result[:error]
+          end
+        elsif result[:mismatch] > 0
+          mismatch = result[:mismatch]
+          puts "  [FAIL] Mismatch: #{mismatch.round(2)}%. Diff saved to #{diff_path}"
+          status = :failed
+
+          # Clipboard (Feature parity with legacy ScreenshotTaker)
+          if @config.copy_to_clipboard
+            system("xclip -selection clipboard -t image/png -i #{current_path}")
+          end
+        else
+          puts '  [PASS] Identical.'
+          status = :passed
+        end
+
+        Result.new(
+          scenario_name: run_data.name,
+          status: status,
+          mismatch: mismatch,
+          diff_path: diff_path.to_s,
+          error: error,
+          baseline_path: baseline_path.to_s,
+          current_path: current_path.to_s
+        )
+      rescue StandardError => e
+        puts "  [ERROR] Exception: #{e.message}"
+        puts e.backtrace.take(5)
+        Result.new(
+          scenario_name: run_data.name,
+          status: :error,
+          error: e.message,
+          baseline_path: run_data.baseline_path.to_s,
+          current_path: run_data.current_path.to_s
+        )
+      end
+    end
+  end
+end

data/lib/lookbook_visual_tester/scenario_finder.rb

@@ -12,19 +12,24 @@ module LookbookVisualTester
     end
 
     def regex
-      @regex = Regexp.new(search.chars.join('.*'), Regexp::IGNORECASE)
+      @regex = Regexp.new(clean_search.chars.join('.*'), Regexp::IGNORECASE)
     end
 
     def matched_previews
       @matched_previews ||= previews.select { |preview| regex.match?(preview.name.downcase) }
     end
 
+    def clean_search
+      @clean_search ||= search.downcase.gsub(/[^a-z0-9\s]/, '').strip
+    end
+
     def call
       return nil if search.nil? || search == '' || previews.empty?
 
       previews.each do |preview|
         preview.scenarios.each do |scenario|
-          return ScenarioRun.new(scenario) if scenario.name.downcase.include?(search.downcase)
+          name = "#{preview.name} #{scenario.name}".downcase
+          return ScenarioRun.new(scenario) if regex.match?(name.downcase) #name.downcase.include?(clean_search)
         end
       end
 

data/lib/lookbook_visual_tester/scenario_run.rb

@@ -8,11 +8,11 @@ module LookbookVisualTester
       @scenario = scenario
       @preview = scenario.preview
 
-      puts "  Scenario: #{scenario_name}"
+      LookbookVisualTester.config.logger.info "  Scenario: #{scenario_name}"
     end
 
     def preview_name
-      preview.name.underscore
+      preview.name.underscore.gsub('/', '_')
     end
 
     def scenario_name

data/lib/lookbook_visual_tester/services/image_comparator.rb

@@ -0,0 +1,66 @@
+require 'chunky_png'
+require 'fileutils'
+
+module LookbookVisualTester
+  class ImageComparator
+    attr_reader :baseline_path, :current_path, :diff_path
+
+    # Neon Red for differences
+    DIFF_COLOR = ChunkyPNG::Color.from_hex('#FF073A')
+
+    def initialize(baseline_path, current_path, diff_path)
+      @baseline_path = baseline_path
+      @current_path = current_path
+      @diff_path = diff_path
+    end
+
+    def call
+      unless File.exist?(baseline_path)
+        return { diff_path: nil, mismatch: 0.0, error: "Baseline not found" }
+      end
+
+      baseline = ChunkyPNG::Image.from_file(baseline_path)
+      current = ChunkyPNG::Image.from_file(current_path)
+
+      if baseline.dimension != current.dimension
+        return {
+          diff_path: nil,
+          mismatch: 100.0,
+          error: "Dimensions mismatch: #{baseline.width}x#{baseline.height} vs #{current.width}x#{current.height}"
+        }
+      end
+
+      diff_pixels_count = 0
+      diff_image = ChunkyPNG::Image.new(baseline.width, baseline.height, ChunkyPNG::Color::WHITE)
+
+      baseline.height.times do |y|
+        baseline.width.times do |x|
+          pixel1 = baseline[x, y]
+          pixel2 = current[x, y]
+
+          if pixel1 != pixel2
+            diff_image[x, y] = DIFF_COLOR
+            diff_pixels_count += 1
+          else
+            # Blue context for unchanged pixels to make it easier for humans
+            gray_val = ChunkyPNG::Color.r(ChunkyPNG::Color.grayscale_teint(pixel1))
+            # Keep intensity in R/G but push blue to make it the dominant tint
+            diff_image[x, y] = ChunkyPNG::Color.rgba(gray_val, gray_val, 255, 50)
+          end
+        end
+      end
+
+      mismatch_percentage = (diff_pixels_count.to_f / baseline.pixels.size) * 100.0
+
+      if diff_pixels_count > 0
+        FileUtils.mkdir_p(File.dirname(diff_path))
+        diff_image.save(diff_path)
+        { diff_path: diff_path, mismatch: mismatch_percentage, error: nil }
+      else
+        { diff_path: nil, mismatch: 0.0, error: nil }
+      end
+    rescue StandardError => e
+      { diff_path: nil, mismatch: 0.0, error: e.message }
+    end
+  end
+end

data/lib/lookbook_visual_tester/templates/report.html.erb

@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Visual Regression Report</title>
+  <style>
+    :root {
+      --bg-dark: #0f172a;
+      --bg-card: #1e293b;
+      --text-main: #f8fafc;
+      --text-muted: #94a3b8;
+      --danger: #ef4444;
+      --success: #22c55e;
+      --new: #3b82f6;
+      --border: #334155;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      background-color: var(--bg-dark);
+      color: var(--text-main);
+      margin: 0;
+      padding: 20px;
+    }
+
+    /* Header & Stats */
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 30px;
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 20px;
+    }
+
+    .stats {
+      display: flex;
+      gap: 15px;
+    }
+
+    .badge {
+      padding: 5px 12px;
+      border-radius: 9999px;
+      font-weight: bold;
+      font-size: 0.9rem;
+    }
+    .badge-failed { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
+    .badge-passed { background: rgba(34, 197, 94, 0.2); color: var(--success); }
+    .badge-new { background: rgba(59, 130, 246, 0.2); color: var(--new); }
+
+    /* Test Case Card */
+    .test-case {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      margin-bottom: 20px;
+      overflow: hidden;
+    }
+
+    .test-header {
+      padding: 15px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: rgba(0,0,0,0.2);
+    }
+
+    .test-title { font-size: 1.1rem; font-weight: 600; }
+
+    /* Comparison View */
+    .comparison-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 2px;
+      background: var(--border);
+    }
+
+    .image-col {
+      background: var(--bg-card);
+      padding: 10px;
+      text-align: center;
+    }
+
+    .image-col h4 {
+      color: var(--text-muted);
+      margin: 0 0 10px 0;
+      font-size: 0.8rem;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+
+    .image-col img {
+      max-width: 100%;
+      height: auto;
+      border: 1px solid var(--border);
+      display: block; /* Removes bottom spacing */
+    }
+
+    /* Actions */
+    .actions {
+      padding: 15px;
+      text-align: right;
+      border-top: 1px solid var(--border);
+    }
+
+    .btn {
+      background: var(--bg-dark);
+      border: 1px solid var(--border);
+      color: var(--text-main);
+      padding: 8px 16px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 0.9rem;
+      transition: all 0.2s;
+    }
+
+    .btn:hover { background: #334155; }
+    
+    .btn-copy {
+      color: var(--new);
+      border-color: var(--new);
+    }
+
+    /* Helper helper */
+    .hidden { display: none; }
+  </style>
+</head>
+<body>
+
+  <div class="header">
+    <h1>Visual Test Report</h1>
+    <div class="stats">
+      <span class="badge badge-failed"><%= @stats[:failed] %> Failed</span>
+      <span class="badge badge-new"><%= @stats[:new] %> New</span>
+      <span class="badge badge-passed"><%= @stats[:passed] %> Passed</span>
+    </div>
+  </div>
+
+  <% @results.each do |result| %>
+    <% next if result.status == :passed # Skip passed tests to reduce noise %>
+    
+    <div class="test-case">
+      <div class="test-header">
+        <span class="test-title">
+          <%= result.scenario_name %>
+          <span class="badge badge-<%= result.status %>"><%= result.status.upcase %></span>
+        </span>
+      </div>
+
+      <div class="comparison-grid">
+        <div class="image-col">
+          <h4>Baseline</h4>
+          <% if result.baseline_path && File.exist?(result.baseline_path) %>
+            <img src="<%= File.expand_path(result.baseline_path, Dir.pwd) %>" alt="Baseline">
+          <% else %>
+            <div style="padding: 40px; color: var(--text-muted);">No Baseline</div>
+          <% end %>
+        </div>
+
+        <div class="image-col">
+          <h4>Diff</h4>
+          <% if result.diff_path && File.exist?(result.diff_path) %>
+            <img src="<%= File.expand_path(result.diff_path, Dir.pwd) %>" alt="Diff">
+          <% else %>
+            <div style="padding: 40px; color: var(--text-muted);">No Diff Available</div>
+          <% end %>
+        </div>
+
+        <div class="image-col">
+          <h4>New / Actual</h4>
+          <% if result.current_path && File.exist?(result.current_path) %>
+            <img src="<%= File.expand_path(result.current_path, Dir.pwd) %>" alt="Actual">
+          <% else %>
+            <div style="padding: 40px; color: var(--text-muted);">No Capture</div>
+          <% end %>
+        </div>
+      </div>
+
+      <div class="actions">
+        <input type="hidden" value='<%= approve_command(result) %>' id="cmd-<%= result.object_id %>">
+        
+        <button class="btn btn-copy" onclick="copyCommand('<%= result.object_id %>')">
+          📋 Copy Approval Command
+        </button>
+      </div>
+    </div>
+  <% end %>
+
+  <% if @stats[:failed] == 0 && @stats[:new] == 0 %>
+    <div style="text-align: center; padding: 50px; color: var(--success);">
+      <h2>All clear! ✨</h2>
+      <p>No visual regressions detected.</p>
+    </div>
+  <% end %>
+
+  <script>
+    function copyCommand(id) {
+      const cmd = document.getElementById('cmd-' + id).value;
+      navigator.clipboard.writeText(cmd).then(() => {
+        alert('Command copied! Paste it in your terminal to approve this change.');
+      });
+    }
+  </script>
+</body>
+</html>

data/lib/lookbook_visual_tester/update_previews.rb

@@ -63,10 +63,11 @@ module LookbookVisualTester
       selected_previews.each do |preview|
         Rails.logger.info "LookbookVisualTester: entering #{preview.inspect}"
 
-        preview.scenarios.each do |scenario|
+        group = preview.respond_to?(:scenarios) ? preview.scenarios : preview.examples
+        group.each do |scenario|
           scenario_run = LookbookVisualTester::ScenarioRun.new(scenario)
           Rails.logger.info "LookbookVisualTester: Processing scenario #{scenario_run.inspect}"
-          LookbookVisualTester::ScreenshotTaker.call(scenario_run:)
+          LookbookVisualTester::ScreenshotTaker.call(scenario_run: scenario_run)
         end
       end
     end

data/lib/lookbook_visual_tester/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module LookbookVisualTester
-  VERSION = '0.1.6'
+  VERSION = '0.3.0'
 end

data/lib/lookbook_visual_tester.rb

@@ -3,11 +3,19 @@
 # lib/lookbook_visual_tester.rb
 
 require_relative 'lookbook_visual_tester/version'
+require_relative 'lookbook_visual_tester/configuration'
 require_relative 'lookbook_visual_tester/railtie' if defined?(Rails)
-require 'lookbook_visual_tester/scenario_finder'
-require 'lookbook_visual_tester/store'
+require_relative 'lookbook_visual_tester/scenario_finder'
+require_relative 'lookbook_visual_tester/store'
+require_relative 'lookbook_visual_tester/runner'
+require_relative 'lookbook_visual_tester/driver'
+require_relative 'lookbook_visual_tester/drivers/ferrum_driver'
+require_relative 'lookbook_visual_tester/services/image_comparator'
 
 module LookbookVisualTester
   class Error < StandardError; end
-  # Your code goes here...
+
+  def self.configure
+    yield(config)
+  end
 end