Screenshot diff maplibre

package.json

@@ -53,6 +53,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-testing-library": "^6.2.0",
     "happy-dom": "^18.0.1",
+    "pixelmatch": "^7.1.0",
     "vite": "^8.0.0",
     "vite-plugin-ruby": "^5.2.0",
     "vitest": "^3.0.5",

spec/features/geo_viewer_spec.rb

@@ -70,7 +70,8 @@
                                    resource_file
                                  ]),
                            build(:resource, :image)
-                         ])
+                         ],
+                         bounding_box: [['46.666667', '115'], ['50', '120']])
     end
     let(:resource_file) { build(:resource_file, druid: 'mf519gg2738', filename:) }
 
@@ -81,11 +82,15 @@
         expect(page).to have_css('.sul-embed-geo', count: 1, visible: :visible)
         expect(page).to have_css "[data-index-map=\"https://stacks.stanford.edu/file/mf519gg2738/#{filename}\"]"
         expect(page).to have_css('#sidebarContent')
+        within('.sul-embed-geo-sidebar') do
+          expect(page).to have_content('Map Sheet')
+        end
+        expect(page).to match_screenshot('index_map')
       end
     end
 
     context 'when the file has name index_map.geojson' do
-      let(:filename) { 'index_map.geojson' }
+      let(:filename) { 'index_map.geojson' } # NOTE: Not a real file on Stacks
 
       it 'lists the geojson' do
         expect(page).to have_css('.sul-embed-geo', count: 1, visible: :visible)
@@ -105,16 +110,12 @@
                          ])
     end
 
-    context 'when the file is geojson' do
-      let(:filename) { 'Stanford_Temperature_Model_0km.geojson' }
+    let(:filename) { 'Stanford_Temperature_Model_0km.geojson' }
 
-      describe 'loads viewer' do
-        it 'shows the geojson' do
-          expect(page).to have_css('.sul-embed-geo', count: 1, visible: :visible)
-          expect(page).to have_css "[data-geo-json=\"https://stacks.stanford.edu/file/qp917dm2243/#{filename}\"]"
-          expect(page).to have_css '[data-layer-type="circle"]'
-        end
-      end
+    it 'shows the geojson' do
+      expect(page).to have_css('.sul-embed-geo', count: 1, visible: :visible)
+      expect(page).to have_css "[data-geo-json=\"https://stacks.stanford.edu/file/qp917dm2243/#{filename}\"]"
+      expect(page).to have_css '[data-layer-type="circle"]'
     end
   end
 end

spec/support/screenshot_diff.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+require 'open3'
+require 'fileutils'
+
+SCREENSHOT_BASELINE_DIR = Rails.root.join('spec/screenshots')
+SCREENSHOT_ACTUAL_DIR = Rails.root.join('tmp/screenshots')
+PIXELMATCH = 'pixelmatch'
+
+RSpec::Matchers.define :match_screenshot do |name, threshold: 0.1|
+  attr_reader :baseline_path, :actual_path, :diff_path, :diff_output
+
+  match do |page|
+    @baseline_path = SCREENSHOT_BASELINE_DIR.join("#{name}.png")
+    @actual_path   = SCREENSHOT_ACTUAL_DIR.join("#{name}.png")
+    @diff_path     = SCREENSHOT_ACTUAL_DIR.join("#{name}_diff.png")
+
+    FileUtils.mkdir_p(@baseline_path.dirname)
+    FileUtils.mkdir_p(@actual_path.dirname)
+
+    page.save_screenshot(@actual_path.to_s)
+
+    unless @baseline_path.exist?
+      FileUtils.cp(@actual_path, @baseline_path)
+      @baseline_created = true
+      return true
+    end
+
+    @diff_output, status = Open3.capture2e(
+      'npm', 'exec',
+      PIXELMATCH,
+      @baseline_path.to_s,
+      @actual_path.to_s,
+      @diff_path.to_s,
+      threshold.to_s
+    )
+
+    status.success?
+  end
+
+  failure_message do
+    if @baseline_created
+      "New baseline screenshot saved to #{baseline_path}. " \
+        'Commit this file to establish the visual baseline.'
+    else
+      "Screenshot '#{name}' does not match the baseline.\n  " \
+        "Baseline : #{baseline_path}\n  " \
+        "Actual   : #{actual_path}\n  " \
+        "Diff     : #{diff_path}\n  " \
+        "#{diff_output.to_s.strip}\n" \
+        'If the change is intentional, delete the baseline and re-run to create a new one.'
+    end
+  end
+
+  failure_message_when_negated do
+    "Expected screenshot '#{name}' not to match the baseline at #{baseline_path}, but it did."
+  end
+
+  description { "match screenshot '#{name}'" }
+end

yarn.lock

@@ -3643,6 +3643,18 @@ picomatch@^4.0.2, picomatch@^4.0.3, picomatch@^4.0.4:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.4.tgz#fd6f5e00a143086e074dffe4c924b8fb293b0589"
   integrity sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==
 
+pixelmatch@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/pixelmatch/-/pixelmatch-7.1.0.tgz#9d59bddc8c779340e791106c0f245ac33ae4d113"
+  integrity sha512-1wrVzJ2STrpmONHKBy228LM1b84msXDUoAzVEl0R8Mz4Ce6EPr+IVtxm8+yvrqLYMHswREkjYFaMxnyGnaY3Ng==
+  dependencies:
+    pngjs "^7.0.0"
+
+pngjs@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-7.0.0.tgz#a8b7446020ebbc6ac739db6c5415a65d17090e26"
+  integrity sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==
+
 possible-typed-array-names@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz#93e3582bc0e5426586d9d07b79ee40fc841de4ae"