mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-21 21:22:11 -03:00
Merge branch 'main' of https://github.com/willmiao/ComfyUI-Lora-Manager
This commit is contained in:
Will Miao
@@ -9,8 +9,8 @@ This roadmap tracks the planned rollout of automated testing for the ComfyUI LoR
|
||||
| Phase 0 | Establish baseline tooling | Add Node test runner, jsdom environment, and seed smoke tests | ✅ Complete | Vitest + jsdom configured, example state tests committed |
|
||||
| Phase 1 | Cover state management logic | Unit test selectors, derived data helpers, and storage utilities under `static/js/state` and `static/js/utils` | ✅ Complete | Storage helpers and state selectors now exercised via deterministic suites |
|
||||
| Phase 2 | Test AppCore orchestration | Simulate page bootstrapping, infinite scroll hooks, and manager registration using JSDOM DOM fixtures | ✅ Complete | AppCore initialization + page feature suites now validate manager wiring, infinite scroll hooks, and onboarding gating |
|
||||
| Phase 3 | Validate page-specific managers | Add focused suites for `loras`, `checkpoints`, `embeddings`, and `recipes` managers covering filtering, sorting, and bulk actions | 🚧 In Progress | LoRA + checkpoints smoke suites landed; filter/sort scenario matrix drafted to guide upcoming specs |
|
||||
| Phase 4 | Interaction-level regression tests | Exercise template fragments, modals, and menus to ensure UI wiring remains intact | ⚪ Not Started | Evaluate Playwright component testing or happy-path DOM snapshots |
|
||||
| Phase 3 | Validate page-specific managers | Add focused suites for `loras`, `checkpoints`, `embeddings`, and `recipes` managers covering filtering, sorting, and bulk actions | ✅ Complete | LoRA/checkpoint suites expanded; embeddings + recipes managers now covered with initialization, filtering, and duplicate workflows |
|
||||
| Phase 4 | Interaction-level regression tests | Exercise template fragments, modals, and menus to ensure UI wiring remains intact | ✅ Complete | Vitest DOM suites cover NSFW selector, recipe modal editing, and global context menus |
|
||||
| Phase 5 | Continuous integration & coverage | Integrate frontend tests into CI workflow and track coverage metrics | ⚪ Not Started | Align reporting directories with backend coverage for unified reporting |
|
||||
|
||||
## Next Steps Checklist
|
||||
@@ -20,6 +20,7 @@ This roadmap tracks the planned rollout of automated testing for the ComfyUI LoR
|
||||
- [x] Prototype AppCore initialization test that verifies manager bootstrapping with stubbed dependencies.
|
||||
- [x] Add AppCore page feature suite exercising context menu creation and infinite scroll registration via DOM fixtures.
|
||||
- [x] Extend AppCore orchestration tests to cover manager wiring, bulk menu setup, and onboarding gating scenarios.
|
||||
- [x] Add interaction regression suites for context menus and recipe modals to complete Phase 4.
|
||||
- [ ] Evaluate integrating coverage reporting once test surface grows (> 20 specs).
|
||||
- [x] Create shared fixtures for the loras and checkpoints pages once dedicated manager suites are added.
|
||||
- [x] Draft focused test matrix for loras/checkpoints manager filtering and sorting paths ahead of Phase 3.
|
||||
|
||||
@@ -36,12 +36,18 @@ class EmbeddingsPageManager {
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize everything when DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
async function initializeEmbeddingsPage() {
|
||||
// Initialize core application
|
||||
await appCore.initialize();
|
||||
|
||||
|
||||
// Initialize embeddings page
|
||||
const embeddingsPage = new EmbeddingsPageManager();
|
||||
await embeddingsPage.initialize();
|
||||
});
|
||||
|
||||
return embeddingsPage;
|
||||
}
|
||||
|
||||
// Initialize everything when DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', initializeEmbeddingsPage);
|
||||
|
||||
export { EmbeddingsPageManager, initializeEmbeddingsPage };
|
||||
|
||||
319
tests/frontend/components/contextMenu.interactions.test.js
Normal file
319
tests/frontend/components/contextMenu.interactions.test.js
Normal file
@@ -0,0 +1,319 @@
|
||||
import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest';
|
||||
|
||||
const showToastMock = vi.fn();
|
||||
const copyToClipboardMock = vi.fn();
|
||||
const getNSFWLevelNameMock = vi.fn((level) => {
|
||||
if (level >= 16) return 'XXX';
|
||||
if (level >= 8) return 'X';
|
||||
if (level >= 4) return 'R';
|
||||
if (level >= 2) return 'PG13';
|
||||
if (level >= 1) return 'PG';
|
||||
return 'Unknown';
|
||||
});
|
||||
const copyLoraSyntaxMock = vi.fn();
|
||||
const sendLoraToWorkflowMock = vi.fn();
|
||||
const buildLoraSyntaxMock = vi.fn((fileName) => `lora:${fileName}`);
|
||||
const openExampleImagesFolderMock = vi.fn();
|
||||
|
||||
const modalManagerMock = {
|
||||
showModal: vi.fn(),
|
||||
closeModal: vi.fn(),
|
||||
registerModal: vi.fn(),
|
||||
getModal: vi.fn(() => ({ element: { style: { display: 'none' } }, isOpen: false })),
|
||||
isAnyModalOpen: vi.fn(),
|
||||
};
|
||||
|
||||
const loadingManagerStub = {
|
||||
showSimpleLoading: vi.fn(),
|
||||
hide: vi.fn(),
|
||||
show: vi.fn(),
|
||||
};
|
||||
|
||||
const stateStub = {
|
||||
global: { settings: {}, loadingManager: loadingManagerStub },
|
||||
loadingManager: loadingManagerStub,
|
||||
virtualScroller: { updateSingleItem: vi.fn() },
|
||||
};
|
||||
|
||||
const saveModelMetadataMock = vi.fn();
|
||||
const downloadExampleImagesApiMock = vi.fn();
|
||||
const replaceModelPreviewMock = vi.fn();
|
||||
const refreshSingleModelMetadataMock = vi.fn();
|
||||
const resetAndReloadMock = vi.fn();
|
||||
|
||||
const getModelApiClientMock = vi.fn(() => ({
|
||||
saveModelMetadata: saveModelMetadataMock,
|
||||
downloadExampleImages: downloadExampleImagesApiMock,
|
||||
replaceModelPreview: replaceModelPreviewMock,
|
||||
refreshSingleModelMetadata: refreshSingleModelMetadataMock,
|
||||
}));
|
||||
|
||||
const updateRecipeMetadataMock = vi.fn(() => Promise.resolve({ success: true }));
|
||||
|
||||
vi.mock('../../../static/js/utils/uiHelpers.js', () => ({
|
||||
showToast: showToastMock,
|
||||
copyToClipboard: copyToClipboardMock,
|
||||
getNSFWLevelName: getNSFWLevelNameMock,
|
||||
copyLoraSyntax: copyLoraSyntaxMock,
|
||||
sendLoraToWorkflow: sendLoraToWorkflowMock,
|
||||
buildLoraSyntax: buildLoraSyntaxMock,
|
||||
openExampleImagesFolder: openExampleImagesFolderMock,
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/managers/ModalManager.js', () => ({
|
||||
modalManager: modalManagerMock,
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/utils/storageHelpers.js', () => ({
|
||||
setSessionItem: vi.fn(),
|
||||
removeSessionItem: vi.fn(),
|
||||
getSessionItem: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/api/modelApiFactory.js', () => ({
|
||||
getModelApiClient: getModelApiClientMock,
|
||||
resetAndReload: resetAndReloadMock,
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/state/index.js', () => ({
|
||||
state: stateStub,
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/utils/modalUtils.js', () => ({
|
||||
showExcludeModal: vi.fn(),
|
||||
showDeleteModal: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/managers/MoveManager.js', () => ({
|
||||
moveManager: { showMoveModal: vi.fn() },
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/api/recipeApi.js', () => ({
|
||||
updateRecipeMetadata: updateRecipeMetadataMock,
|
||||
}));
|
||||
|
||||
async function flushAsyncTasks() {
|
||||
await Promise.resolve();
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
}
|
||||
|
||||
describe('Interaction-level regression coverage', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
vi.useRealTimers();
|
||||
document.body.innerHTML = '';
|
||||
stateStub.global.settings = {};
|
||||
saveModelMetadataMock.mockResolvedValue(undefined);
|
||||
downloadExampleImagesApiMock.mockResolvedValue(undefined);
|
||||
updateRecipeMetadataMock.mockResolvedValue({ success: true });
|
||||
global.modalManager = modalManagerMock;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.useRealTimers();
|
||||
document.body.innerHTML = '';
|
||||
delete window.exampleImagesManager;
|
||||
delete global.fetch;
|
||||
delete global.modalManager;
|
||||
});
|
||||
|
||||
it('opens the NSFW selector from the LoRA context menu and persists the new rating', async () => {
|
||||
document.body.innerHTML = `
|
||||
<div id="loraContextMenu" class="context-menu">
|
||||
<div class="context-menu-item" data-action="set-nsfw"></div>
|
||||
</div>
|
||||
<div id="nsfwLevelSelector" class="nsfw-level-selector" style="display: none;">
|
||||
<div class="nsfw-level-header">
|
||||
<button class="close-nsfw-selector"></button>
|
||||
</div>
|
||||
<div class="nsfw-level-content">
|
||||
<div class="current-level"><span id="currentNSFWLevel"></span></div>
|
||||
<div class="nsfw-level-options">
|
||||
<button class="nsfw-level-btn" data-level="1"></button>
|
||||
<button class="nsfw-level-btn" data-level="4"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'model-card';
|
||||
card.dataset.filepath = '/models/test.safetensors';
|
||||
card.dataset.meta = JSON.stringify({ preview_nsfw_level: 1 });
|
||||
document.body.appendChild(card);
|
||||
|
||||
const { LoraContextMenu } = await import('../../../static/js/components/ContextMenu/LoraContextMenu.js');
|
||||
const helpers = await import('../../../static/js/utils/uiHelpers.js');
|
||||
expect(helpers.showToast).toBe(showToastMock);
|
||||
const contextMenu = new LoraContextMenu();
|
||||
|
||||
contextMenu.showMenu(120, 140, card);
|
||||
|
||||
const nsfwMenuItem = document.querySelector('#loraContextMenu .context-menu-item[data-action="set-nsfw"]');
|
||||
nsfwMenuItem.dispatchEvent(new Event('click', { bubbles: true }));
|
||||
|
||||
const selector = document.getElementById('nsfwLevelSelector');
|
||||
expect(selector.style.display).toBe('block');
|
||||
expect(selector.dataset.cardPath).toBe('/models/test.safetensors');
|
||||
expect(document.getElementById('currentNSFWLevel').textContent).toBe('PG');
|
||||
|
||||
const levelButton = selector.querySelector('.nsfw-level-btn[data-level="4"]');
|
||||
levelButton.dispatchEvent(new Event('click', { bubbles: true }));
|
||||
|
||||
expect(saveModelMetadataMock).toHaveBeenCalledWith('/models/test.safetensors', { preview_nsfw_level: 4 });
|
||||
expect(saveModelMetadataMock).toHaveBeenCalledTimes(1);
|
||||
await saveModelMetadataMock.mock.results[0].value;
|
||||
await flushAsyncTasks();
|
||||
expect(selector.style.display).toBe('none');
|
||||
expect(document.getElementById('loraContextMenu').style.display).toBe('none');
|
||||
});
|
||||
|
||||
it('wires recipe modal title editing to update metadata and UI state', async () => {
|
||||
document.body.innerHTML = `
|
||||
<div id="recipeModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<header class="recipe-modal-header">
|
||||
<h2 id="recipeModalTitle">Recipe Details</h2>
|
||||
<div class="recipe-tags-container">
|
||||
<div class="recipe-tags-compact" id="recipeTagsCompact"></div>
|
||||
<div class="recipe-tags-tooltip" id="recipeTagsTooltip">
|
||||
<div class="tooltip-content" id="recipeTagsTooltipContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="modal-body">
|
||||
<div class="recipe-top-section">
|
||||
<div class="recipe-preview-container" id="recipePreviewContainer">
|
||||
<img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
|
||||
</div>
|
||||
<div class="info-section recipe-gen-params">
|
||||
<div class="gen-params-container">
|
||||
<div class="param-group info-item">
|
||||
<div class="param-header">
|
||||
<label>Prompt</label>
|
||||
<button class="copy-btn" id="copyPromptBtn" title="Copy Prompt"><i class="fas fa-copy"></i></button>
|
||||
</div>
|
||||
<div class="param-content" id="recipePrompt"></div>
|
||||
</div>
|
||||
<div class="param-group info-item">
|
||||
<div class="param-header">
|
||||
<label>Negative Prompt</label>
|
||||
<button class="copy-btn" id="copyNegativePromptBtn" title="Copy Negative Prompt"><i class="fas fa-copy"></i></button>
|
||||
</div>
|
||||
<div class="param-content" id="recipeNegativePrompt"></div>
|
||||
</div>
|
||||
<div class="other-params" id="recipeOtherParams"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-section recipe-bottom-section">
|
||||
<div class="recipe-section-header">
|
||||
<h3>Resources</h3>
|
||||
<div class="recipe-section-actions">
|
||||
<span id="recipeLorasCount"><i class="fas fa-layer-group"></i> 0 LoRAs</span>
|
||||
<button class="action-btn view-loras-btn" id="viewRecipeLorasBtn" title="View all LoRAs in this recipe">
|
||||
<i class="fas fa-external-link-alt"></i>
|
||||
</button>
|
||||
<button class="copy-btn" id="copyRecipeSyntaxBtn" title="Copy Recipe Syntax">
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recipe-loras-list" id="recipeLorasList"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const { RecipeModal } = await import('../../../static/js/components/RecipeModal.js');
|
||||
const recipeModal = new RecipeModal();
|
||||
|
||||
const recipe = {
|
||||
id: 'recipe-1',
|
||||
file_path: '/recipes/test.json',
|
||||
title: 'Original Title',
|
||||
tags: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
|
||||
file_url: '',
|
||||
preview_url: '',
|
||||
source_path: '',
|
||||
gen_params: {
|
||||
prompt: 'Prompt text',
|
||||
negative_prompt: 'Negative prompt',
|
||||
steps: '30',
|
||||
},
|
||||
loras: [],
|
||||
};
|
||||
|
||||
recipeModal.showRecipeDetails(recipe);
|
||||
await new Promise((resolve) => setTimeout(resolve, 60));
|
||||
await flushAsyncTasks();
|
||||
|
||||
expect(modalManagerMock.showModal).toHaveBeenCalledWith('recipeModal');
|
||||
|
||||
const editIcon = document.querySelector('#recipeModalTitle .edit-icon');
|
||||
editIcon.dispatchEvent(new Event('click', { bubbles: true }));
|
||||
|
||||
const titleInput = document.querySelector('#recipeTitleEditor .title-input');
|
||||
titleInput.value = 'Updated Title';
|
||||
|
||||
recipeModal.saveTitleEdit();
|
||||
|
||||
expect(updateRecipeMetadataMock).toHaveBeenCalledWith('/recipes/test.json', { title: 'Updated Title' });
|
||||
expect(updateRecipeMetadataMock).toHaveBeenCalledTimes(1);
|
||||
await updateRecipeMetadataMock.mock.results[0].value;
|
||||
await flushAsyncTasks();
|
||||
|
||||
const titleContainer = document.getElementById('recipeModalTitle');
|
||||
expect(titleContainer.querySelector('.content-text').textContent).toBe('Updated Title');
|
||||
expect(titleContainer.querySelector('#recipeTitleEditor').classList.contains('active')).toBe(false);
|
||||
expect(recipeModal.currentRecipe.title).toBe('Updated Title');
|
||||
});
|
||||
|
||||
it('processes global context menu actions for downloads and cleanup', async () => {
|
||||
document.body.innerHTML = `
|
||||
<div id="globalContextMenu" class="context-menu">
|
||||
<div class="context-menu-item" data-action="download-example-images"></div>
|
||||
<div class="context-menu-item" data-action="cleanup-example-images-folders"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const { GlobalContextMenu } = await import('../../../static/js/components/ContextMenu/GlobalContextMenu.js');
|
||||
const menu = new GlobalContextMenu();
|
||||
|
||||
stateStub.global.settings.example_images_path = '/tmp/examples';
|
||||
window.exampleImagesManager = {
|
||||
handleDownloadButton: vi.fn().mockResolvedValue(undefined),
|
||||
};
|
||||
|
||||
menu.showMenu(100, 200);
|
||||
const downloadItem = document.querySelector('[data-action="download-example-images"]');
|
||||
downloadItem.dispatchEvent(new Event('click', { bubbles: true }));
|
||||
expect(downloadItem.classList.contains('disabled')).toBe(true);
|
||||
|
||||
expect(window.exampleImagesManager.handleDownloadButton).toHaveBeenCalledTimes(1);
|
||||
await window.exampleImagesManager.handleDownloadButton.mock.results[0].value;
|
||||
await flushAsyncTasks();
|
||||
expect(downloadItem.classList.contains('disabled')).toBe(false);
|
||||
expect(document.getElementById('globalContextMenu').style.display).toBe('none');
|
||||
|
||||
global.fetch = vi.fn().mockResolvedValue({
|
||||
ok: true,
|
||||
json: async () => ({ success: true, moved_total: 2 }),
|
||||
});
|
||||
|
||||
menu.showMenu(240, 320);
|
||||
const cleanupItem = document.querySelector('[data-action="cleanup-example-images-folders"]');
|
||||
cleanupItem.dispatchEvent(new Event('click', { bubbles: true }));
|
||||
expect(cleanupItem.classList.contains('disabled')).toBe(true);
|
||||
|
||||
expect(global.fetch).toHaveBeenCalledWith('/api/lm/cleanup-example-image-folders', { method: 'POST' });
|
||||
expect(global.fetch).toHaveBeenCalledTimes(1);
|
||||
const responsePromise = global.fetch.mock.results[0].value;
|
||||
const response = await responsePromise;
|
||||
await response.json();
|
||||
await flushAsyncTasks();
|
||||
expect(cleanupItem.classList.contains('disabled')).toBe(false);
|
||||
expect(menu._cleanupInProgress).toBe(false);
|
||||
});
|
||||
});
|
||||
99
tests/frontend/pages/embeddingsPage.test.js
Normal file
99
tests/frontend/pages/embeddingsPage.test.js
Normal file
@@ -0,0 +1,99 @@
|
||||
import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
|
||||
import { renderEmbeddingsPage } from '../utils/pageFixtures.js';
|
||||
|
||||
const initializeAppMock = vi.fn();
|
||||
const initializePageFeaturesMock = vi.fn();
|
||||
const createPageControlsMock = vi.fn();
|
||||
const confirmDeleteMock = vi.fn();
|
||||
const closeDeleteModalMock = vi.fn();
|
||||
const confirmExcludeMock = vi.fn();
|
||||
const closeExcludeModalMock = vi.fn();
|
||||
const duplicatesManagerMock = vi.fn();
|
||||
|
||||
vi.mock('../../../static/js/core.js', () => ({
|
||||
appCore: {
|
||||
initialize: initializeAppMock,
|
||||
initializePageFeatures: initializePageFeaturesMock,
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/components/controls/index.js', () => ({
|
||||
createPageControls: createPageControlsMock,
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/utils/modalUtils.js', () => ({
|
||||
confirmDelete: confirmDeleteMock,
|
||||
closeDeleteModal: closeDeleteModalMock,
|
||||
confirmExclude: confirmExcludeMock,
|
||||
closeExcludeModal: closeExcludeModalMock,
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/api/apiConfig.js', () => ({
|
||||
MODEL_TYPES: {
|
||||
EMBEDDING: 'embeddings',
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/components/ModelDuplicatesManager.js', () => ({
|
||||
ModelDuplicatesManager: duplicatesManagerMock,
|
||||
}));
|
||||
|
||||
describe('EmbeddingsPageManager', () => {
|
||||
let EmbeddingsPageManager;
|
||||
let initializeEmbeddingsPage;
|
||||
let duplicatesManagerInstance;
|
||||
|
||||
beforeEach(async () => {
|
||||
vi.resetModules();
|
||||
vi.clearAllMocks();
|
||||
|
||||
duplicatesManagerInstance = {
|
||||
checkDuplicatesCount: vi.fn(),
|
||||
};
|
||||
|
||||
duplicatesManagerMock.mockReturnValue(duplicatesManagerInstance);
|
||||
createPageControlsMock.mockReturnValue({ destroy: vi.fn() });
|
||||
initializeAppMock.mockResolvedValue(undefined);
|
||||
|
||||
renderEmbeddingsPage();
|
||||
|
||||
({ EmbeddingsPageManager, initializeEmbeddingsPage } = await import('../../../static/js/embeddings.js'));
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
delete window.confirmDelete;
|
||||
delete window.closeDeleteModal;
|
||||
delete window.confirmExclude;
|
||||
delete window.closeExcludeModal;
|
||||
delete window.modelDuplicatesManager;
|
||||
});
|
||||
|
||||
it('wires page controls and exposes modal helpers during construction', () => {
|
||||
const manager = new EmbeddingsPageManager();
|
||||
|
||||
expect(createPageControlsMock).toHaveBeenCalledWith('embeddings');
|
||||
expect(duplicatesManagerMock).toHaveBeenCalledWith(manager, 'embeddings');
|
||||
|
||||
expect(window.confirmDelete).toBe(confirmDeleteMock);
|
||||
expect(window.closeDeleteModal).toBe(closeDeleteModalMock);
|
||||
expect(window.confirmExclude).toBe(confirmExcludeMock);
|
||||
expect(window.closeExcludeModal).toBe(closeExcludeModalMock);
|
||||
expect(window.modelDuplicatesManager).toBe(duplicatesManagerInstance);
|
||||
});
|
||||
|
||||
it('initializes shared page features', async () => {
|
||||
const manager = new EmbeddingsPageManager();
|
||||
|
||||
await manager.initialize();
|
||||
|
||||
expect(initializePageFeaturesMock).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('boots the embeddings page through the initializer', async () => {
|
||||
const manager = await initializeEmbeddingsPage();
|
||||
|
||||
expect(initializeAppMock).toHaveBeenCalledTimes(1);
|
||||
expect(manager).toBeInstanceOf(EmbeddingsPageManager);
|
||||
expect(window.modelDuplicatesManager).toBe(duplicatesManagerInstance);
|
||||
});
|
||||
});
|
||||
209
tests/frontend/pages/recipesPage.test.js
Normal file
209
tests/frontend/pages/recipesPage.test.js
Normal file
@@ -0,0 +1,209 @@
|
||||
import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
|
||||
import { renderRecipesPage } from '../utils/pageFixtures.js';
|
||||
|
||||
const initializeAppMock = vi.fn();
|
||||
const initializePageFeaturesMock = vi.fn();
|
||||
const getCurrentPageStateMock = vi.fn();
|
||||
const getSessionItemMock = vi.fn();
|
||||
const removeSessionItemMock = vi.fn();
|
||||
const RecipeContextMenuMock = vi.fn();
|
||||
const refreshVirtualScrollMock = vi.fn();
|
||||
const refreshRecipesMock = vi.fn();
|
||||
|
||||
let importManagerInstance;
|
||||
let recipeModalInstance;
|
||||
let duplicatesManagerInstance;
|
||||
|
||||
const ImportManagerMock = vi.fn(() => importManagerInstance);
|
||||
const RecipeModalMock = vi.fn(() => recipeModalInstance);
|
||||
const DuplicatesManagerMock = vi.fn(() => duplicatesManagerInstance);
|
||||
|
||||
vi.mock('../../../static/js/core.js', () => ({
|
||||
appCore: {
|
||||
initialize: initializeAppMock,
|
||||
initializePageFeatures: initializePageFeaturesMock,
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/managers/ImportManager.js', () => ({
|
||||
ImportManager: ImportManagerMock,
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/components/RecipeModal.js', () => ({
|
||||
RecipeModal: RecipeModalMock,
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/state/index.js', () => ({
|
||||
getCurrentPageState: getCurrentPageStateMock,
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/utils/storageHelpers.js', () => ({
|
||||
getSessionItem: getSessionItemMock,
|
||||
removeSessionItem: removeSessionItemMock,
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/components/ContextMenu/index.js', () => ({
|
||||
RecipeContextMenu: RecipeContextMenuMock,
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/components/DuplicatesManager.js', () => ({
|
||||
DuplicatesManager: DuplicatesManagerMock,
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/utils/infiniteScroll.js', () => ({
|
||||
refreshVirtualScroll: refreshVirtualScrollMock,
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/api/recipeApi.js', () => ({
|
||||
refreshRecipes: refreshRecipesMock,
|
||||
}));
|
||||
|
||||
describe('RecipeManager', () => {
|
||||
let RecipeManager;
|
||||
let pageState;
|
||||
|
||||
beforeEach(async () => {
|
||||
vi.resetModules();
|
||||
vi.clearAllMocks();
|
||||
|
||||
importManagerInstance = {
|
||||
showImportModal: vi.fn(),
|
||||
};
|
||||
recipeModalInstance = {
|
||||
showRecipeDetails: vi.fn(),
|
||||
};
|
||||
duplicatesManagerInstance = {
|
||||
findDuplicates: vi.fn(),
|
||||
selectLatestDuplicates: vi.fn(),
|
||||
deleteSelectedDuplicates: vi.fn(),
|
||||
confirmDeleteDuplicates: vi.fn(),
|
||||
exitDuplicateMode: vi.fn(),
|
||||
};
|
||||
|
||||
pageState = {
|
||||
sortBy: 'date',
|
||||
searchOptions: undefined,
|
||||
customFilter: undefined,
|
||||
duplicatesMode: false,
|
||||
};
|
||||
|
||||
getCurrentPageStateMock.mockImplementation(() => pageState);
|
||||
initializeAppMock.mockResolvedValue(undefined);
|
||||
initializePageFeaturesMock.mockResolvedValue(undefined);
|
||||
refreshVirtualScrollMock.mockReset();
|
||||
refreshVirtualScrollMock.mockImplementation(() => {});
|
||||
refreshRecipesMock.mockResolvedValue('refreshed');
|
||||
|
||||
getSessionItemMock.mockImplementation((key) => {
|
||||
const map = {
|
||||
lora_to_recipe_filterLoraName: 'Flux Dream',
|
||||
lora_to_recipe_filterLoraHash: 'abc123',
|
||||
viewRecipeId: '42',
|
||||
};
|
||||
return map[key] ?? null;
|
||||
});
|
||||
removeSessionItemMock.mockImplementation(() => {});
|
||||
|
||||
renderRecipesPage();
|
||||
|
||||
({ RecipeManager } = await import('../../../static/js/recipes.js'));
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
delete window.recipeManager;
|
||||
delete window.importManager;
|
||||
});
|
||||
|
||||
it('initializes page controls, restores filters, and wires sort interactions', async () => {
|
||||
const sortSelectElement = document.createElement('select');
|
||||
sortSelectElement.id = 'sortSelect';
|
||||
sortSelectElement.innerHTML = `
|
||||
<option value="date">Date</option>
|
||||
<option value="name">Name</option>
|
||||
`;
|
||||
document.body.appendChild(sortSelectElement);
|
||||
|
||||
const manager = new RecipeManager();
|
||||
await manager.initialize();
|
||||
|
||||
expect(ImportManagerMock).toHaveBeenCalledTimes(1);
|
||||
expect(RecipeModalMock).toHaveBeenCalledTimes(1);
|
||||
expect(DuplicatesManagerMock).toHaveBeenCalledWith(manager);
|
||||
expect(RecipeContextMenuMock).toHaveBeenCalledTimes(1);
|
||||
|
||||
expect(window.recipeManager).toBe(manager);
|
||||
expect(window.importManager).toBe(importManagerInstance);
|
||||
|
||||
expect(pageState.searchOptions).toEqual({
|
||||
title: true,
|
||||
tags: true,
|
||||
loraName: true,
|
||||
loraModel: true,
|
||||
});
|
||||
|
||||
expect(pageState.customFilter).toEqual({
|
||||
active: true,
|
||||
loraName: 'Flux Dream',
|
||||
loraHash: 'abc123',
|
||||
recipeId: '42',
|
||||
});
|
||||
|
||||
const indicator = document.getElementById('customFilterIndicator');
|
||||
expect(indicator.classList.contains('hidden')).toBe(false);
|
||||
|
||||
const clearButton = indicator.querySelector('.clear-filter');
|
||||
clearButton.dispatchEvent(new Event('click', { bubbles: true }));
|
||||
|
||||
expect(removeSessionItemMock).toHaveBeenCalledWith('lora_to_recipe_filterLoraName');
|
||||
expect(removeSessionItemMock).toHaveBeenCalledWith('lora_to_recipe_filterLoraHash');
|
||||
expect(removeSessionItemMock).toHaveBeenCalledWith('viewRecipeId');
|
||||
expect(pageState.customFilter.active).toBe(false);
|
||||
expect(indicator.classList.contains('hidden')).toBe(true);
|
||||
expect(refreshVirtualScrollMock).toHaveBeenCalledTimes(1);
|
||||
|
||||
const sortSelect = document.getElementById('sortSelect');
|
||||
sortSelect.value = 'name';
|
||||
sortSelect.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
|
||||
expect(pageState.sortBy).toBe('name');
|
||||
expect(refreshVirtualScrollMock).toHaveBeenCalledTimes(2);
|
||||
expect(initializePageFeaturesMock).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('skips loading when duplicates mode is active and refreshes otherwise', async () => {
|
||||
const manager = new RecipeManager();
|
||||
|
||||
pageState.duplicatesMode = true;
|
||||
await manager.loadRecipes();
|
||||
expect(refreshVirtualScrollMock).not.toHaveBeenCalled();
|
||||
|
||||
pageState.duplicatesMode = false;
|
||||
await manager.loadRecipes();
|
||||
expect(refreshVirtualScrollMock).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('proxies duplicate management and refresh helpers', async () => {
|
||||
const manager = new RecipeManager();
|
||||
|
||||
await manager.findDuplicateRecipes();
|
||||
expect(duplicatesManagerInstance.findDuplicates).toHaveBeenCalledTimes(1);
|
||||
|
||||
manager.selectLatestDuplicates();
|
||||
expect(duplicatesManagerInstance.selectLatestDuplicates).toHaveBeenCalledTimes(1);
|
||||
|
||||
manager.deleteSelectedDuplicates();
|
||||
expect(duplicatesManagerInstance.deleteSelectedDuplicates).toHaveBeenCalledTimes(1);
|
||||
|
||||
manager.confirmDeleteDuplicates();
|
||||
expect(duplicatesManagerInstance.confirmDeleteDuplicates).toHaveBeenCalledTimes(1);
|
||||
|
||||
const grid = document.getElementById('recipeGrid');
|
||||
grid.innerHTML = '<div>content</div>';
|
||||
manager.exitDuplicateMode();
|
||||
expect(grid.innerHTML).toBe('');
|
||||
expect(duplicatesManagerInstance.exitDuplicateMode).toHaveBeenCalledTimes(1);
|
||||
|
||||
await manager.refreshRecipes();
|
||||
expect(refreshRecipesMock).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
@@ -23,3 +23,27 @@ export function renderCheckpointsPage() {
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the Embeddings page template with expected dataset attributes.
|
||||
* @returns {Element}
|
||||
*/
|
||||
export function renderEmbeddingsPage() {
|
||||
return renderTemplate('embeddings.html', {
|
||||
dataset: {
|
||||
page: 'embeddings',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the Recipes page template with expected dataset attributes.
|
||||
* @returns {Element}
|
||||
*/
|
||||
export function renderRecipesPage() {
|
||||
return renderTemplate('recipes.html', {
|
||||
dataset: {
|
||||
page: 'recipes',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user