@shopify/shop-minis-react 0.0.34 → 0.0.36

package/src/providers/ImagePickerProvider.test.tsx

@@ -0,0 +1,467 @@
+import {
+  render,
+  screen,
+  fireEvent,
+  renderHook,
+  act,
+} from '@testing-library/react'
+import {describe, expect, it, vi, beforeEach} from 'vitest'
+
+import {ImagePickerProvider, useImagePickerContext} from './ImagePickerProvider'
+
+describe('ImagePickerProvider', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Context', () => {
+    it('throws error when used outside of provider', () => {
+      // Silence console.error for this test
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+      expect(() => {
+        renderHook(() => useImagePickerContext())
+      }).toThrow(
+        'useImagePickerContext must be used within an ImagePickerProvider'
+      )
+
+      consoleSpy.mockRestore()
+    })
+
+    it('provides context value when used within provider', () => {
+      const {result} = renderHook(() => useImagePickerContext(), {
+        wrapper: ({children}) => (
+          <ImagePickerProvider>{children}</ImagePickerProvider>
+        ),
+      })
+
+      expect(result.current).toHaveProperty('openCamera')
+      expect(result.current).toHaveProperty('openGallery')
+      expect(typeof result.current.openCamera).toBe('function')
+      expect(typeof result.current.openGallery).toBe('function')
+    })
+  })
+
+  describe('Hidden Inputs', () => {
+    it('renders hidden file inputs', () => {
+      const {container} = render(
+        <ImagePickerProvider>
+          <div>Test Content</div>
+        </ImagePickerProvider>
+      )
+
+      const inputs = container.querySelectorAll('input[type="file"]')
+      expect(inputs).toHaveLength(3)
+
+      // Gallery input
+      const galleryInput = inputs[0]
+      expect(galleryInput).toHaveAttribute('accept', 'image/*')
+      expect(galleryInput).not.toHaveAttribute('capture')
+      expect(galleryInput).toHaveStyle({display: 'none'})
+
+      // Front camera input
+      const frontCameraInput = inputs[1]
+      expect(frontCameraInput).toHaveAttribute('accept', 'image/*')
+      expect(frontCameraInput).toHaveAttribute('capture', 'user')
+
+      // Back camera input
+      const backCameraInput = inputs[2]
+      expect(backCameraInput).toHaveAttribute('accept', 'image/*')
+      expect(backCameraInput).toHaveAttribute('capture', 'environment')
+    })
+  })
+
+  describe('openGallery', () => {
+    it('triggers gallery input click and resolves with selected file', async () => {
+      const TestComponent = () => {
+        const {openGallery} = useImagePickerContext()
+
+        return (
+          <button
+            type="button"
+            onClick={() =>
+              openGallery()
+                .then(file => {
+                  const span = document.createElement('span')
+                  span.textContent = file.name
+                  span.setAttribute('data-testid', 'selected-file')
+                  document.body.appendChild(span)
+                })
+                .catch(() => {
+                  // Ignore errors from cleanup
+                })
+            }
+          >
+            Open Gallery
+          </button>
+        )
+      }
+
+      const {container} = render(
+        <ImagePickerProvider>
+          <TestComponent />
+        </ImagePickerProvider>
+      )
+
+      const galleryInput = container.querySelector(
+        'input[type="file"]:not([capture])'
+      ) as HTMLInputElement
+      const clickSpy = vi.spyOn(galleryInput, 'click')
+
+      // Click the button to open gallery
+      const button = screen.getByText('Open Gallery')
+      fireEvent.click(button)
+
+      expect(clickSpy).toHaveBeenCalledTimes(1)
+
+      // Simulate file selection
+      const file = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+      Object.defineProperty(galleryInput, 'files', {
+        value: [file],
+        configurable: true,
+      })
+
+      await act(async () => {
+        fireEvent.change(galleryInput)
+      })
+
+      // Check that the promise resolved with the file
+      await vi.waitFor(() => {
+        const selectedFile = document.querySelector(
+          '[data-testid="selected-file"]'
+        )
+        expect(selectedFile?.textContent).toBe('test.jpg')
+      })
+    })
+
+    it('handles cancel event', async () => {
+      const TestComponent = () => {
+        const {openGallery} = useImagePickerContext()
+
+        return (
+          <button
+            type="button"
+            onClick={() =>
+              openGallery().catch(error => {
+                const span = document.createElement('span')
+                span.textContent = error.message
+                span.setAttribute('data-testid', 'cancel-message')
+                document.body.appendChild(span)
+              })
+            }
+          >
+            Open Gallery
+          </button>
+        )
+      }
+
+      const {container} = render(
+        <ImagePickerProvider>
+          <TestComponent />
+        </ImagePickerProvider>
+      )
+
+      const galleryInput = container.querySelector(
+        'input[type="file"]:not([capture])'
+      ) as HTMLInputElement
+
+      const button = screen.getByText('Open Gallery')
+      fireEvent.click(button)
+
+      // Simulate cancel event
+      await act(async () => {
+        const cancelEvent = new Event('cancel', {bubbles: true})
+        galleryInput.dispatchEvent(cancelEvent)
+      })
+
+      await vi.waitFor(() => {
+        const cancelMessage = document.querySelector(
+          '[data-testid="cancel-message"]'
+        )
+        expect(cancelMessage?.textContent).toBe('User cancelled file selection')
+      })
+    })
+  })
+
+  describe('openCamera', () => {
+    it('triggers back camera input click by default', async () => {
+      const TestComponent = () => {
+        const {openCamera} = useImagePickerContext()
+
+        return (
+          <button
+            type="button"
+            onClick={() =>
+              openCamera().catch(() => {
+                // Ignore errors from cleanup
+              })
+            }
+          >
+            Open Camera
+          </button>
+        )
+      }
+
+      const {container} = render(
+        <ImagePickerProvider>
+          <TestComponent />
+        </ImagePickerProvider>
+      )
+
+      const backCameraInput = container.querySelector(
+        'input[capture="environment"]'
+      ) as HTMLInputElement
+      const clickSpy = vi.spyOn(backCameraInput, 'click')
+
+      const button = screen.getByText('Open Camera')
+      fireEvent.click(button)
+
+      expect(clickSpy).toHaveBeenCalledTimes(1)
+    })
+
+    it('triggers front camera input click when specified', async () => {
+      const TestComponent = () => {
+        const {openCamera} = useImagePickerContext()
+
+        return (
+          <button
+            type="button"
+            onClick={() =>
+              openCamera('front').catch(() => {
+                // Ignore errors from cleanup
+              })
+            }
+          >
+            Open Front Camera
+          </button>
+        )
+      }
+
+      const {container} = render(
+        <ImagePickerProvider>
+          <TestComponent />
+        </ImagePickerProvider>
+      )
+
+      const frontCameraInput = container.querySelector(
+        'input[capture="user"]'
+      ) as HTMLInputElement
+      const clickSpy = vi.spyOn(frontCameraInput, 'click')
+
+      const button = screen.getByText('Open Front Camera')
+      fireEvent.click(button)
+
+      expect(clickSpy).toHaveBeenCalledTimes(1)
+    })
+
+    it('resolves with selected file from camera', async () => {
+      const TestComponent = () => {
+        const {openCamera} = useImagePickerContext()
+
+        return (
+          <button
+            type="button"
+            onClick={() =>
+              openCamera()
+                .then(file => {
+                  const span = document.createElement('span')
+                  span.textContent = file.name
+                  span.setAttribute('data-testid', 'camera-file')
+                  document.body.appendChild(span)
+                })
+                .catch(() => {
+                  // Ignore errors from cleanup
+                })
+            }
+          >
+            Open Camera
+          </button>
+        )
+      }
+
+      const {container} = render(
+        <ImagePickerProvider>
+          <TestComponent />
+        </ImagePickerProvider>
+      )
+
+      const cameraInput = container.querySelector(
+        'input[capture="environment"]'
+      ) as HTMLInputElement
+
+      const button = screen.getByText('Open Camera')
+      fireEvent.click(button)
+
+      // Simulate file capture
+      const file = new File(['photo'], 'photo.jpg', {type: 'image/jpeg'})
+      Object.defineProperty(cameraInput, 'files', {
+        value: [file],
+        configurable: true,
+      })
+
+      await act(async () => {
+        fireEvent.change(cameraInput)
+      })
+
+      await vi.waitFor(() => {
+        const cameraFile = document.querySelector('[data-testid="camera-file"]')
+        expect(cameraFile?.textContent).toBe('photo.jpg')
+      })
+    })
+
+    it('handles cancel event for camera', async () => {
+      const TestComponent = () => {
+        const {openCamera} = useImagePickerContext()
+
+        return (
+          <button
+            type="button"
+            onClick={() =>
+              openCamera().catch(error => {
+                const span = document.createElement('span')
+                span.textContent = error.message
+                span.setAttribute('data-testid', 'camera-cancel')
+                document.body.appendChild(span)
+              })
+            }
+          >
+            Open Camera
+          </button>
+        )
+      }
+
+      const {container} = render(
+        <ImagePickerProvider>
+          <TestComponent />
+        </ImagePickerProvider>
+      )
+
+      const cameraInput = container.querySelector(
+        'input[capture="environment"]'
+      ) as HTMLInputElement
+
+      const button = screen.getByText('Open Camera')
+      fireEvent.click(button)
+
+      // Simulate cancel event
+      await act(async () => {
+        const cancelEvent = new Event('cancel', {bubbles: true})
+        cameraInput.dispatchEvent(cancelEvent)
+      })
+
+      await vi.waitFor(() => {
+        const cancelMessage = document.querySelector(
+          '[data-testid="camera-cancel"]'
+        )
+        expect(cancelMessage?.textContent).toBe('User cancelled camera')
+      })
+    })
+  })
+
+  describe('Multiple Picker Handling', () => {
+    it('rejects previous promise when new picker is opened', async () => {
+      const TestComponent = () => {
+        const {openCamera, openGallery} = useImagePickerContext()
+
+        return (
+          <>
+            <button
+              type="button"
+              onClick={() =>
+                openGallery().catch(error => {
+                  const span = document.createElement('span')
+                  span.textContent = error.message
+                  span.setAttribute('data-testid', 'gallery-error')
+                  document.body.appendChild(span)
+                })
+              }
+            >
+              Open Gallery
+            </button>
+            <button
+              type="button"
+              onClick={() =>
+                openCamera().catch(() => {
+                  // Ignore errors from cleanup
+                })
+              }
+            >
+              Open Camera
+            </button>
+          </>
+        )
+      }
+
+      render(
+        <ImagePickerProvider>
+          <TestComponent />
+        </ImagePickerProvider>
+      )
+
+      // Open gallery first
+      const galleryButton = screen.getByText('Open Gallery')
+      fireEvent.click(galleryButton)
+
+      // Then immediately open camera
+      const cameraButton = screen.getByText('Open Camera')
+      fireEvent.click(cameraButton)
+
+      await vi.waitFor(() => {
+        const errorMessage = document.querySelector(
+          '[data-testid="gallery-error"]'
+        )
+        expect(errorMessage?.textContent).toBe(
+          'New file picker opened before previous completed'
+        )
+      })
+    })
+  })
+
+  describe('Cleanup', () => {
+    it('clears input value after file selection', async () => {
+      const TestComponent = () => {
+        const {openGallery} = useImagePickerContext()
+
+        return (
+          <button
+            type="button"
+            onClick={() =>
+              openGallery().catch(() => {
+                // Ignore errors from cleanup
+              })
+            }
+          >
+            Open Gallery
+          </button>
+        )
+      }
+
+      const {container} = render(
+        <ImagePickerProvider>
+          <TestComponent />
+        </ImagePickerProvider>
+      )
+
+      const galleryInput = container.querySelector(
+        'input[type="file"]:not([capture])'
+      ) as HTMLInputElement
+
+      const button = screen.getByText('Open Gallery')
+      fireEvent.click(button)
+
+      // Set file and trigger change
+      const file = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+      Object.defineProperty(galleryInput, 'files', {
+        value: [file],
+        configurable: true,
+      })
+
+      await act(async () => {
+        fireEvent.change(galleryInput)
+      })
+
+      // Check that input value was cleared
+      expect(galleryInput.value).toBe('')
+    })
+  })
+})

