sanity-plugin-media 4.1.1 → 4.2.0

package/src/modules/assets/reducer.test.ts

@@ -0,0 +1,90 @@
+// @vitest-environment node
+
+import {describe, expect, it} from 'vitest'
+import type {AssetType, ImageAsset} from '../../types'
+import assetsReducer, {assetsActions, initialState, type AssetsReducerState} from './index'
+
+const minimalImage = {
+  _id: 'img-1',
+  _type: 'sanity.imageAsset',
+  _createdAt: '2020-01-01',
+  _updatedAt: '2020-01-01',
+  _rev: 'r1',
+  originalFilename: 'a.png',
+  size: 1,
+  mimeType: 'image/png',
+  url: 'https://example.com/a.png'
+} as ImageAsset
+
+describe('assets slice', () => {
+  function stateWithOneAsset(): AssetsReducerState {
+    return {
+      ...initialState,
+      assetTypes: ['image'] as AssetType[],
+      allIds: ['img-1'],
+      byIds: {
+        'img-1': {
+          _type: 'asset',
+          asset: minimalImage,
+          picked: false,
+          updating: false
+        }
+      }
+    }
+  }
+
+  it('pick toggles picked flag', () => {
+    let state = stateWithOneAsset()
+    state = assetsReducer(state, assetsActions.pick({assetId: 'img-1', picked: true}))
+    expect(state.byIds['img-1'].picked).toBe(true)
+    expect(state.lastPicked).toBe('img-1')
+  })
+
+  it('pickClear clears selection', () => {
+    let state = stateWithOneAsset()
+    state = assetsReducer(state, assetsActions.pick({assetId: 'img-1', picked: true}))
+    state = assetsReducer(state, assetsActions.pickClear())
+    expect(state.byIds['img-1'].picked).toBe(false)
+    expect(state.lastPicked).toBeUndefined()
+  })
+
+  it('fetchComplete merges assets', () => {
+    let state = assetsReducer({...initialState, assetTypes: ['image'] as AssetType[]}, {
+      type: '@@INIT'
+    } as never)
+    state = assetsReducer(state, assetsActions.fetchComplete({assets: [minimalImage]}))
+    expect(state.allIds).toContain('img-1')
+    expect(state.fetching).toBe(false)
+    expect(state.fetchCount).toBe(1)
+  })
+
+  it('orderSet resets page index', () => {
+    let state: AssetsReducerState = {
+      ...initialState,
+      assetTypes: ['image'] as AssetType[],
+      pageIndex: 3
+    }
+    state = assetsReducer(
+      state,
+      assetsActions.orderSet({
+        order: {field: 'size', direction: 'asc'}
+      })
+    )
+    expect(state.pageIndex).toBe(0)
+    expect(state.order.field).toBe('size')
+  })
+
+  it('listenerDeleteQueueComplete removes assets', () => {
+    let state = stateWithOneAsset()
+    state = assetsReducer(state, assetsActions.listenerDeleteQueueComplete({assetIds: ['img-1']}))
+    expect(state.allIds).toHaveLength(0)
+    expect(state.byIds['img-1']).toBeUndefined()
+  })
+
+  it('listenerUpdateQueueComplete updates asset document', () => {
+    let state = stateWithOneAsset()
+    const updated = {...minimalImage, title: 'New'}
+    state = assetsReducer(state, assetsActions.listenerUpdateQueueComplete({assets: [updated]}))
+    expect(state.byIds['img-1'].asset.title).toBe('New')
+  })
+})

package/src/modules/assets/tagsAndListenerEpics.test.ts

