Upload beautify

resources/js/components/uploads/UploadWizard.test.jsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import UploadWizard from './UploadWizard'
+
+describe('UploadWizard Step 1 archive screenshot UX', () => {
+  beforeEach(() => {
+    window.localStorage.clear()
+    window.URL.createObjectURL = vi.fn(() => 'blob:preview')
+    window.URL.revokeObjectURL = vi.fn()
+
+    window.axios = {
+      post: vi.fn(async (url) => {
+        if (url === '/api/uploads/preload') {
+          return {
+            data: {
+              upload_id: 'draft-1',
+              preview_path: 'tmp/drafts/draft-1/preview.webp',
+            },
+          }
+        }
+
+        return { data: {} }
+      }),
+      get: vi.fn(async () => ({
+        data: {
+          processing_state: 'ready',
+          status: 'draft',
+          is_scanned: true,
+          preview_ready: true,
+          has_tags: true,
+        },
+      })),
+    }
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('blocks archive preload without screenshot', async () => {
+    render(<UploadWizard contentTypes={[]} suggestedTags={[]} />)
+
+    const mainInput = screen.getByLabelText('Main upload file')
+    const archiveFile = new File(['archive'], 'pack.zip', { type: 'application/zip' })
+
+    await userEvent.upload(mainInput, archiveFile)
+
+    await waitFor(() => {
+      expect(screen.getByText(/Archive screenshots/i)).not.toBeNull()
+    })
+
+    expect(screen.getByText('At least 1 screenshot is required for archives.')).not.toBeNull()
+    expect(screen.getByRole('button', { name: 'Start preload' }).hasAttribute('disabled')).toBe(true)
+    expect(window.axios.post).not.toHaveBeenCalledWith('/api/uploads/preload', expect.anything(), expect.anything())
+  })
+
+  it('allows archive preload when screenshot exists and sends screenshots[]', async () => {
+    render(<UploadWizard contentTypes={[]} suggestedTags={[]} />)
+
+    const mainInput = screen.getByLabelText('Main upload file')
+    const archiveFile = new File(['archive'], 'pack.zip', { type: 'application/zip' })
+    await userEvent.upload(mainInput, archiveFile)
+
+    const screenshotInput = await screen.findByLabelText('Archive screenshots input')
+    const screenshotFile = new File(['image'], 'shot-1.png', { type: 'image/png' })
+    await userEvent.upload(screenshotInput, screenshotFile)
+
+    const preloadButton = screen.getByRole('button', { name: 'Start preload' })
+    await waitFor(() => {
+      expect(preloadButton.hasAttribute('disabled')).toBe(false)
+    })
+
+    await userEvent.click(preloadButton)
+
+    await waitFor(() => {
+      expect(window.axios.post).toHaveBeenCalledWith(
+        '/api/uploads/preload',
+        expect.any(FormData),
+        expect.any(Object)
+      )
+    })
+
+    const preloadCall = window.axios.post.mock.calls.find(([url]) => url === '/api/uploads/preload')
+    const sentFormData = preloadCall?.[1]
+    expect(sentFormData).toBeInstanceOf(FormData)
+    expect(sentFormData.getAll('screenshots[]').length).toBe(1)
+  })
+
+  it('bypasses screenshot uploader for image upload', async () => {
+    render(<UploadWizard contentTypes={[]} suggestedTags={[]} />)
+
+    const mainInput = screen.getByLabelText('Main upload file')
+    const imageFile = new File(['image'], 'photo.jpg', { type: 'image/jpeg' })
+    await userEvent.upload(mainInput, imageFile)
+
+    expect(screen.queryByText('Archive screenshots (required)')).toBeNull()
+
+    const preloadButton = screen.getByRole('button', { name: 'Start preload' })
+    expect(preloadButton.hasAttribute('disabled')).toBe(false)
+
+    await userEvent.click(preloadButton)
+
+    await waitFor(() => {
+      expect(window.axios.post).toHaveBeenCalledWith(
+        '/api/uploads/preload',
+        expect.any(FormData),
+        expect.any(Object)
+      )
+    })
+  })
+})