package/src/stories/ProductCard.stories.tsx

@@ -36,7 +36,7 @@ injectMocks()
 export const Single: Story = {
   decorators: [
     Story => (
-      <div style={{maxWidth: 200}}>
+      <div style={{maxWidth: 150}}>
         <Story />
       </div>
     ),
@@ -69,7 +69,7 @@ export const Single: Story = {
 
       featuredImage: {
         url: 'https://cdn.shopify.com/static/sample-images/teapot.jpg',
-        altText: 'Product 1',
+        altText: 'Teapot',
       },
     },
   },

package/src/stories/TextInput.stories.tsx

@@ -0,0 +1,26 @@
+import {fn} from 'storybook/test'
+
+import {TextInput} from '../components'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'Atoms/TextInput',
+  component: TextInput,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof TextInput>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Search...',
+    onFocus: fn(),
+    onBlur: fn(),
+    onChange: fn(),
+  },
+}

package/src/test-setup.ts

@@ -0,0 +1,34 @@
+import '@testing-library/jest-dom'
+import {cleanup} from '@testing-library/react'
+import {afterEach, vi} from 'vitest'
+
+// Clean up after each test to prevent test pollution
+afterEach(() => {
+  cleanup()
+})
+
+// Mock window.matchMedia if not available (for components using media queries)
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+})
+
+// Mock IntersectionObserver (used by List component)
+global.IntersectionObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+  root: null,
+  rootMargin: '',
+  thresholds: [],
+  takeRecords: vi.fn(),
+}))

