@shopify/shop-minis-react 0.0.33 → 0.0.35

package/src/components/navigation/transition-link.test.tsx

@@ -0,0 +1,155 @@
+import {describe, expect, it, vi, beforeEach} from 'vitest'
+
+import {render, screen, userEvent} from '../../test-utils'
+
+import {TransitionLink} from './transition-link'
+
+// Mock react-router hooks
+const mockNavigate = vi.fn()
+vi.mock('react-router', () => ({
+  useHref: vi.fn((to: string) => to),
+}))
+
+// Mock navigation hook
+vi.mock('../../hooks/navigation/useNavigateWithTransition', () => ({
+  useNavigateWithTransition: () => mockNavigate,
+}))
+
+describe('TransitionLink', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Reset console.warn mock
+    vi.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+
+  it('renders link with children', () => {
+    render(<TransitionLink to="/test-path">Click me</TransitionLink>)
+
+    const link = screen.getByRole('link', {name: /click me/i})
+    expect(link).toBeInTheDocument()
+  })
+
+  it('sets href attribute for relative paths', () => {
+    render(<TransitionLink to="/test-path">Test Link</TransitionLink>)
+
+    const link = screen.getByRole('link')
+    expect(link).toHaveAttribute('href', '/test-path')
+  })
+
+  it('navigates on click', async () => {
+    const user = userEvent.setup()
+
+    render(<TransitionLink to="/test-path">Navigate</TransitionLink>)
+
+    const link = screen.getByRole('link')
+    await user.click(link)
+
+    expect(mockNavigate).toHaveBeenCalledWith('/test-path')
+  })
+
+  it('prevents default link behavior on click', async () => {
+    userEvent.setup()
+    const preventDefault = vi.fn()
+
+    render(<TransitionLink to="/test-path">Link</TransitionLink>)
+
+    const link = screen.getByRole('link')
+
+    // Manually create and dispatch event to test preventDefault
+    const clickEvent = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    })
+    Object.defineProperty(clickEvent, 'preventDefault', {
+      value: preventDefault,
+    })
+
+    link.dispatchEvent(clickEvent)
+
+    expect(preventDefault).toHaveBeenCalled()
+  })
+
+  it('calls custom onClick handler', async () => {
+    const user = userEvent.setup()
+    const handleClick = vi.fn()
+
+    render(
+      <TransitionLink to="/test-path" onClick={handleClick}>
+        Link
+      </TransitionLink>
+    )
+
+    const link = screen.getByRole('link')
+    await user.click(link)
+
+    expect(handleClick).toHaveBeenCalled()
+    expect(mockNavigate).toHaveBeenCalled()
+  })
+
+  it('does not navigate if onClick prevents default', async () => {
+    const user = userEvent.setup()
+    const handleClick = vi.fn(err => err.preventDefault())
+
+    render(
+      <TransitionLink to="/test-path" onClick={handleClick}>
+        Link
+      </TransitionLink>
+    )
+
+    const link = screen.getByRole('link')
+    await user.click(link)
+
+    expect(handleClick).toHaveBeenCalled()
+    expect(mockNavigate).not.toHaveBeenCalled()
+  })
+
+  it('warns about absolute URLs', () => {
+    const warnSpy = vi.spyOn(console, 'warn')
+
+    render(
+      <TransitionLink to="https://example.com">External Link</TransitionLink>
+    )
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      'TransitionLink: absolute URLs are not supported. Please update to a valid relative path.'
+    )
+  })
+
+  it('does not set href for absolute URLs', () => {
+    render(
+      <TransitionLink to="https://example.com">External Link</TransitionLink>
+    )
+
+    const link = screen.getByText('External Link')
+    expect(link).not.toHaveAttribute('href')
+  })
+
+  it('forwards ref to anchor element', () => {
+    const ref = vi.fn()
+
+    render(
+      <TransitionLink to="/test" ref={ref}>
+        Link
+      </TransitionLink>
+    )
+
+    expect(ref).toHaveBeenCalled()
+    expect(ref.mock.calls[0][0]).toBeInstanceOf(HTMLAnchorElement)
+  })
+
+  it('passes additional props to anchor element', () => {
+    render(
+      <TransitionLink
+        to="/test"
+        className="custom-class"
+        data-testid="custom-link"
+      >
+        Link
+      </TransitionLink>
+    )
+
+    const link = screen.getByRole('link')
+    expect(link).toHaveClass('custom-class')
+    expect(link).toHaveAttribute('data-testid', 'custom-link')
+  })
+})