@@ -0,0 +1,205 @@
+// @vitest-environment node
+
+import {describe, expect, it, vi, beforeEach, afterEach} from 'vitest'
+import {
+  assetsActions,
+  assetsListenerCreateQueueEpic,
+  assetsListenerDeleteQueueEpic,
+  assetsListenerUpdateQueueEpic,
+  assetsTagsAddEpic,
+  assetsTagsRemoveEpic
+} from './index'
+import {ASSETS_ACTIONS} from './actions'
+import {createEpicTestStore} from '../../__tests__/fixtures/createEpicTestStore'
+import {
+  createMockSanityClient,
+  mockTransactionCommit
+} from '../../__tests__/fixtures/mockSanityClient'
+import {initialState as assetsInitialState} from './index'
+import type {ImageAsset, Tag} from '../../types'
+
+const sampleAsset = {
+  _id: 'a1',
+  _type: 'sanity.imageAsset',
+  _createdAt: '',
+  _updatedAt: '',
+  _rev: 'r1',
+  originalFilename: 'x.png',
+  size: 1,
+  mimeType: 'image/png',
+  url: ''
+} as ImageAsset
+
+const sampleTag: Tag = {
+  _id: 't1',
+  _type: 'media.tag',
+  _createdAt: '',
+  _updatedAt: '',
+  _rev: 'tr',
+  name: {_type: 'slug', current: 'tag-a'}
+}
+
+describe('assetsTagsAddEpic', () => {
+  it('runs transaction.commit when adding tag to picked assets', async () => {
+    const tx = mockTransactionCommit(undefined)
+    const client = createMockSanityClient({
+      transaction: vi.fn(() => tx)
+    })
+
+    const assetItem = {
+      _type: 'asset' as const,
+      asset: sampleAsset,
+      picked: true,
+      updating: false
+    }
+
+    const store = createEpicTestStore(assetsTagsAddEpic, client, {
+      assets: {
+        ...assetsInitialState,
+        assetTypes: ['image'],
+        allIds: ['a1'],
+        byIds: {a1: assetItem}
+      },
+      tags: {
+        allIds: ['t1'],
+        byIds: {
+          t1: {_type: 'tag', tag: sampleTag, picked: false, updating: false}
+        },
+        creating: false,
+        fetchCount: -1,
+        fetching: false,
+        panelVisible: true
+      }
+    })
+
+    store.dispatch(
+      ASSETS_ACTIONS.tagsAddRequest({
+        assets: [assetItem],
+        tag: sampleTag
+      })
+    )
+
+    await vi.waitFor(() => {
+      expect(tx.commit).toHaveBeenCalled()
+    })
+  })
+})
+
+describe('assetsTagsRemoveEpic', () => {
+  it('runs transaction.commit for tag removal', async () => {
+    const tx = mockTransactionCommit(undefined)
+    const client = createMockSanityClient({
+      transaction: vi.fn(() => tx)
+    })
+
+    const assetItem = {
+      _type: 'asset' as const,
+      asset: sampleAsset,
+      picked: true,
+      updating: false
+    }
+
+    const store = createEpicTestStore(assetsTagsRemoveEpic, client, {
+      assets: {
+        ...assetsInitialState,
+        assetTypes: ['image'],
+        allIds: ['a1'],
+        byIds: {a1: assetItem}
+      },
+      tags: {
+        allIds: ['t1'],
+        byIds: {
+          t1: {_type: 'tag', tag: sampleTag, picked: false, updating: false}
+        },
+        creating: false,
+        fetchCount: -1,
+        fetching: false,
+        panelVisible: true
+      }
+    })
+
+    store.dispatch(
+      ASSETS_ACTIONS.tagsRemoveRequest({
+        assets: [assetItem],
+        tag: sampleTag
+      })
+    )
+
+    await vi.waitFor(() => {
+      expect(tx.commit).toHaveBeenCalled()
+    })
+  })
+})
+
+describe('assets listener queue epics', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('assetsListenerCreateQueueEpic batches creates after buffer window', async () => {
+    const store = createEpicTestStore(assetsListenerCreateQueueEpic, createMockSanityClient(), {
+      assets: {
+        ...assetsInitialState,
+        assetTypes: ['image'],
+        allIds: ['a1'],
+        byIds: {
+          a1: {_type: 'asset', asset: sampleAsset, picked: false, updating: false}
+        }
+      }
+    })
+
+    const updated = {...sampleAsset, title: 'L'}
+    store.dispatch(assetsActions.listenerCreateQueue({asset: updated}))
+
+    await vi.advanceTimersByTimeAsync(2000)
+
+    await vi.waitFor(() => {
+      expect(store.getState().assets.byIds.a1.asset.title).toBe('L')
+    })
+  })
+
+  it('assetsListenerDeleteQueueEpic batches deletes', async () => {
+    const store = createEpicTestStore(assetsListenerDeleteQueueEpic, createMockSanityClient(), {
+      assets: {
+        ...assetsInitialState,
+        assetTypes: ['image'],
+        allIds: ['a1'],
+        byIds: {
+          a1: {_type: 'asset', asset: sampleAsset, picked: false, updating: false}
+        }
+      }
+    })
+
+    store.dispatch(assetsActions.listenerDeleteQueue({assetId: 'a1'}))
+    await vi.advanceTimersByTimeAsync(2000)
+
+    await vi.waitFor(() => {
+      expect(store.getState().assets.byIds.a1).toBeUndefined()
+    })
+  })
+
+  it('assetsListenerUpdateQueueEpic batches updates', async () => {
+    const store = createEpicTestStore(assetsListenerUpdateQueueEpic, createMockSanityClient(), {
+      assets: {
+        ...assetsInitialState,
+        assetTypes: ['image'],
+        allIds: ['a1'],
+        byIds: {
+          a1: {_type: 'asset', asset: sampleAsset, picked: false, updating: false}
+        }
+      }
+    })
+
+    const updated = {...sampleAsset, title: 'Buffered'}
+    store.dispatch(assetsActions.listenerUpdateQueue({asset: updated}))
+    await vi.advanceTimersByTimeAsync(2000)
+
+    await vi.waitFor(() => {
+      expect(store.getState().assets.byIds.a1.asset.title).toBe('Buffered')
+    })
+  })
+})

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

