sanity-plugin-media 4.1.0 → 4.2.0

package/src/modules/selectors.test.ts

@@ -0,0 +1,20 @@
+// @vitest-environment node
+
+import {describe, expect, it} from 'vitest'
+import type {RootReducerState} from './types'
+import {selectCombinedItems} from './selectors'
+
+describe('selectCombinedItems', () => {
+  it('places upload items before asset items', () => {
+    const state = {
+      assets: {allIds: ['a1', 'a2']},
+      uploads: {allIds: ['u1']}
+    } as RootReducerState
+
+    expect(selectCombinedItems(state)).toEqual([
+      {id: 'u1', type: 'upload'},
+      {id: 'a1', type: 'asset'},
+      {id: 'a2', type: 'asset'}
+    ])
+  })
+})

package/src/modules/tags/epics.test.ts

@@ -0,0 +1,95 @@
+// @vitest-environment node
+
+import {describe, expect, it, vi} from 'vitest'
+import {of} from 'rxjs'
+import {tagsCreateEpic, tagsDeleteEpic, tagsActions} from './index'
+import {createEpicTestStore} from '../../__tests__/fixtures/createEpicTestStore'
+import {
+  createMockSanityClient,
+  mockTransactionCommit
+} from '../../__tests__/fixtures/mockSanityClient'
+import type {Tag} from '../../types'
+
+const sampleTag: Tag = {
+  _id: 't1',
+  _type: 'media.tag',
+  _createdAt: '',
+  _updatedAt: '',
+  _rev: 'tr',
+  name: {_type: 'slug', current: 'alpha'}
+}
+
+describe('tagsCreateEpic', () => {
+  it('creates tag when checkTagName passes', async () => {
+    const client = createMockSanityClient({
+      fetch: vi.fn().mockResolvedValue(0),
+      observable: {
+        create: vi.fn(() => of(sampleTag))
+      }
+    })
+
+    const store = createEpicTestStore(tagsCreateEpic, client)
+    store.dispatch(tagsActions.createRequest({name: 'alpha'}))
+
+    await vi.waitFor(() => {
+      expect(store.getState().tags.byIds.t1?.tag).toEqual(sampleTag)
+      expect(client.observable.create).toHaveBeenCalled()
+    })
+  })
+
+  it('dispatches createError when tag exists', async () => {
+    const client = createMockSanityClient({
+      fetch: vi.fn().mockResolvedValue(1),
+      observable: {
+        create: vi.fn(() => of(sampleTag))
+      }
+    })
+
+    const store = createEpicTestStore(tagsCreateEpic, client)
+    store.dispatch(tagsActions.createRequest({name: 'dup'}))
+
+    await vi.waitFor(() => {
+      expect(store.getState().tags.creatingError?.statusCode).toBe(409)
+      expect(client.observable.create).not.toHaveBeenCalled()
+    })
+  })
+})
+
+describe('tagsDeleteEpic', () => {
+  it('fetches referencing assets and commits transaction', async () => {
+    const tx = mockTransactionCommit(undefined)
+    const client = createMockSanityClient({
+      observable: {
+        fetch: vi.fn(() =>
+          of([
+            {_id: 'a1', _rev: 'r1', opt: {}},
+            {_id: 'a2', _rev: 'r2', opt: {}}
+          ])
+        )
+      },
+      transaction: vi.fn(() => tx)
+    })
+
+    const store = createEpicTestStore(tagsDeleteEpic, client, {
+      tags: {
+        allIds: ['t1'],
+        byIds: {
+          t1: {_type: 'tag', tag: sampleTag, picked: false, updating: false}
+        },
+        creating: false,
+        fetchCount: -1,
+        fetching: false,
+        panelVisible: true
+      }
+    })
+
+    store.dispatch(tagsActions.deleteRequest({tag: sampleTag}))
+
+    await vi.waitFor(() => {
+      expect(tx.patch).toHaveBeenCalled()
+      expect(tx.delete).toHaveBeenCalledWith('t1')
+      expect(tx.commit).toHaveBeenCalled()
+      expect(store.getState().tags.byIds.t1).toBeUndefined()
+    })
+  })
+})

