mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-09-20 18:51:26 -03:00
feat(recipes): add location open and recipe ID copy to recipe modal
Add a de-emphasized meta footer to the recipe modal, mirroring the model modal's hash footnote: a clickable file location on the left (opens the recipe JSON via the generic open-file-location route, with the Docker clipboard fallback) and a middle-truncated recipe ID with copy button on the right. The recipe detail API now exposes recipe_json_path so the frontend does not have to guess the on-disk storage layout. Translations for the new recipes.modal.* keys are filled in for all 9 locales, reusing the model modal's openFileLocation wording per locale.
This commit is contained in:
Will Miao
@@ -0,0 +1,270 @@
|
||||
import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest';
|
||||
|
||||
const showToastMock = vi.fn();
|
||||
const copyToClipboardMock = vi.fn();
|
||||
const translateMock = vi.fn((key, params, fallback) => (typeof fallback === 'string' ? fallback : key));
|
||||
|
||||
const loadingManagerStub = {
|
||||
showSimpleLoading: vi.fn(),
|
||||
hide: vi.fn(),
|
||||
show: vi.fn(),
|
||||
restoreProgressBar: vi.fn(),
|
||||
};
|
||||
|
||||
const recipeItem = {
|
||||
id: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
|
||||
file_path: '/recipes/a1b2c3d4-e5f6-7890-abcd-ef1234567890.png',
|
||||
title: 'Demo Recipe',
|
||||
tags: [],
|
||||
loras: [],
|
||||
};
|
||||
|
||||
const virtualScrollerStub = {
|
||||
updateSingleItem: vi.fn(),
|
||||
getNavigationState: vi.fn(() => ({
|
||||
index: 0,
|
||||
hasPrev: false,
|
||||
hasNext: false,
|
||||
loadedItems: 1,
|
||||
totalItems: 1,
|
||||
})),
|
||||
getAdjacentItemByFilePath: vi.fn(async () => null),
|
||||
};
|
||||
|
||||
const stateStub = {
|
||||
global: { settings: {}, loadingManager: loadingManagerStub },
|
||||
loadingManager: loadingManagerStub,
|
||||
virtualScroller: virtualScrollerStub,
|
||||
};
|
||||
|
||||
const modalManagerMock = {
|
||||
showModal: vi.fn(),
|
||||
closeModal: vi.fn(),
|
||||
};
|
||||
|
||||
const fetchRecipeDetailsMock = vi.fn(async () => ({}));
|
||||
const updateRecipeMetadataMock = vi.fn(() => Promise.resolve({ success: true }));
|
||||
|
||||
vi.mock('../../../static/js/utils/uiHelpers.js', () => ({
|
||||
showToast: showToastMock,
|
||||
copyToClipboard: copyToClipboardMock,
|
||||
sendLoraToWorkflow: vi.fn(),
|
||||
sendModelPathToWorkflow: vi.fn(),
|
||||
openCivitaiByMetadata: vi.fn(),
|
||||
stripLoraTags: vi.fn((text) => text),
|
||||
sendPromptToWorkflow: vi.fn(),
|
||||
sendGenParamsToWorkflow: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/utils/i18nHelpers.js', () => ({
|
||||
translate: translateMock,
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/state/index.js', () => ({
|
||||
state: stateStub,
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/utils/storageHelpers.js', () => ({
|
||||
setSessionItem: vi.fn(),
|
||||
removeSessionItem: vi.fn(),
|
||||
getStorageItem: vi.fn(() => null),
|
||||
setStorageItem: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/api/recipeApi.js', () => ({
|
||||
fetchRecipeDetails: fetchRecipeDetailsMock,
|
||||
updateRecipeMetadata: updateRecipeMetadataMock,
|
||||
sendRecipeWorkflow: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('../../../static/js/api/apiConfig.js', () => ({
|
||||
MODEL_TYPES: {
|
||||
LORA: 'loras',
|
||||
CHECKPOINT: 'checkpoints',
|
||||
EMBEDDING: 'embeddings',
|
||||
},
|
||||
}));
|
||||
|
||||
function recipeModalFixture() {
|
||||
return `
|
||||
<div id="recipeModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<header class="recipe-modal-header">
|
||||
<div class="recipe-modal-header-row">
|
||||
<h2 id="recipeModalTitle">Recipe Details</h2>
|
||||
<div class="modal-nav-controls">
|
||||
<button class="modal-nav-btn" id="recipeNavPrevBtn" disabled></button>
|
||||
<button class="modal-nav-btn" id="recipeNavNextBtn" disabled></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recipe-header-actions" id="recipeHeaderActions">
|
||||
<button class="modal-send-btn" id="sendRecipeBtn"><i class="fas fa-paper-plane"></i></button>
|
||||
<button class="modal-copy-btn" id="copyRecipeSyntaxBtn"><i class="fas fa-copy"></i></button>
|
||||
</div>
|
||||
<div id="recipeTagsContainer"></div>
|
||||
</header>
|
||||
<div class="modal-body">
|
||||
<div class="recipe-media-column">
|
||||
<div class="recipe-preview-container" id="recipePreviewContainer">
|
||||
<img id="recipeModalImage" src="" alt="Recipe Preview" class="recipe-preview-media">
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-section recipe-gen-params">
|
||||
<div class="gen-params-container">
|
||||
<div class="param-group info-item">
|
||||
<div class="param-content" id="recipePrompt"></div>
|
||||
<div class="param-editor" id="recipePromptEditor">
|
||||
<textarea class="param-textarea" id="recipePromptInput"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-group info-item">
|
||||
<div class="param-content" id="recipeNegativePrompt"></div>
|
||||
<div class="param-editor" id="recipeNegativePromptEditor">
|
||||
<textarea class="param-textarea" id="recipeNegativePromptInput"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="other-params" id="recipeOtherParams"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-section recipe-bottom-section">
|
||||
<div class="recipe-section-actions">
|
||||
<span id="recipeLorasCount"></span>
|
||||
<button class="action-btn view-loras-btn" id="viewRecipeLorasBtn"></button>
|
||||
</div>
|
||||
<div class="recipe-loras-list" id="recipeLorasList"></div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="recipe-meta-footer" id="recipeMetaFooter" hidden></footer>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async function flushAsyncTasks() {
|
||||
await Promise.resolve();
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
}
|
||||
|
||||
const createdModals = [];
|
||||
|
||||
async function createRecipeModal() {
|
||||
const { RecipeModal } = await import('../../../static/js/components/RecipeModal.js');
|
||||
const recipeModal = new RecipeModal();
|
||||
createdModals.push(recipeModal);
|
||||
return recipeModal;
|
||||
}
|
||||
|
||||
function openLocationFetchCalls() {
|
||||
return global.fetch.mock.calls.filter(([url]) => url === '/api/lm/open-file-location');
|
||||
}
|
||||
|
||||
describe('RecipeModal meta footer', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
document.body.innerHTML = recipeModalFixture();
|
||||
global.modalManager = modalManagerMock;
|
||||
global.fetch = vi.fn(async () => ({
|
||||
ok: true,
|
||||
json: async () => ({}),
|
||||
}));
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
createdModals.forEach(recipeModal => recipeModal.cleanupNavigationShortcuts());
|
||||
createdModals.length = 0;
|
||||
document.body.innerHTML = '';
|
||||
delete global.modalManager;
|
||||
delete global.fetch;
|
||||
});
|
||||
|
||||
it('shows the folder path and a middle-truncated recipe ID', async () => {
|
||||
const recipeModal = await createRecipeModal();
|
||||
recipeModal.showRecipeDetails(recipeItem);
|
||||
|
||||
const footer = document.getElementById('recipeMetaFooter');
|
||||
expect(footer.hidden).toBe(false);
|
||||
|
||||
const location = footer.querySelector('.recipe-meta-location');
|
||||
expect(location.querySelector('.recipe-meta-location-path').textContent).toBe('/recipes/');
|
||||
expect(location.dataset.filepath).toBe(recipeItem.file_path);
|
||||
|
||||
const idValue = footer.querySelector('.recipe-meta-id-value');
|
||||
expect(idValue.textContent).toBe('a1b2c3d4…7890');
|
||||
expect(idValue.getAttribute('title')).toBe(recipeItem.id);
|
||||
});
|
||||
|
||||
it('copies the full recipe ID when the copy button is clicked', async () => {
|
||||
const recipeModal = await createRecipeModal();
|
||||
recipeModal.showRecipeDetails(recipeItem);
|
||||
|
||||
document.querySelector('.recipe-meta-copy-btn').click();
|
||||
|
||||
expect(copyToClipboardMock).toHaveBeenCalledWith(recipeItem.id);
|
||||
});
|
||||
|
||||
it('opens the recipe file location when the path is clicked', async () => {
|
||||
const recipeModal = await createRecipeModal();
|
||||
recipeModal.showRecipeDetails(recipeItem);
|
||||
|
||||
document.querySelector('.recipe-meta-location').click();
|
||||
await flushAsyncTasks();
|
||||
|
||||
const calls = openLocationFetchCalls();
|
||||
expect(calls).toHaveLength(1);
|
||||
expect(JSON.parse(calls[0][1].body)).toEqual({ file_path: recipeItem.file_path });
|
||||
expect(showToastMock).toHaveBeenCalledWith('recipes.modal.openFileLocation.success', {}, 'success');
|
||||
});
|
||||
|
||||
it('opens the recipe JSON path once hydration provides it', async () => {
|
||||
const jsonPath = '/recipes/a1b2c3d4-e5f6-7890-abcd-ef1234567890.recipe.json';
|
||||
fetchRecipeDetailsMock.mockResolvedValueOnce({
|
||||
id: recipeItem.id,
|
||||
file_path: recipeItem.file_path,
|
||||
recipe_json_path: jsonPath,
|
||||
});
|
||||
|
||||
const recipeModal = await createRecipeModal();
|
||||
recipeModal.showRecipeDetails(recipeItem);
|
||||
await flushAsyncTasks();
|
||||
|
||||
const location = document.querySelector('.recipe-meta-location');
|
||||
expect(location.dataset.filepath).toBe(jsonPath);
|
||||
});
|
||||
|
||||
it('copies the path to clipboard when the backend reports clipboard mode', async () => {
|
||||
const writeTextMock = vi.fn(async () => {});
|
||||
Object.defineProperty(window.navigator, 'clipboard', {
|
||||
value: { writeText: writeTextMock },
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
global.fetch = vi.fn(async (url) => ({
|
||||
ok: true,
|
||||
json: async () => (url === '/api/lm/open-file-location'
|
||||
? { mode: 'clipboard', path: '/recipes' }
|
||||
: {}),
|
||||
}));
|
||||
|
||||
const recipeModal = await createRecipeModal();
|
||||
recipeModal.showRecipeDetails(recipeItem);
|
||||
|
||||
document.querySelector('.recipe-meta-location').click();
|
||||
await flushAsyncTasks();
|
||||
|
||||
expect(writeTextMock).toHaveBeenCalledWith('/recipes');
|
||||
expect(showToastMock).toHaveBeenCalledWith(
|
||||
'recipes.modal.openFileLocation.copied',
|
||||
{ path: '/recipes' },
|
||||
'success',
|
||||
);
|
||||
});
|
||||
|
||||
it('hides the footer when neither ID nor file path is available', async () => {
|
||||
const recipeModal = await createRecipeModal();
|
||||
recipeModal.showRecipeDetails({ title: 'Orphan', tags: [], loras: [] });
|
||||
|
||||
const footer = document.getElementById('recipeMetaFooter');
|
||||
expect(footer.hidden).toBe(true);
|
||||
expect(footer.innerHTML).toBe('');
|
||||
});
|
||||
});
|
||||
@@ -2246,3 +2246,31 @@ async def test_reimport_without_any_source_returns_400(
|
||||
assert payload["success"] is False
|
||||
assert harness.analysis.local_calls == []
|
||||
assert harness.persistence.delete_calls == []
|
||||
|
||||
|
||||
async def test_get_recipe_detail_includes_recipe_json_path(
|
||||
monkeypatch, tmp_path: Path
|
||||
) -> None:
|
||||
"""The detail response exposes the recipe JSON path for open-location UI."""
|
||||
async with recipe_harness(monkeypatch, tmp_path) as harness:
|
||||
recipes_dir = Path(harness.scanner.recipes_dir)
|
||||
recipes_dir.mkdir(parents=True, exist_ok=True)
|
||||
harness.scanner.recipes["recipe-1"] = {
|
||||
"id": "recipe-1",
|
||||
"title": "Demo",
|
||||
"file_path": str(recipes_dir / "recipe-1.png"),
|
||||
}
|
||||
json_file = recipes_dir / "recipe-1.recipe.json"
|
||||
json_file.write_text("{}", encoding="utf-8")
|
||||
|
||||
response = await harness.client.get("/api/lm/recipe/recipe-1")
|
||||
assert response.status == 200
|
||||
payload = await response.json()
|
||||
assert payload["recipe_json_path"] == str(json_file)
|
||||
|
||||
# Without the JSON file on disk the key is omitted entirely.
|
||||
json_file.unlink()
|
||||
response = await harness.client.get("/api/lm/recipe/recipe-1")
|
||||
assert response.status == 200
|
||||
payload = await response.json()
|
||||
assert "recipe_json_path" not in payload
|
||||
|
||||
Reference in New Issue
Block a user