@@ -0,0 +1,167 @@
+// @vitest-environment node
+
+import {describe, expect, it, vi} from 'vitest'
+import {dialogClearOnAssetUpdateEpic, dialogTagCreateEpic, dialogTagDeleteEpic} from './index'
+import {assetsActions, initialState as assetsInitialState} from '../assets'
+import {tagsActions} from '../tags'
+import {createEpicTestStore} from '../../__tests__/fixtures/createEpicTestStore'
+import {createMockSanityClient} from '../../__tests__/fixtures/mockSanityClient'
+import type {ImageAsset, Tag} from '../../types'
+
+const sampleAsset = {
+  _id: 'a1',
+  _type: 'sanity.imageAsset',
+  _createdAt: '',
+  _updatedAt: '',
+  _rev: 'r1',
+  originalFilename: 'x.png',
+  size: 1,
+  mimeType: 'image/png',
+  url: 'https://example.com/x.png'
+} as ImageAsset
+
+const sampleTag: Tag = {
+  _id: 't1',
+  _type: 'media.tag',
+  _createdAt: '',
+  _updatedAt: '',
+  _rev: 'tr',
+  name: {_type: 'slug', current: 'alpha'}
+}
+
+const tagWithId = (id: string): Tag => ({
+  ...sampleTag,
+  _id: id
+})
+
+describe('dialogClearOnAssetUpdateEpic', () => {
+  it('removes the dialog when assets.updateComplete carries closeDialogId', async () => {
+    const store = createEpicTestStore(dialogClearOnAssetUpdateEpic, createMockSanityClient({}), {
+      assets: {
+        ...assetsInitialState,
+        assetTypes: ['image'],
+        allIds: ['a1'],
+        byIds: {
+          a1: {_type: 'asset', asset: sampleAsset, picked: false, updating: true}
+        }
+      },
+      dialog: {
+        items: [{id: 'a1', type: 'assetEdit', assetId: 'a1'}]
+      }
+    })
+
+    store.dispatch(assetsActions.updateComplete({asset: sampleAsset, closeDialogId: 'a1'}))
+
+    await vi.waitFor(() => {
+      expect(store.getState().dialog.items).toHaveLength(0)
+    })
+  })
+
+  it('removes the dialog when tags.updateComplete carries closeDialogId', async () => {
+    const store = createEpicTestStore(dialogClearOnAssetUpdateEpic, createMockSanityClient({}), {
+      tags: {
+        allIds: ['t1'],
+        byIds: {
+          t1: {_type: 'tag', tag: sampleTag, picked: false, updating: true}
+        },
+        creating: false,
+        fetchCount: -1,
+        fetching: false,
+        panelVisible: true
+      },
+      dialog: {
+        items: [{id: 't1', type: 'tagEdit', tagId: 't1'}]
+      }
+    })
+
+    store.dispatch(tagsActions.updateComplete({tag: sampleTag, closeDialogId: 't1'}))
+
+    await vi.waitFor(() => {
+      expect(store.getState().dialog.items).toHaveLength(0)
+    })
+  })
+
+  it('does not emit remove when closeDialogId is absent', async () => {
+    const store = createEpicTestStore(dialogClearOnAssetUpdateEpic, createMockSanityClient({}), {
+      assets: {
+        ...assetsInitialState,
+        assetTypes: ['image'],
+        allIds: ['a1'],
+        byIds: {
+          a1: {_type: 'asset', asset: sampleAsset, picked: false, updating: true}
+        }
+      },
+      dialog: {
+        items: [{id: 'a1', type: 'assetEdit', assetId: 'a1'}]
+      }
+    })
+
+    store.dispatch(assetsActions.updateComplete({asset: sampleAsset}))
+
+    expect(store.getState().dialog.items).toHaveLength(1)
+  })
+})
+
+describe('dialogTagCreateEpic', () => {
+  it('dispatches inlineTagCreate when createComplete includes assetId', async () => {
+    const store = createEpicTestStore(dialogTagCreateEpic, createMockSanityClient({}), {
+      dialog: {
+        items: [{id: 'a1', type: 'assetEdit', assetId: 'a1'}]
+      }
+    })
+
+    store.dispatch(tagsActions.createComplete({assetId: 'a1', tag: sampleTag}))
+
+    await vi.waitFor(() => {
+      const item = store.getState().dialog.items[0]
+      expect(item?.type).toBe('assetEdit')
+      expect('lastCreatedTag' in item && item.lastCreatedTag).toEqual({
+        label: 'alpha',
+        value: 't1'
+      })
+    })
+  })
+
+  it('removes tag create dialog when createComplete has no assetId', async () => {
+    const store = createEpicTestStore(dialogTagCreateEpic, createMockSanityClient({}), {
+      dialog: {
+        items: [{id: 'tagCreate', type: 'tagCreate'}]
+      }
+    })
+
+    store.dispatch(tagsActions.createComplete({tag: sampleTag}))
+
+    await vi.waitFor(() => {
+      expect(store.getState().dialog.items).toHaveLength(0)
+    })
+  })
+})
+
+describe('dialogTagDeleteEpic', () => {
+  it('dispatches inlineTagRemove with listener tag ids', async () => {
+    const store = createEpicTestStore(dialogTagDeleteEpic, createMockSanityClient({}), {
+      tags: {
+        allIds: ['t9'],
+        byIds: {
+          t9: {_type: 'tag', tag: tagWithId('t9'), picked: false, updating: false}
+        },
+        creating: false,
+        fetchCount: -1,
+        fetching: false,
+        panelVisible: true
+      },
+      dialog: {
+        items: [{id: 'a1', type: 'assetEdit', assetId: 'a1'}]
+      }
+    })
+
+    store.dispatch(tagsActions.listenerDeleteQueueComplete({tagIds: ['t9']}))
+
+    await vi.waitFor(() => {
+      expect(store.getState().dialog.items[0]).toMatchObject({
+        type: 'assetEdit',
+        lastRemovedTagIds: ['t9']
+      })
+    })
+  })
+})

