sanity-plugin-media 4.1.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-media",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "This version of `sanity-plugin-media` is for Sanity Studio V3.",
   "keywords": [
     "sanity",
@@ -48,6 +48,8 @@
     "format": "prettier --write --cache --ignore-unknown .",
     "link-watch": "plugin-kit link-watch",
     "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "prepare": "husky install",
     "prepublishOnly": "npm run build",
     "watch": "pkg-utils watch --strict"
@@ -55,7 +57,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.1.1",
     "@reduxjs/toolkit": "^2.6.0",
-    "@sanity/client": "^6.28.3",
+    "@sanity/client": "^7.13.2",
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.0",
     "@sanity/incompatible-plugin": "^1.0.5",
@@ -87,6 +89,9 @@
     "@sanity/plugin-kit": "^4.0.19",
     "@sanity/semantic-release-preset": "^2.0.5",
     "@sanity/vision": "^3.80.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/is-hotkey": "^0.1.10",
     "@types/pluralize": "^0.0.33",
     "@types/react": "^19.0.12",
@@ -102,6 +107,7 @@
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^4.6.2",
     "husky": "^8.0.2",
+    "jsdom": "^25.0.1",
     "lint-staged": "^13.0.3",
     "prettier": "^2.8.8",
     "prettier-plugin-packagejson": "^2.5.10",
@@ -112,13 +118,14 @@
     "sanity": "^3.80.1",
     "standard-version": "^9.5.0",
     "styled-components": "^6.1.16",
-    "typescript": "5.8.2"
+    "typescript": "5.8.2",
+    "vitest": "^3.0.5"
   },
   "peerDependencies": {
     "react": "^18.3 || ^19",
     "react-dom": "^18.3 || ^19",
     "react-is": "^18.3 || ^19",
-    "sanity": "^3.78 || ^4.0.0-0",
+    "sanity": "^3.78 || ^4.0.0-0 || ^5",
     "styled-components": "^6.1"
   },
   "engines": {

package/src/__tests__/fixtures/createEpicTestStore.ts

@@ -0,0 +1,27 @@
+import {configureStore, type AnyAction, type EnhancedStore} from '@reduxjs/toolkit'
+import type {SanityClient} from '@sanity/client'
+import type {Epic} from 'redux-observable'
+import {createEpicMiddleware} from 'redux-observable'
+import {rootReducer} from '../../modules'
+import type {RootReducerState} from '../../modules/types'
+import {createTestRootState} from './rootState'
+
+export function createEpicTestStore(
+  epic: Epic<AnyAction, AnyAction, RootReducerState, {client: SanityClient}>,
+  mockClient: SanityClient,
+  preloaded?: Partial<RootReducerState>
+): EnhancedStore<RootReducerState, AnyAction> {
+  const epicMiddleware = createEpicMiddleware<AnyAction, AnyAction, RootReducerState>({
+    dependencies: {client: mockClient}
+  })
+
+  const store = configureStore({
+    reducer: rootReducer,
+    middleware: getDefaultMiddleware =>
+      getDefaultMiddleware({serializableCheck: false, thunk: false}).concat(epicMiddleware),
+    preloadedState: createTestRootState(preloaded)
+  })
+
+  epicMiddleware.run(epic)
+  return store
+}

package/src/__tests__/fixtures/listenMock.ts

@@ -0,0 +1,9 @@
+import {vi} from 'vitest'
+
+/** Flat mock for client.listen() without deep callback nesting (ESLint max-nested-callbacks). */
+export function createListenMock(): ReturnType<typeof vi.fn> {
+  const unsubscribe = vi.fn()
+  const subscribe = vi.fn()
+  subscribe.mockReturnValue({unsubscribe})
+  return vi.fn().mockReturnValue({subscribe})
+}

package/src/__tests__/fixtures/mockSanityClient.ts

@@ -0,0 +1,84 @@
+import type {SanityClient} from '@sanity/client'
+import {Subject, of} from 'rxjs'
+import {vi} from 'vitest'
+
+export type MockSanityClient = {
+  observable: {
+    fetch: ReturnType<typeof vi.fn>
+    delete: ReturnType<typeof vi.fn>
+    create: ReturnType<typeof vi.fn>
+    assets: {upload: ReturnType<typeof vi.fn>}
+  }
+  fetch: ReturnType<typeof vi.fn>
+  listen: ReturnType<typeof vi.fn>
+  patch: ReturnType<typeof vi.fn>
+  transaction: ReturnType<typeof vi.fn>
+}
+
+export function createMockSanityClient(
+  overrides: Partial<Omit<MockSanityClient, 'observable'>> & {
+    observable?: Partial<MockSanityClient['observable']> & {
+      assets?: Partial<MockSanityClient['observable']['assets']>
+    }
+  } = {}
+): SanityClient {
+  const {observable: observableOverrides, ...restOverrides} = overrides
+
+  const observableBase: MockSanityClient['observable'] = {
+    fetch: vi.fn(() => of({items: []})),
+    delete: vi.fn(() => of({})),
+    create: vi.fn(() => of({_id: 'new'})),
+    assets: {
+      upload: vi.fn(() => of({type: 'complete', body: {document: {_id: 'up'}}}))
+    }
+  }
+
+  const observable: MockSanityClient['observable'] = {
+    ...observableBase,
+    ...(observableOverrides ?? {}),
+    assets: {
+      ...observableBase.assets,
+      ...(observableOverrides?.assets ?? {})
+    }
+  }
+
+  const client: MockSanityClient = {
+    observable,
+    fetch: vi.fn(() => Promise.resolve(0)),
+    listen: vi.fn(() => new Subject()),
+    patch: vi.fn(),
+    transaction: vi.fn(),
+    ...restOverrides
+  }
+
+  return client as unknown as SanityClient
+}
+
+export function mockPatchChain(result: unknown): {
+  set: ReturnType<typeof vi.fn>
+  setIfMissing: ReturnType<typeof vi.fn>
+  commit: ReturnType<typeof vi.fn>
+} {
+  const commit = vi.fn().mockResolvedValue(result)
+  const chain = {
+    set: vi.fn(),
+    setIfMissing: vi.fn(),
+    commit
+  }
+  chain.set.mockImplementation(() => chain)
+  chain.setIfMissing.mockImplementation(() => chain)
+  return chain
+}
+
+export function mockTransactionCommit(resolved: unknown = undefined): {
+  patch: ReturnType<typeof vi.fn>
+  delete: ReturnType<typeof vi.fn>
+  commit: ReturnType<typeof vi.fn>
+} {
+  const tx = {
+    patch: vi.fn().mockReturnThis(),
+    delete: vi.fn().mockReturnThis(),
+    commit: vi.fn().mockResolvedValue(resolved)
+  }
+  return tx
+}

package/src/__tests__/fixtures/renderWithProviders.tsx

@@ -0,0 +1,54 @@
+import type {ReactElement, ReactNode} from 'react'
+import {configureStore} from '@reduxjs/toolkit'
+import {studioTheme, ThemeProvider, ToastProvider} from '@sanity/ui'
+import {ColorSchemeProvider} from 'sanity'
+import {Provider} from 'react-redux'
+import {render} from '@testing-library/react'
+import {AssetBrowserDispatchProvider} from '../../contexts/AssetSourceDispatchContext'
+import {ToolOptionsProvider} from '../../contexts/ToolOptionsContext'
+import {rootReducer} from '../../modules'
+import type {RootReducerState} from '../../modules/types'
+import type {MediaToolOptions} from '../../types'
+import {createTestRootState} from './rootState'
+import type {AssetSourceComponentProps} from 'sanity'
+
+type Opts = {
+  onSelect?: AssetSourceComponentProps['onSelect']
+  preloaded?: Partial<RootReducerState>
+  toolOptions?: Partial<MediaToolOptions>
+}
+
+export function renderWithProviders(ui: ReactElement, opts: Opts = {}) {
+  const {onSelect, preloaded, toolOptions} = opts
+
+  const store = configureStore({
+    reducer: rootReducer,
+    middleware: getDefaultMiddleware =>
+      getDefaultMiddleware({thunk: false, serializableCheck: false}),
+    preloadedState: createTestRootState(preloaded)
+  })
+
+  const options: MediaToolOptions = {
+    creditLine: {enabled: false},
+    directUploads: true,
+    ...toolOptions
+  }
+
+  const wrap = (node: ReactNode) => (
+    <Provider store={store}>
+      <ColorSchemeProvider scheme="light">
+        <ToolOptionsProvider options={options}>
+          <ThemeProvider theme={studioTheme}>
+            <ToastProvider>
+              <AssetBrowserDispatchProvider onSelect={onSelect}>
+                {node}
+              </AssetBrowserDispatchProvider>
+            </ToastProvider>
+          </ThemeProvider>
+        </ToolOptionsProvider>
+      </ColorSchemeProvider>
+    </Provider>
+  )
+
+  return {store, ...render(wrap(ui))}
+}

package/src/__tests__/fixtures/rootState.ts

@@ -0,0 +1,27 @@
+import type {RootReducerState} from '../../modules/types'
+import {initialState as assetsInitialState} from '../../modules/assets'
+
+export function createTestRootState(overrides: Partial<RootReducerState> = {}): RootReducerState {
+  const base: RootReducerState = {
+    assets: {
+      ...assetsInitialState,
+      assetTypes: ['file', 'image']
+    },
+    debug: {badConnection: false, enabled: false},
+    dialog: {items: []},
+    notifications: {items: []},
+    search: {facets: [], query: ''},
+    selected: {assets: [], document: undefined, documentAssetIds: []},
+    tags: {
+      allIds: [],
+      byIds: {},
+      creating: false,
+      fetchCount: -1,
+      fetching: false,
+      panelVisible: true
+    },
+    uploads: {allIds: [], byIds: {}}
+  }
+
+  return {...base, ...overrides} as RootReducerState
+}

package/src/__tests__/fixtures/withinDialog.ts

@@ -0,0 +1,28 @@
+import {within, type Screen} from '@testing-library/react'
+
+/** Topmost Sanity dialog matching `name` (handles animated duplicate layers). */
+export function getDialogRoot(name: RegExp, base: Screen): HTMLElement {
+  const dialogs = base.getAllByRole('dialog', {name})
+  const el = dialogs.at(-1)
+  if (!el) {
+    throw new Error(`No dialog found matching ${name}`)
+  }
+  return el
+}
+
+/** Scoped queries for that dialog. */
+export function withinDialog(name: RegExp, base: Screen) {
+  return within(getDialogRoot(name, base))
+}
+
+/**
+ * Sanity `TextInput` is not always exposed as a labellable control; use the native input by `name`.
+ */
+export function inputByName(dialogName: RegExp, base: Screen, name: string): HTMLInputElement {
+  const root = getDialogRoot(dialogName, base)
+  const input = root.querySelector(`input[name="${name}"]`)
+  if (!input || !(input instanceof HTMLInputElement)) {
+    throw new Error(`No input name="${name}" in dialog matching ${dialogName}`)
+  }
+  return input
+}

package/src/components/Browser/Browser.test.tsx

@@ -0,0 +1,44 @@
+import {describe, expect, it, vi, beforeEach} from 'vitest'
+import {render, screen, waitFor} from '@testing-library/react'
+import {studioTheme, ThemeProvider, ToastProvider} from '@sanity/ui'
+import {ColorSchemeProvider} from 'sanity'
+import {of} from 'rxjs'
+import Browser from './index'
+import {createListenMock} from '../../__tests__/fixtures/listenMock'
+import {createMockSanityClient} from '../../__tests__/fixtures/mockSanityClient'
+import {ToolOptionsProvider} from '../../contexts/ToolOptionsContext'
+import useVersionedClient from '../../hooks/useVersionedClient'
+
+vi.mock('../../hooks/useVersionedClient', () => ({
+  default: vi.fn()
+}))
+
+describe('Browser', () => {
+  beforeEach(() => {
+    const fetch = vi.fn().mockReturnValue(of({items: []}))
+    vi.mocked(useVersionedClient).mockReturnValue(
+      createMockSanityClient({
+        listen: createListenMock(),
+        observable: {fetch}
+      })
+    )
+  })
+
+  it('renders Browse Assets header in tool mode', async () => {
+    render(
+      <ColorSchemeProvider scheme="light">
+        <ThemeProvider theme={studioTheme}>
+          <ToastProvider>
+            <ToolOptionsProvider options={{creditLine: {enabled: false}}}>
+              <Browser />
+            </ToolOptionsProvider>
+          </ToastProvider>
+        </ThemeProvider>
+      </ColorSchemeProvider>
+    )
+
+    await waitFor(() => {
+      expect(screen.getByText('Browse Assets')).toBeInTheDocument()
+    })
+  })
+})

package/src/components/CardAsset/CardAsset.test.tsx

@@ -0,0 +1,322 @@
+import type {RefObject} from 'react'
+import userEvent from '@testing-library/user-event'
+import {screen} from '@testing-library/react'
+import {beforeEach, describe, expect, it, vi} from 'vitest'
+import CardAsset from './index'
+import {renderWithProviders} from '../../__tests__/fixtures/renderWithProviders'
+import {initialState as assetsInitialState} from '../../modules/assets'
+import type {AssetItem, AssetType, FileAsset, ImageAsset} from '../../types'
+
+const SHIFT_FLAG = '__CARD_ASSET_TEST_SHIFT__'
+
+function setShiftPressed(on: boolean) {
+  const g = globalThis as unknown as Record<string, boolean | undefined>
+  if (on) {
+    g[SHIFT_FLAG] = true
+  } else {
+    delete g[SHIFT_FLAG]
+  }
+}
+
+vi.mock('../../hooks/useKeyPress', () => ({
+  default: (): RefObject<boolean> =>
+    ({
+      get current() {
+        return Boolean((globalThis as unknown as Record<string, unknown>)[SHIFT_FLAG])
+      }
+    } as RefObject<boolean>)
+}))
+
+vi.mock('../Image', () => ({
+  default: () => <div data-testid="card-image" />
+}))
+
+vi.mock('../FileIcon', () => ({
+  default: ({extension}: {extension?: string}) => (
+    <div data-testid="card-file-icon" data-extension={extension ?? ''} />
+  )
+}))
+
+vi.mock('sanity', async importOriginal => {
+  const actual = await importOriginal<typeof import('sanity')>()
+  return {
+    ...actual,
+    useColorSchemeValue: () => 'light'
+  }
+})
+
+const imageAsset = {
+  _id: 'img-1',
+  _type: 'sanity.imageAsset',
+  _createdAt: '',
+  _updatedAt: '',
+  _rev: 'r1',
+  originalFilename: 'photo.png',
+  size: 1,
+  mimeType: 'image/png',
+  url: 'https://example.com/photo.png',
+  metadata: {dimensions: {width: 100, height: 100}, isOpaque: true}
+} as ImageAsset
+
+const fileAsset = {
+  _id: 'file-1',
+  _type: 'sanity.fileAsset',
+  _createdAt: '',
+  _updatedAt: '',
+  _rev: 'r1',
+  originalFilename: 'doc.pdf',
+  extension: 'pdf',
+  size: 1,
+  mimeType: 'application/pdf',
+  url: 'https://example.com/doc.pdf'
+} as FileAsset
+
+function assetItem(asset: ImageAsset | FileAsset, partial?: Partial<AssetItem>): AssetItem {
+  return {
+    _type: 'asset',
+    asset,
+    picked: false,
+    updating: false,
+    ...partial
+  }
+}
+
+function assetsState(byIds: Record<string, AssetItem>, extra?: Partial<typeof assetsInitialState>) {
+  return {
+    ...assetsInitialState,
+    assetTypes: ['file', 'image'] as AssetType[],
+    allIds: Object.keys(byIds),
+    byIds,
+    ...extra
+  }
+}
+
+function clickPreview() {
+  const imgs = screen.getAllByTestId('card-image')
+  const img = imgs.at(-1)
+  if (!img) {
+    throw new Error('card-image missing')
+  }
+  const target = img.parentElement
+  if (!target) {
+    throw new Error('preview wrapper missing')
+  }
+  return target
+}
+
+function clickFooterFilename(text: string) {
+  const nodes = screen.getAllByText(text)
+  const el = nodes.at(-1)
+  if (!el) {
+    throw new Error(`footer text missing: ${text}`)
+  }
+  return el
+}
+
+beforeEach(() => {
+  setShiftPressed(false)
+})
+
+describe('CardAsset', () => {
+  it('renders nothing when the asset id is not in the store', () => {
+    renderWithProviders(<CardAsset id="missing" selected={false} />, {
+      preloaded: {
+        assets: assetsState({})
+      }
+    })
+    expect(screen.queryAllByTestId('card-image')).toHaveLength(0)
+    expect(screen.queryAllByTestId('card-file-icon')).toHaveLength(0)
+  })
+
+  it('renders image preview and original filename for an image asset', () => {
+    renderWithProviders(<CardAsset id="img-1" selected={false} />, {
+      preloaded: {
+        assets: assetsState({'img-1': assetItem(imageAsset)})
+      }
+    })
+    expect(screen.getAllByTestId('card-image').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('photo.png').length).toBeGreaterThan(0)
+  })
+
+  it('renders file icon with extension for a file asset', () => {
+    renderWithProviders(<CardAsset id="file-1" selected={false} />, {
+      preloaded: {
+        assets: assetsState({'file-1': assetItem(fileAsset)})
+      }
+    })
+    const icon = screen.getAllByTestId('card-file-icon').at(-1)!
+    expect(icon).toHaveAttribute('data-extension', 'pdf')
+    expect(screen.getAllByText('doc.pdf').length).toBeGreaterThan(0)
+  })
+
+  it('opens the asset edit dialog when the preview is clicked in browse mode', async () => {
+    const user = userEvent.setup()
+    const {store} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
+      preloaded: {
+        assets: assetsState({'img-1': assetItem(imageAsset)})
+      }
+    })
+
+    await user.click(clickPreview())
+
+    expect(
+      store.getState().dialog.items.some(d => d.type === 'assetEdit' && d.assetId === 'img-1')
+    ).toBe(true)
+  })
+
+  it('calls onSelect with the asset document id when the preview is clicked in picker mode', async () => {
+    const user = userEvent.setup()
+    const onSelect = vi.fn()
+    renderWithProviders(<CardAsset id="img-1" selected={false} />, {
+      onSelect,
+      preloaded: {
+        assets: assetsState({'img-1': assetItem(imageAsset)})
+      }
+    })
+
+    await user.click(clickPreview())
+
+    expect(onSelect).toHaveBeenCalledWith([
+      {
+        kind: 'assetDocumentId',
+        value: 'img-1'
+      }
+    ])
+  })
+
+  it('toggles pick when the footer is clicked in browse mode', async () => {
+    const user = userEvent.setup()
+    const {store} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
+      preloaded: {
+        assets: assetsState({'img-1': assetItem(imageAsset, {picked: false})})
+      }
+    })
+
+    await user.click(clickFooterFilename('photo.png'))
+
+    expect(store.getState().assets.byIds['img-1'].picked).toBe(true)
+  })
+
+  it('opens asset edit from the footer when in picker mode', async () => {
+    const user = userEvent.setup()
+    const onSelect = vi.fn()
+    const {store} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
+      onSelect,
+      preloaded: {
+        assets: assetsState({'img-1': assetItem(imageAsset)})
+      }
+    })
+
+    await user.click(clickFooterFilename('photo.png'))
+
+    expect(onSelect).not.toHaveBeenCalled()
+    expect(
+      store.getState().dialog.items.some(d => d.type === 'assetEdit' && d.assetId === 'img-1')
+    ).toBe(true)
+  })
+
+  it('shift-clicks on preview to unpick when the asset is already picked', async () => {
+    const user = userEvent.setup()
+    const {store} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
+      preloaded: {
+        assets: assetsState({'img-1': assetItem(imageAsset, {picked: true})})
+      }
+    })
+
+    setShiftPressed(true)
+    await user.click(clickPreview())
+    setShiftPressed(false)
+
+    expect(store.getState().assets.byIds['img-1'].picked).toBe(false)
+  })
+
+  it('shift-clicks on preview to pick a range when not picked and lastPicked is set', async () => {
+    const user = userEvent.setup()
+    const prevAsset = {...imageAsset, _id: 'prev-1', originalFilename: 'prev.png'} as ImageAsset
+    const {store} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
+      preloaded: {
+        assets: assetsState(
+          {
+            'prev-1': assetItem(prevAsset),
+            'img-1': assetItem(imageAsset, {picked: false})
+          },
+          {lastPicked: 'prev-1'}
+        )
+      }
+    })
+
+    setShiftPressed(true)
+    await user.click(clickPreview())
+    setShiftPressed(false)
+
+    expect(store.getState().assets.byIds['img-1'].picked).toBe(true)
+    expect(store.getState().assets.byIds['prev-1'].picked).toBe(true)
+  })
+
+  it('shift-clicks on footer to pick a range when not picked', async () => {
+    const user = userEvent.setup()
+    const anchorAsset = {
+      ...imageAsset,
+      _id: 'anchor-9',
+      originalFilename: 'anchor.png'
+    } as ImageAsset
+    const {store} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
+      preloaded: {
+        assets: assetsState(
+          {
+            'anchor-9': assetItem(anchorAsset),
+            'img-1': assetItem(imageAsset, {picked: false})
+          },
+          {lastPicked: 'anchor-9'}
+        )
+      }
+    })
+
+    setShiftPressed(true)
+    await user.click(clickFooterFilename('photo.png'))
+    setShiftPressed(false)
+
+    expect(store.getState().assets.byIds['img-1'].picked).toBe(true)
+    expect(store.getState().assets.byIds['anchor-9'].picked).toBe(true)
+  })
+
+  it('shows the selection checkmark when selected and not updating', () => {
+    const {container} = renderWithProviders(<CardAsset id="img-1" selected />, {
+      preloaded: {
+        assets: assetsState({'img-1': assetItem(imageAsset, {updating: false})})
+      }
+    })
+    expect(
+      container.querySelectorAll('[data-sanity-icon="checkmark-circle"]').length
+    ).toBeGreaterThan(0)
+  })
+
+  it('does not show the checkmark overlay while updating even if selected', () => {
+    const {container} = renderWithProviders(<CardAsset id="img-1" selected />, {
+      preloaded: {
+        assets: assetsState({'img-1': assetItem(imageAsset, {updating: true})})
+      }
+    })
+    expect(container.querySelectorAll('[data-sanity-icon="checkmark-circle"]')).toHaveLength(0)
+  })
+
+  it('shows a spinner while updating', () => {
+    renderWithProviders(<CardAsset id="img-1" selected={false} />, {
+      preloaded: {
+        assets: assetsState({'img-1': assetItem(imageAsset, {updating: true})})
+      }
+    })
+    expect(document.body.querySelectorAll('[data-ui="Spinner"]').length).toBeGreaterThan(0)
+  })
+
+  it('shows a warning icon when the asset item has an error', () => {
+    const {container} = renderWithProviders(<CardAsset id="img-1" selected={false} />, {
+      preloaded: {
+        assets: assetsState({'img-1': assetItem(imageAsset, {error: 'Upload failed'})})
+      }
+    })
+    expect(
+      container.querySelectorAll('[data-sanity-icon="warning-filled"]').length
+    ).toBeGreaterThan(0)
+  })
+})