snapshot_ui 0.4.0 → 0.5.0

data/lib/snapshot_ui/web/assets/stylesheets/application.css

@@ -159,6 +159,7 @@ body#not_found p {
     background:#eee;
     color: #666;
     text-align:center;
+    width: max-content;
     display:none;
 }
 
@@ -182,3 +183,123 @@ body#not_found p {
     height: 2px;
     background-color: lightskyblue;
 }
+
+.type_badge {
+    display: inline-block;
+    margin-left: 8px;
+    padding: 1px 8px;
+    font-size: 55%;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    vertical-align: middle;
+    border-radius: 10px;
+    background: #eef2ff;
+    color: #4f46e5;
+}
+
+/* Mail snapshots */
+body#snapshots_mail {
+    background: #f6f7f9;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+body#snapshots_mail .mail {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+body#snapshots_mail .mail_header {
+    background: #fff;
+    border-bottom: 1px solid #e5e7eb;
+    padding: 20px 28px;
+    font-size: 15px;
+    line-height: 1.5;
+    flex: 0 0 auto;
+}
+
+body#snapshots_mail .mail_header .back {
+    color: #6b7280;
+    text-decoration: none;
+    font-size: 13px;
+}
+
+body#snapshots_mail .mail_header .back:hover { text-decoration: underline; }
+
+body#snapshots_mail .mail_header h1 {
+    margin: 8px 0 2px;
+    font-size: 22px;
+    font-weight: 600;
+    color: #111827;
+}
+
+body#snapshots_mail .mail_header .mailer {
+    margin: 0 0 12px;
+    color: #9ca3af;
+    font-family: Menlo, Courier, monospace;
+    font-size: 12px;
+}
+
+body#snapshots_mail dl.fields {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    gap: 2px 14px;
+    margin: 0 0 14px;
+}
+
+body#snapshots_mail dl.fields dt { color: #9ca3af; font-size: 13px; }
+body#snapshots_mail dl.fields dd { margin: 0; color: #374151; font-size: 13px; }
+
+body#snapshots_mail .mail_toolbar {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin: 4px 0;
+}
+
+body#snapshots_mail .parts { display: inline-flex; border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden; }
+body#snapshots_mail .part_tab {
+    padding: 5px 14px;
+    font-size: 13px;
+    color: #374151;
+    text-decoration: none;
+    background: #fff;
+}
+body#snapshots_mail .part_tab + .part_tab { border-left: 1px solid #d1d5db; }
+body#snapshots_mail .part_tab.is_active { background: #4f46e5; color: #fff; }
+body#snapshots_mail .part_single { font-size: 13px; color: #6b7280; }
+
+body#snapshots_mail .eml { font-size: 13px; color: #4f46e5; text-decoration: none; }
+body#snapshots_mail .eml:hover { text-decoration: underline; }
+
+body#snapshots_mail .attachments { margin-top: 12px; font-size: 13px; }
+body#snapshots_mail .attachments_label { color: #9ca3af; margin-right: 6px; }
+body#snapshots_mail .attachment {
+    display: inline-block;
+    margin: 2px 6px 2px 0;
+    padding: 3px 10px;
+    background: #eef2ff;
+    color: #4f46e5;
+    border-radius: 6px;
+    text-decoration: none;
+}
+
+body#snapshots_mail details.all_headers { margin-top: 12px; }
+body#snapshots_mail details.all_headers summary { cursor: pointer; color: #6b7280; font-size: 13px; }
+body#snapshots_mail details.all_headers table { margin-top: 8px; border-collapse: collapse; font-size: 12px; }
+body#snapshots_mail details.all_headers td { padding: 2px 10px 2px 0; vertical-align: top; }
+body#snapshots_mail details.all_headers td.name { color: #9ca3af; text-align: right; white-space: nowrap; }
+
+body#snapshots_mail iframe.mail_body {
+    flex: 1 1 auto;
+    width: 100%;
+    border: 0;
+    background: #fff;
+}
+
+body#snapshots_mail iframe.mail_body.is_text { background: #fff; }
+
+body#snapshots_mail .empty { padding: 40px 28px; color: #6b7280; }

data/lib/snapshot_ui/web/views/layout.html.erb

@@ -6,20 +6,15 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="turbo-refresh-method" content="morph">
   <meta name="turbo-refresh-scroll" content="preserve">
