sanity-plugin-media 4.1.0 → 4.2.0

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

@@ -0,0 +1,72 @@
+// @vitest-environment node
+
+import {describe, expect, it, vi} from 'vitest'
+import {of, throwError} from 'rxjs'
+import {assetsActions, assetsFetchEpic} from './index'
+import {createEpicTestStore} from '../../__tests__/fixtures/createEpicTestStore'
+import {createMockSanityClient} from '../../__tests__/fixtures/mockSanityClient'
+import type {ImageAsset} from '../../types'
+
+function assertFetchSucceeded(store: ReturnType<typeof createEpicTestStore>, asset: ImageAsset) {
+  expect(store.getState().assets.byIds.a1?.asset).toEqual(asset)
+  expect(store.getState().assets.fetching).toBe(false)
+}
+
+function assertFetchFailed(store: ReturnType<typeof createEpicTestStore>) {
+  expect(store.getState().assets.fetchingError?.message).toBe('boom')
+}
+
+const sampleAsset = {
+  _id: 'a1',
+  _type: 'sanity.imageAsset',
+  _createdAt: '',
+  _updatedAt: '',
+  _rev: 'r',
+  originalFilename: 'x.png',
+  size: 1,
+  mimeType: 'image/png',
+  url: ''
+} as ImageAsset
+
+describe('assetsFetchEpic', () => {
+  it('dispatches fetchComplete when observable.fetch succeeds', async () => {
+    const client = createMockSanityClient({
+      observable: {
+        fetch: vi.fn(() => of({items: [sampleAsset]}))
+      }
+    })
+
+    const store = createEpicTestStore(assetsFetchEpic, client)
+    store.dispatch(
+      assetsActions.fetchRequest({
+        params: {},
+        queryFilter: '_type == "sanity.imageAsset"',
+        selector: '',
+        sort: ''
+      })
+    )
+
+    await vi.waitFor(() => assertFetchSucceeded(store, sampleAsset))
+  })
+
+  it('dispatches fetchError when fetch fails', async () => {
+    const fetchErr = throwError(() => ({message: 'boom', statusCode: 500}))
+    const client = createMockSanityClient({
+      observable: {
+        fetch: vi.fn(() => fetchErr)
+      }
+    })
+
+    const store = createEpicTestStore(assetsFetchEpic, client)
+    store.dispatch(
+      assetsActions.fetchRequest({
+        params: {},
+        queryFilter: '_type == "sanity.imageAsset"',
+        selector: '',
+        sort: ''
+      })
+    )
+
+    await vi.waitFor(() => assertFetchFailed(store))
+  })
+})

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']
+      })
+    })
+  })
+})