snapshot_ui 0.4.0 → 0.5.0

data/lib/snapshot_ui/web/application.rb

@@ -1,59 +1,90 @@
 # frozen_string_literal: true
 
 require "erb"
-require "rack/static"
 require_relative "../snapshot"
-require "listen"
 
 module SnapshotUI
   class Web
     class Application
       def call(env)
         @request = Rack::Request.new(env)
+        # Read the version before anything else, so that a publish happening while
+        # the page renders is noticed by the next poll instead of being missed.
+        @version = Snapshot.version
 
         if parse_root_path(@request.path_info)
           @grouped_by_test_class = SnapshotUI::Snapshot.grouped_by_test_case
-          if @request.get_header("HTTP_ACCEPT") != "text/event-stream"
-            render("snapshots/index", status: 200)
-          else
-            [200, {"content-type" => "text/event-stream", "cache-control" => "no-cache", "connection" => "keep-alive"}, file_event_stream(SnapshotUI.configuration.storage_directory)]
-          end
+          render("snapshots/index", status: 200)
+        elsif parse_version_path(@request.path_info)
+          render_version
         elsif (slug = parse_raw_snapshot_path(@request.path_info))
           @snapshot = Snapshot.find(slug)
-          render_raw_response_body(@snapshot.body)
+          render_raw(@snapshot)
         elsif (slug = parse_snapshot_path(@request.path_info))
           @snapshot = Snapshot.find(slug)
-          render("snapshots/show", status: 200)
+          render_show(@snapshot)
         else
-          render("snapshots/not_found", status: 200)
+          render("snapshots/not_found", status: 404)
         end
       rescue SnapshotUI::Snapshot::NotFound
-        render("snapshots/not_found", status: 200)
+        render("snapshots/not_found", status: 404)
+      end
+
+      # Exposed for registered renderers (see SnapshotUI::Web.register_renderer).
+      attr_reader :request, :version
+
+      # Wraps already-rendered page HTML (a <body>…) in the shared layout and
+      # returns a Rack response triple. Registered renderers use this so their
+      # pages get the same chrome and live-refresh behaviour as the built-in
+      # ones. The layout calls +refresh_controller+, so pass the view (self) as
+      # the layout's binding context.
+      def render_body_in_layout(body_html, status: 200)
+        response_body = ERB.new(read_template("layout")).result(get_binding { body_html })
+        [status, {"content-type" => "text/html; charset=utf-8"}, [response_body]]
       end
 
       private
 
-      def file_event_stream(directory)
-        message = '<turbo-stream action="refresh"></turbo-stream>'
+      # Polled by the browser (assets/javascripts/controllers/refresh_controller.js)
+      # to find out when the published snapshots change. Answers 304 Not Modified while the
+      # client's version is still current.
+      def render_version
+        etag = %("#{@version}")
+        headers = {"etag" => etag, "cache-control" => "no-cache"}
 
-        Enumerator.new do |stream|
-          listener = Listen.to(directory) do |_modified, _added, _removed|
-            stream << "data: #{message}\n\n"
-          end
+        if @request.get_header("HTTP_IF_NONE_MATCH") == etag
+          [304, headers, []]
+        else
+          [200, headers.merge("content-type" => "text/plain; charset=utf-8"), [@version]]
+        end
+      end
 
-          listener.start
-          sleep
-        rescue Puma::ConnectionError
-          listener.stop
-          puts "Puma::ConnectionError"
-        rescue Errno::EPIPE
-          listener.stop
-          puts "Errno::EPIPE"
+      # The snapshot's page. Responses show the raw body in an iframe; other
+      # types delegate to their registered renderer's #show.
+      def render_show(snapshot)
+        if snapshot.response?
+          render("snapshots/show", status: 200)
+        else
+          status, headers, body = renderer_for(snapshot).show(snapshot, self)
+          [status, headers, body]
         end
       end
 
-      def render_raw_response_body(response_body)
-        [200, {"content-type" => "text/html; charset=utf-8"}, [response_body]]
+      # The raw endpoint. Responses serve the stored body as HTML; other types
+      # delegate to their registered renderer's #raw (which may honour params
+      # such as which email part to serve).
+      def render_raw(snapshot)
+        if snapshot.response?
+          [200, {"content-type" => "text/html; charset=utf-8"}, [snapshot.body]]
+        else
+          status, headers, body = renderer_for(snapshot).raw(snapshot, self)
+          [status, headers, body]
+        end
+      end
+
+      def renderer_for(snapshot)
+        SnapshotUI::Web.renderer(snapshot.type) ||
+          raise(SnapshotUI::Snapshot::NotFound, "No renderer registered for snapshot type `#{snapshot.type}`.")
       end
 
       def render(template, status:)