-  <link rel="stylesheet" href="<%= stylesheet_path("application.css") %>">
-  <meta name="action-cable-url" content="<%= SnapshotUI.configuration.live_websocket_url %>" />
+  <link rel="stylesheet" href="<%= stylesheet_path("application.css") %>" data-turbo-track="reload">
   <script type="importmap" data-turbo-track="reload">
     {
       "imports": {
         "application": "<%= javascript_path("application.js") %>",
-        "@hotwired/stimulus": "https://cdn.jsdelivr.net/npm/@hotwired/stimulus@3.2.2/+esm",
-        "@hotwired/turbo": "https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.4/+esm",
-        "@rails/actioncable": "https://cdn.jsdelivr.net/npm/@rails/actioncable@7.1.3-4/+esm",
+        "@hotwired/turbo": "<%= javascript_path("vendor/turbo.js") %>",
+        "@hotwired/stimulus": "<%= javascript_path("vendor/stimulus.js") %>",
         "controllers/refresh_controller": "<%= javascript_path("controllers/refresh_controller.js") %>",
-        "controllers/source_location_controller": "<%= javascript_path("controllers/source_location_controller.js") %>",
-        "channels/consumer": "<%= javascript_path("channels/consumer.js") %>",
-        "channels": "<%= javascript_path("channels/index.js") %>",
-        "channels/refresh_channel": "<%= javascript_path("channels/refresh_channel.js") %>"
+        "controllers/source_location_controller": "<%= javascript_path("controllers/source_location_controller.js") %>"
       }
     }
   </script>

data/lib/snapshot_ui/web/views/snapshots/index.html.erb

@@ -2,9 +2,11 @@
   <h1>Snapshots</h1>
 
   <% if @grouped_by_test_class.empty? %>
+    <p>A list of snapshots will appear here once you've taken them.</p>
+
     <p>
       In your integration tests, once a request has been made,
-      add <code>#take_screenshot</code>. Run the tests with <code>TAKE_SNAPSHOTS=1</code>, and the snapshot will appear here.
+      add <code>#take_snapshot</code>. Run the tests with <code>TAKE_SNAPSHOTS=1</code>, and the snapshot will appear here.
     </p>
 
     <p>Look below at an example integration test.</p>
@@ -32,15 +34,7 @@ class ApplicationTest < Minitest::Spec
 end
 </pre>
 
-  <p>
-    To activate live updates for this page, execute the following command in your terminal.<br>
-  </p>
-  <pre>
-bundle exec snapshot_ui watch SNAPSHOT_DIRECTORY</pre>
-  <p>
-    where <code>SNAPSHOT_DIRECTORY</code> is a path to a directory that contains
-    snapshot UI data, e.g. <code>tmp/snapshot_ui</code>.
-  </p>
+  <p>This page refreshes automatically whenever snapshots are updated.</p>
   <% end %>
 
   <% @grouped_by_test_class.each do |test_group, snapshots| %>
@@ -50,7 +44,7 @@ bundle exec snapshot_ui watch SNAPSHOT_DIRECTORY</pre>
   <ul>
     <% snapshots.each do |snapshot| %>
       <li>
-        <a href="<%= snapshot_path(snapshot.slug) %>"><%= snapshot_title(snapshot) %></a>
+        <a href="<%= snapshot_path(snapshot.slug) %>"><%= snapshot_title(snapshot) %></a><%= snapshot_type_badge(snapshot) %>
         <button
            class="copy_source_location"
            data-controller="source-location"

data/lib/snapshot_ui/web.rb

@@ -7,21 +7,38 @@ require_relative "web/application"
 
 module SnapshotUI
   class Web
-    def self.call(env)
-      new.call(env)
+    @renderers = {}
+
+    # Registers a renderer for a snapshot type. A renderer responds to
+    # +show(snapshot, view)+ and +raw(snapshot, view)+, each returning a Rack
+    # response triple; +view+ is the Application instance, which exposes request
+    # and URL helpers. snapshot_ui-rails registers one for the "mail" type.
+    def self.register_renderer(type, renderer)
+      @renderers[type.to_s] = renderer
     end
 
