trmnl_preview 0.18.1 → 0.20.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 32924757751f8d15ad7979409c03f18906506af03558a90d27bfd122f0a44d0c
-  data.tar.gz: 5cba7d9f2cbd67868316826218a1237efafafdc0f9967b3670ef538859c11f56
+  metadata.gz: 4db6e3e57f6772dd1af033e4ccb533ee516344b66d859b63185d23129a724ef5
+  data.tar.gz: 8415b8724cf0535880ab4c4e0a6ca42771363f7adae620fcca0bd290468a0d0c
 SHA512:
-  metadata.gz: b9b8692c362797cd9df4ee23cf7a081051ec9f6ea18b28c721426fc58860231a5b02541c0a6823a8a940a33eb1a9e81f8fdcba9f3d43ad43f6871a880706fb58
-  data.tar.gz: 1351106bc604919f20f0067a558eab0da46c1f08bf1cf7fd3ccce69db42dcac81136499d295629cfc64777b3f40586332701c312707b22348f56927611232fe0
+  metadata.gz: b440d6525409a971f262d09d7914d7be562dfadf617d1463c03b92519e848bd29b20e9e53fb30e7a1cf964919723e7e3e64364b573609ab7fbc2d215acdd97af
+  data.tar.gz: 96ce3caffe6bd63267aad0f6f9aa53a4471ddd6f308447e31040aed8968e77d3a4d82048ff44c4b80ccfbf4678284099f846c4d68f821effebd8bc53454637e2

data/CHANGELOG.md

@@ -1,6 +1,32 @@
 
 # Changelog
 