package/src/test-utils.tsx

@@ -0,0 +1,167 @@
+import React from 'react'
+
+import {
+  render,
+  type RenderOptions,
+  type RenderResult,
+} from '@testing-library/react'
+import {vi} from 'vitest'
+
+import {createProduct, createShop} from './mocks'
+
+import type {
+  Product,
+  ProductVariant,
+  Shop,
+  ProductImage,
+  Money,
+} from '@shopify/shop-minis-platform'
+
+// Create spyable mock SDK functions
+const createSpyableMockSDK = () => {
+  return {
+    navigateToProduct: vi.fn(),
+    navigateToShop: vi.fn(),
+    saveProduct: vi.fn().mockResolvedValue({ok: true, data: undefined}),
+    unsaveProduct: vi.fn().mockResolvedValue({ok: true, data: undefined}),
+    favorite: vi.fn().mockResolvedValue({ok: true, data: undefined}),
+    unfavorite: vi.fn().mockResolvedValue({ok: true, data: undefined}),
+    followShop: vi.fn().mockResolvedValue({ok: true, data: true}),
+    unfollowShop: vi.fn().mockResolvedValue({ok: true, data: false}),
+    buyProduct: vi.fn(),
+    buyProducts: vi.fn(),
+    addToCart: vi.fn(),
+    getProduct: vi.fn(),
+    getProducts: vi.fn(),
+    getProductSearch: vi.fn(),
+    getRecommendedProducts: vi.fn(),
+    getPopularProducts: vi.fn(),
+    getSavedProducts: vi.fn(),
+    getRecentProducts: vi.fn(),
+    getCuratedProducts: vi.fn(),
+    share: vi.fn(),
+    closeMini: vi.fn(),
+    showErrorScreen: vi.fn(),
+    showErrorToast: vi.fn(),
+    getAccountInformation: vi.fn(),
+    getPersistedItem: vi.fn(),
+    setPersistedItem: vi.fn(),
+    removePersistedItem: vi.fn(),
+    clearPersistedItems: vi.fn(),
+  } as any
+}
+
+// Mock window.minisSDK for tests
+export const mockMinisSDK = createSpyableMockSDK()
+
+// Setup minisSDK mock globally
+if (typeof window !== 'undefined') {
+  ;(window as any).minisSDK = mockMinisSDK
+}
+
+// Custom render with providers if needed
+export function renderWithProviders(
+  ui: React.ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>
+): RenderResult {
+  return render(ui, {
+    ...options,
+  })
+}
+
+// Re-export mock factories from mocks.ts with backwards compatibility
+export const mockProduct = (overrides: Partial<Product> = {}): Product => {
+  const baseProduct = createProduct(
+    overrides.id || 'product-1',
+    overrides.title || 'Test Product',
+    overrides.price?.amount || '99.99',
+    overrides.compareAtPrice?.amount
+  )
+  return {
+    ...baseProduct,
+    ...overrides,
+  }
+}
+
+export const mockShop = (overrides: Partial<Shop> = {}): Shop => {
+  const baseShop = createShop(
+    overrides.id || 'shop-1',
+    overrides.name || 'Test Shop'
+  )
+  return {
+    ...baseShop,
+    ...overrides,
+  }
+}
+
+// Helper to create multiple products
+export const mockProducts = (count = 5): Product[] => {
+  return Array.from({length: count}, (_, i) =>
+    createProduct(
+      `product-${i + 1}`,
+      `Test Product ${i + 1}`,
+      `${(i + 1) * 50}.00`
+    )
+  )
+}
+
+// Export commonly used mock data helpers for backwards compatibility
+export const mockMoney = (amount = '29.99', currencyCode = 'USD'): Money => ({
+  amount,
+  currencyCode: currencyCode as any,
+})
+
+export const mockProductImage = (
+  overrides: Partial<ProductImage> = {}
+): ProductImage => ({
+  url: 'https://example.com/product-image.jpg',
+  altText: 'Product image',
+  width: 1000,
+  height: 1000,
+  sensitive: false,
+  thumbhash: 'someThumbhash',
+  ...overrides,
+})
+
+export const mockProductVariant = (
+  overrides: Partial<ProductVariant> = {}
+): ProductVariant => ({
+  id: 'variant-1',
+  isFavorited: false,
+  price: mockMoney('29.99', 'USD'),
+  compareAtPrice: mockMoney('39.99', 'USD'),
+  image: mockProductImage(),
+  ...overrides,
+})
+
+// Helper to wait for async updates
+export const waitForAsync = () => new Promise(resolve => setTimeout(resolve, 0))
+
+// Common test assertions for accessibility
+export const expectToBeAccessible = (element: HTMLElement) => {
+  // Check for basic accessibility attributes
+  const role = element.getAttribute('role')
+  const ariaLabel = element.getAttribute('aria-label')
+  const ariaLabelledBy = element.getAttribute('aria-labelledby')
+
+  // At least one of these should be present for interactive elements
+  if (element.tagName === 'BUTTON' || element.onclick) {
+    const hasAccessibility = Boolean(
+      role || ariaLabel || ariaLabelledBy || element.textContent?.trim()
+    )
+    expect(hasAccessibility).toBe(true)
+  }
+}
+
+// Reset all mocks
+export const resetAllMocks = () => {
+  Object.values(mockMinisSDK).forEach(mock => {
+    if (typeof mock === 'function' && 'mockReset' in mock) {
+      ;(mock as any).mockReset()
+    }
+  })
+}
+
+// Export everything from testing library for convenience
+export * from '@testing-library/react'
+export {default as userEvent} from '@testing-library/user-event'