-    def call(env)
-      app =
-        Rack::Builder.app do
-          use Rack::Static,
-            root: "#{File.dirname(__FILE__)}/web/assets",
-            urls: %w[/stylesheets /javascripts]
+    def self.renderer(type)
+      @renderers[type.to_s]
+    end
+
+    # The Rack application serving the UI: the static assets in front of
+    # Application, which handles a request per instance. Built once.
+    def self.app
+      @app ||= Rack::Builder.app do
+        use Rack::Static,
+          root: "#{File.dirname(__FILE__)}/web/assets",
+          urls: %w[/stylesheets /javascripts]
 
-          run Application.new
-        end
+        run ->(env) { Application.new.call(env) }
+      end
+    end
 
+    def self.call(env)
       app.call(env)
     end
+
+    def call(env)
+      self.class.call(env)
+    end
   end
 end

data/lib/snapshot_ui.rb

@@ -1,5 +1,8 @@
 # frozen_string_literal: true
 
+require "pathname"
+require "fileutils"
+require_relative "snapshot_ui/version"
 require_relative "snapshot_ui/snapshot"
 require_relative "snapshot_ui/configuration"
 
@@ -7,8 +10,7 @@ module SnapshotUI
   DEFAULT_CONFIGURATION = {
     project_root_directory: nil,
     storage_directory: nil,
-    web_url: "http://localhost:3000/ui/snapshots",
-    live_websocket_url: "http://localhost:49152/live"
+    web_url: "http://localhost:3000/ui/snapshots"
   }.freeze
 
   def self.configure

data/snapshot_ui.gemspec

@@ -11,25 +11,19 @@ Gem::Specification.new do |spec|
   spec.summary = "Take snapshots of UI during testing for inspection in a browser."
   spec.homepage = "https://github.com/tomazzlender/snapshot_ui"
   spec.license = "MIT"
-  spec.required_ruby_version = ">= 3.0.0"
+  spec.required_ruby_version = ">= 3.3.0"
 
   spec.metadata["allowed_push_host"] = "https://rubygems.org"
 
   spec.metadata["homepage_uri"] = spec.homepage
-  spec.metadata["source_code_uri"] = spec.homepage
-  spec.metadata["changelog_uri"] = "#{spec.homepage}/blob/main/CHANGELOG.md"
+  spec.metadata["source_code_uri"] = "#{spec.homepage}/tree/main/gems/snapshot_ui"
+  spec.metadata["changelog_uri"] = "#{spec.homepage}/blob/main/gems/snapshot_ui/CHANGELOG.md"
 
-  spec.files = (`git ls-files | grep -E '^(lib)'`.split("\n") + %w[snapshot_ui.gemspec README.md CHANGELOG.md LICENSE.txt bin/snapshot_ui])
-  spec.executables = ["snapshot_ui"]
+  gem_root = File.expand_path(__dir__)
+  spec.files = Dir.chdir(gem_root) do
+    Dir.glob(%w[lib/**/* snapshot_ui.gemspec README.md CHANGELOG.md LICENSE.txt]).select { |path| File.file?(path) }
+  end
   spec.require_paths = ["lib"]
 
-  # Uncomment to register a new dependency of your gem
-  spec.add_dependency "rack", "~> 3.0"
-  spec.add_dependency "listen", "~> 3.9"
-  spec.add_dependency "async-websocket", "~> 0.26"
-  spec.add_dependency "falcon", "~> 0.47"
-  spec.add_dependency "thor", "~> 1.3"
-
-  # For more information and examples about making a new gem, check out our
-  # guide at: https://bundler.io/guides/creating_gem.html
+  spec.add_dependency "rack", ">= 2.2", "< 4"
 end

metadata

@@ -1,101 +1,45 @@
 --- !ruby/object:Gem::Specification
 name: snapshot_ui
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Tomaz Zlender
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-22 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rack
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '3.0'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.0'
-- !ruby/object:Gem::Dependency
-  name: listen
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.9'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.9'
-- !ruby/object:Gem::Dependency
-  name: async-websocket
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
+        version: '2.2'
+    - - "<"
       - !ruby/object:Gem::Version
-        version: '0.26'
+        version: '4'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '0.26'
-- !ruby/object:Gem::Dependency
-  name: falcon
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '0.47'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '0.47'
-- !ruby/object:Gem::Dependency
-  name: thor
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '1.3'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
+        version: '2.2'
+    - - "<"
       - !ruby/object:Gem::Version