@@ -64,7 +95,7 @@ module SnapshotUI
         [status, response_headers, [response_body]]
       end
 
-      def get_binding
+      def get_binding(&_block)
         binding
       end
 
@@ -80,24 +111,33 @@ module SnapshotUI
         @request.env["SCRIPT_NAME"]
       end
 
+      def version_path
+        [root_path, "version"].join("/")
+      end
+
       def stylesheet_path(stylesheet)
-        [root_path, "stylesheets", stylesheet].join("/")
+        asset_path("stylesheets", stylesheet)
       end
 
-      def javascript_path(stylesheet)
-        [root_path, "javascripts", stylesheet].join("/")
+      def javascript_path(javascript)
+        asset_path("javascripts", javascript)
+      end
+
+      # Versioned, so that browsers don't keep using the assets of a previous release.
+      def asset_path(directory, file)
+        "#{[root_path, directory, file].join("/")}?v=#{SnapshotUI::VERSION}"
       end
 
       def snapshot_path(slug)
-        [root_path, "response", slug].join("/")
+        [root_path, slug].join("/")
       end
 
       def raw_snapshot_path(slug)
-        [root_path, "response", "raw", slug].join("/")
+        [root_path, "raw", slug].join("/")
       end
 
       def parse_snapshot_path(path)
-        pattern = %r{^/response/(?<slug>.+)$}
+        pattern = %r{^/(?<slug>.+)$}
 
         if (match = pattern.match(path))
           match[:slug]
@@ -105,7 +145,7 @@ module SnapshotUI
       end
 
       def parse_raw_snapshot_path(path)
-        pattern = %r{^/response/raw/(?<slug>.+)$}
+        pattern = %r{^/raw/(?<slug>.+)$}
 
         if (match = pattern.match(path))
           match[:slug]
@@ -116,15 +156,33 @@ module SnapshotUI
         path == "" || path == "/"
       end
 
+      def parse_version_path(path)
+        path == "/version"
+      end
+
+      # Wires <body> up to the Stimulus controller that keeps the page in sync with
+      # the published snapshots (assets/javascripts/controllers/refresh_controller.js).
       def refresh_controller
-        'data-controller="refresh" data-action="refresh-connected@window->refresh#connected refresh-disconnected@window->refresh#disconnected turbo:before-render@window->refresh#display_status"'
+        %(data-controller="refresh" data-refresh-url-value="#{version_path}" data-refresh-version-value="#{@version}" ) +
+          %(data-action="turbo:render@window->refresh#displayStatus visibilitychange@document->refresh#check")
       end
 
       def snapshot_title(snapshot)
