test(frontend): add checkpoints manager smoke tests

docs/frontend-testing-roadmap.md

@@ -9,7 +9,7 @@ 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 manager initialization suite landed; shared page fixtures ready for checkpoints |
+| 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; outlining filter/sort coverage before extending to embeddings |
 | 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 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 |
 
@@ -23,6 +23,7 @@ This roadmap tracks the planned rollout of automated testing for the ComfyUI LoR
 - [ ] 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.
 - [ ] Draft focused test matrix for loras/checkpoints manager filtering and sorting paths ahead of Phase 3.
-- [ ] Implement checkpoints page manager smoke tests covering initialization and duplicate badge wiring.
+- [x] Implement checkpoints page manager smoke tests covering initialization and duplicate badge wiring.
+- [ ] Outline focused checkpoints scenarios (filtering, sorting, duplicate badge toggles) to feed into the shared test matrix.
 
 Maintaining this roadmap alongside code changes will make it easier to append new automated test tasks and update their progress.

tests/frontend/pages/checkpointsPage.test.js

@@ -0,0 +1,100 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { renderCheckpointsPage } from '../utils/pageFixtures.js';
+
+const CHECKPOINT_TYPE = 'checkpoints';
+
+vi.mock('../../../static/js/api/apiConfig.js', () => ({
+  MODEL_TYPES: {
+    CHECKPOINT: CHECKPOINT_TYPE,
+  },
+}));
+
+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/components/ModelDuplicatesManager.js', () => ({
+  ModelDuplicatesManager: duplicatesManagerMock,
+}));
+
+describe('CheckpointsPageManager', () => {
+  let CheckpointsPageManager;
+  let initializeCheckpointsPage;
+  let duplicatesManagerInstance;
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+
+    duplicatesManagerInstance = {
+      checkDuplicatesCount: vi.fn(),
+    };
+
+    duplicatesManagerMock.mockReturnValue(duplicatesManagerInstance);
+    createPageControlsMock.mockReturnValue({ destroy: vi.fn() });
+    initializeAppMock.mockResolvedValue(undefined);
+
+    renderCheckpointsPage();
+
+    ({ CheckpointsPageManager, initializeCheckpointsPage } = await import('../../../static/js/checkpoints.js'));
+  });
+
+  afterEach(() => {
+    delete window.confirmDelete;
+    delete window.closeDeleteModal;
+    delete window.confirmExclude;
+    delete window.closeExcludeModal;
+    delete window.modelDuplicatesManager;
+  });
+
+  it('wires duplicates manager and exposes globals during construction', () => {
+    const manager = new CheckpointsPageManager();
+
+    expect(createPageControlsMock).toHaveBeenCalledWith(CHECKPOINT_TYPE);
+    expect(duplicatesManagerMock).toHaveBeenCalledWith(manager, CHECKPOINT_TYPE);
+
+    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 CheckpointsPageManager();
+
+    await manager.initialize();
+
+    expect(initializePageFeaturesMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('boots the page when DOMContentLoaded handler runs', async () => {
+    const manager = await initializeCheckpointsPage();
+
+    expect(initializeAppMock).toHaveBeenCalledTimes(1);
+    expect(manager).toBeInstanceOf(CheckpointsPageManager);
+    expect(window.modelDuplicatesManager).toBe(duplicatesManagerInstance);
+  });
+});