package/src/components/ui/input.test.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import {describe, expect, it} from 'vitest'
+
+import {render} from '../../test-utils'
+
+import {Input} from './input'
+
+describe('Input', () => {
+  it('accepts and forwards innerRef prop to input element', () => {
+    const ref = React.createRef<HTMLInputElement>()
+
+    const {container} = render(
+      <Input innerRef={ref} placeholder="Test input" />
+    )
+
+    const inputElement = container.querySelector('input')
+    expect(inputElement).toBeTruthy()
+    expect(ref.current).toBe(inputElement)
+  })
+})

package/src/components/ui/input.tsx

@@ -2,9 +2,18 @@ import * as React from 'react'
 
 import {cn} from '../../lib/utils'
 
-function Input({className, type, ...props}: React.ComponentProps<'input'>) {
+// using the default ref doesn't seem to set the parent's ref object when mounted
+// Since this is a shadCN component, we need to make sure to add back the innerRef prop,
+// whenever the component is updated.
+function Input({
+  innerRef,
+  className,
+  type,
+  ...props
+}: React.ComponentProps<'input'> & {innerRef?: React.Ref<HTMLInputElement>}) {
   return (
     <input
+      ref={innerRef}
       type={type}
       data-slot="input"
       className={cn(

package/src/hooks/content/useCreateImageContent.test.ts

@@ -0,0 +1,352 @@
+import {renderHook, act} from '@testing-library/react'
+import {describe, expect, it, vi, beforeEach} from 'vitest'
+
+import {useHandleAction} from '../../internal/useHandleAction'
+import {useShopActions} from '../../internal/useShopActions'
+import {useImageUpload} from '../storage/useImageUpload'
+
+import {useCreateImageContent} from './useCreateImageContent'
+
+// Mock the internal hooks and utilities
+vi.mock('../../internal/useShopActions', () => ({
+  useShopActions: vi.fn(() => ({
+    createContent: vi.fn(),
+  })),
+}))
+
+vi.mock('../../internal/useHandleAction', () => ({
+  useHandleAction: vi.fn((action: any) => action),
+}))
+
+vi.mock('../storage/useImageUpload', () => ({
+  useImageUpload: vi.fn(() => ({
+    uploadImage: vi.fn(),
+  })),
+}))
+
+describe('useCreateImageContent', () => {
+  let mockCreateContent: ReturnType<typeof vi.fn>
+  let mockUploadImage: ReturnType<typeof vi.fn>
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    // Set up mock actions with proper implementations
+    mockCreateContent = vi.fn().mockResolvedValue({
+      data: {
+        publicId: 'content-123',
+        image: {
+          id: 'img-123',
+          url: 'https://example.com/content-image.jpg',
+          width: 800,
+          height: 600,
+        },
+        title: 'Test Content',
+        visibility: ['DISCOVERABLE'],
+      },
+    })
+
+    mockUploadImage = vi.fn().mockResolvedValue([
+      {
+        id: 'upload-123',
+        imageUrl: 'https://example.com/uploaded-image.jpg',
+        resourceUrl: 'https://example.com/resource/123',
+      },
+    ])
+
+    // Update the mocks to return our mock actions
+    ;(useShopActions as ReturnType<typeof vi.fn>).mockReturnValue({
+      createContent: mockCreateContent,
+    })
+    ;(useImageUpload as ReturnType<typeof vi.fn>).mockReturnValue({
+      uploadImage: mockUploadImage,
+    })
+
+    // Make useHandleAction return the action directly
+    ;(useHandleAction as ReturnType<typeof vi.fn>).mockImplementation(
+      (action: any) => action
+    )
+  })
+
+  describe('Hook Structure', () => {
+    it('returns expected properties', () => {
+      const {result} = renderHook(() => useCreateImageContent())
+
+      expect(result.current).toHaveProperty('createImageContent')
+      expect(result.current).toHaveProperty('loading')
+      expect(typeof result.current.createImageContent).toBe('function')
+      expect(typeof result.current.loading).toBe('boolean')
+    })
+
+    it('initializes with loading false', () => {
+      const {result} = renderHook(() => useCreateImageContent())
+      expect(result.current.loading).toBe(false)
+    })
+  })
+
+  describe('createImageContent', () => {
+    it('successfully creates image content', async () => {
+      const {result} = renderHook(() => useCreateImageContent())
+
+      const imageFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+      const params = {
+        image: imageFile,
+        contentTitle: 'Test Content',
+        visibility: ['DISCOVERABLE'] as any,
+      }
+
+      await act(async () => {
+        const content = await result.current.createImageContent(params)
+
+        expect(content.data).toEqual({
+          publicId: 'content-123',
+          image: {
+            id: 'img-123',
+            url: 'https://example.com/content-image.jpg',
+            width: 800,
+            height: 600,
+          },
+          title: 'Test Content',
+          visibility: ['DISCOVERABLE'],
+        })
+      })
+
+      // Verify upload was called
+      expect(mockUploadImage).toHaveBeenCalledWith(imageFile)
+      expect(mockUploadImage).toHaveBeenCalledTimes(1)
+
+      // Verify createContent was called with correct params
+      expect(mockCreateContent).toHaveBeenCalledWith({
+        title: 'Test Content',
+        imageUrl: 'https://example.com/uploaded-image.jpg',
+        visibility: ['DISCOVERABLE'],
+      })
+      expect(mockCreateContent).toHaveBeenCalledTimes(1)
+    })
+
+    it('sets loading state during operation', async () => {
+      const {result} = renderHook(() => useCreateImageContent())
+
+      const imageFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+      const params = {
+        image: imageFile,
+        contentTitle: 'Test Content',
+      }
+
+      // Add a delay to the mock to test loading state
+      let resolveUpload: any
+      mockUploadImage.mockImplementation(
+        () =>
+          new Promise(resolve => {
+            resolveUpload = resolve
+          })
+      )
+
+      // Start the operation
+      let createPromise: Promise<any>
+      act(() => {
+        createPromise = result.current.createImageContent(params)
+      })
+
+      // Check loading state is true while operation is in progress
+      expect(result.current.loading).toBe(true)
+
+      // Complete the upload
+      await act(async () => {
+        resolveUpload([
+          {
+            id: 'upload-123',
+            imageUrl: 'https://example.com/uploaded-image.jpg',
+          },
+        ])
+        await createPromise
+      })
+
+      // Loading should be false after completion
+      expect(result.current.loading).toBe(false)
+    })
+
+    it('throws error for missing file type', async () => {
+      const {result} = renderHook(() => useCreateImageContent())
+
+      // Create a file without a type
+      const imageFile = new File(['test'], 'test.jpg')
+      Object.defineProperty(imageFile, 'type', {value: undefined})
+
+      const params = {
+        image: imageFile,
+        contentTitle: 'Test Content',
+      }
+
+      await act(async () => {
+        await expect(result.current.createImageContent(params)).rejects.toThrow(
+          'Unable to determine file type'
+        )
+      })
+
+      expect(mockUploadImage).not.toHaveBeenCalled()
+      expect(mockCreateContent).not.toHaveBeenCalled()
+    })
+
+    it('throws error for non-image file type', async () => {
+      const {result} = renderHook(() => useCreateImageContent())
+
+      const textFile = new File(['test'], 'test.txt', {type: 'text/plain'})
+      const params = {
+        image: textFile,
+        contentTitle: 'Test Content',
+      }
+
+      await act(async () => {
+        await expect(result.current.createImageContent(params)).rejects.toThrow(
+          'Invalid file type: must be an image'
+        )
+      })
+
+      expect(mockUploadImage).not.toHaveBeenCalled()
+      expect(mockCreateContent).not.toHaveBeenCalled()
+    })
+
+    it('throws error when image upload fails', async () => {
+      const {result} = renderHook(() => useCreateImageContent())
+
+      // Mock upload to return no URL
+      mockUploadImage.mockResolvedValue([
+        {
+          id: 'upload-123',
+          imageUrl: undefined,
+          resourceUrl: 'https://example.com/resource/123',
+        },
+      ])
+
+      const imageFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+      const params = {
+        image: imageFile,
+        contentTitle: 'Test Content',
+      }
+
+      await act(async () => {
+        await expect(result.current.createImageContent(params)).rejects.toThrow(
+          'Image upload failed'
+        )
+      })
+
+      expect(mockUploadImage).toHaveBeenCalledWith(imageFile)
+      expect(mockCreateContent).not.toHaveBeenCalled()
+    })
+
+    it('handles content creation with null visibility', async () => {
+      const {result} = renderHook(() => useCreateImageContent())
+
+      const imageFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+      const params = {
+        image: imageFile,
+        contentTitle: 'Test Content',
+        visibility: null,
+      }
+
+      await act(async () => {
+        await result.current.createImageContent(params)
+      })
+
+      expect(mockCreateContent).toHaveBeenCalledWith({
+        title: 'Test Content',
+        imageUrl: 'https://example.com/uploaded-image.jpg',
+        visibility: null,
+      })
+    })
+
+    it('returns user errors from content creation', async () => {
+      const {result} = renderHook(() => useCreateImageContent())
+
+      mockCreateContent.mockResolvedValue({
+        data: {
+          publicId: 'content-123',
+          title: 'Test Content',
+        },
+        userErrors: [
+          {
+            field: 'visibility',
+            message: 'Invalid visibility',
+          },
+        ],
+      })
+
+      const imageFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+      const params = {
+        image: imageFile,
+        contentTitle: 'Test Content',
+      }
+
+      await act(async () => {
+        const contentResult = await result.current.createImageContent(params)
+
+        expect(contentResult.userErrors).toEqual([
+          {
+            field: 'visibility',
+            message: 'Invalid visibility',
+          },
+        ])
+      })
+    })
+  })
+
+  describe('Error Handling', () => {
+    it('handles upload error properly', async () => {
+      const {result} = renderHook(() => useCreateImageContent())
+
+      mockUploadImage.mockRejectedValue(new Error('Upload failed'))
+
+      const imageFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+      const params = {
+        image: imageFile,
+        contentTitle: 'Test Content',
+      }
+
+      // Check that error is thrown
+      await act(async () => {
+        await expect(result.current.createImageContent(params)).rejects.toThrow(
+          'Upload failed'
+        )
+      })
+
+      // Loading state is only managed during successful operations
+      // The hook doesn't reset loading on error since it's controlled by the consumer
+    })
+
+    it('handles content creation error properly', async () => {
+      const {result} = renderHook(() => useCreateImageContent())
+
+      mockCreateContent.mockRejectedValue(new Error('Creation failed'))
+
+      const imageFile = new File(['test'], 'test.jpg', {type: 'image/jpeg'})
+      const params = {
+        image: imageFile,
+        contentTitle: 'Test Content',
+      }
+
+      // Check that error is thrown
+      await act(async () => {
+        await expect(result.current.createImageContent(params)).rejects.toThrow(
+          'Creation failed'
+        )
+      })
+
+      // Loading state is only managed during successful operations
+      // The hook doesn't reset loading on error since it's controlled by the consumer
+    })
+  })
+
+  describe('Stability', () => {
+    it('maintains function reference stability across renders', () => {
+      const {result, rerender} = renderHook(() => useCreateImageContent())
+
+      const firstRender = result.current.createImageContent
+      rerender()
+      const secondRender = result.current.createImageContent
+
+      // Function should maintain reference equality
+      expect(firstRender).toBe(secondRender)
+    })
+  })
+})

package/src/hooks/content/useCreateImageContent.ts

@@ -8,7 +8,6 @@ import {
 
 import {useHandleAction} from '../../internal/useHandleAction'
 import {useShopActions} from '../../internal/useShopActions'
-import {fileToDataUri} from '../../utils'
 import {useImageUpload} from '../storage/useImageUpload'
 
 interface CreateImageContentParams {
@@ -48,12 +47,7 @@ export const useCreateImageContent = (): UseCreateImageContentReturns => {
         throw new Error('Invalid file type: must be an image')
       }
 
-      const [uploadImageResult] = await uploadImage([
-        {
-          mimeType: image.type,
-          uri: await fileToDataUri(image),
-        },
-      ])
+      const [uploadImageResult] = await uploadImage(image)
       const uploadImageUrl = uploadImageResult.imageUrl
 
       if (!uploadImageUrl) {

package/src/hooks/index.ts

@@ -47,3 +47,4 @@ export * from './util/useErrorToast'
 export * from './util/useErrorScreen'
 export * from './util/useShare'
 export * from './util/useImagePicker'
+export * from './util/useKeyboardAvoidingView'