-        title = snapshot.context.name.sub("test_", "").gsub(/^\d{4}\s*/, "").tr("_", " ")
+        snapshot.context.metadata[:title] || generic_snapshot_title(snapshot.context)
+      end
+
+      # A small label shown next to non-response snapshots in the list (e.g. mail).
+      def snapshot_type_badge(snapshot)
+        return "" if snapshot.response?
+
+        %(<span class="type_badge type_badge_#{snapshot.type}">#{snapshot.type}</span>)
+      end
+
+      def generic_snapshot_title(context)
+        title = context.name.sub("test_", "").gsub(/^\d{4}\s*/, "").tr("_", " ")
         suffix =
-          if snapshot.context.take_snapshot_index > 0
-            " (##{snapshot.context.take_snapshot_index + 1} in the same test)"
+          if context.take_snapshot_index > 0
+            " (##{context.take_snapshot_index + 1} in the same test)"
           end
 
         "#{title}#{suffix}"
@@ -146,6 +204,9 @@ module SnapshotUI
           </svg>
         HTML
       end
+
+      # URL helpers registered renderers rely on (defined above under private).
+      public :root_path, :snapshot_path, :raw_snapshot_path
     end
   end
 end

data/lib/snapshot_ui/web/assets/javascripts/application.js

@@ -1,6 +1,8 @@
-import { Application } from "@hotwired/stimulus"
+// Turbo and Stimulus are bundled with the gem (see vendor/), so the UI works
+// without internet access. Their versions are noted in the headers of the
+// vendored files.
 import "@hotwired/turbo"
-import "channels"
+import { Application } from "@hotwired/stimulus"
 
 import RefreshController from "controllers/refresh_controller"
 import SourceLocationController from "controllers/source_location_controller"

data/lib/snapshot_ui/web/assets/javascripts/controllers/refresh_controller.js

@@ -1,25 +1,89 @@
 import { Controller } from "@hotwired/stimulus"
+import * as Turbo from "@hotwired/turbo"
 
+// Keeps the page in sync with the published snapshots.
+//
+// Every page is rendered with the version of the published snapshots it shows
+// (`data-refresh-version-value` on <body>). This controller polls the version
+// endpoint and, as soon as the version changes, refreshes the page through
+// Turbo, which morphs the new content in and preserves the scroll position.
+// The tab title shows whether polling is working.
 export default class extends Controller {
+  static values = {
+    url: String,
+    version: String,
+    interval: { type: Number, default: 1000 }
+  }
+
   connect() {
-    this.display_status()
+    this.online = false
+    this.displayStatus()
+    this.timer = setInterval(() => this.check(), this.intervalValue)
+    this.check()
   }
 
-  connected(_event) {
-    window.refresh_status = "connected"
-    this.display_status()
+  disconnect() {
+    clearInterval(this.timer)
   }
 
-  disconnected(_event) {
-    window.refresh_status = undefined
-    this.display_status()
+  // Called by Stimulus once the refreshed page, carrying the new version, has
+  // been rendered. Polling then continues with that version.
+  versionValueChanged() {
+    this.refreshing = false
   }
 
-  display_status() {
-    if (window.refresh_status === "connected") {
-      document.title = "Snapshot UI - ✅ Connected"
-    } else {
-      document.title = "Snapshot UI - ⏳ Reconnecting..."
+  // Polling pauses while the tab is hidden, so catch up as soon as it is visible
+  // again (wired to `visibilitychange`).
+  async check() {
+    if (this.checking || this.refreshing || document.hidden || this.previewing) return
+    this.checking = true
+
+    try {
+      const response = await fetch(this.urlValue, {
+        cache: "no-store",
+        headers: { "If-None-Match": `"${this.versionValue}"` }
+      })
+
+      if (response.status === 304) {
+        this.setOnline(true)
+      } else if (response.ok) {
+        this.setOnline(true)
+        if ((await response.text()) !== this.versionValue) this.refresh()
+      } else {
+        this.setOnline(false)
+      }
+    } catch (_error) {
+      this.setOnline(false)
+    } finally {
+      this.checking = false
     }
   }
+
+  refresh() {
+    this.refreshing = true
+    // Should the refresh not go through (e.g. the app went away half-way), resume polling after a while.
+    setTimeout(() => { this.refreshing = false }, 10 * this.intervalValue)
+
+    Turbo.visit(location.href, { action: "replace" })
+    // Morphing keeps the iframe as it is, so reload the snapshot it shows explicitly.
+    document.querySelector("iframe#raw")?.contentWindow.location.reload()
+  }
+
+  setOnline(online) {
+    if (this.online === online) return
+
+    this.online = online
+    this.displayStatus()
+  }
+
+  // Turbo resets the title whenever it renders a page, so this also runs on `turbo:render`.
+  displayStatus() {
+    const title = document.title.replace(/ - (✅|⏳).*$/, "")
+    document.title = `${title} - ${this.online ? "✅ Connected" : "⏳ Reconnecting..."}`
+  }
+
+  // Turbo may show a cached copy of a page while loading it; leave that alone.
+  get previewing() {
+    return document.documentElement.hasAttribute("data-turbo-preview")
+  }
 }

data/lib/snapshot_ui/web/assets/javascripts/controllers/source_location_controller.js

@@ -4,14 +4,22 @@ export default class extends Controller {
   copy(event) {
     event.preventDefault()
 
-    let currentTarget = event.currentTarget
+    if (window.isSecureContext) {
+      let currentTarget = event.currentTarget
 
-    navigator.clipboard.writeText(currentTarget.dataset.sourceLocation)
+      navigator.clipboard.writeText(currentTarget.dataset.sourceLocation)
 
-    currentTarget.classList.toggle('animate');
-    setTimeout(()=> {
-      currentTarget.classList.toggle('animate')
-    },300)
+      currentTarget.classList.toggle('animate');
+      setTimeout(()=> {
+        currentTarget.classList.toggle('animate')
+      },300)
+    } else {
+      let message =
+        `Copying to the clipboard isn't possible in an insecure browser context.\n\n` +
+        `You are accessing this page from a hostname ${window.location.hostname} which is considered insecure.\n\n` +
+        `Changing the hostname will most likely resolve the issue.`
 
+      alert(message)
+    }
   }
 }