sanity-plugin-media 4.1.1 → 4.2.0

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,7 +8,7 @@ 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'
@@ -22,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 = {
@@ -51,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'
@@ -167,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')
+  })
+})

package/src/utils/getDocumentAssetIds.test.ts

@@ -0,0 +1,49 @@
+// @vitest-environment node
+
+import {describe, expect, it} from 'vitest'
+import getDocumentAssetIds from './getDocumentAssetIds'
+
+describe('getDocumentAssetIds', () => {
+  it('returns empty array for document without asset refs', () => {
+    expect(getDocumentAssetIds({_id: 'doc1', _type: 'post'} as any)).toEqual([])
+  })
+
+  it('collects asset _ref from nested portable text–like structures', () => {
+    const doc = {
+      _id: 'doc1',
+      _type: 'post',
+      body: [
+        {
+          _type: 'block',
+          asset: {_type: 'reference', _ref: 'image-asset-1'}
+        }
+      ]
+    } as any
+
+    expect(getDocumentAssetIds(doc)).toEqual(['image-asset-1'])
+  })
+
+  it('dedupes and sorts refs', () => {
+    const doc = {
+      _id: 'doc1',
+      _type: 'post',
+      modules: [
+        {image: {asset: {_type: 'reference', _ref: 'b'}}},
+        {image: {asset: {_type: 'reference', _ref: 'a'}}},
+        {image: {asset: {_type: 'reference', _ref: 'b'}}}
+      ]
+    } as any
+
+    expect(getDocumentAssetIds(doc)).toEqual(['a', 'b'])
+  })
+
+  it('ignores reference nodes that are not asset references', () => {
+    const doc = {
+      _id: 'doc1',
+      _type: 'post',
+      author: {_type: 'reference', _ref: 'person-1'}
+    } as any
+
+    expect(getDocumentAssetIds(doc)).toEqual([])
+  })
+})

package/src/utils/getSchemeColor.test.ts

@@ -0,0 +1,11 @@
+import {describe, expect, it} from 'vitest'
+import {getSchemeColor} from './getSchemeColor'
+
+describe('getSchemeColor', () => {
+  it('returns a hex or theme string for light and dark schemes', () => {
+    expect(getSchemeColor('light', 'bg')).toMatch(/^#/)
+    expect(getSchemeColor('dark', 'bg')).toMatch(/^#/)
+    expect(getSchemeColor('light', 'spotBlue')).toBeTruthy()
+    expect(getSchemeColor('dark', 'inputEnabledBorder')).toBeTruthy()
+  })
+})

package/src/utils/getTagSelectOptions.test.ts

@@ -0,0 +1,43 @@
+import {describe, expect, it} from 'vitest'
+import getTagSelectOptions from './getTagSelectOptions'
+import type {Tag, TagItem} from '../types'
+
+function tagItem(partial: Partial<TagItem> & Pick<TagItem, 'tag'>): TagItem {
+  return {
+    _type: 'tag',
+    picked: false,
+    updating: false,
+    ...partial
+  }
+}
+
+const makeTag = (id: string, name: string): Tag => ({
+  _id: id,
+  _type: 'media.tag',
+  _createdAt: '',
+  _updatedAt: '',
+  _rev: 'r1',
+  name: {_type: 'slug', current: name}
+})
+
+describe('getTagSelectOptions', () => {
+  it('maps tag items to label/value options', () => {
+    const tags = [tagItem({tag: makeTag('t1', 'alpha')}), tagItem({tag: makeTag('t2', 'beta')})]
+    expect(getTagSelectOptions(tags)).toEqual([
+      {label: 'alpha', value: 't1'},
+      {label: 'beta', value: 't2'}
+    ])
+  })
+
+  it('returns an empty array for an empty list', () => {
+    expect(getTagSelectOptions([])).toEqual([])
+  })
+
+  it('skips items without a tag', () => {
+    const tags = [
+      tagItem({tag: makeTag('t1', 'ok')}),
+      {_type: 'tag', tag: undefined, picked: false, updating: false} as unknown as TagItem
+    ]
+    expect(getTagSelectOptions(tags)).toEqual([{label: 'ok', value: 't1'}])
+  })
+})

package/src/utils/getUniqueDocuments.test.ts

@@ -0,0 +1,25 @@
+import {describe, expect, it} from 'vitest'
+import type {SanityDocument} from '@sanity/client'
+import {getUniqueDocuments} from './getUniqueDocuments'
+
+describe('getUniqueDocuments', () => {
+  it('drops published documents when a drafts.* sibling exists', () => {
+    const docs: SanityDocument[] = [
+      {_id: 'drafts.post1', _type: 'post'} as SanityDocument,
+      {_id: 'post1', _type: 'post'} as SanityDocument
+    ]
+    expect(getUniqueDocuments(docs)).toEqual([{_id: 'drafts.post1', _type: 'post'}])
+  })
+
+  it('keeps published-only and draft-only ids', () => {
+    const docs: SanityDocument[] = [
+      {_id: 'onlyPub', _type: 'x'} as SanityDocument,
+      {_id: 'drafts.onlyDraft', _type: 'x'} as SanityDocument
+    ]
+    expect(getUniqueDocuments(docs)).toEqual(docs)
+  })
+
+  it('returns an empty array for an empty list', () => {
+    expect(getUniqueDocuments([])).toEqual([])
+  })
+})

package/src/utils/imageDprUrl.test.ts

@@ -0,0 +1,45 @@
+import {afterEach, describe, expect, it} from 'vitest'
+import imageDprUrl from './imageDprUrl'
+import type {ImageAsset} from '../types'
+
+const asset = {
+  _id: 'a1',
+  _type: 'sanity.imageAsset',
+  _createdAt: '',
+  _updatedAt: '',
+  _rev: 'r1',
+  originalFilename: 'x.png',
+  size: 1,
+  mimeType: 'image/png',
+  url: 'https://cdn.test/image.png',
+  metadata: {dimensions: {width: 100, height: 100}, isOpaque: true}
+} as ImageAsset
+
+describe('imageDprUrl', () => {
+  const dpr = window.devicePixelRatio
+
+  afterEach(() => {
+    Object.defineProperty(window, 'devicePixelRatio', {value: dpr, configurable: true})
+  })
+
+  it('scales width by devicePixelRatio and sets fit=max', () => {
+    Object.defineProperty(window, 'devicePixelRatio', {value: 2, configurable: true})
+    const url = imageDprUrl(asset, {width: 400})
+    expect(url).toBe('https://cdn.test/image.png?fit=max&w=800')
+  })
+
+  it('includes height when provided, scaled by dpr', () => {
+    Object.defineProperty(window, 'devicePixelRatio', {value: 2, configurable: true})
+    const url = imageDprUrl(asset, {width: 300, height: 200})
+    expect(url).toBe('https://cdn.test/image.png?fit=max&w=600&h=400')
+  })
+
+  it('uses multiplier 1 when devicePixelRatio is missing', () => {
+    Object.defineProperty(window, 'devicePixelRatio', {
+      value: undefined as unknown as number,
+      configurable: true
+    })
+    const url = imageDprUrl(asset, {width: 100})
+    expect(url).toBe('https://cdn.test/image.png?fit=max&w=100')
+  })
+})