@shopify/shop-minis-react 0.0.0-snapshot.20251216185714 → 0.0.0-snapshot.20251217194747

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.0.0-snapshot.20251216185714",
+  "version": "0.0.0-snapshot.20251217194747",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -46,7 +46,7 @@
     "typescript": ">=5.0.0"
   },
   "dependencies": {
-    "@shopify/shop-minis-platform": "0.0.0-snapshot.20251216185714",
+    "@shopify/shop-minis-platform": "0.0.0-snapshot.20251217194747",
     "@tailwindcss/vite": "4.1.8",
     "@tanstack/react-query": "5.86.0",
     "@types/color": "3.0.6",

package/src/components/atoms/image.test.tsx

@@ -1,13 +1,18 @@
-import {describe, expect, it, vi} from 'vitest'
+import {describe, expect, it, vi, beforeAll} from 'vitest'
 
 import {render, screen, waitFor} from '../../test-utils'
 
 import {Image} from './image'
 
+// Mock URL.revokeObjectURL for jsdom
+beforeAll(() => {
+  URL.revokeObjectURL = vi.fn()
+})
+
 // Mock the util functions
 vi.mock('../../utils', () => ({
-  getThumbhashDataURL: vi.fn((thumbhash?: string) =>
-    thumbhash ? `data:image/png;base64,${thumbhash}` : null
+  getThumbhashBlobURL: vi.fn((thumbhash?: string) =>
+    thumbhash ? `blob:http://localhost/${thumbhash}` : undefined
   ),
   getResizedImageUrl: vi.fn((url?: string) => url),
 }))
@@ -76,7 +81,7 @@ describe('Image', () => {
     expect(wrapper.style.aspectRatio).toBe('16/9')
   })
 
-  it('uses thumbhash as background when provided with fixed aspect ratio', () => {
+  it('uses thumbhash as placeholder when provided with fixed aspect ratio', () => {
     const {container} = render(
       <Image
         src="https://example.com/image.jpg"
@@ -86,10 +91,15 @@ describe('Image', () => {
       />
     )
 
-    const wrapper = container.firstChild as HTMLElement
-    expect(wrapper.style.backgroundImage).toContain(
-      'data:image/png;base64,testThumbhash'
+    // Thumbhash is now rendered as a separate img element (placeholder)
+    const images = container.querySelectorAll('img')
+    expect(images).toHaveLength(2) // placeholder + main image
+    const placeholderImg = images[0]
+    expect(placeholderImg).toHaveAttribute(
+      'src',
+      'blob:http://localhost/testThumbhash'
     )
+    expect(placeholderImg).toHaveAttribute('aria-hidden', 'true')
   })
 
   it('renders with natural sizing when aspectRatio is auto', () => {
@@ -122,13 +132,17 @@ describe('Image', () => {
       />
     )
 
-    const wrapper = container.firstChild as HTMLElement
-    const img = screen.getByRole('img')
-
-    expect(wrapper.style.backgroundImage).toContain(
-      'data:image/png;base64,testThumbhash'
+    // Thumbhash is now rendered as a separate img element (placeholder)
+    const images = container.querySelectorAll('img')
+    expect(images).toHaveLength(2) // placeholder + main image
+    const placeholderImg = images[0]
+    expect(placeholderImg).toHaveAttribute(
+      'src',
+      'blob:http://localhost/testThumbhash'
     )
-    expect(img).toHaveClass('w-full', 'h-auto')
+
+    const mainImg = images[1]
+    expect(mainImg).toHaveClass('w-full', 'h-auto')
   })
 
   it('passes additional props to img element', () => {