package/src/modules/tags/index.test.ts

@@ -0,0 +1,41 @@
+// @vitest-environment node
+
+import {describe, expect, it} from 'vitest'
+import type {Tag} from '../../types'
+import tagsReducer, {tagsActions} from './index'
+
+const sampleTag: Tag = {
+  _id: 'tag-1',
+  _type: 'media.tag',
+  _createdAt: '2020-01-01',
+  _updatedAt: '2020-01-01',
+  _rev: 'r1',
+  name: {_type: 'slug', current: 'alpha'}
+}
+
+describe('tags slice', () => {
+  it('createComplete adds tag', () => {
+    let state = tagsReducer(undefined, {type: '@@INIT'} as never)
+    state = tagsReducer(state, tagsActions.createComplete({tag: sampleTag}))
+    expect(state.allIds).toContain('tag-1')
+    expect(state.byIds['tag-1'].tag).toEqual(sampleTag)
+    expect(state.creating).toBe(false)
+  })
+
+  it('deleteComplete removes tag', () => {
+    let state = tagsReducer(undefined, {type: '@@INIT'} as never)
+    state = tagsReducer(state, tagsActions.createComplete({tag: sampleTag}))
+    state = tagsReducer(state, tagsActions.deleteComplete({tagId: 'tag-1'}))
+    expect(state.allIds).not.toContain('tag-1')
+    expect(state.byIds['tag-1']).toBeUndefined()
+  })
+
+  it('fetchComplete hydrates tag list', () => {
+    let state = tagsReducer(undefined, {type: '@@INIT'} as never)
+    state = tagsReducer(state, tagsActions.fetchRequest())
+    expect(state.fetching).toBe(true)
+    state = tagsReducer(state, tagsActions.fetchComplete({tags: [sampleTag]}))
+    expect(state.fetching).toBe(false)
+    expect(state.byIds['tag-1'].tag).toEqual(sampleTag)
+  })
+})

package/src/modules/uploads/epics.test.ts