package/src/modules/dialog/reducer.test.ts

@@ -0,0 +1,184 @@
+// @vitest-environment node
+
+import {describe, expect, it} from 'vitest'
+import {DIALOG_ACTIONS} from './actions'
+import dialogReducer, {dialogActions} from './index'
+import {assetsActions} from '../assets'
+import {ASSETS_ACTIONS} from '../assets/actions'
+import {tagsActions} from '../tags'
+import type {AssetItem, ImageAsset, Tag} from '../../types'
+import {createTestRootState} from '../../__tests__/fixtures/rootState'
+
+const sampleAsset = {
+  _id: 'a1',
+  _type: 'sanity.imageAsset',
+  _createdAt: '',
+  _updatedAt: '',
+  _rev: 'r1',
+  originalFilename: 'x.png',
+  size: 1,
+  mimeType: 'image/png',
+  url: 'https://example.com/x.png'
+} as ImageAsset
+
+const sampleTag: Tag = {
+  _id: 't1',
+  _type: 'media.tag',
+  _createdAt: '',
+  _updatedAt: '',
+  _rev: 'tr',
+  name: {_type: 'slug', current: 'alpha'}
+}
+
+const assetItem = (asset: ImageAsset = sampleAsset): AssetItem => ({
+  _type: 'asset',
+  asset,
+  picked: false,
+  updating: false
+})
+
+function dialogState() {
+  return createTestRootState().dialog
+}
+
+describe('dialog slice reducers', () => {
+  it('clear removes all items', () => {
+    const state = dialogReducer(
+      {...dialogState(), items: [{id: 'x', type: 'tags'}]},
+      dialogActions.clear()
+    )
+    expect(state.items).toEqual([])
+  })
+
+  it('remove filters out the dialog with the given id', () => {
+    const state = dialogReducer(
+      {
+        ...dialogState(),
+        items: [
+          {id: 'a', type: 'tags'},
+          {id: 'b', type: 'searchFacets'}
+        ]
+      },
+      dialogActions.remove({id: 'a'})
+    )
+    expect(state.items).toEqual([{id: 'b', type: 'searchFacets'}])
+  })
+
+  it('showAssetEdit appends an asset edit dialog', () => {
+    const state = dialogReducer(dialogState(), dialogActions.showAssetEdit({assetId: 'a1'}))
+    expect(state.items).toEqual([{assetId: 'a1', id: 'a1', type: 'assetEdit'}])
+  })
+
+  it('showSearchFacets and showTags append the expected dialogs', () => {
+    let state = dialogReducer(dialogState(), dialogActions.showSearchFacets())
+    state = dialogReducer(state, dialogActions.showTags())
+    expect(state.items).toEqual([
+      {id: 'searchFacets', type: 'searchFacets'},
+      {id: 'tags', type: 'tags'}
+    ])
+  })
+
+  it('inlineTagCreate sets lastCreatedTag on matching assetEdit items', () => {
+    const state = dialogReducer(
+      {
+        ...dialogState(),
+        items: [
+          {id: 'a1', type: 'assetEdit', assetId: 'a1'},
+          {id: 'a2', type: 'assetEdit', assetId: 'a2'}
+        ]
+      },
+      dialogActions.inlineTagCreate({assetId: 'a1', tag: sampleTag})
+    )
+    const a1 = state.items.find(i => i.type === 'assetEdit' && i.assetId === 'a1')
+    const a2 = state.items.find(i => i.type === 'assetEdit' && i.assetId === 'a2')
+    expect(a1 && 'lastCreatedTag' in a1 && a1.lastCreatedTag).toEqual({
+      label: 'alpha',
+      value: 't1'
+    })
+    expect(a2).toBeDefined()
+    expect(Object.prototype.hasOwnProperty.call(a2, 'lastCreatedTag')).toBe(false)
+  })
+
+  it('inlineTagRemove sets lastRemovedTagIds on all assetEdit items', () => {
+    const state = dialogReducer(
+      {
+        ...dialogState(),
+        items: [
+          {id: 'a1', type: 'assetEdit', assetId: 'a1'},
+          {id: 'tags', type: 'tags'}
+        ]
+      },
+      dialogActions.inlineTagRemove({tagIds: ['x', 'y']})
+    )
+    const edit = state.items.find(i => i.type === 'assetEdit')
+    expect(edit && 'lastRemovedTagIds' in edit && edit.lastRemovedTagIds).toEqual(['x', 'y'])
+    const tagsPanel = state.items.find(i => i.type === 'tags')
+    expect(tagsPanel && 'lastRemovedTagIds' in tagsPanel).toBeFalsy()
+  })
+
+  it('showConfirmDeleteAssets pushes a confirm dialog wired to assets deleteRequest', () => {
+    const item = assetItem()
+    const state = dialogReducer(
+      dialogState(),
+      dialogActions.showConfirmDeleteAssets({assets: [item], closeDialogId: 'a1'})
+    )
+    const confirm = state.items[0]
+    expect(confirm?.type).toBe('confirm')
+    expect(confirm && 'title' in confirm && confirm.title).toBe('Permanently delete 1 asset?')
+    const cb = confirm && 'confirmCallbackAction' in confirm ? confirm.confirmCallbackAction : null
+    expect(cb).toEqual(assetsActions.deleteRequest({assets: [sampleAsset]}))
+  })
+
+  it('showConfirmDeleteTag pushes a confirm dialog wired to tags deleteRequest', () => {
+    const state = dialogReducer(
+      dialogState(),
+      dialogActions.showConfirmDeleteTag({closeDialogId: 't1', tag: sampleTag})
+    )
+    const confirm = state.items[0]
+    expect(confirm?.type).toBe('confirm')
+    expect(confirm && 'title' in confirm && confirm.title).toMatch(/permanently delete/i)
+    const cb = confirm && 'confirmCallbackAction' in confirm ? confirm.confirmCallbackAction : null
+    expect(cb).toEqual(tagsActions.deleteRequest({tag: sampleTag}))
+  })
+
+  it('showConfirmAssetsTagAdd uses plural copy for multiple assets', () => {
+    const a2 = {...sampleAsset, _id: 'a2', originalFilename: 'y.png'} as ImageAsset
+    const state = dialogReducer(
+      dialogState(),
+      dialogActions.showConfirmAssetsTagAdd({
+        assetsPicked: [assetItem(), assetItem(a2)],
+        tag: sampleTag
+      })
+    )
+    const confirm = state.items[0]
+    expect(confirm && 'title' in confirm && confirm.title).toContain('2 assets')
+    const cb = confirm && 'confirmCallbackAction' in confirm ? confirm.confirmCallbackAction : null
+    expect(cb).toEqual(
+      ASSETS_ACTIONS.tagsAddRequest({assets: [assetItem(), assetItem(a2)], tag: sampleTag})
+    )
+  })
+
+  it('showConfirmAssetsTagRemove pushes removal confirm with tagsRemoveRequest', () => {
+    const state = dialogReducer(
+      dialogState(),
+      dialogActions.showConfirmAssetsTagRemove({
+        assetsPicked: [assetItem()],
+        tag: sampleTag
+      })
+    )
+    const confirm = state.items[0]
+    expect(confirm && 'tone' in confirm && confirm.tone).toBe('critical')
+    const cb = confirm && 'confirmCallbackAction' in confirm ? confirm.confirmCallbackAction : null
+    expect(cb).toEqual(ASSETS_ACTIONS.tagsRemoveRequest({assets: [assetItem()], tag: sampleTag}))
+  })
+
+  it('DIALOG_ACTIONS.showTagCreate appends tag create dialog', () => {
+    const state = dialogReducer(dialogState(), DIALOG_ACTIONS.showTagCreate())
+    expect(state.items).toEqual([{id: 'tagCreate', type: 'tagCreate'}])
+  })
+
+  it('DIALOG_ACTIONS.showTagEdit appends tag edit dialog with tag id', () => {
+    const state = dialogReducer(dialogState(), DIALOG_ACTIONS.showTagEdit({tagId: 't9'}))
+    expect(state.items).toEqual([{id: 't9', tagId: 't9', type: 'tagEdit'}])
+  })
+})