+## 0.20.0
+
+- `trmnlp lint` skips the rules listed under `ignored_lint_rules` in `.trmnlp.yml`, in text and JSON output alike. An unknown rule ID is an error that lists the known ones.
+- `trmnlp lint`, `build` and `serve` accept the `hidden` field type, which TRMNL renders as a hidden input. They warned "unknown field_type: hidden".
+- The README lists `trmnlp test` under Commands, and the guide to testing plugins moved to `docs/testing.md`, with how to share setup through `tests/spec_helper.rb`.
+- `trmnlp test`: `have_qr_code` on an element wholly off the left or top of the screen finds no code. It scanned part of the screen instead, because ImageMagick reads a crop 0 pixels wide as the whole width.
+- `it_behaves_like 'a publishable recipe'` no longer checks overflow. `have_no_overflow` flags text cut short on purpose (`text-overflow: ellipsis`, `-webkit-line-clamp`) on most list and calendar recipes, so authors filtered it out; the matcher stays for examples that call it.
+- `have_no_overflow` passes text cut short on purpose (`text-overflow: ellipsis`, `-webkit-line-clamp`) and text whose font is taller than its line, when only the empty space below it is cut. It reports a box only when a child box or a glyph's ink crosses its edge, so cut descenders still fail, and it now reports a scrolling box (`overflow: auto` or `scroll`) whose content is cut.
+- `have_no_problems` ignores Firefox's "ResizeObserver loop completed with undelivered notifications", which it raises when a ResizeObserver resizes what it observes, as FullCalendar does. Browsers report it as a page error, but nothing is broken.
+- `it_behaves_like 'a publishable recipe'` also uses the group's `variables` (for Plugin Merge recipes) and `now` when the group defines them. It passed only `mocks` and `custom_fields`, so such a recipe was drawn without its variables and on the real clock.
+- `trmnlp test`: under `now:`, the page's clock starts at `now:` when the page runs. It started seconds late, by however long Firefox took to load the page. `Date()` without `new` no longer throws, and `Intl.DateTimeFormat#format` and `#formatToParts` given no date use `now:`.
+- `trmnlp test --report` writes a report per process under parallel_tests (`report`, `report2`, ...) instead of each process overwriting the last. The README shows how to run a plugin's tests in parallel.
+- `serve`, `build` and `test` skip resizing the page when it is already the size asked for, and check a resize every 0.01 s instead of 0.1 s. About 0.04 s faster a render.
+- The bundled list of Framework versions goes up to 3.4.0, so offline, `trmnlp build` and `serve` no longer warn that a plugin pinned to 3.3.0 or later is not a published version. A release refreshes the list before it builds the gem.
+- The `qr_code` filter draws a white border four modules wide inside the code's box, so it scans in dark mode and on a dark page. The box keeps its size and the modules shrink to make room.
+- `trmnlp test`: `data:` reaches a static plugin. It was ignored there, so the test rendered the `static_data` in `settings.yml`.
+- `trmnlp test` takes a screen's PNG only when a test asks for it (`match_snapshot`, `fit_image_size_limit`, `png_path`, `--report`). A test that only reads the page no longer waits for the screenshot and its quantizing, about 0.15 seconds a render. The picture is of the page when it is first asked for, so a page changed with `evaluate` before `match_snapshot` is drawn changed.
+- `trmnlp test` opens each page from a local address instead of writing it into `about:blank` with its stylesheets inlined, so Firefox parses the Framework's 15 MB stylesheet once for the run: 10 renders take 5.5 seconds where they took 10.1, and trmnlp's own suite 89 seconds where it took 114. The page still gets no storage, cookies or `Referer`, as on TRMNL. Its `location` and the `Origin` of its cross-origin requests are `http://127.0.0.1:<port>`, and a relative URL is not found. (#193)
+- Every screenshot is 0.1 to 0.2 s faster, in `test`, `build` and `serve`. Stopping the page's timers before the capture cleared 100,000 timer ids one by one; it now clears only the ids the page has used.
+- A font file that never arrives no longer hangs a render until WebDriver's 30 second limit (`Selenium::WebDriver::Error::ScriptTimeoutError: Timed out after 30000 ms`), in `test`, `build` and `serve`. The page is given 10 seconds for its fonts, loaded once more, and then fails with the names of the fonts still loading.
+- `have_qr_code` checks that a QR code scans in a screen's PNG, and with a String or Regexp what it reads; `within:` scans one element and `screen.qr_codes` lists every text. It uses zbar, which the Docker image now includes.
+
+## 0.19.0
+
+- `it_behaves_like 'a publishable recipe'` also checks every screen for leaked values (`undefined`, `NaN`, `null`, `[object Object]`, `Liquid error`, raw `{{` or `{%`), draws the full view when the API answers with nothing, answers 500 or cannot be reached, and draws it with each option of every select field. New matchers: `have_no_leaked_text` and `have_no_transform_error`. (#181)
+
 ## 0.18.1
 
 - Pages narrower than a Firefox window render, such as a 480x800 TRMNL OG in portrait, in `serve`, `build` and `test`. trmnlp sets the page's viewport with WebDriver BiDi, as TRMNL does, instead of resizing the window, which Firefox will not size under about 500px. (#178)

data/README.md

@@ -90,6 +90,7 @@ trmnlp push                    # upload
 | `trmnlp serve` | Start a local dev server |
 | `trmnlp build` | Generate static HTML files, or PNGs with `--png` |
 | `trmnlp lint` | Check plugin code against TRMNL best practices |
+| `trmnlp test` | Run the plugin's tests in `tests/` |
 | `trmnlp login` | Authenticate with TRMNL server |
 | `trmnlp list` | List private plugins from TRMNL server |
 | `trmnlp clone NAME ID` | Copy a plugin project from TRMNL server |
@@ -123,6 +124,10 @@ Filters from `custom_filters` in `.trmnlp.yml` exist only in trmnlp. TRMNL does
 and outputs the value unfiltered, so `no_custom_filters` reports each place the markup uses one.
 Filters that trmnl-liquid also provides are not reported.
 
+To accept a rule's findings, list its rule ID under `ignored_lint_rules` in `.trmnlp.yml`.
+`trmnlp lint` then skips that check in both formats, so the CLI and CI agree. An unknown
+rule ID is an error that lists the known ones, so a typo does not pass quietly.
+
 ## Building Static Files
 
 `trmnlp build` renders every view to a static file under `_build/` — handy for exporting a snapshot or feeding the output into another pipeline. Run it from inside a plugin project:
@@ -338,6 +343,10 @@ variables:
     plugin_settings:
       instance_name: Kevin Bacon Facts
 
+# rule IDs whose findings `trmnlp lint` drops
+ignored_lint_rules:
+  - no_opacity
+
 # plugin_merge strategy: the plugins this one reads, as "<keyname>_<id>" on TRMNL,
 # each mapped to the trmnlp project whose last fetched data stands in for it
 merged_plugins:
@@ -473,40 +482,7 @@ See [TRMNL documentation](https://help.trmnl.com/en/articles/10542599-importing-
 
 ## Testing Plugins
 
-`trmnlp init` starts a plugin with `tests/plugin_spec.rb` (`it_behaves_like 'a publishable recipe'`, below) and a GitHub workflow that runs it in the `trmnl/trmnlp` image, uploads the report, can rewrite the snapshots on a manual run, and pushes to TRMNL only once lint and tests pass. `trmnlp test` runs the RSpec files in your plugin's `tests/` folder, through the same pipeline `serve` and `build` use, with fake APIs and a fixed clock:
-
-```ruby
-# tests/weather_spec.rb
-RSpec.describe 'Weather' do
-  let(:mocks) { { 'https://api.weather.example/*' => { json: { temp: 12 } } } }
-
-  %w[og_plus v2].each do |device|
-    it "shows the temperature on #{device}" do
-      screen = trmnl.render(device:, now: '2030-01-02T08:00:00Z', custom_fields: { city: 'Amsterdam' }, mocks:)
-
-      expect(screen).to have_text('12°')
-      expect(screen).to have_no_overflow
-      expect(screen.box('.title').bottom).to be <= screen.box('.content').top
-      expect(screen).to match_snapshot
-    end
-  end
-
-  it 'keeps its state when the API has nothing new' do
-    run = trmnl.transform(state: { etag: 'abc' }, mocks: { 'https://api.weather.example/*' => { status: 304 } })
-
-    expect(run.state).to eq('etag' => 'abc')
-  end
-end
-```
-
-- `trmnl.transform(...)` runs the transform and answers `data`, `state`, `requests`, `log`, `error`, `duration_ms` and `max_memory_mb`; `expect(run).to stay_within_serverless_limits` checks TRMNL's 5 seconds and 128 MB. `trmnl.render(view: 'full', ...)` renders a view in Firefox and answers a screen: Capybara's matchers (`have_text`, `have_css`, `within`...) see what is drawn, and `box(selector)`, `evaluate(js)`, `overflowing` and `problems` (script errors, unhandled rejections, `console.error` and files that failed to load; `have_no_problems`) ask the live page; `fresh_browser: true` renders in a new Firefox with nothing cached; `screen.result` holds the run's `data`, `state` and `requests`. `trmnl.plugin(dir)` tests the plugin in another folder, such as a built copy.
-- Inputs, all optional: `device:` (a TRMNL model name, or `{ width:, height:, bit_depth: }`), `palette:`, `orientation: :portrait`, `dark_mode:`, `theme:`, `now:`, `custom_fields:`, `variables:`, `state:`, `previous_merge_variables:`, `data:` (skips polling), `transform: false`. A test's `custom_fields` and `variables` replace those in `.trmnlp.yml`, so development values there never reach a test; the field defaults in `settings.yml` still apply, as on TRMNL.
-- A board drawn by its own script takes `head:` (markup added to the page's `<head>`) and `wait_for:` (a JavaScript expression the page must reach before it is captured, within `wait_for_timeout:` seconds); without it, the capture freezes timers once TRMNL's readiness flags are set.
-- `mocks:` answer every request the run makes: polling urls, and the transform's own requests in any language, HTTPS included. Keys are urls, with `*` wildcards, a Regexp, or a method first (`'POST https://...'`). Values are `{ json:, body:, status:, headers:, delay:, body_delay:, advance_clock:, error: :reset }` (times in seconds: `body_delay:` sends the headers first and the body later, `advance_clock:` moves the transform's clock on when it answers), a string body, a lambda that takes the request, or an array of answers used in order. An unmocked request gets a 599. `requests` lists every request with its `status`, and `aborted: true` for one the transform gave up on before its answer arrived; `duration_ms` is how long the transform ran.
-- `now:` starts every clock: Liquid's, the markup's scripts', and the transform's, through libfaketime (`brew install libfaketime` or `apt-get install libfaketime`; already in the Docker image). On macOS the interpreter must come from brew, mise or similar, since macOS will not hand libfaketime to its own `/usr/bin` binaries.
-- `trmnlp test --report report` also writes `report/index.html` and `report/report.json`: every example with each screen it rendered (with a switch that outlines every drawn box, and the page's problems) and each transform it ran (time, memory, requests). Under GitHub Actions the counts and failures go to the run's summary too.
-- `it_behaves_like 'a publishable recipe'` is what a recipe should hold before it is published: every view draws without overflow or page errors on the TRMNL OG (1-bit, and 2-bit in landscape and portrait) and the TRMNL X (landscape and portrait), and the transform runs without error within TRMNL's limits. It uses the group's `mocks` and `custom_fields` when the group defines them; `screens: [{ device: 'kobo_libra_2' }, ...]` draws on other devices.
-- `match_snapshot` stores a missing snapshot under `tests/snapshots/<os>/` and fails one on CI; `trmnlp test --update` rewrites them. Fonts render differently per operating system, so run tests in the Docker image when CI should share your snapshots. `fit_image_size_limit` checks the PNG against the model's limit.
+`trmnlp test` runs the RSpec files in your plugin's `tests/` folder through the same pipeline `serve` and `build` use, with fake APIs and a fixed clock. `trmnlp init` starts a plugin with a test and a GitHub workflow that runs it. See [Testing Plugins](https://github.com/usetrmnl/trmnlp/blob/main/docs/testing.md) for the API, the matchers, snapshots and running tests in parallel.
 
 ## Development
 

data/db/data/form_fields.yml

@@ -19,6 +19,7 @@ field_types:
   - copyable_webhook_url
   - date
   - google_photos_picker
+  - hidden
   - json
   - lat_lon
   - modal_trigger

data/db/data/framework_versions.yml

@@ -1,6 +1,6 @@
 # Mirrored from the TRMNL design-system source.
 # Refresh with `rake framework:sync` — do not edit manually.
-latest: 3.2.0
+latest: 3.4.0
 versions:
 - number: 0.0.1
   released_at: '2024-06-22'
@@ -86,3 +86,11 @@ versions:
   released_at: '2026-07-23'
 - number: 3.2.0
   released_at: '2026-08-05'
+- number: 3.3.0
+  released_at: '2026-08-27'
+- number: 3.3.1
+  released_at: '2026-09-01'
+- number: 3.3.2
+  released_at: '2026-09-18'
+- number: 3.4.0
+  released_at: '2026-09-28'

data/lib/trmnlp/commands/lint.rb

@@ -24,12 +24,23 @@ module TRMNLP
       private
 
       def issues
-        @issues ||= TRMNLP::Lint::CHECKS.flat_map do |type|
+        @issues ||= checks.flat_map do |type|
           check = type.new(source)
           check.issues.map { |finding| TRMNLP::Lint::Diagnostic.new(check, source, finding).to_h }
         end.uniq
       end
 
+      def checks
+        checks_by_rule_id = TRMNLP::Lint::CHECKS.to_h { |type| [TRMNLP::Lint.rule_id(type), type] }
+        unknown_rule_ids = config.project.ignored_lint_rules - checks_by_rule_id.keys
+        unless unknown_rule_ids.empty?
+          raise InvalidConfig, ".trmnlp.yml ignored_lint_rules has unknown rule IDs: #{unknown_rule_ids.join(', ')}. " \
+                               "Known rule IDs: #{checks_by_rule_id.keys.join(', ')}"
+        end
+
+        checks_by_rule_id.except(*config.project.ignored_lint_rules).values
+      end
+
       def source
         @source ||= TRMNLP::Lint::Source.new(config:, paths:)
       end

data/lib/trmnlp/config/project.rb

@@ -54,6 +54,8 @@ module TRMNLP
 
       def time_zone = @config['time_zone'] || 'UTC'
 
+      def ignored_lint_rules = Array(@config['ignored_lint_rules'])
+
       # Local override for the framework asset host (offline / mirrored
       # dev). Trmnlp-specific (local dev only) — so it stays in
       # .trmnlp.yml. Consumed by Config::Plugin#framework_version.

data/lib/trmnlp/context.rb

@@ -18,12 +18,13 @@ module TRMNLP
     # The keywords after reporter let `trmnlp test` run the real pipeline with a test's inputs.
     # rubocop:disable-next Metrics/ParameterLists -- the composition root takes what it wires
     def initialize(root_dir, reporter: Reporter.new, cache_dir: nil, project_overrides: {}, outbound_request: nil,
-                   transform_client: nil)
+                   transform_client: nil, source_data: nil)
       @paths = Paths.new(root_dir, cache_dir:)
       @config = Config.new(paths, project_overrides:)
       @reporter = reporter
       @outbound_request = outbound_request
       @transform_client = transform_client
+      @source_data = source_data
     end
 
     # Context is the composition root: it wires and memoizes the runtime
@@ -51,7 +52,8 @@ module TRMNLP
     end
 
     def user_data_assembler
-      @user_data_assembler ||= UserDataAssembler.new(config:, paths:, transform_pipeline:, oauth_session:)
+      @user_data_assembler ||= UserDataAssembler.new(config:, paths:, transform_pipeline:, oauth_session:,
+                                                     source_data: @source_data)
     end
 
     def renderer = @renderer ||= Renderer.new(config:, paths:, user_data_assembler:)

data/lib/trmnlp/firefox_driver.rb

@@ -18,6 +18,9 @@ module TRMNLP
       Selenium::WebDriver::Firefox::Options.new(web_socket_url: true).tap do |opts|
         opts.add_argument('--headless')
         opts.add_argument('--disable-web-security')
+        # A page trmnlp test serves from 127.0.0.1 gets no storage, cookies or Referer, as on TRMNL's about:blank.
+        opts.add_preference('network.cookie.cookieBehavior', 2)
+        opts.add_preference('network.http.sendRefererHeader', 0)
       end
     end
   end

data/lib/trmnlp/lint/diagnostic.rb

@@ -33,9 +33,7 @@ module TRMNLP
 
       attr_reader :check, :source, :finding
 
-      def rule_id
-        check.class.name.split('::').last.gsub(/([a-z\d])([A-Z])/, '\1_\2').downcase
-      end
+      def rule_id = Lint.rule_id(check.class)
 
       def locations
         return source.yaml_location('src/settings.yml', SETTINGS_KEYS[rule_id]) if SETTINGS_KEYS.key?(rule_id)

data/lib/trmnlp/lint.rb

@@ -43,5 +43,7 @@ module TRMNLP
       Checks::FormFieldsValid,
       Checks::NoCustomFilters
     ].freeze
+
+    def self.rule_id(check_type) = check_type.name.split('::').last.gsub(/([a-z\d])([A-Z])/, '\1_\2').downcase
   end
 end

data/lib/trmnlp/qr_code.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require 'trmnl/liquid'
+
+module TRMNLP
+  # Mirrors core's config/initializers/trmnl_liquid_qr_code.rb: a white quiet zone inside the code's size.
+  module QrCode
+    QUIET_ZONE_MODULES = 4
+
+    def qr_code(data, size = 11, level = '', view = 'responsive')
+      svg = super
+      side_length = svg[/<rect width="(\d+)"/, 1]
+      return svg unless side_length
+
+      border = size * QUIET_ZONE_MODULES
+      box = side_length.to_i + (2 * border)
+      sizing = %(width="#{side_length}" height="#{side_length}")
+      sizing += ' style="max-width:100%;height:auto"' if view == 'responsive'
+      svg.sub(/ (?:viewBox="[^"]*"|width="\d+" height="\d+")/, '')
+         .sub('<svg ', %(<svg #{sizing} viewBox="-#{border} -#{border} #{box} #{box}" ))
+         .sub(%r{<rect [^>]*?(?=/>)}, %(<rect width="#{box}" height="#{box}" x="-#{border}" y="-#{border}" fill="#fff"))
+    end
+  end
+end
+
+TRMNL::Liquid::Filters.prepend(TRMNLP::QrCode)

data/lib/trmnlp/screen_generator.rb

@@ -24,18 +24,20 @@ module TRMNLP
       @requested_color_depth = opts[:color_depth]
     end
 
+    # The page as it is shown: chart libraries swapped for TRMNL's copies.
+    def html = CHART_LIBRARIES.reduce(@input) { |page, (from, to)| page.gsub(from, to) }
+
     def process
-      html = CHART_LIBRARIES.reduce(@input) { |page, (from, to)| page.gsub(from, to) }
       output = @screenshot.call(html:, width:, height:)
       ImageQuantizer.new(depth: color_depth, dither: @input.include?('image-dither')).call(output.path)
       output
     end
 
-    private
-
     def width = @requested_width || 800
     def height = @requested_height || 480
 
+    private
+
     def color_depth
       return @requested_color_depth if @requested_color_depth
       return ::Regexp.last_match(1).to_i if @input&.match(/screen--(\d+)bit/)

data/lib/trmnlp/screenshot.rb

@@ -15,21 +15,29 @@ module TRMNLP
       return document.readyState === 'complete' && window.TRMNL_PLUGINS_READY === true &&
              window.TRMNL_HIGHCHARTS_DONE === true && window.TRMNL_CHILD_DITHER_DONE !== false
     JS
-    # Stops timers and animation callbacks from changing the page mid-capture.
+    # A font file that never arrives would keep the page waiting until WebDriver's own 30 second limit.
+    FONTS_TIMEOUT_SECONDS = 10
+    FONTS_LOADED_SCRIPT = "return !document.fonts || document.fonts.status === 'loaded'"
+    FONTS_LOADING_SCRIPT =
+      "return [...document.fonts].filter((font) => font.status === 'loading').map((font) => font.family)"
+    # Stops timers and animation callbacks from changing the page mid-capture. A window numbers its timeouts
+    # and intervals upward from one counter, so a new timer's id is the highest there is to clear.
     FREEZE_TIMERS = <<~JS
       const noop = () => 0;
+      const newest = window.setTimeout(noop, 0);
       window.setTimeout = window.setInterval = noop;
       window.requestAnimationFrame = noop;
       if (window.requestIdleCallback) window.requestIdleCallback = noop;
-      for (let i = 100000; i >= 0; i--) { window.clearTimeout(i); window.clearInterval(i); }
+      for (let i = typeof newest === 'number' ? newest : 100000; i >= 0; i--) { window.clearTimeout(i); window.clearInterval(i); }
       if (window.ResizeObserver) window.ResizeObserver.prototype.observe = noop;
       if (window.MutationObserver) window.MutationObserver.prototype.observe = noop;
       window.onresize = null;
     JS
 
-    def initialize(pool:, viewport_timeout: 5)
+    def initialize(pool:, viewport_timeout: 5, fonts_timeout: FONTS_TIMEOUT_SECONDS)
       @pool = pool
       @viewport_timeout = viewport_timeout
+      @fonts_timeout = fonts_timeout
     end
 
     def call(html:, width:, height:)
@@ -48,9 +56,10 @@ module TRMNLP
     # Loads html into driver at width x height and waits until TRMNL would capture it, and until wait_for
     # (a JavaScript expression) is true when given: a page still drawing would be stopped by the frozen timers.
     # rubocop:disable-next Metrics/ParameterLists -- the page, its size, and what to wait for
-    def show(driver, html, width, height, wait_for: nil, wait_for_timeout: READINESS_TIMEOUT_SECONDS)
+    # url: an address that serves html, opened in place of writing html into a blank page.
+    def show(driver, html, width, height, wait_for: nil, wait_for_timeout: READINESS_TIMEOUT_SECONDS, url: nil)
       resize(driver, width, height)
-      load_page(driver, html) { wait_for_expression(driver, wait_for, wait_for_timeout) if wait_for }
+      load_page(driver, html, url:) { wait_for_expression(driver, wait_for, wait_for_timeout) if wait_for }
     end
 
     def capture(driver)
@@ -68,6 +77,8 @@ module TRMNLP
     end
 
     def resize(driver, width, height)
+      return if viewport(driver) == [width, height]
+
       set_viewport(driver, width, height)
       wait_for_viewport(driver, width, height)
     end
@@ -82,7 +93,7 @@ module TRMNLP
     # clipped the first screenshot short (800x433 instead of 800x480). Poll the
     # real viewport instead, re-applying the size until it lands.
     def wait_for_viewport(driver, width, height)
-      Selenium::WebDriver::Wait.new(timeout: @viewport_timeout, interval: 0.1).until do
+      Selenium::WebDriver::Wait.new(timeout: @viewport_timeout, interval: 0.01).until do
         next true if viewport(driver) == [width, height]
 
         set_viewport(driver, width, height)
@@ -97,24 +108,41 @@ module TRMNLP
       driver.execute_script('return [window.innerWidth, window.innerHeight]')
     end
 
-    def load_page(driver, html)
-      driver.navigate.to('about:blank')
+    # A font that stalls is usually a dropped connection, so the page is loaded once more before giving up.
+    def load_page(driver, html, url: nil, &)
+      attempts = 0
+      begin
+        open_page(driver, html, url, &)
+      rescue Selenium::WebDriver::Error::TimeoutError
+        retry if (attempts += 1) <= 1
+        loading = driver.execute_script(FONTS_LOADING_SCRIPT).uniq.join(', ')
+        raise RenderError, "The page's fonts did not load within #{@fonts_timeout}s: #{loading}"
+      end
 
-      driver.execute_script(<<~JS, html)
-        document.open();
-        document.write(arguments[0]);
-        document.close();
+      driver.execute_script(<<~JS)
+        document.documentElement.style.overflow = 'hidden';
+        document.body.style.overflow = 'hidden';
       JS
+      driver.execute_script(FREEZE_TIMERS)
+    end
+
+    def open_page(driver, html, url)
+      url ? driver.navigate.to(url) : write_page(driver, html)
 
       wait_until_ready(driver, html)
       yield if block_given?
-      driver.execute_script('return document.fonts && document.fonts.ready')
+      Selenium::WebDriver::Wait.new(timeout: @fonts_timeout, interval: 0.05)
+                               .until { driver.execute_script(FONTS_LOADED_SCRIPT) }
+    end
 
-      driver.execute_script(<<~JS)
-        document.documentElement.style.overflow = 'hidden';
-        document.body.style.overflow = 'hidden';
+    def write_page(driver, html)
+      driver.navigate.to('about:blank')
+
+      driver.execute_script(<<~JS, html)
+        document.open();
+        document.write(arguments[0]);
+        document.close();
       JS
-      driver.execute_script(FREEZE_TIMERS)
     end
 
     def wait_for_expression(driver, expression, timeout)

data/lib/trmnlp/testing/browser.rb

@@ -7,15 +7,15 @@ require_relative '../browser_pool'
 require_relative '../firefox_driver'
 require_relative '../screen_generator'
 require_relative '../screenshot'
-require_relative 'inline_stylesheets'
 
 module TRMNLP
   module Testing
     # The Firefox one example renders in, checked out of the pool on first use and back in by #release.
-    # Pages load the way `trmnlp build --png` loads them, through ScreenGenerator and Screenshot.
+    # Pages are drawn through ScreenGenerator and Screenshot like `trmnlp build --png`'s, but opened from page_server.
     class Browser
-      def initialize(pool:)
+      def initialize(pool:, page_server:)
         @pool = pool
+        @page_server = page_server
         @screenshot = Screenshot.new(pool:)
         @pages = {}.compare_by_identity
         @fresh_browsers = []
@@ -24,21 +24,25 @@ module TRMNLP
       # A Firefox of its own, with nothing cached, closed when this browser is released.
       def fresh
         pool = BrowserPool.new(driver_factory: FirefoxDriver.method(:build), max_size: 1)
-        self.class.new(pool:).tap { @fresh_browsers << [it, pool] }
+        self.class.new(pool:, page_server: @page_server).tap { @fresh_browsers << [it, pool] }
+      end
+
+      # Loads the screen's page; its picture is only taken when a test asks for it.
+      def load(screen)
+        generator = generator(screen)
+        @pages[screen] = [generator.html, generator.width, generator.height, @page_server.add(generator.html)]
+        show(screen)
       end
 
       # The PNG path, quantized to the device's bit depth like a build's.
       def capture(screen)
         @capturing = screen
-        keep(generate(screen))
+        keep(generator(screen).process)
       end
 
-      # ScreenGenerator's screenshot interface: html arrives with chart libraries swapped for TRMNL's copies.
-      def call(html:, width:, height:)
-        @pages[@capturing] = [html, width, height]
-        show(@capturing)
-        @screenshot.capture(driver)
-      end
+      # ScreenGenerator's screenshot interface: the page is already loaded, or loaded again if a later
+      # render replaced it.
+      def call(**) = on(@capturing) { @screenshot.capture(it) }
 
       # Yields the driver with screen's page loaded, reloading it if a later render replaced it.
       def on(screen)
@@ -52,6 +56,8 @@ module TRMNLP
           pool.shutdown
         end
         @fresh_browsers.clear
+        @pages.each_value { @page_server.forget(it.last) }
+        @pages.clear
         @pool.checkin(@driver) if @driver
         @driver = nil
         @showing = nil
@@ -59,19 +65,18 @@ module TRMNLP
 
       private
 
-      def generate(screen)
+      def generator(screen)
         device = screen.device
-        html = InlineStylesheets.call(screen.html)
-        ScreenGenerator.new(html, screenshot: self, width: device.width, height: device.height,
-                                  color_depth: device.bit_depth).process
+        ScreenGenerator.new(screen.html, screenshot: self, width: device.width, height: device.height,
+                                         color_depth: device.bit_depth)
       end
 
       def driver = @driver ||= @pool.checkout
 
       def show(screen)
-        html, width, height = @pages.fetch(screen)
-        @screenshot.show(driver, html, width, height,
-                         wait_for: screen.wait_for, wait_for_timeout: screen.wait_for_timeout)
+        html, width, height, url = @pages.fetch(screen)
+        waits = { wait_for: screen.wait_for, wait_for_timeout: screen.wait_for_timeout }
+        @screenshot.show(driver, html, width, height, url:, **waits)
         @showing = screen
       end
 

data/lib/trmnlp/testing/page_server.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+require 'securerandom'
+require 'socket'
+
+module TRMNLP
+  module Testing
+    # Serves each page `trmnlp test` renders from one local address, so Firefox opens it as a page of its own.
+    # Written into about:blank, as TRMNL writes its page, every page has its stylesheets parsed again, 1.5 seconds
+    # for the Framework's; pages that share an address share the parsed copy, and a page's scripts wait for its
+    # stylesheets as on any site.
+    class PageServer
+      def initialize
+        @pages = {}
+        @lock = Mutex.new
+      end
+
+      def start
+        @server = TCPServer.new('127.0.0.1', 0)
+        @thread = Thread.new { loop { Thread.new(@server.accept) { serve(it) } } }
+        self
+      end
+
+      def stop
+        @thread&.kill
+        @server&.close
+      end
+
+      # The address html is served at until #forget.
+      def add(html)
+        id = SecureRandom.hex(8)
+        @lock.synchronize { @pages[id] = html }
+        "http://127.0.0.1:#{@server.addr[1]}/pages/#{id}"
+      end
+
+      def forget(url) = @lock.synchronize { @pages.delete(url.to_s.split('/').last) }
+
+      private
+
+      def serve(socket)
+        path = socket.gets.to_s.split[1].to_s
+        nil while (line = socket.gets) && !line.strip.empty?
+        html = @lock.synchronize { @pages[path[%r{\A/pages/(\h+)\z}, 1]] }
+        socket.write(html ? response('200 OK', html) : response('404 Not Found', ''))
+      rescue IOError, SystemCallError
+        nil
+      ensure
+        socket.close unless socket.closed?
+      end
+
+      def response(status, body)
+        "HTTP/1.1 #{status}\r\ncontent-type: text/html; charset=utf-8\r\ncache-control: no-store\r\n" \
+          "content-length: #{body.bytesize}\r\nconnection: close\r\n\r\n#{body}"
+      end
+    end
+  end
+end

data/lib/trmnlp/testing/plugin.rb

@@ -18,6 +18,7 @@ module TRMNLP
         (() => {
           const problems = window.__trmnlpProblems = [];
           window.addEventListener('error', (event) => {
+            if (String(event.message).startsWith('ResizeObserver loop')) return;
             const source = event.target && event.target !== window && (event.target.src || event.target.href);
             problems.push(source ? `failed to load ${source}` :
               `${event.message}${event.filename ? ` (${event.filename}:${event.lineno})` : ''}`);
@@ -28,10 +29,25 @@ module TRMNLP
           console.error = (...parts) => { problems.push(`console.error: ${parts.join(' ')}`); consoleError(...parts); };
         })();
       JS
-      PAGE_CLOCK_SCRIPT = '(() => { const offset = %d; const RealDate = Date; ' \
-                          'class TestDate extends RealDate { constructor(...args) { args.length ? super(...args) : ' \
-                          'super(RealDate.now() + offset); } static now() { return RealDate.now() + offset; } } ' \
-                          'window.Date = TestDate; })();'
+      # Takes its offset when the page runs, so the time Firefox takes to load the page does not put it behind now:.
+      PAGE_CLOCK_SCRIPT = <<~JS.gsub(/\s+/, ' ').strip
+        (() => {
+          const RealDate = Date;
+          const offset = %d - RealDate.now();
+          class TestDate extends RealDate {
+            constructor(...args) { args.length ? super(...args) : super(RealDate.now() + offset); }
+            static now() { return RealDate.now() + offset; }
+          }
+          window.Date = new Proxy(TestDate, { apply: () => new TestDate().toString() });
+          const prototype = Intl.DateTimeFormat.prototype;
+          const format = Object.getOwnPropertyDescriptor(prototype, 'format').get;
+          const formatToParts = prototype.formatToParts;
+          Object.defineProperty(prototype, 'format', {
+            get() { const bound = format.call(this); return (date = TestDate.now()) => bound(date); }
+          });
+          prototype.formatToParts = function (date = TestDate.now()) { return formatToParts.call(this, date); };
+        })();
+      JS
 
       def initialize(dir, browser:, authority:)
         @dir = dir
@@ -83,8 +99,8 @@ module TRMNLP
       def with_page_clock(html, now)
         return html unless now
 
-        offset = ((time(now).to_f - Time.now.to_f) * 1000).round
-        html.sub(/<head>/i) { "<head><script>#{format(PAGE_CLOCK_SCRIPT, offset)}</script>" }
+        milliseconds = (time(now).to_f * 1000).round
+        html.sub(/<head>/i) { "<head><script>#{format(PAGE_CLOCK_SCRIPT, milliseconds)}</script>" }
       end
     end
   end

data/lib/trmnlp/testing/publishable_recipe.rb

@@ -1,5 +1,9 @@
 # frozen_string_literal: true
 
+require 'yaml'
+
+require_relative '../select_field_choices'
+
 module TRMNLP
   module Testing
     # The screens a recipe is drawn on: TRMNL's own devices, in landscape and portrait.
@@ -8,20 +12,56 @@ module TRMNLP
       { device: 'v2' }, { device: 'v2', orientation: :portrait }
     ].freeze
     PUBLISHABLE_RECIPE_VIEWS = %w[full half_horizontal half_vertical quadrant].freeze
+    PUBLISHABLE_RECIPE_API_FAILURES = {
+      'answers with nothing' => { json: {} }, 'answers 500' => { status: 500, body: '' },
+      'cannot be reached' => { error: :reset }
+    }.freeze
+    # A field with more options than this is drawn with its first and last.
+    PUBLISHABLE_RECIPE_MAX_OPTIONS = 20
+
+    # Each select field's keyname and the values its options save, from the plugin's settings.yml.
+    def self.select_field_values
+      path = File.join(plugin_dir, 'src', 'settings.yml')
+      fields = File.exist?(path) ? Array(YAML.safe_load_file(path, aliases: true)&.dig('custom_fields')) : []
+      fields.select { it['field_type'] == 'select' }.to_h do |field|
+        values = SelectFieldChoices.new(field).pairs.map { it.last.to_s }
+        [field['keyname'], values.size > PUBLISHABLE_RECIPE_MAX_OPTIONS ? values.values_at(0, -1) : values]
+      end
+    end
   end
 end
 
+# rubocop:disable-next Metrics/BlockLength -- one shared group, one check per example
 RSpec.shared_examples 'a publishable recipe' do |screens: TRMNLP::Testing::PUBLISHABLE_RECIPE_SCREENS|
   let(:recipe_inputs) do
-    { mocks: respond_to?(:mocks) ? mocks : {}, custom_fields: respond_to?(:custom_fields) ? custom_fields : {} }
+    { mocks: respond_to?(:mocks) ? mocks : {}, custom_fields: respond_to?(:custom_fields) ? custom_fields : {},
+      variables: respond_to?(:variables) ? variables : {}, now: respond_to?(:now) ? now : nil }
   end
 
+  def draw_cleanly = have_no_problems.and(have_no_leaked_text)
+
   TRMNLP::Testing::PUBLISHABLE_RECIPE_VIEWS.product(screens).each do |view, screen|
     device = screen[:device].is_a?(Hash) ? screen[:device][:model] : screen[:device]
     screen_name = [device, screen[:orientation]].compact.join(' ')
 
-    it "draws the #{view} view on #{screen_name} without overflow or page errors" do
-      expect(trmnl.render(view:, **screen, **recipe_inputs)).to have_no_overflow.and have_no_problems
+    it "draws the #{view} view on #{screen_name} without page errors" do
+      expect(trmnl.render(view:, **screen, **recipe_inputs)).to draw_cleanly
+    end
+  end
+
+  TRMNLP::Testing::PUBLISHABLE_RECIPE_API_FAILURES.each do |failure, answer|
+    it "draws the full view when the API #{failure}" do
+      screen = trmnl.render(**screens.first, **recipe_inputs, mocks: { '*' => answer })
+      expect(screen).to have_no_problems.and(have_no_leaked_text).and(have_no_transform_error)
+    end
+  end
+
+  TRMNLP::Testing.select_field_values.each do |keyname, values|
+    values.each do |value|
+      it "draws the full view with #{keyname} set to #{value}" do
+        custom_fields = recipe_inputs[:custom_fields].merge(keyname => value)
+        expect(trmnl.render(**screens.first, **recipe_inputs, custom_fields:)).to draw_cleanly
+      end
     end
   end
 

data/lib/trmnlp/testing/qr_scanner.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+require 'mini_magick'
+require 'nokogiri'
+require 'open3'
+require 'tempfile'
+
+module TRMNLP
+  module Testing
+    # Reads the QR codes in a PNG the way a phone would, with zbar's `zbarimg`.
+    class QrScanner
+      COMMAND = 'zbarimg'
+      MISSING = 'Scanning a QR code needs zbar (`brew install zbar` or `apt-get install zbar-tools`; ' \
+                'already in the Docker image)'
+
+      def initialize(path, area: nil)
+        @path = path
+        @area = area
+      end
+
+      # The text of every code found, in the order zbar reports them.
+      def texts = @area ? cropped { scan(it) } : scan(@path)
+
+      private
+
+      def scan(path)
+        xml, error, status = Open3.capture3(COMMAND, '--quiet', '--xml', '-Sdisable', '-Sqrcode.enable', path)
+        # zbarimg exits 4 when the picture has no code.
+        raise TestingError, "zbarimg could not scan #{path}: #{error.strip}" unless [0, 4].include?(status.exitstatus)
+
+        Nokogiri::XML(xml).remove_namespaces!.xpath('//symbol/data').map(&:text)
+      rescue Errno::ENOENT
+        raise TestingError, MISSING
+      end
+
+      def cropped
+        return [] unless (geometry = crop_geometry)
+
+        Tempfile.create(['trmnlp-qr-', '.png']) do |file|
+          MiniMagick::Image.open(@path).crop(geometry).write(file.path)
+          yield file.path
+        end
+      end
+
+      def crop_geometry
+        left = [@area.left.floor, 0].max
+        top = [@area.top.floor, 0].max
+        width = @area.right.ceil - left
+        height = @area.bottom.ceil - top
+        # ImageMagick reads a 0 width or height as the whole picture, so an area off it has nothing to crop.
+        "#{width}x#{height}+#{left}+#{top}" if width.positive? && height.positive?
+      end
+    end
+  end
+end

data/lib/trmnlp/testing/report.rb

@@ -25,7 +25,7 @@ module TRMNLP
       end
 
       def initialize(dir)
-        @dir = dir
+        @dir = "#{dir}#{ENV.fetch('TEST_ENV_NUMBER', '')}" # parallel_tests: report, report2, report3...
         @examples = {}
         @images = 0
       end

data/lib/trmnlp/testing/rspec.rb

@@ -10,6 +10,7 @@ require_relative '../browser_pool'
 require_relative '../firefox_driver'
 require_relative 'browser'
 require_relative 'certificate_authority'
+require_relative 'page_server'
 require_relative 'plugin'
 require_relative 'report'
 require_relative 'publishable_recipe'
@@ -18,6 +19,8 @@ require_relative 'snapshot'
 module TRMNLP
   module Testing
     PLUGIN_DIR_ENV_KEY = 'TRMNLP_PLUGIN_DIR'
+    # What a template or script draws when its data is missing.
+    LEAKED_TEXT_PATTERN = /Liquid (?:syntax )?error|\bundefined\b|\bNaN\b|\bnull\b|\[object Object\]|\{\{|\{%/
 
     def self.plugin_dir = ENV.fetch(PLUGIN_DIR_ENV_KEY, Dir.pwd)
 
@@ -29,10 +32,16 @@ module TRMNLP
       @browser_pool ||= BrowserPool.new(driver_factory: FirefoxDriver.method(:build), max_size: 1)
     end
 
+    def self.page_server
+      @page_server ||= PageServer.new.start.tap { |server| at_exit { server.stop } }
+    end
+
     module Helpers
       def trmnl = @trmnl ||= Plugin.new(Testing.plugin_dir, browser: trmnl_browser, authority: Testing.authority)
 
-      def trmnl_browser = @trmnl_browser ||= Browser.new(pool: Testing.browser_pool)
+      def trmnl_browser
+        @trmnl_browser ||= Browser.new(pool: Testing.browser_pool, page_server: Testing.page_server)
+      end
     end
   end
 end
@@ -53,11 +62,39 @@ RSpec::Matchers.define :stay_within_serverless_limits do
   end
 end
 
+RSpec::Matchers.define :have_no_leaked_text do
+  match { |screen| screen.text.scan(TRMNLP::Testing::LEAKED_TEXT_PATTERN).empty? }
+  failure_message do |screen|
+    leaked = screen.text.scan(TRMNLP::Testing::LEAKED_TEXT_PATTERN).uniq
+    "expected no leaked values on #{screen.inspect}, but it shows: #{leaked.join(', ')}"
+  end
+end
+
+RSpec::Matchers.define :have_no_transform_error do
+  match { |screen| screen.result.error.nil? }
+  failure_message { |screen| "expected the transform to run without error, but: #{screen.result.error}" }
+end
+
 RSpec::Matchers.define :have_no_problems do
   match { |screen| screen.problems.empty? }
   failure_message { |screen| "expected no problems on #{screen.inspect}, but: #{screen.problems.join('; ')}" }
 end
 
+# A QR code that scans in the PNG; with a String or Regexp, one that reads as it.
+RSpec::Matchers.define :have_qr_code do |text = nil, within: nil|
+  match do |screen|
+    @found = screen.qr_codes(within:)
+    text ? @found.any? { text === it } : @found.any? # rubocop:disable Style/CaseEquality -- a String or a Regexp
+  end
+  failure_message do |screen|
+    wanted = text ? "a QR code reading #{text.inspect}" : 'a QR code that scans'
+    place = within ? " in #{within}" : ''
+    "expected #{wanted}#{place} on #{screen.inspect}, but " \
+      "#{@found.empty? ? 'none scans' : "found #{@found.map(&:inspect).join(', ')}"}"
+  end
+  failure_message_when_negated { |screen| "expected no QR code on #{screen.inspect}, but found #{@found.inspect}" }
+end
+
 RSpec::Matchers.define :fit_image_size_limit do
   match { |screen| screen.png_bytes.bytesize <= screen.device.image_size_limit.to_i }
   failure_message do |screen|

data/lib/trmnlp/testing/run.rb

@@ -75,7 +75,7 @@ module TRMNLP
       def build_context(cache_dir, proxy)
         transform_client = inputs[:transform] ? transform_client(proxy) : nil
         context = Context.new(plugin, reporter:, cache_dir:, project_overrides:, outbound_request: table,
-                                      transform_client:)
+                                      transform_client:, source_data: inputs[:data] && stringify(inputs[:data]))
         seed(context.paths)
         context
       end

data/lib/trmnlp/testing/screen.rb

@@ -4,6 +4,8 @@ require 'capybara'
 require 'delegate'
 require 'nokogiri'
 
+require_relative 'qr_scanner'
+
 module TRMNLP
   module Testing
     # A rendered view, as Firefox drew it. Capybara's finders and matchers (have_text, have_css, within...)
@@ -11,19 +13,76 @@ module TRMNLP
     class Screen < SimpleDelegator
       Box = Data.define(:left, :top, :right, :bottom, :width, :height)
 
-      # Every element drawn past the screen's edge or cut off inside a box that hides its overflow.
+      # Every element drawn past the screen's edge, and every box that cuts a child box or a glyph's ink.
       OVERFLOW_SCRIPT = <<~JS
         const screen = document.documentElement.getBoundingClientRect();
         const describe = (el) => el.tagName.toLowerCase() + (el.id ? '#' + el.id : '') +
           (el.classList.length ? '.' + [...el.classList].join('.') : '');
+        const clips = (el) => getComputedStyle(el).overflow !== 'visible';
+        const truncatesOnPurpose = (style) => style.textOverflow === 'ellipsis' || style.webkitLineClamp !== 'none';
+        const drawn = (rect) => rect.width > 0 || rect.height > 0;
+        const insideTruncation = (el) => {
+          for (let parent = el.parentElement; parent; parent = parent.parentElement) {
+            if (truncatesOnPurpose(getComputedStyle(parent))) return true;
+          }
+          return false;
+        };
+        const clippedOnlyBy = (node, el) => {
+          for (let parent = node.parentElement; parent !== el; parent = parent.parentElement) {
+            if (clips(parent)) return false;
+          }
+          return true;
+        };
+        const inlineBox = (el) => getComputedStyle(el).display === 'inline' &&
+          !(el instanceof HTMLImageElement || el instanceof SVGSVGElement || el instanceof HTMLCanvasElement);
+        const textMeasuringContext = document.createElement('canvas').getContext('2d');
+        const glyphInk = (glyph, rect) => {
+          const metrics = textMeasuringContext.measureText(glyph);
+          const scale = rect.height / (metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent);
+          const baseline = rect.top + metrics.fontBoundingBoxAscent * scale;
+          return { left: rect.left - metrics.actualBoundingBoxLeft * scale,
+                   right: rect.left + metrics.actualBoundingBoxRight * scale,
+                   top: baseline - metrics.actualBoundingBoxAscent * scale,
+                   bottom: baseline + metrics.actualBoundingBoxDescent * scale };
+        };
+        const glyphRects = (el) => {
+          const found = [];
+          const range = document.createRange();
+          const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+          for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+            if (!node.data.trim() || !clippedOnlyBy(node, el) || node.parentElement instanceof SVGElement) continue;
+            const style = getComputedStyle(node.parentElement);
+            textMeasuringContext.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+            for (let start = 0; start < node.data.length;) {
+              const end = start + String.fromCodePoint(node.data.codePointAt(start)).length;
+              const glyph = node.data.slice(start, end);
+              if (glyph.trim()) {
+                range.setStart(node, start);
+                range.setEnd(node, end);
+                [...range.getClientRects()].filter(drawn).forEach((rect) => found.push(glyphInk(glyph, rect)));
+              }
+              start = end;
+            }
+          }
+          return found;
+        };
+        const cutsChildOrGlyph = (el) => {
+          const box = el.getBoundingClientRect();
+          const left = box.left + el.clientLeft;
+          const top = box.top + el.clientTop;
+          const crossesBoxEdge = (rect) => rect.left < left - 1 || rect.top < top - 1 ||
+            rect.right > left + el.clientWidth + 1 || rect.bottom > top + el.clientHeight + 1;
+          const children = [...el.querySelectorAll('*')].filter((child) => clippedOnlyBy(child, el) && !inlineBox(child))
+            .map((child) => child.getBoundingClientRect()).filter(drawn);
+          return children.some(crossesBoxEdge) || glyphRects(el).some(crossesBoxEdge);
+        };
         return [...document.querySelectorAll('.view *')].filter((el) => {
           const box = el.getBoundingClientRect();
-          if (box.width === 0 && box.height === 0) return false;
+          if (!drawn(box) || insideTruncation(el)) return false;
           const outside = box.right > screen.right + 1 || box.bottom > screen.bottom + 1 || box.left < -1 || box.top < -1;
           const style = getComputedStyle(el);
-          const clips = ['hidden', 'clip'].includes(style.overflowX) || ['hidden', 'clip'].includes(style.overflowY);
-          const cut = clips && (el.scrollWidth > el.clientWidth + 1 || el.scrollHeight > el.clientHeight + 1);
-          return outside || cut;
+          const overflows = el.scrollWidth > el.clientWidth + 1 || el.scrollHeight > el.clientHeight + 1;
+          return outside || (clips(el) && !truncatesOnPurpose(style) && overflows && cutsChildOrGlyph(el));
         }).map(describe);
       JS
 
@@ -39,7 +98,7 @@ module TRMNLP
         return copy.outerHTML;
       JS
 
-      attr_reader :html, :device, :view, :png_path, :result, :wait_for, :wait_for_timeout
+      attr_reader :html, :device, :view, :result, :wait_for, :wait_for_timeout
 
       # rubocop:disable-next Metrics/ParameterLists -- what a render produced and how to wait for it
       def initialize(html:, device:, view:, browser:, result:, wait_for: nil, wait_for_timeout: 5)
@@ -50,7 +109,7 @@ module TRMNLP
         @view = view
         @browser = browser
         @result = result
-        @png_path = browser.capture(self)
+        browser.load(self)
         super(Capybara.string(drawn_dom(browser.on(self) { it.execute_script(DRAWN_DOM_SCRIPT) })))
       end
 
@@ -69,8 +128,16 @@ module TRMNLP
       # Script errors, unhandled rejections, console.error lines and files that failed to load.
       def problems = evaluate('window.__trmnlpProblems || []')
 
+      # The screenshot, quantized for the device. It is taken the first time it is asked for, so a test that
+      # only reads the page does not wait for a picture.
+      def png_path = @png_path ||= @browser.capture(self)
+
       def png_bytes = File.binread(png_path)
 
+      # The text of each QR code that scans in the PNG, so on what the device shows; within: a selector
+      # limits the scan to that element.
+      def qr_codes(within: nil) = QrScanner.new(png_path, area: within && box(within)).texts
+
       def drawn_dom(source)
         document = Nokogiri::HTML(source)
         document.css("[#{HIDDEN_MARK}]").each { it['hidden'] = 'hidden' }

data/lib/trmnlp/user_data_assembler.rb

@@ -12,7 +12,9 @@ module TRMNLP
     DEFAULT_DEVICE_WIDTH = 800
     DEFAULT_DEVICE_HEIGHT = 480
 
-    def initialize(config:, paths:, transform_pipeline:, oauth_session: nil)
+    # source_data: a test's own data, in place of what the plugin's strategy would read.
+    def initialize(config:, paths:, transform_pipeline:, oauth_session: nil, source_data: nil)
+      @given_source_data = source_data
       @config = config
       @paths = paths
       @transform_pipeline = transform_pipeline
@@ -73,7 +75,9 @@ module TRMNLP
     def previous_merge_variables = config.plugin.webhook? ? source_data : transform_pipeline.previous_output
 
     def source_data
-      if config.plugin.static?
+      if @given_source_data
+        @given_source_data
+      elsif config.plugin.static?
         config.plugin.static_data
       elsif config.plugin.plugin_merge?
         MergedPluginLocals.new(config:, paths:).call

data/lib/trmnlp/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TRMNLP
-  VERSION = '0.18.1'
+  VERSION = '0.20.0'
 end

data/lib/trmnlp.rb

@@ -3,7 +3,7 @@
 module TRMNLP; end
 require 'oj'
 require 'trmnl/liquid'
-require_relative 'trmnlp/qr_code_intrinsic_size'
+require_relative 'trmnlp/qr_code'
 Oj.mimic_JSON
 require_relative 'trmnlp/rails_helpers'
 require_relative 'trmnlp/errors'

data/templates/init/tests/plugin_spec.rb

@@ -10,7 +10,7 @@ RSpec.describe 'My Plugin' do
   # The values of the custom fields in src/settings.yml to test with.
   let(:custom_fields) { {} }
 
-  # Every view on TRMNL's devices without overflow or page errors, and the transform within TRMNL's limits.
+  # Every view on TRMNL's devices, a failing API and every select option, checked for page errors and leaked values.
   it_behaves_like 'a publishable recipe'
 
   # A picture of the full view, compared pixel for pixel on every run. Record it once with

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: trmnl_preview
 version: !ruby/object:Gem::Version
-  version: 0.18.1
+  version: 0.20.0
 platform: ruby
 authors:
 - Rockwell Schrock
@@ -450,7 +450,7 @@ files:
 - lib/trmnlp/outbound_request.rb
 - lib/trmnlp/paths.rb
 - lib/trmnlp/poller.rb
-- lib/trmnlp/qr_code_intrinsic_size.rb
+- lib/trmnlp/qr_code.rb
 - lib/trmnlp/rails_helpers.rb
 - lib/trmnlp/renderer.rb
 - lib/trmnlp/reporter.rb
@@ -462,13 +462,14 @@ files:
 - lib/trmnlp/testing/certificate_authority.rb
 - lib/trmnlp/testing/device_models.rb
 - lib/trmnlp/testing/frozen_clock.rb
-- lib/trmnlp/testing/inline_stylesheets.rb
 - lib/trmnlp/testing/memory_sampler.rb
 - lib/trmnlp/testing/mock_proxy.rb
 - lib/trmnlp/testing/mock_table.rb
 - lib/trmnlp/testing/node_version.rb
+- lib/trmnlp/testing/page_server.rb
 - lib/trmnlp/testing/plugin.rb
 - lib/trmnlp/testing/publishable_recipe.rb
+- lib/trmnlp/testing/qr_scanner.rb
 - lib/trmnlp/testing/report.html.erb
 - lib/trmnlp/testing/report.rb
 - lib/trmnlp/testing/rspec.rb

data/lib/trmnlp/qr_code_intrinsic_size.rb

@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-require 'trmnl/liquid'
-
-module TRMNLP
-  # Mirrors core's config/initializers/trmnl_liquid_qr_code_intrinsic_size.rb: a view box alone
-  # gives the code no size of its own, so it renders at zero width in a shrink-to-fit container.
-  module QrCodeIntrinsicSize
-    def qr_code(data, size = 11, level = '', view = 'responsive')
-      svg = super
-      root_element = svg[/<svg[^>]*>/].to_s
-      return svg if root_element.include?('width=')
-
-      side_length = root_element[/viewBox="0 0 (\d+)/, 1]
-      return svg unless side_length
-
-      svg.sub('<svg ', %(<svg width="#{side_length}" height="#{side_length}" style="max-width:100%;height:auto" ))
-    end
-  end
-end
-
-TRMNL::Liquid::Filters.prepend(TRMNLP::QrCodeIntrinsicSize)

data/lib/trmnlp/testing/inline_stylesheets.rb

@@ -1,44 +0,0 @@
-# frozen_string_literal: true
-
-require 'faraday'
-require 'uri'
-
-module TRMNLP
-  module Testing
-    # Puts a page's linked stylesheets in the page itself. A page written with document.write, as TRMNL and
-    # trmnlp write theirs, runs its scripts without waiting for linked stylesheets, so a script that
-    # measures text (a layout solver, say) raced them and drew a different board from run to run.
-    module InlineStylesheets
-      LINK = /<link\b[^>]*\brel=["']stylesheet["'][^>]*>/i
-      SCRIPT = %r{<script\b.*?</script>}im
-      HREF = /\bhref=["'](https?:[^"']+)["']/i
-      CSS_URL = /url\(\s*(['"]?)(?!data:|https?:|#)([^'")]+)\1\s*\)/i
-
-      module_function
-
-      def call(html)
-        html.gsub(Regexp.union(SCRIPT, LINK)) do |tag|
-          next tag if tag.match?(/\A<script/i)
-
-          url = tag[HREF, 1]
-          css = url && stylesheet(url)
-          css ? "<style data-href=\"#{url}\">#{css}</style>" : tag
-        end
-      end
-
-      # nil when the stylesheet cannot be fetched: the page keeps its link.
-      def stylesheet(url)
-        cache.fetch(url) do
-          response = Faraday.get(url)
-          cache[url] = response.success? ? absolute_urls(response.body, url) : nil
-        end
-      rescue Faraday::Error
-        nil
-      end
-
-      def absolute_urls(css, base) = css.gsub(CSS_URL) { "url(\"#{URI.join(base, Regexp.last_match(2))}\")" }
-
-      def cache = @cache ||= {}
-    end
-  end
-end