@@ -0,0 +1,108 @@
+// @vitest-environment jsdom
+
+import {describe, expect, it, vi, beforeEach, afterEach} from 'vitest'
+import {of} from 'rxjs'
+import {uploadsAssetStartEpic, uploadsCheckRequestEpic, uploadsActions} from './index'
+import {createEpicTestStore} from '../../__tests__/fixtures/createEpicTestStore'
+import {createMockSanityClient} from '../../__tests__/fixtures/mockSanityClient'
+import {initialState as assetsInitialState} from '../assets'
+import type {SanityImageAssetDocument} from '@sanity/client'
+
+vi.mock('../../utils/generatePreviewBlobUrl', () => ({
+  generatePreviewBlobUrl$: () => of('blob:http://preview')
+}))
+
+const uploadedAsset = {
+  _id: 'asset-new',
+  _type: 'sanity.imageAsset',
+  sha1hash: 'deadbeef',
+  _createdAt: '',
+  _updatedAt: '',
+  _rev: 'r',
+  originalFilename: 'f.png',
+  mimeType: 'image/png',
+  size: 10,
+  url: ''
+} as SanityImageAssetDocument
+
+vi.mock('../../utils/uploadSanityAsset', () => ({
+  uploadAsset$: () =>
+    of({
+      type: 'complete' as const,
+      asset: uploadedAsset
+    }),
+  hashFile$: () => of('deadbeef'),
+  withMaxConcurrency: (fn: unknown) => fn
+}))
+
+describe('uploadsAssetStartEpic', () => {
+  it('dispatches preview, progress path, and uploadComplete', async () => {
+    const client = createMockSanityClient()
+
+    const store = createEpicTestStore(uploadsAssetStartEpic, client)
+
+    const file = new File(['x'], 'f.png', {type: 'image/png'})
+    const uploadItem = {
+      _type: 'upload' as const,
+      assetType: 'image' as const,
+      hash: 'deadbeef',
+      name: 'f.png',
+      size: file.size,
+      status: 'queued' as const
+    }
+
+    store.dispatch(uploadsActions.uploadStart({file, uploadItem}))
+
+    await vi.waitFor(() => {
+      expect(store.getState().uploads.byIds.deadbeef?.objectUrl).toBe('blob:http://preview')
+    })
+
+    await vi.waitFor(() => {
+      expect(store.getState().assets.byIds['asset-new']).toBeDefined()
+    })
+  })
+})
+
+describe('uploadsCheckRequestEpic', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('after delay, fetches sha hashes and dispatches checkComplete + insertUploads', async () => {
+    const client = createMockSanityClient({
+      observable: {
+        fetch: vi.fn(() => of(['hh']))
+      }
+    })
+
+    const store = createEpicTestStore(uploadsCheckRequestEpic, client, {
+      assets: {...assetsInitialState, assetTypes: ['image']}
+    })
+
+    const asset = {
+      _id: 'id-1',
+      _type: 'sanity.imageAsset',
+      sha1hash: 'hh',
+      _createdAt: '',
+      _updatedAt: '',
+      _rev: 'r',
+      originalFilename: 'f.png',
+      mimeType: 'image/png',
+      size: 1,
+      url: ''
+    } as SanityImageAssetDocument
+
+    store.dispatch(uploadsActions.checkRequest({assets: [asset]}))
+
+    await vi.advanceTimersByTimeAsync(1100)
+
+    await vi.waitFor(() => {
+      expect(client.observable.fetch).toHaveBeenCalled()
+      expect(store.getState().uploads.byIds.hh).toBeUndefined()
+    })
+  })
+})

package/src/modules/uploads/index.test.ts

@@ -0,0 +1,58 @@
+// @vitest-environment node
+
+import {describe, expect, it} from 'vitest'
+import type {UploadItem} from '../../types'
+import uploadsReducer, {uploadsActions} from './index'
+
+describe('uploads slice', () => {
+  it('uploadStart adds item to queue', () => {
+    let state = uploadsReducer(undefined, {type: '@@INIT'} as never)
+    const uploadItem = {
+      _type: 'upload',
+      assetType: 'image',
+      hash: 'abc',
+      name: 'x.png',
+      size: 1,
+      status: 'queued'
+    } as UploadItem
+
+    state = uploadsReducer(
+      state,
+      uploadsActions.uploadStart({
+        file: new File([], 'x.png'),
+        uploadItem
+      })
+    )
+
+    expect(state.allIds).toEqual(['abc'])
+    expect(state.byIds.abc).toMatchObject({hash: 'abc', status: 'queued'})
+  })
+
+  it('uploadProgress updates percent and status', () => {
+    let state = uploadsReducer(undefined, {type: '@@INIT'} as never)
+    const uploadItem = {
+      _type: 'upload',
+      assetType: 'image',
+      hash: 'h1',
+      name: 'x.png',
+      size: 1,
+      status: 'queued',
+      percent: 0
+    } as UploadItem
+
+    state = uploadsReducer(
+      state,
+      uploadsActions.uploadStart({file: new File([], 'x.png'), uploadItem})
+    )
+    state = uploadsReducer(
+      state,
+      uploadsActions.uploadProgress({
+        uploadHash: 'h1',
+        event: {percent: 42, stage: 'upload'} as any
+      })
+    )
+
+    expect(state.byIds.h1.percent).toBe(42)
+    expect(state.byIds.h1.status).toBe('uploading')
+  })
+})

package/src/operators/checkTagName.test.ts

