mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
feat: Add pagination support for media assets history (#6373)
## Summary - Implement pagination for media assets history to handle large datasets efficiently - Add infinite scroll support with approach-end event handler - Support offset parameter in history API for both V1 and V2 endpoints ## Changes - Add offset parameter support to `api.getHistory()` method - Update history fetchers (V1/V2) to include offset in API requests - Implement `loadMoreHistory()` in assetsStore with pagination state management - Add `loadMore`, `hasMore`, and `isLoadingMore` to IAssetsProvider interface - Add approach-end handler in AssetsSidebarTab for infinite scroll - Set BATCH_SIZE to 200 for efficient loading ## Implementation Improvements Simplified offset-based pagination by removing unnecessary reconciliation logic: - Remove `reconcileHistory`, `taskItemsMap`, `lastKnownQueueIndex` (offset is sufficient) - Replace `assetItemsByPromptId` Map → `loadedIds` Set (store IDs only) - Replace `findInsertionIndex` binary search → push + sort (faster for batch operations) - Replace `loadingPromise` → `isLoadingMore` boolean (simpler state management) - Fix memory leak by cleaning up Set together with array slice ## Test Plan - [x] TypeScript compilation passes - [x] ESLint and Prettier formatting applied - [x] Test infinite scroll in media assets tab - [x] Verify network requests include correct offset parameter - [x] Confirm no duplicate items when loading more 🤖 Generated with [Claude Code](https://claude.ai/code) --------- Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Jin Yi
@@ -14,8 +14,8 @@
|
||||
<slot name="header" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- h-0 to force scrollpanel to grow -->
|
||||
<ScrollPanel class="h-0 grow">
|
||||
<!-- min-h-0 to force scrollpanel to grow -->
|
||||
<ScrollPanel class="min-h-0 grow">
|
||||
<slot name="body" />
|
||||
</ScrollPanel>
|
||||
<div v-if="slots.footer">
|
||||
|
||||
@@ -41,9 +41,27 @@
|
||||
</TabList>
|
||||
</template>
|
||||
<template #body>
|
||||
<div v-if="displayAssets.length" class="relative size-full">
|
||||
<!-- Loading state -->
|
||||
<div v-if="loading">
|
||||
<ProgressSpinner class="absolute left-1/2 w-[50px] -translate-x-1/2" />
|
||||
</div>
|
||||
<!-- Empty state -->
|
||||
<div v-else-if="!displayAssets.length">
|
||||
<NoResultsPlaceholder
|
||||
icon="pi pi-info-circle"
|
||||
:title="
|
||||
$t(
|
||||
activeTab === 'input'
|
||||
? 'sideToolbar.noImportedFiles'
|
||||
: 'sideToolbar.noGeneratedFiles'
|
||||
)
|
||||
"
|
||||
:message="$t('sideToolbar.noFilesFoundMessage')"
|
||||
/>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div v-else class="relative size-full">
|
||||
<VirtualGrid
|
||||
v-if="displayAssets.length"
|
||||
:items="mediaAssetsWithKey"
|
||||
:grid-style="{
|
||||
display: 'grid',
|
||||
@@ -51,6 +69,7 @@
|
||||
padding: '0.5rem',
|
||||
gap: '0.5rem'
|
||||
}"
|
||||
@approach-end="handleApproachEnd"
|
||||
>
|
||||
<template #item="{ item }">
|
||||
<MediaAssetCard
|
||||
@@ -66,24 +85,6 @@
|
||||
/>
|
||||
</template>
|
||||
</VirtualGrid>
|
||||
<div v-else-if="loading">
|
||||
<ProgressSpinner
|
||||
class="absolute left-1/2 w-[50px] -translate-x-1/2"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<NoResultsPlaceholder
|
||||
icon="pi pi-info-circle"
|
||||
:title="
|
||||
$t(
|
||||
activeTab === 'input'
|
||||
? 'sideToolbar.noImportedFiles'
|
||||
: 'sideToolbar.noGeneratedFiles'
|
||||
)
|
||||
"
|
||||
:message="$t('sideToolbar.noFilesFoundMessage')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
@@ -147,6 +148,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDebounceFn } from '@vueuse/core'
|
||||
import ProgressSpinner from 'primevue/progressspinner'
|
||||
import { useToast } from 'primevue/usetoast'
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
@@ -291,6 +293,7 @@ watch(
|
||||
activeTab,
|
||||
() => {
|
||||
clearSelection()
|
||||
// Reset pagination state when tab changes
|
||||
void refreshAssets()
|
||||
},
|
||||
{ immediate: true }
|
||||
@@ -395,4 +398,15 @@ const handleDeleteSelected = async () => {
|
||||
await deleteMultipleAssets(selectedAssets)
|
||||
clearSelection()
|
||||
}
|
||||
|
||||
const handleApproachEnd = useDebounceFn(async () => {
|
||||
if (
|
||||
activeTab.value === 'output' &&
|
||||
!isInFolderView.value &&
|
||||
outputAssets.hasMore.value &&
|
||||
!outputAssets.isLoadingMore.value
|
||||
) {
|
||||
await outputAssets.loadMore()
|
||||
}
|
||||
}, 300)
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<MediaTitle :file-name="fileName" />
|
||||
<div class="flex items-center gap-2 text-xs text-zinc-400">
|
||||
<!-- TBD: File size will be provided by backend history API -->
|
||||
<div
|
||||
v-if="asset.size"
|
||||
class="flex items-center gap-2 text-xs text-zinc-400"
|
||||
>
|
||||
<span>{{ formatSize(asset.size) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<MediaTitle :file-name="fileName" />
|
||||
<div class="flex items-center gap-2 text-xs text-zinc-400">
|
||||
<!-- TBD: File size will be provided by backend history API -->
|
||||
<div
|
||||
v-if="asset.size"
|
||||
class="flex items-center gap-2 text-xs text-zinc-400"
|
||||
>
|
||||
<span>{{ formatSize(asset.size) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<MediaTitle :file-name="fileName" />
|
||||
<div class="flex items-center text-xs text-zinc-400">
|
||||
<!-- TBD: File size will be provided by backend history API -->
|
||||
<div v-if="asset.size" class="flex items-center text-xs text-zinc-400">
|
||||
<span>{{ formatSize(asset.size) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,11 @@
|
||||
<video
|
||||
ref="videoRef"
|
||||
:controls="shouldShowControls"
|
||||
preload="none"
|
||||
preload="metadata"
|
||||
autoplay
|
||||
muted
|
||||
loop
|
||||
playsinline
|
||||
:poster="asset.preview_url"
|
||||
class="relative size-full object-contain"
|
||||
@click.stop
|
||||
|
||||
@@ -26,4 +26,19 @@ export interface IAssetsProvider {
|
||||
* Refresh the media list (alias for fetchMediaList)
|
||||
*/
|
||||
refresh: () => Promise<AssetItem[]>
|
||||
|
||||
/**
|
||||
* Load more items (for pagination)
|
||||
*/
|
||||
loadMore: () => Promise<void>
|
||||
|
||||
/**
|
||||
* Whether there are more items to load
|
||||
*/
|
||||
hasMore: Ref<boolean>
|
||||
|
||||
/**
|
||||
* Whether currently loading more items
|
||||
*/
|
||||
isLoadingMore: Ref<boolean>
|
||||
}
|
||||
|
||||
@@ -36,11 +36,28 @@ export function useAssetsApi(directory: 'input' | 'output') {
|
||||
|
||||
const refresh = () => fetchMediaList()
|
||||
|
||||
const loadMore = async (): Promise<void> => {
|
||||
if (directory === 'output') {
|
||||
await assetsStore.loadMoreHistory()
|
||||
}
|
||||
}
|
||||
|
||||
const hasMore = computed(() => {
|
||||
return directory === 'output' ? assetsStore.hasMoreHistory : false
|
||||
})
|
||||
|
||||
const isLoadingMore = computed(() => {
|
||||
return directory === 'output' ? assetsStore.isLoadingMore : false
|
||||
})
|
||||
|
||||
return {
|
||||
media,
|
||||
loading,
|
||||
error,
|
||||
fetchMediaList,
|
||||
refresh
|
||||
refresh,
|
||||
loadMore,
|
||||
hasMore,
|
||||
isLoadingMore
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,11 +36,28 @@ export function useInternalFilesApi(directory: 'input' | 'output') {
|
||||
|
||||
const refresh = () => fetchMediaList()
|
||||
|
||||
const loadMore = async (): Promise<void> => {
|
||||
if (directory === 'output') {
|
||||
await assetsStore.loadMoreHistory()
|
||||
}
|
||||
}
|
||||
|
||||
const hasMore = computed(() => {
|
||||
return directory === 'output' ? assetsStore.hasMoreHistory : false
|
||||
})
|
||||
|
||||
const isLoadingMore = computed(() => {
|
||||
return directory === 'output' ? assetsStore.isLoadingMore : false
|
||||
})
|
||||
|
||||
return {
|
||||
media,
|
||||
loading,
|
||||
error,
|
||||
fetchMediaList,
|
||||
refresh
|
||||
refresh,
|
||||
loadMore,
|
||||
hasMore,
|
||||
isLoadingMore
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ const zAsset = z.object({
|
||||
id: z.string(),
|
||||
name: z.string(),
|
||||
asset_hash: z.string().nullish(),
|
||||
size: z.number(),
|
||||
size: z.number().optional(), // TBD: Will be provided by history API in the future
|
||||
mime_type: z.string().nullish(),
|
||||
tags: z.array(z.string()).optional().default([]),
|
||||
preview_id: z.string().nullable().optional(),
|
||||
|
||||
@@ -15,13 +15,28 @@ import type {
|
||||
* Fetches history from V1 API endpoint
|
||||
* @param api - API instance with fetchApi method
|
||||
* @param maxItems - Maximum number of history items to fetch
|
||||
* @param offset - Offset for pagination (must be non-negative integer)
|
||||
* @returns Promise resolving to V1 history response
|
||||
* @throws Error if offset is invalid (negative or non-integer)
|
||||
*/
|
||||
export async function fetchHistoryV1(
|
||||
fetchApi: (url: string) => Promise<Response>,
|
||||
maxItems: number = 200
|
||||
maxItems: number = 200,
|
||||
offset?: number
|
||||
): Promise<HistoryV1Response> {
|
||||
const res = await fetchApi(`/history?max_items=${maxItems}`)
|
||||
// Validate offset parameter
|
||||
if (offset !== undefined && (offset < 0 || !Number.isInteger(offset))) {
|
||||
throw new Error(
|
||||
`Invalid offset parameter: ${offset}. Must be a non-negative integer.`
|
||||
)
|
||||
}
|
||||
|
||||
const params = new URLSearchParams({ max_items: maxItems.toString() })
|
||||
if (offset !== undefined) {
|
||||
params.set('offset', offset.toString())
|
||||
}
|
||||
const url = `/history?${params.toString()}`
|
||||
const res = await fetchApi(url)
|
||||
const json: Record<
|
||||
string,
|
||||
Omit<HistoryTaskItem, 'taskType'>
|
||||
|
||||
@@ -14,13 +14,28 @@ import type { HistoryResponseV2 } from '../types/historyV2Types'
|
||||
* Fetches history from V2 API endpoint and adapts to V1 format
|
||||
* @param fetchApi - API instance with fetchApi method
|
||||
* @param maxItems - Maximum number of history items to fetch
|
||||
* @param offset - Offset for pagination (must be non-negative integer)
|
||||
* @returns Promise resolving to V1 history response (adapted from V2)
|
||||
* @throws Error if offset is invalid (negative or non-integer)
|
||||
*/
|
||||
export async function fetchHistoryV2(
|
||||
fetchApi: (url: string) => Promise<Response>,
|
||||
maxItems: number = 200
|
||||
maxItems: number = 200,
|
||||
offset?: number
|
||||
): Promise<HistoryV1Response> {
|
||||
const res = await fetchApi(`/history_v2?max_items=${maxItems}`)
|
||||
// Validate offset parameter
|
||||
if (offset !== undefined && (offset < 0 || !Number.isInteger(offset))) {
|
||||
throw new Error(
|
||||
`Invalid offset parameter: ${offset}. Must be a non-negative integer.`
|
||||
)
|
||||
}
|
||||
|
||||
const params = new URLSearchParams({ max_items: maxItems.toString() })
|
||||
if (offset !== undefined) {
|
||||
params.set('offset', offset.toString())
|
||||
}
|
||||
const url = `/history_v2?${params.toString()}`
|
||||
const res = await fetchApi(url)
|
||||
const rawData: HistoryResponseV2 = await res.json()
|
||||
const adaptedHistory = mapHistoryV2toHistory(rawData)
|
||||
return { History: adaptedHistory }
|
||||
|
||||
@@ -899,10 +899,15 @@ export class ComfyApi extends EventTarget {
|
||||
* @returns Prompt history including node outputs
|
||||
*/
|
||||
async getHistory(
|
||||
max_items: number = 200
|
||||
max_items: number = 200,
|
||||
options?: { offset?: number }
|
||||
): Promise<{ History: HistoryTaskItem[] }> {
|
||||
try {
|
||||
return await fetchHistory(this.fetchApi.bind(this), max_items)
|
||||
return await fetchHistory(
|
||||
this.fetchApi.bind(this),
|
||||
max_items,
|
||||
options?.offset
|
||||
)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
return { History: [] }
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { useAsyncState } from '@vueuse/core'
|
||||
import { defineStore } from 'pinia'
|
||||
import { computed, shallowReactive } from 'vue'
|
||||
|
||||
import { computed, shallowReactive, ref } from 'vue'
|
||||
import {
|
||||
mapInputFileToAssetItem,
|
||||
mapTaskOutputToAssetItem
|
||||
@@ -9,7 +8,7 @@ import {
|
||||
import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
|
||||
import { assetService } from '@/platform/assets/services/assetService'
|
||||
import { isCloud } from '@/platform/distribution/types'
|
||||
import type { HistoryTaskItem } from '@/schemas/apiSchema'
|
||||
import type { TaskItem } from '@/schemas/apiSchema'
|
||||
import { api } from '@/scripts/api'
|
||||
|
||||
import { TaskItemImpl } from './queueStore'
|
||||
@@ -48,10 +47,15 @@ async function fetchInputFilesFromCloud(): Promise<AssetItem[]> {
|
||||
/**
|
||||
* Convert history task items to asset items
|
||||
*/
|
||||
function mapHistoryToAssets(historyItems: HistoryTaskItem[]): AssetItem[] {
|
||||
function mapHistoryToAssets(historyItems: TaskItem[]): AssetItem[] {
|
||||
const assetItems: AssetItem[] = []
|
||||
|
||||
for (const item of historyItems) {
|
||||
// Type guard for HistoryTaskItem which has status and outputs
|
||||
if (item.taskType !== 'History') {
|
||||
continue
|
||||
}
|
||||
|
||||
if (!item.outputs || !item.status || item.status?.status_str === 'error') {
|
||||
continue
|
||||
}
|
||||
@@ -85,16 +89,22 @@ function mapHistoryToAssets(historyItems: HistoryTaskItem[]): AssetItem[] {
|
||||
)
|
||||
}
|
||||
|
||||
export const useAssetsStore = defineStore('assets', () => {
|
||||
const maxHistoryItems = 200
|
||||
const BATCH_SIZE = 200
|
||||
const MAX_HISTORY_ITEMS = 1000 // Maximum items to keep in memory
|
||||
|
||||
const getFetchInputFiles = () => {
|
||||
if (isCloud) {
|
||||
return fetchInputFilesFromCloud
|
||||
}
|
||||
return fetchInputFilesFromAPI
|
||||
}
|
||||
const fetchInputFiles = getFetchInputFiles()
|
||||
export const useAssetsStore = defineStore('assets', () => {
|
||||
// Pagination state
|
||||
const historyOffset = ref(0)
|
||||
const hasMoreHistory = ref(true)
|
||||
const isLoadingMore = ref(false)
|
||||
|
||||
const allHistoryItems = ref<AssetItem[]>([])
|
||||
|
||||
const loadedIds = shallowReactive(new Set<string>())
|
||||
|
||||
const fetchInputFiles = isCloud
|
||||
? fetchInputFilesFromCloud
|
||||
: fetchInputFilesFromAPI
|
||||
|
||||
const {
|
||||
state: inputAssets,
|
||||
@@ -109,23 +119,119 @@ export const useAssetsStore = defineStore('assets', () => {
|
||||
}
|
||||
})
|
||||
|
||||
const fetchHistoryAssets = async (): Promise<AssetItem[]> => {
|
||||
const history = await api.getHistory(maxHistoryItems)
|
||||
return mapHistoryToAssets(history.History)
|
||||
/**
|
||||
* Fetch history assets with pagination support
|
||||
* @param loadMore - true for pagination (append), false for initial load (replace)
|
||||
*/
|
||||
const fetchHistoryAssets = async (loadMore = false): Promise<AssetItem[]> => {
|
||||
// Reset state for initial load
|
||||
if (!loadMore) {
|
||||
historyOffset.value = 0
|
||||
hasMoreHistory.value = true
|
||||
allHistoryItems.value = []
|
||||
loadedIds.clear()
|
||||
}
|
||||
|
||||
// Fetch from server with offset
|
||||
const history = await api.getHistory(BATCH_SIZE, {
|
||||
offset: historyOffset.value
|
||||
})
|
||||
|
||||
// Convert TaskItems to AssetItems
|
||||
const newAssets = mapHistoryToAssets(history.History)
|
||||
|
||||
if (loadMore) {
|
||||
// Filter out duplicates and insert in sorted order
|
||||
for (const asset of newAssets) {
|
||||
if (loadedIds.has(asset.id)) {
|
||||
continue // Skip duplicates
|
||||
}
|
||||
loadedIds.add(asset.id)
|
||||
|
||||
// Find insertion index to maintain sorted order (newest first)
|
||||
const assetTime = new Date(asset.created_at).getTime()
|
||||
const insertIndex = allHistoryItems.value.findIndex(
|
||||
(item) => new Date(item.created_at).getTime() < assetTime
|
||||
)
|
||||
|
||||
if (insertIndex === -1) {
|
||||
// Asset is oldest, append to end
|
||||
allHistoryItems.value.push(asset)
|
||||
} else {
|
||||
// Insert at the correct position
|
||||
allHistoryItems.value.splice(insertIndex, 0, asset)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Initial load: replace all
|
||||
allHistoryItems.value = newAssets
|
||||
newAssets.forEach((asset) => loadedIds.add(asset.id))
|
||||
}
|
||||
|
||||
// Update pagination state
|
||||
historyOffset.value += BATCH_SIZE
|
||||
hasMoreHistory.value = history.History.length === BATCH_SIZE
|
||||
|
||||
if (allHistoryItems.value.length > MAX_HISTORY_ITEMS) {
|
||||
const removed = allHistoryItems.value.slice(MAX_HISTORY_ITEMS)
|
||||
allHistoryItems.value = allHistoryItems.value.slice(0, MAX_HISTORY_ITEMS)
|
||||
|
||||
// Clean up Set
|
||||
removed.forEach((item) => loadedIds.delete(item.id))
|
||||
}
|
||||
|
||||
return allHistoryItems.value
|
||||
}
|
||||
|
||||
const {
|
||||
state: historyAssets,
|
||||
isLoading: historyLoading,
|
||||
error: historyError,
|
||||
execute: updateHistory
|
||||
} = useAsyncState(fetchHistoryAssets, [], {
|
||||
immediate: false,
|
||||
resetOnExecute: false,
|
||||
onError: (err) => {
|
||||
const historyAssets = ref<AssetItem[]>([])
|
||||
const historyLoading = ref(false)
|
||||
const historyError = ref<unknown>(null)
|
||||
|
||||
/**
|
||||
* Initial load of history assets
|
||||
*/
|
||||
const updateHistory = async () => {
|
||||
historyLoading.value = true
|
||||
historyError.value = null
|
||||
try {
|
||||
await fetchHistoryAssets(false)
|
||||
historyAssets.value = allHistoryItems.value
|
||||
} catch (err) {
|
||||
console.error('Error fetching history assets:', err)
|
||||
historyError.value = err
|
||||
// Keep existing data when error occurs
|
||||
if (!historyAssets.value.length) {
|
||||
historyAssets.value = []
|
||||
}
|
||||
} finally {
|
||||
historyLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Load more history items (infinite scroll)
|
||||
*/
|
||||
const loadMoreHistory = async () => {
|
||||
// Guard: prevent concurrent loads and check if more items available
|
||||
if (!hasMoreHistory.value || isLoadingMore.value) return
|
||||
|
||||
isLoadingMore.value = true
|
||||
historyError.value = null
|
||||
|
||||
try {
|
||||
await fetchHistoryAssets(true)
|
||||
historyAssets.value = allHistoryItems.value
|
||||
} catch (err) {
|
||||
console.error('Error loading more history:', err)
|
||||
historyError.value = err
|
||||
// Keep existing data when error occurs (consistent with updateHistory)
|
||||
if (!historyAssets.value.length) {
|
||||
historyAssets.value = []
|
||||
}
|
||||
} finally {
|
||||
isLoadingMore.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Map of asset hash filename to asset item for O(1) lookup
|
||||
@@ -142,7 +248,6 @@ export const useAssetsStore = defineStore('assets', () => {
|
||||
})
|
||||
|
||||
/**
|
||||
* Get human-readable name for input asset filename
|
||||
* @param filename Hash-based filename (e.g., "72e786ff...efb7.png")
|
||||
* @returns Human-readable asset name or original filename if not found
|
||||
*/
|
||||
@@ -248,10 +353,13 @@ export const useAssetsStore = defineStore('assets', () => {
|
||||
historyLoading,
|
||||
inputError,
|
||||
historyError,
|
||||
hasMoreHistory,
|
||||
isLoadingMore,
|
||||
|
||||
// Actions
|
||||
updateInputs,
|
||||
updateHistory,
|
||||
loadMoreHistory,
|
||||
|
||||
// Input mapping helpers
|
||||
inputAssetsByFilename,
|
||||
|
||||
@@ -1,225 +1,519 @@
|
||||
import { createPinia, setActivePinia } from 'pinia'
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
|
||||
import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
|
||||
import { useAssetsStore } from '@/stores/assetsStore'
|
||||
import { useModelToNodeStore } from '@/stores/modelToNodeStore'
|
||||
import { api } from '@/scripts/api'
|
||||
import type {
|
||||
HistoryTaskItem,
|
||||
TaskPrompt,
|
||||
TaskStatus,
|
||||
TaskOutput
|
||||
} from '@/schemas/apiSchema'
|
||||
|
||||
// Mock isCloud to be true for these tests
|
||||
vi.mock('@/platform/distribution/types', () => ({
|
||||
isCloud: true
|
||||
// Mock the api module
|
||||
vi.mock('@/scripts/api', () => ({
|
||||
api: {
|
||||
getHistory: vi.fn(),
|
||||
internalURL: vi.fn((path) => `http://localhost:3000${path}`),
|
||||
user: 'test-user'
|
||||
}
|
||||
}))
|
||||
|
||||
// Mock assetService
|
||||
const mockGetAssetsForNodeType = vi.hoisted(() => vi.fn())
|
||||
|
||||
// Mock the asset service
|
||||
vi.mock('@/platform/assets/services/assetService', () => ({
|
||||
assetService: {
|
||||
getAssetsForNodeType: mockGetAssetsForNodeType
|
||||
getAssetsByTag: vi.fn()
|
||||
}
|
||||
}))
|
||||
|
||||
const HASH_FILENAME =
|
||||
'72e786ff2a44d682c4294db0b7098e569832bc394efc6dad644e6ec85a78efb7.png'
|
||||
const HASH_FILENAME_2 =
|
||||
'a1b2c3d4e5f6789012345678901234567890abcdef1234567890abcdef123456.jpg'
|
||||
// Mock distribution type
|
||||
vi.mock('@/platform/distribution/types', () => ({
|
||||
isCloud: false
|
||||
}))
|
||||
|
||||
function createMockAssetItem(overrides: Partial<AssetItem> = {}): AssetItem {
|
||||
return {
|
||||
id: 'test-id',
|
||||
name: 'test.png',
|
||||
asset_hash: 'test-hash',
|
||||
size: 1024,
|
||||
tags: [],
|
||||
created_at: '2024-01-01T00:00:00.000Z',
|
||||
...overrides
|
||||
// Mock TaskItemImpl
|
||||
vi.mock('@/stores/queueStore', () => ({
|
||||
TaskItemImpl: class {
|
||||
public flatOutputs: Array<{
|
||||
supportsPreview: boolean
|
||||
filename: string
|
||||
subfolder: string
|
||||
type: string
|
||||
url: string
|
||||
}>
|
||||
public previewOutput:
|
||||
| {
|
||||
supportsPreview: boolean
|
||||
filename: string
|
||||
subfolder: string
|
||||
type: string
|
||||
url: string
|
||||
}
|
||||
| undefined
|
||||
|
||||
constructor(
|
||||
public taskType: string,
|
||||
public prompt: TaskPrompt,
|
||||
public status: TaskStatus | undefined,
|
||||
public outputs: TaskOutput
|
||||
) {
|
||||
this.flatOutputs = this.outputs
|
||||
? [
|
||||
{
|
||||
supportsPreview: true,
|
||||
filename: 'test.png',
|
||||
subfolder: '',
|
||||
type: 'output',
|
||||
url: 'http://test.com/test.png'
|
||||
}
|
||||
]
|
||||
: []
|
||||
this.previewOutput = this.flatOutputs[0]
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
// Mock asset mappers - add unique timestamps
|
||||
vi.mock('@/platform/assets/composables/media/assetMappers', () => ({
|
||||
mapInputFileToAssetItem: vi.fn((name, index, type) => ({
|
||||
id: `${type}-${index}`,
|
||||
name,
|
||||
size: 0,
|
||||
created_at: new Date(Date.now() - index * 1000).toISOString(), // Unique timestamps
|
||||
tags: [type],
|
||||
preview_url: `http://test.com/${name}`
|
||||
})),
|
||||
mapTaskOutputToAssetItem: vi.fn((task, output) => {
|
||||
const index = parseInt(task.prompt[1].split('_')[1]) || 0
|
||||
return {
|
||||
id: task.prompt[1], // Use promptId as asset ID
|
||||
name: output.filename,
|
||||
size: 0,
|
||||
created_at: new Date(Date.now() - index * 1000).toISOString(), // Unique timestamps
|
||||
tags: ['output'],
|
||||
preview_url: output.url,
|
||||
user_metadata: {}
|
||||
}
|
||||
})
|
||||
}))
|
||||
|
||||
describe('assetsStore - Refactored (Option A)', () => {
|
||||
let store: ReturnType<typeof useAssetsStore>
|
||||
|
||||
// Helper function to create mock history items
|
||||
const createMockHistoryItem = (index: number): HistoryTaskItem => ({
|
||||
taskType: 'History' as const,
|
||||
prompt: [
|
||||
1000 + index, // queueIndex
|
||||
`prompt_${index}`, // promptId
|
||||
{}, // promptInputs
|
||||
{
|
||||
extra_pnginfo: {
|
||||
workflow: {
|
||||
last_node_id: 1,
|
||||
last_link_id: 1,
|
||||
nodes: [],
|
||||
links: [],
|
||||
groups: [],
|
||||
config: {},
|
||||
version: 1
|
||||
}
|
||||
}
|
||||
}, // extraData
|
||||
[] // outputsToExecute
|
||||
],
|
||||
status: {
|
||||
status_str: 'success' as const,
|
||||
completed: true,
|
||||
messages: []
|
||||
},
|
||||
outputs: {
|
||||
'1': {
|
||||
images: [
|
||||
{
|
||||
filename: `output_${index}.png`,
|
||||
subfolder: '',
|
||||
type: 'output' as const
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
describe('assetsStore', () => {
|
||||
beforeEach(() => {
|
||||
setActivePinia(createPinia())
|
||||
store = useAssetsStore()
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
describe('input asset mapping helpers', () => {
|
||||
it('should return name for valid asset_hash', () => {
|
||||
const store = useAssetsStore()
|
||||
describe('Initial Load', () => {
|
||||
it('should load initial history items', async () => {
|
||||
const mockHistory = Array.from({ length: 10 }, (_, i) =>
|
||||
createMockHistoryItem(i)
|
||||
)
|
||||
vi.mocked(api.getHistory).mockResolvedValue({
|
||||
History: mockHistory
|
||||
})
|
||||
|
||||
store.inputAssets = [
|
||||
createMockAssetItem({
|
||||
name: 'Beautiful Sunset.png',
|
||||
asset_hash: HASH_FILENAME
|
||||
}),
|
||||
createMockAssetItem({
|
||||
name: 'Mountain Vista.jpg',
|
||||
asset_hash: HASH_FILENAME_2
|
||||
})
|
||||
]
|
||||
await store.updateHistory()
|
||||
|
||||
expect(store.getInputName(HASH_FILENAME)).toBe('Beautiful Sunset.png')
|
||||
expect(store.getInputName(HASH_FILENAME_2)).toBe('Mountain Vista.jpg')
|
||||
expect(api.getHistory).toHaveBeenCalledWith(200, { offset: 0 })
|
||||
expect(store.historyAssets).toHaveLength(10)
|
||||
expect(store.hasMoreHistory).toBe(false) // Less than BATCH_SIZE
|
||||
expect(store.historyLoading).toBe(false)
|
||||
expect(store.historyError).toBe(null)
|
||||
})
|
||||
|
||||
it('should return original hash when no matching asset found', () => {
|
||||
const store = useAssetsStore()
|
||||
it('should set hasMoreHistory to true when batch is full', async () => {
|
||||
const mockHistory = Array.from({ length: 200 }, (_, i) =>
|
||||
createMockHistoryItem(i)
|
||||
)
|
||||
vi.mocked(api.getHistory).mockResolvedValue({
|
||||
History: mockHistory
|
||||
})
|
||||
|
||||
store.inputAssets = [
|
||||
createMockAssetItem({
|
||||
name: 'Beautiful Sunset.png',
|
||||
asset_hash: HASH_FILENAME
|
||||
})
|
||||
]
|
||||
await store.updateHistory()
|
||||
|
||||
const unknownHash =
|
||||
'fffffffffffffffffffffffffffuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu.png'
|
||||
expect(store.getInputName(unknownHash)).toBe(unknownHash)
|
||||
expect(store.historyAssets).toHaveLength(200)
|
||||
expect(store.hasMoreHistory).toBe(true) // Exactly BATCH_SIZE
|
||||
})
|
||||
|
||||
it('should return hash as-is when no assets loaded', () => {
|
||||
const store = useAssetsStore()
|
||||
it('should handle errors during initial load', async () => {
|
||||
const error = new Error('Failed to fetch')
|
||||
vi.mocked(api.getHistory).mockRejectedValue(error)
|
||||
|
||||
store.inputAssets = []
|
||||
await store.updateHistory()
|
||||
|
||||
expect(store.getInputName(HASH_FILENAME)).toBe(HASH_FILENAME)
|
||||
})
|
||||
|
||||
it('should ignore assets without asset_hash', () => {
|
||||
const store = useAssetsStore()
|
||||
|
||||
store.inputAssets = [
|
||||
createMockAssetItem({
|
||||
name: 'Beautiful Sunset.png',
|
||||
asset_hash: HASH_FILENAME
|
||||
}),
|
||||
createMockAssetItem({
|
||||
name: 'No Hash Asset.jpg',
|
||||
asset_hash: null
|
||||
})
|
||||
]
|
||||
|
||||
// Should find first asset
|
||||
expect(store.getInputName(HASH_FILENAME)).toBe('Beautiful Sunset.png')
|
||||
// Map should only contain one entry
|
||||
expect(store.inputAssetsByFilename.size).toBe(1)
|
||||
expect(store.historyAssets).toHaveLength(0)
|
||||
expect(store.historyError).toBe(error)
|
||||
expect(store.historyLoading).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe('inputAssetsByFilename computed', () => {
|
||||
it('should create map keyed by asset_hash', () => {
|
||||
const store = useAssetsStore()
|
||||
|
||||
store.inputAssets = [
|
||||
createMockAssetItem({
|
||||
id: 'asset-123',
|
||||
name: 'Beautiful Sunset.png',
|
||||
asset_hash: HASH_FILENAME
|
||||
}),
|
||||
createMockAssetItem({
|
||||
id: 'asset-456',
|
||||
name: 'Mountain Vista.jpg',
|
||||
asset_hash: HASH_FILENAME_2
|
||||
})
|
||||
]
|
||||
|
||||
const map = store.inputAssetsByFilename
|
||||
|
||||
expect(map.size).toBe(2)
|
||||
expect(map.get(HASH_FILENAME)).toMatchObject({
|
||||
id: 'asset-123',
|
||||
name: 'Beautiful Sunset.png',
|
||||
asset_hash: HASH_FILENAME
|
||||
describe('Pagination', () => {
|
||||
it('should accumulate items when loading more', async () => {
|
||||
// First batch - full BATCH_SIZE
|
||||
const firstBatch = Array.from({ length: 200 }, (_, i) =>
|
||||
createMockHistoryItem(i)
|
||||
)
|
||||
vi.mocked(api.getHistory).mockResolvedValueOnce({
|
||||
History: firstBatch
|
||||
})
|
||||
expect(map.get(HASH_FILENAME_2)).toMatchObject({
|
||||
id: 'asset-456',
|
||||
name: 'Mountain Vista.jpg',
|
||||
asset_hash: HASH_FILENAME_2
|
||||
|
||||
await store.updateHistory()
|
||||
expect(store.historyAssets).toHaveLength(200)
|
||||
expect(store.hasMoreHistory).toBe(true)
|
||||
|
||||
// Second batch - different items
|
||||
const secondBatch = Array.from({ length: 200 }, (_, i) =>
|
||||
createMockHistoryItem(200 + i)
|
||||
)
|
||||
vi.mocked(api.getHistory).mockResolvedValueOnce({
|
||||
History: secondBatch
|
||||
})
|
||||
|
||||
await store.loadMoreHistory()
|
||||
|
||||
expect(api.getHistory).toHaveBeenCalledWith(200, { offset: 200 })
|
||||
expect(store.historyAssets).toHaveLength(400) // Accumulated
|
||||
expect(store.hasMoreHistory).toBe(true)
|
||||
})
|
||||
|
||||
it('should exclude assets with null/undefined hash from map', () => {
|
||||
const store = useAssetsStore()
|
||||
it('should prevent duplicate items during pagination', async () => {
|
||||
// First batch - full BATCH_SIZE
|
||||
const firstBatch = Array.from({ length: 200 }, (_, i) =>
|
||||
createMockHistoryItem(i)
|
||||
)
|
||||
vi.mocked(api.getHistory).mockResolvedValueOnce({
|
||||
History: firstBatch
|
||||
})
|
||||
|
||||
store.inputAssets = [
|
||||
createMockAssetItem({
|
||||
name: 'Has Hash.png',
|
||||
asset_hash: HASH_FILENAME
|
||||
}),
|
||||
createMockAssetItem({
|
||||
name: 'Null Hash.jpg',
|
||||
asset_hash: null
|
||||
}),
|
||||
createMockAssetItem({
|
||||
name: 'Undefined Hash.jpg',
|
||||
asset_hash: undefined
|
||||
})
|
||||
await store.updateHistory()
|
||||
expect(store.historyAssets).toHaveLength(200)
|
||||
|
||||
// Second batch with some duplicates
|
||||
const secondBatch = [
|
||||
createMockHistoryItem(2), // Duplicate
|
||||
createMockHistoryItem(5), // Duplicate
|
||||
...Array.from({ length: 198 }, (_, i) => createMockHistoryItem(200 + i)) // New
|
||||
]
|
||||
vi.mocked(api.getHistory).mockResolvedValueOnce({
|
||||
History: secondBatch
|
||||
})
|
||||
|
||||
const map = store.inputAssetsByFilename
|
||||
await store.loadMoreHistory()
|
||||
|
||||
// Only asset with valid asset_hash should be in map
|
||||
expect(map.size).toBe(1)
|
||||
expect(map.has(HASH_FILENAME)).toBe(true)
|
||||
// Should only add new items (198 new, 2 duplicates filtered)
|
||||
expect(store.historyAssets).toHaveLength(398)
|
||||
|
||||
// Verify no duplicates
|
||||
const assetIds = store.historyAssets.map((a) => a.id)
|
||||
const uniqueAssetIds = new Set(assetIds)
|
||||
expect(uniqueAssetIds.size).toBe(store.historyAssets.length)
|
||||
})
|
||||
|
||||
it('should return empty map when no assets loaded', () => {
|
||||
const store = useAssetsStore()
|
||||
it('should stop loading when no more items', async () => {
|
||||
// First batch - less than BATCH_SIZE
|
||||
const firstBatch = Array.from({ length: 50 }, (_, i) =>
|
||||
createMockHistoryItem(i)
|
||||
)
|
||||
vi.mocked(api.getHistory).mockResolvedValueOnce({
|
||||
History: firstBatch
|
||||
})
|
||||
|
||||
store.inputAssets = []
|
||||
await store.updateHistory()
|
||||
expect(store.hasMoreHistory).toBe(false)
|
||||
|
||||
expect(store.inputAssetsByFilename.size).toBe(0)
|
||||
// Try to load more - should return early
|
||||
await store.loadMoreHistory()
|
||||
|
||||
// Should only have been called once (initial load)
|
||||
expect(api.getHistory).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('should handle race conditions with concurrent loads', async () => {
|
||||
// Setup initial state with full batch
|
||||
const initialBatch = Array.from({ length: 200 }, (_, i) =>
|
||||
createMockHistoryItem(i)
|
||||
)
|
||||
vi.mocked(api.getHistory).mockResolvedValueOnce({
|
||||
History: initialBatch
|
||||
})
|
||||
await store.updateHistory()
|
||||
expect(store.hasMoreHistory).toBe(true)
|
||||
|
||||
// Clear mock to count only loadMore calls
|
||||
vi.mocked(api.getHistory).mockClear()
|
||||
|
||||
// Setup slow API response
|
||||
let resolveLoadMore: (value: { History: HistoryTaskItem[] }) => void
|
||||
const loadMorePromise = new Promise<{ History: HistoryTaskItem[] }>(
|
||||
(resolve) => {
|
||||
resolveLoadMore = resolve
|
||||
}
|
||||
)
|
||||
vi.mocked(api.getHistory).mockReturnValueOnce(loadMorePromise)
|
||||
|
||||
// Start first loadMore
|
||||
const firstLoad = store.loadMoreHistory()
|
||||
|
||||
// Try concurrent load - should be ignored
|
||||
const secondLoad = store.loadMoreHistory()
|
||||
|
||||
// Resolve
|
||||
const secondBatch = Array.from({ length: 200 }, (_, i) =>
|
||||
createMockHistoryItem(200 + i)
|
||||
)
|
||||
resolveLoadMore!({ History: secondBatch })
|
||||
|
||||
await Promise.all([firstLoad, secondLoad])
|
||||
|
||||
// Only one API call
|
||||
expect(api.getHistory).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('should respect MAX_HISTORY_ITEMS limit', async () => {
|
||||
const BATCH_COUNT = 6 // 6 × 200 = 1200 items
|
||||
|
||||
// Initial load
|
||||
const firstBatch = Array.from({ length: 200 }, (_, i) =>
|
||||
createMockHistoryItem(i)
|
||||
)
|
||||
vi.mocked(api.getHistory).mockResolvedValueOnce({
|
||||
History: firstBatch
|
||||
})
|
||||
await store.updateHistory()
|
||||
|
||||
// Load additional batches
|
||||
for (let batch = 1; batch < BATCH_COUNT; batch++) {
|
||||
const items = Array.from({ length: 200 }, (_, i) =>
|
||||
createMockHistoryItem(batch * 200 + i)
|
||||
)
|
||||
vi.mocked(api.getHistory).mockResolvedValueOnce({
|
||||
History: items
|
||||
})
|
||||
await store.loadMoreHistory()
|
||||
}
|
||||
|
||||
// Should be capped at MAX_HISTORY_ITEMS (1000)
|
||||
expect(store.historyAssets).toHaveLength(1000)
|
||||
})
|
||||
})
|
||||
|
||||
describe('model assets caching', () => {
|
||||
beforeEach(() => {
|
||||
const modelToNodeStore = useModelToNodeStore()
|
||||
modelToNodeStore.registerDefaults()
|
||||
describe('Sorting', () => {
|
||||
it('should maintain date sorting after pagination', async () => {
|
||||
// First batch
|
||||
const firstBatch = Array.from({ length: 200 }, (_, i) =>
|
||||
createMockHistoryItem(i)
|
||||
)
|
||||
vi.mocked(api.getHistory).mockResolvedValueOnce({
|
||||
History: firstBatch
|
||||
})
|
||||
|
||||
await store.updateHistory()
|
||||
|
||||
// Second batch
|
||||
const secondBatch = Array.from({ length: 200 }, (_, i) =>
|
||||
createMockHistoryItem(200 + i)
|
||||
)
|
||||
vi.mocked(api.getHistory).mockResolvedValueOnce({
|
||||
History: secondBatch
|
||||
})
|
||||
|
||||
await store.loadMoreHistory()
|
||||
|
||||
// Verify sorting (newest first - lower index = newer)
|
||||
for (let i = 1; i < store.historyAssets.length; i++) {
|
||||
const prevDate = new Date(store.historyAssets[i - 1].created_at)
|
||||
const currDate = new Date(store.historyAssets[i].created_at)
|
||||
expect(prevDate.getTime()).toBeGreaterThanOrEqual(currDate.getTime())
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
describe('Error Handling', () => {
|
||||
it('should preserve existing data when loadMore fails', async () => {
|
||||
// First successful load - full batch
|
||||
const firstBatch = Array.from({ length: 200 }, (_, i) =>
|
||||
createMockHistoryItem(i)
|
||||
)
|
||||
vi.mocked(api.getHistory).mockResolvedValueOnce({
|
||||
History: firstBatch
|
||||
})
|
||||
|
||||
await store.updateHistory()
|
||||
expect(store.historyAssets).toHaveLength(200)
|
||||
|
||||
// Second load fails
|
||||
const error = new Error('Network error')
|
||||
vi.mocked(api.getHistory).mockRejectedValueOnce(error)
|
||||
|
||||
await store.loadMoreHistory()
|
||||
|
||||
// Should keep existing data
|
||||
expect(store.historyAssets).toHaveLength(200)
|
||||
expect(store.historyError).toBe(error)
|
||||
expect(store.isLoadingMore).toBe(false)
|
||||
})
|
||||
|
||||
it('should cache assets by node type', async () => {
|
||||
const store = useAssetsStore()
|
||||
const mockAssets: AssetItem[] = [
|
||||
createMockAssetItem({ id: '1', name: 'model_a.safetensors' }),
|
||||
createMockAssetItem({ id: '2', name: 'model_b.safetensors' })
|
||||
]
|
||||
mockGetAssetsForNodeType.mockResolvedValue(mockAssets)
|
||||
|
||||
await store.updateModelsForNodeType('CheckpointLoaderSimple')
|
||||
|
||||
expect(mockGetAssetsForNodeType).toHaveBeenCalledWith(
|
||||
'CheckpointLoaderSimple'
|
||||
it('should clear error state on successful retry', async () => {
|
||||
// First load succeeds
|
||||
const firstBatch = Array.from({ length: 200 }, (_, i) =>
|
||||
createMockHistoryItem(i)
|
||||
)
|
||||
expect(store.modelAssetsByNodeType.get('CheckpointLoaderSimple')).toEqual(
|
||||
mockAssets
|
||||
vi.mocked(api.getHistory).mockResolvedValueOnce({
|
||||
History: firstBatch
|
||||
})
|
||||
|
||||
await store.updateHistory()
|
||||
|
||||
// Second load fails
|
||||
const error = new Error('Network error')
|
||||
vi.mocked(api.getHistory).mockRejectedValueOnce(error)
|
||||
|
||||
await store.loadMoreHistory()
|
||||
expect(store.historyError).toBe(error)
|
||||
|
||||
// Third load succeeds
|
||||
const thirdBatch = Array.from({ length: 200 }, (_, i) =>
|
||||
createMockHistoryItem(200 + i)
|
||||
)
|
||||
vi.mocked(api.getHistory).mockResolvedValueOnce({
|
||||
History: thirdBatch
|
||||
})
|
||||
|
||||
await store.loadMoreHistory()
|
||||
|
||||
// Error should be cleared
|
||||
expect(store.historyError).toBe(null)
|
||||
expect(store.historyAssets).toHaveLength(400)
|
||||
})
|
||||
|
||||
it('should track loading state', async () => {
|
||||
const store = useAssetsStore()
|
||||
mockGetAssetsForNodeType.mockImplementation(
|
||||
() => new Promise((resolve) => setTimeout(() => resolve([]), 100))
|
||||
)
|
||||
it('should handle errors with proper loading state', async () => {
|
||||
const error = new Error('API error')
|
||||
vi.mocked(api.getHistory).mockRejectedValue(error)
|
||||
|
||||
const promise = store.updateModelsForNodeType('LoraLoader')
|
||||
await store.updateHistory()
|
||||
|
||||
expect(store.modelLoadingByNodeType.get('LoraLoader')).toBe(true)
|
||||
expect(store.historyLoading).toBe(false)
|
||||
expect(store.historyError).toBe(error)
|
||||
})
|
||||
})
|
||||
|
||||
await promise
|
||||
describe('Memory Management', () => {
|
||||
it('should cleanup when exceeding MAX_HISTORY_ITEMS', async () => {
|
||||
// Load 1200 items (exceeds 1000 limit)
|
||||
const batches = 6
|
||||
|
||||
expect(store.modelLoadingByNodeType.get('LoraLoader')).toBe(false)
|
||||
for (let batch = 0; batch < batches; batch++) {
|
||||
const items = Array.from({ length: 200 }, (_, i) =>
|
||||
createMockHistoryItem(batch * 200 + i)
|
||||
)
|
||||
vi.mocked(api.getHistory).mockResolvedValueOnce({
|
||||
History: items
|
||||
})
|
||||
|
||||
if (batch === 0) {
|
||||
await store.updateHistory()
|
||||
} else {
|
||||
await store.loadMoreHistory()
|
||||
}
|
||||
}
|
||||
|
||||
// Should be limited to 1000
|
||||
expect(store.historyAssets).toHaveLength(1000)
|
||||
|
||||
// All items should be unique (Set cleanup works)
|
||||
const assetIds = store.historyAssets.map((a) => a.id)
|
||||
const uniqueAssetIds = new Set(assetIds)
|
||||
expect(uniqueAssetIds.size).toBe(1000)
|
||||
})
|
||||
|
||||
it('should handle errors gracefully', async () => {
|
||||
const store = useAssetsStore()
|
||||
const mockError = new Error('Network error')
|
||||
mockGetAssetsForNodeType.mockRejectedValue(mockError)
|
||||
it('should maintain correct state after cleanup', async () => {
|
||||
// Load items beyond limit
|
||||
for (let batch = 0; batch < 6; batch++) {
|
||||
const items = Array.from({ length: 200 }, (_, i) =>
|
||||
createMockHistoryItem(batch * 200 + i)
|
||||
)
|
||||
vi.mocked(api.getHistory).mockResolvedValueOnce({
|
||||
History: items
|
||||
})
|
||||
|
||||
await store.updateModelsForNodeType('VAELoader')
|
||||
if (batch === 0) {
|
||||
await store.updateHistory()
|
||||
} else {
|
||||
await store.loadMoreHistory()
|
||||
}
|
||||
}
|
||||
|
||||
expect(store.modelErrorByNodeType.get('VAELoader')).toBe(mockError)
|
||||
expect(store.modelAssetsByNodeType.get('VAELoader')).toEqual([])
|
||||
expect(store.modelLoadingByNodeType.get('VAELoader')).toBe(false)
|
||||
expect(store.historyAssets).toHaveLength(1000)
|
||||
|
||||
// Should still maintain sorting
|
||||
for (let i = 1; i < store.historyAssets.length; i++) {
|
||||
const prevDate = new Date(store.historyAssets[i - 1].created_at)
|
||||
const currDate = new Date(store.historyAssets[i].created_at)
|
||||
expect(prevDate.getTime()).toBeGreaterThanOrEqual(currDate.getTime())
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
describe('jobDetailView Support', () => {
|
||||
it('should include outputCount and allOutputs in user_metadata', async () => {
|
||||
const mockHistory = Array.from({ length: 5 }, (_, i) =>
|
||||
createMockHistoryItem(i)
|
||||
)
|
||||
vi.mocked(api.getHistory).mockResolvedValue({
|
||||
History: mockHistory
|
||||
})
|
||||
|
||||
await store.updateHistory()
|
||||
|
||||
// Check first asset
|
||||
const asset = store.historyAssets[0]
|
||||
expect(asset.user_metadata).toBeDefined()
|
||||
expect(asset.user_metadata).toHaveProperty('outputCount')
|
||||
expect(asset.user_metadata).toHaveProperty('allOutputs')
|
||||
expect(Array.isArray(asset.user_metadata!.allOutputs)).toBe(true)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user