-        version: '1.3'
-description:
+        version: '4'
 email:
 - tomaz@zlender.se
-executables:
-- snapshot_ui
+executables: []
 extensions: []
 extra_rdoc_files: []
 files:
 - CHANGELOG.md
 - LICENSE.txt
 - README.md
-- bin/snapshot_ui
 - lib/minitest/snapshot_ui_plugin.rb
 - lib/snapshot_ui.rb
-- lib/snapshot_ui/cli.rb
-- lib/snapshot_ui/cli/watcher.ru
 - lib/snapshot_ui/colorize.rb
 - lib/snapshot_ui/configuration.rb
 - lib/snapshot_ui/snapshot.rb
@@ -106,11 +50,10 @@ files:
 - lib/snapshot_ui/web.rb
 - lib/snapshot_ui/web/application.rb
 - lib/snapshot_ui/web/assets/javascripts/application.js
-- lib/snapshot_ui/web/assets/javascripts/channels/consumer.js
-- lib/snapshot_ui/web/assets/javascripts/channels/index.js
-- lib/snapshot_ui/web/assets/javascripts/channels/refresh_channel.js
 - lib/snapshot_ui/web/assets/javascripts/controllers/refresh_controller.js
 - lib/snapshot_ui/web/assets/javascripts/controllers/source_location_controller.js
+- lib/snapshot_ui/web/assets/javascripts/vendor/stimulus.js
+- lib/snapshot_ui/web/assets/javascripts/vendor/turbo.js
 - lib/snapshot_ui/web/assets/stylesheets/application.css
 - lib/snapshot_ui/web/views/layout.html.erb
 - lib/snapshot_ui/web/views/snapshots/index.html.erb
@@ -123,9 +66,8 @@ licenses:
 metadata:
   allowed_push_host: https://rubygems.org
   homepage_uri: https://github.com/tomazzlender/snapshot_ui
-  source_code_uri: https://github.com/tomazzlender/snapshot_ui
-  changelog_uri: https://github.com/tomazzlender/snapshot_ui/blob/main/CHANGELOG.md
-post_install_message:
+  source_code_uri: https://github.com/tomazzlender/snapshot_ui/tree/main/gems/snapshot_ui
+  changelog_uri: https://github.com/tomazzlender/snapshot_ui/blob/main/gems/snapshot_ui/CHANGELOG.md
 rdoc_options: []
 require_paths:
 - lib
@@ -133,15 +75,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 3.0.0
+      version: 3.3.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.19
-signing_key:
+rubygems_version: 3.6.9
 specification_version: 4
 summary: Take snapshots of UI during testing for inspection in a browser.
 test_files: []

data/bin/snapshot_ui

@@ -1,7 +0,0 @@
-#!/usr/bin/env ruby
-
-$LOAD_PATH << File.expand_path(File.join(File.dirname(__FILE__), '../lib'))
-
-require "snapshot_ui/cli"
-
-SnapshotUI::CLI.start(ARGV)

data/lib/snapshot_ui/cli/watcher.ru