@@ -0,0 +1,28 @@
+// @vitest-environment node
+
+import {describe, expect, it, vi} from 'vitest'
+import {firstValueFrom, of} from 'rxjs'
+import type {SanityClient} from '@sanity/client'
+import checkTagName from './checkTagName'
+
+describe('checkTagName', () => {
+  it('errors with 409 when a tag with the same slug exists', async () => {
+    const client = {
+      fetch: vi.fn().mockResolvedValue(1)
+    } as unknown as SanityClient
+
+    await expect(
+      firstValueFrom(of(null).pipe(checkTagName(client, 'existing')))
+    ).rejects.toMatchObject({statusCode: 409, message: 'Tag already exists'})
+  })
+
+  it('emits true when name is available', async () => {
+    const client = {
+      fetch: vi.fn().mockResolvedValue(0)
+    } as unknown as SanityClient
+
+    await expect(firstValueFrom(of(null).pipe(checkTagName(client, 'fresh-name')))).resolves.toBe(
+      true
+    )
+  })
+})

package/src/types/index.ts

@@ -8,9 +8,12 @@ import type {
 import type {ComponentType, JSX} from 'react'
 import type {Epic} from 'redux-observable'
 import * as z from 'zod'
-import {assetFormSchema, tagFormSchema, tagOptionSchema} from '../formSchema'
+import {getAssetFormSchema, tagFormSchema, tagOptionSchema} from '../formSchema'
 import type {RootReducerState} from '../modules/types'
 import type {DetailsProps} from '../components/DialogAssetEdit/Details'
+import type {SUPPORTED_ASSET_TYPES} from '../constants'
+
+export type AssetTypes = (typeof SUPPORTED_ASSET_TYPES)[number]
 
 export type MediaToolOptions = {
   maximumUploadSize?: number
@@ -19,22 +22,35 @@ export type MediaToolOptions = {
       DetailsProps & {renderDefaultDetails: (props: DetailsProps) => JSX.Element}
     >
   }
-  creditLine: {
+  creditLine?: {
     enabled: boolean
     excludeSources?: string | string[]
   }
   directUploads?: boolean
+  /**
+   * Optional locales following Sanity recommended scheme: [{ id, title }]
+   * https://www.sanity.io/docs/studio/localization#k4da239411955
+   */
+  locales?: Locale[]
+}
+
+export type Locale = {
+  title: string
+  id: string
+  [key: string]: unknown
 }
 
+type LocalizedString = string | Record<string, string>
+
 type CustomFields = {
-  altText?: string
-  description?: string
+  altText?: LocalizedString
+  description?: LocalizedString
   opt?: {
     media?: {
       tags?: SanityReference[]
     }
   }
-  title?: string
+  title?: LocalizedString
 }
 
 type SearchFacetInputCommon = {
@@ -48,7 +64,7 @@ type SearchFacetInputCommon = {
 
 export type Asset = FileAsset | ImageAsset
 
-export type AssetFormData = z.infer<typeof assetFormSchema>
+export type AssetFormData = z.infer<ReturnType<typeof getAssetFormSchema>>
 
 export type AssetItem = {
   _type: 'asset'
@@ -164,7 +180,7 @@ export type FileAsset = SanityAssetDocument &
 export type ImageAsset = SanityImageAssetDocument &
   CustomFields & {
     _type: 'sanity.imageAsset'
-    creditLine?: string
+    creditLine?: LocalizedString
   }
 
 export type MarkDef = {_key: string; _type: string}

package/src/utils/blocksToText.test.ts

@@ -0,0 +1,42 @@
+import {describe, expect, it} from 'vitest'
+import blocksToText from './blocksToText'
+import type {Block} from '../types'
+
+describe('blocksToText', () => {
+  it('returns plain strings unchanged', () => {
+    expect(blocksToText('hello')).toBe('hello')
+    expect(blocksToText('')).toBe('')
+  })
+
+  it('returns empty string for non-array non-string input', () => {
+    expect(blocksToText(null as unknown as string)).toBe('')
+  })
+
+  it('joins block children text with blank lines between blocks', () => {
+    const blocks: Block[] = [
+      {
+        _type: 'block',
+        _key: 'a',
+        markDefs: [],
+        children: [{_key: 'a1', text: 'Line one', marks: []}]
+      },
+      {
+        _type: 'block',
+        _key: 'b',
+        markDefs: [],
+        children: [{_key: 'b1', text: 'Line two', marks: []}]
+      }
+    ]
+    expect(blocksToText(blocks)).toBe('Line one\n\nLine two')
+  })
+
+  it('removes non-block nodes by default', () => {
+    const blocks = [{_type: 'image', _key: 'i', markDefs: [], children: []}] as unknown as Block[]
+    expect(blocksToText(blocks)).toBe('')
+  })
+
+  it('keeps placeholder for non-block nodes when nonTextBehavior is not remove', () => {
+    const blocks = [{_type: 'image', _key: 'i', markDefs: [], children: []}] as unknown as Block[]
+    expect(blocksToText(blocks, {nonTextBehavior: 'keep'})).toBe('[image block]')
+  })
+})

package/src/utils/constructFilter.test.ts

@@ -0,0 +1,119 @@
+// @vitest-environment node
+
+import {describe, expect, it} from 'vitest'
+import {inputs} from '../config/searchFacets'
+import type {SearchFacetInputProps} from '../types'
+import constructFilter from './constructFilter'
+
+describe('constructFilter', () => {
+  it('includes base filter that excludes drafts and restricts asset types', () => {
+    const q = constructFilter({
+      assetTypes: ['image', 'file'],
+      searchFacets: [],
+      searchQuery: undefined
+    })
+
+    expect(q).toContain('_type in ["sanity.imageAsset","sanity.fileAsset"]')
+    expect(q).toContain('!(_id in path("drafts.**"))')
+  })
+
+  it('limits to a single asset type in picker mode', () => {
+    const q = constructFilter({
+      assetTypes: ['image'],
+      searchFacets: [],
+      searchQuery: undefined
+    })
+
+    expect(q).toContain('_type in ["sanity.imageAsset"]')
+  })
+
+  it('appends text search on trimmed query', () => {
+    const q = constructFilter({
+      assetTypes: ['file', 'image'],
+      searchFacets: [],
+      searchQuery: '  hello  '
+    })
+
+    expect(q).toContain(
+      "[_id, altText, assetId, creditLine, description, originalFilename, title, url] match '*hello*'"
+    )
+  })
+
+  it('composes number facet with field modifier (size / KB)', () => {
+    const q = constructFilter({
+      assetTypes: ['image'],
+      searchFacets: [{...inputs.size, value: 500} as SearchFacetInputProps],
+      searchQuery: undefined
+    })
+
+    expect(q.replace(/\s+/g, ' ')).toContain('round(size / 1000) > 500')
+  })
+
+  it('composes searchable tag facet (references)', () => {
+    const facet = {
+      ...inputs.tag,
+      operatorType: 'references' as const,
+      value: {label: 'T', value: 'tag-id-1'}
+    } as SearchFacetInputProps
+
+    const q = constructFilter({
+      assetTypes: ['image', 'file'],
+      searchFacets: [facet],
+      searchQuery: undefined
+    })
+
+    expect(q).toContain("references('tag-id-1')")
+  })
+
+  it('composes select facet (inUse)', () => {
+    const q = constructFilter({
+      assetTypes: ['image', 'file'],
+      searchFacets: [structuredClone(inputs.inUse)],
+      searchQuery: undefined
+    })
+
+    expect(q).toContain('count(*[references(^._id)]) > 0')
+  })
+
+  it('AND-joins base filter, search text, and multiple facets', () => {
+    const q = constructFilter({
+      assetTypes: ['image', 'file'],
+      searchFacets: [{...inputs.title}, {...inputs.inUse}],
+      searchQuery: 'x'
+    })
+
+    const parts = q.split(' && ')
+    expect(parts.length).toBeGreaterThanOrEqual(4)
+  })
+
+  it('matches snapshot for stable GROQ shape (apiVersion / filter regressions)', () => {
+    const q = constructFilter({
+      assetTypes: ['file', 'image'],
+      searchFacets: [
+        {...inputs.size, value: 100} as SearchFacetInputProps,
+        {
+          ...inputs.tag,
+          operatorType: 'references',
+          value: {label: 'Example', value: 'abc123'}
+        } as SearchFacetInputProps
+      ],
+      searchQuery: 'portrait'
+    })
+
+    const normalized = q.replace(/\s+/g, ' ').trim()
+
+    expect(normalized).toBe(
+      '_type in ["sanity.fileAsset","sanity.imageAsset"] && !(_id in path("drafts.**")) && [_id, altText, assetId, creditLine, description, originalFilename, title, url] match \'*portrait*\' && round(size / 1000) > 100 && references(\'abc123\')'
+    )
+  })
+
+  it('omits text search fragment when searchQuery is undefined', () => {
+    const q = constructFilter({
+      assetTypes: ['image', 'file'],
+      searchFacets: [],
+      searchQuery: undefined
+    })
+
+    expect(q).not.toContain('match ')
+  })
+})

package/src/utils/generatePreviewBlobUrl.test.ts

@@ -0,0 +1,69 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+import {firstValueFrom} from 'rxjs'
+import {generatePreviewBlobUrl$} from './generatePreviewBlobUrl'
+
+describe('generatePreviewBlobUrl$', () => {
+  const origCreateElement = document.createElement.bind(document)
+
+  beforeEach(() => {
+    class MockImage {
+      onload: (() => void) | null = null
+      width = 400
+      height = 200
+      private _src = ''
+      get src() {
+        return this._src
+      }
+      set src(v: string) {
+        this._src = v
+        queueMicrotask(() => this.onload?.())
+      }
+    }
+    vi.stubGlobal('Image', MockImage)
+
+    vi.spyOn(document, 'createElement').mockImplementation((tagName: string) => {
+      if (tagName === 'canvas') {
+        const el = origCreateElement('canvas')
+        vi.spyOn(el, 'getContext').mockReturnValue({
+          drawImage: vi.fn()
+        } as unknown as CanvasRenderingContext2D)
+        /* eslint-disable callback-return, consistent-return -- HTMLCanvasElement#toBlob sync test stub */
+        el.toBlob = function toBlob(cb: ((blob: Blob | null) => void) | null | undefined) {
+          if (cb) {
+            cb(new Blob(['x'], {type: 'image/jpeg'}))
+          }
+        }
+        /* eslint-enable callback-return, consistent-return */
+        return el
+      }
+      return origCreateElement(tagName)
+    })
+
+    const createObjectURL = vi.fn(() => 'blob:mock-preview')
+    const revokeObjectURL = vi.fn()
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      writable: true,
+      value: createObjectURL
+    })
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      writable: true,
+      value: revokeObjectURL
+    })
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+    vi.restoreAllMocks()
+    delete (URL as Partial<typeof URL> & {createObjectURL?: unknown}).createObjectURL
+    delete (URL as Partial<typeof URL> & {revokeObjectURL?: unknown}).revokeObjectURL
+  })
+
+  it('emits a blob URL when canvas preview succeeds', async () => {
+    const url = await firstValueFrom(
+      generatePreviewBlobUrl$(new File(['x'], 'photo.jpg', {type: 'image/jpeg'}))
+    )
+    expect(url).toBe('blob:mock-preview')
+  })
+})

package/src/utils/getAssetResolution.test.ts

@@ -0,0 +1,12 @@
+import {describe, expect, it} from 'vitest'
+import getAssetResolution from './getAssetResolution'
+import type {ImageAsset} from '../types'
+
+describe('getAssetResolution', () => {
+  it('formats width x height with px suffix', () => {
+    const asset = {
+      metadata: {dimensions: {width: 1920, height: 1080}}
+    } as ImageAsset
+    expect(getAssetResolution(asset)).toBe('1920x1080px')
+  })
+})