@@ -1,91 +0,0 @@
-# frozen_string_literal: true
-
-require "async"
-require "async/http/endpoint"
-require "async/websocket/client"
-require "async/websocket/adapters/rack"
-require "listen"
-require "set"
-require "uri"
-
-load ENV.fetch("SNAPSHOT_UI_INITIALIZER_FILE")
-
-REFRESH_MESSAGE = {identifier: "{\"channel\":\"RefreshChannel\"}", message: "refresh"}.to_json
-CONFIRM_SUBSCRIPTION_MESSAGE = {identifier: "{\"channel\":\"RefreshChannel\"}", type: "confirm_subscription"}.to_json
-
-@connections = Set.new
-
-live_websocket_uri = URI.parse(SnapshotUI.configuration.live_websocket_url)
-
-run lambda { |env|
-  if env["REQUEST_PATH"] == live_websocket_uri.path
-    Async::WebSocket::Adapters::Rack.open(env, protocols: ["actioncable-v1-json"]) do |connection|
-      @connections << connection
-
-      Console.info "Client connected."
-      connection.write(CONFIRM_SUBSCRIPTION_MESSAGE)
-      connection.flush
-
-      Async do |ping_task|
-        loop do
-          connection.write({type: "ping", message: Time.now.to_i.to_s}.to_json)
-          connection.flush
-          sleep(2)
-        end
-      ensure
-        ping_task&.stop
-      end
-
-      while connection.read
-      end
-    rescue Protocol::WebSocket::ClosedError
-      Console.info "Client disconnected."
-      @connections.delete(connection)
-    ensure
-      Console.info "Client disconnected."
-      @connections.delete(connection)
-    end
-  else
-    [404, {}, ["404 Not Found"]]
-  end
-}
-
-Async do |client_task|
-  endpoint = Async::HTTP::Endpoint.parse(SnapshotUI.configuration.live_websocket_url)
-
-  Async::WebSocket::Client.connect(endpoint) do |connection|
-    Async do |listener_task|
-      detect_snapshots_update(listener_task)
-    end
-
-    while (message = connection.read)
-      if message == REFRESH_MESSAGE
-        Console.info "Snapshots updated."
-      end
-    end
-  ensure
-    client_task&.stop
-  end
-end
-
-def detect_snapshots_update(task)
-  Pathname.new(SnapshotUI.configuration.storage_directory).mkpath
-  listener = Listen.to(SnapshotUI.configuration.storage_directory) { |_modified, _added, _removed| broadcast_update }
-
-  task.async do
-    listener.start
-    task.sleep
-  end
-
-  Console.info("Watching for snapshots updates in #{SnapshotUI.configuration.storage_directory}")
-  Console.info("Review snapshots on #{SnapshotUI.configuration.web_url}")
-end
-
-def broadcast_update
-  @connections.each do |connection|
-    connection.write(REFRESH_MESSAGE)
-    connection.flush
-  rescue => e
-    Console.error "Failed to send message to client: #{e.message}"
-  end
-end

data/lib/snapshot_ui/cli.rb

@@ -1,29 +0,0 @@
-require "bundler/setup"
-require "thor"
-require "pathname"
-require "uri"
-
-module SnapshotUI
-  class CLI < Thor
-    desc "live SNAPSHOT_UI_INITIALIZER_FILE", "Run the command to enable live refreshing of UI snapshots."
-    def live(initializer_file)
-      unless File.exist?(initializer_file)
-        puts "The provided initializer file `#{initializer_file}` doesn't exist. Please double check the path."
-        exit 1
-      end
-
-      load initializer_file
-
-      websocket_host_uri = URI.parse(SnapshotUI.configuration.live_websocket_url)
-      websocket_host_uri.path = ""
-
-      config_path = Pathname.new(__dir__).join("cli", "watcher.ru").cleanpath.to_s
-
-      exec "SNAPSHOT_UI_INITIALIZER_FILE=#{initializer_file} bundle exec falcon serve --bind #{websocket_host_uri} --count 1 --config #{config_path}"
-    end
-
-    def self.exit_on_failure?
-      true
-    end
-  end
-end

data/lib/snapshot_ui/web/assets/javascripts/channels/consumer.js

@@ -1,3 +0,0 @@
-import { createConsumer } from "@rails/actioncable"
-
-export default createConsumer()

data/lib/snapshot_ui/web/assets/javascripts/channels/index.js

@@ -1 +0,0 @@
-import "channels/refresh_channel"

data/lib/snapshot_ui/web/assets/javascripts/channels/refresh_channel.js

@@ -1,27 +0,0 @@
-import consumer from "channels/consumer"
-import * as Turbo from "@hotwired/turbo"
-
-consumer.subscriptions.create("RefreshChannel", {
-  connected() {
-    console.log("Connected. Waiting for snapshots updates...")
-
-    const connected_event = new CustomEvent("refresh-connected");
-    window.dispatchEvent(connected_event);
-  },
-
-  disconnected() {
-    console.log("Unsubscribed from snapshots updates. Trying to reconnect...")
-
-    const disconnected_event = new CustomEvent("refresh-disconnected");
-    window.dispatchEvent(disconnected_event);
-  },
-
-  received(_data) {
-    console.log("Snapshots updated.")
-    Turbo.visit(location, { action: "replace" })
-
-    if (document.querySelector("iframe#raw")) {
-      document.querySelector("iframe#raw").contentWindow.location.reload()
-    }
-  }
-});