nebula-cms 0.1.3 → 0.1.4

package/tests/client/components/Admin.test.ts

@@ -1,446 +0,0 @@
-import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
-import { render, cleanup } from '@testing-library/svelte';
-import Admin from '../../../src/client/Admin.svelte';
-
-/**
- * Tests for the Admin orchestration component.
- * All JS module imports are mocked so that Svelte 5 runes never initialize
- * in the jsdom environment. Tests verify state-driven rendering: which child
- * components are mounted based on the backend ready state and current route.
- *
- * vi.hoisted is required because vi.mock factories are hoisted above all
- * variable declarations at the top of the file, so any mock fn referenced
- * inside a factory must itself be declared via vi.hoisted to avoid TDZ errors.
- */
-
-/*
-//////////////////////////////
-// Hoisted mock functions
-//////////////////////////////
-*/
-
-const {
-  mockBackendReady,
-  mockRoute,
-  mockCollections,
-  mockContentList,
-  mockLoading,
-  mockError,
-  mockDrafts,
-  mockOutdatedMap,
-  mockActiveTab,
-  mockEditorFile,
-  mockSchema,
-  mockCollectionHasDates,
-  mockComputePublishDisabled,
-} = vi.hoisted(() => ({
-  mockBackendReady: vi.fn(() => false),
-  mockRoute: vi.fn(() => ({ view: 'home' as const })),
-  mockCollections: vi.fn(() => [] as string[]),
-  mockContentList: vi.fn(
-    () => [] as Array<{ filename: string; data: Record<string, unknown> }>,
-  ),
-  mockLoading: vi.fn(() => false),
-  mockError: vi.fn(() => null as string | null),
-  mockDrafts: vi.fn(
-    () =>
-      [] as Array<{
-        id: string;
-        isNew: boolean;
-        filename: string | null;
-        formData: Record<string, unknown>;
-        collection: string;
-      }>,
-  ),
-  mockOutdatedMap: vi.fn(() => ({}) as Record<string, boolean>),
-  mockActiveTab: vi.fn(() => 'metadata'),
-  mockEditorFile: vi.fn(() => null),
-  mockSchema: vi.fn(() => null),
-  mockCollectionHasDates: vi.fn(() => false),
-  mockComputePublishDisabled: vi.fn(() => false),
-}));
-
-/*
-//////////////////////////////
-// Module mocks
-//////////////////////////////
-*/
-
-vi.mock('../../../src/client/js/state/state.svelte', () => ({
-  backend: {
-    get type() {
-      return null;
-    },
-    get ready() {
-      return mockBackendReady();
-    },
-    get permission() {
-      return 'denied';
-    },
-  },
-  content: {
-    get list() {
-      return mockContentList();
-    },
-    get loading() {
-      return mockLoading();
-    },
-    get error() {
-      return mockError();
-    },
-  },
-  get collections() {
-    return mockCollections();
-  },
-  drafts: {
-    get all() {
-      return mockDrafts();
-    },
-    get outdated() {
-      return mockOutdatedMap();
-    },
-  },
-  storageClient: {},
-  restoreBackend: vi.fn(() => Promise.resolve()),
-  loadCollection: vi.fn(() => Promise.resolve()),
-  reloadCollection: vi.fn(),
-  disconnect: vi.fn(),
-  refreshDrafts: vi.fn(() => Promise.resolve()),
-  updateContentItem: vi.fn(),
-  pickDirectory: vi.fn(),
-  requestPermission: vi.fn(),
-  connectGitHub: vi.fn(() => Promise.resolve()),
-}));
-
-vi.mock('../../../src/client/js/state/router.svelte', () => ({
-  initRouter: vi.fn(),
-  nav: {
-    get route() {
-      return mockRoute();
-    },
-  },
-  navigate: vi.fn(),
-  registerDirtyChecker: vi.fn(),
-  adminPath: vi.fn((...segments) =>
-    segments.length === 0 ? '/admin' : '/admin/' + segments.join('/'),
-  ),
-}));
-
-vi.mock('../../../src/client/js/state/schema.svelte', () => ({
-  fetchSchema: vi.fn(() => Promise.resolve()),
-  schema: {
-    get active() {
-      return mockSchema();
-    },
-  },
-  clearSchema: vi.fn(),
-  prefetchAllSchemas: vi.fn(() => Promise.resolve()),
-  collectionHasDates: mockCollectionHasDates,
-  getCollectionTitle: vi.fn(() => null),
-  getCollectionDescription: vi.fn(() => null),
-}));
-
-vi.mock('../../../src/client/js/editor/editor.svelte', () => ({
-  preloadFile: vi.fn(() => Promise.resolve()),
-  loadFileBody: vi.fn(() => Promise.resolve()),
-  clearEditor: vi.fn(),
-  editor: {
-    get tab() {
-      return mockActiveTab();
-    },
-    get data() {
-      return {};
-    },
-    get originalFilename() {
-      return '';
-    },
-  },
-  getEditorFile: mockEditorFile,
-  setFilename: vi.fn(),
-  updateBody: vi.fn(),
-}));
-
-vi.mock('../../../src/client/js/drafts/ops.svelte', () => ({
-  loadDraftById: vi.fn(() => Promise.resolve()),
-  saveDraftToIDB: vi.fn(() => Promise.resolve()),
-  saveFile: vi.fn(() => Promise.resolve()),
-  publishFile: vi.fn(() => Promise.resolve()),
-  deleteCurrentDraft: vi.fn(() => Promise.resolve()),
-}));
-
-vi.mock('../../../src/client/js/handlers/admin', async (importOriginal) => {
-  const actual =
-    await importOriginal<
-      typeof import('../../../src/client/js/handlers/admin')
-    >();
-  return {
-    ...actual,
-    handleSave: vi.fn(() => Promise.resolve()),
-    handlePublish: vi.fn(() => Promise.resolve({ status: 'ok' })),
-    handleDeleteDraft: vi.fn(() => Promise.resolve()),
-    handleFilenameConfirm: vi.fn(() => Promise.resolve()),
-    computePublishDisabled: mockComputePublishDisabled,
-  };
-});
-
-// sort is used by Admin.svelte to build contentItems
-vi.mock('../../../src/client/js/utils/sort', () => ({
-  toSortDate: vi.fn(() => undefined),
-  readSortMode: vi.fn(() => 'alpha'),
-  writeSortMode: vi.fn(),
-  createComparator: vi.fn(() => () => 0),
-  SORT_MODES: {
-    alpha: { icon: 'sort_by_alpha', label: 'Alphabetical' },
-    'date-asc': { icon: 'hourglass_arrow_down', label: 'Oldest first' },
-    'date-desc': { icon: 'hourglass_arrow_up', label: 'Newest first' },
-  },
-  SORT_ORDER: ['alpha', 'date-asc', 'date-desc'],
-}));
-
-// Storage and drafts mocks that AdminSidebar/editor pull in transitively
-vi.mock('../../../src/client/js/drafts/storage', () => ({
-  saveDraft: vi.fn(() => Promise.resolve()),
-  getDraftByFile: vi.fn(() => Promise.resolve(null)),
-}));
-
-// schema-utils used by EditorTabs and MetadataForm
-vi.mock('../../../src/client/js/utils/schema-utils', () => ({
-  extractTabs: vi.fn(() => []),
-  getFieldsForTab: vi.fn(() => []),
-  resolveFieldType: vi.fn(() => ({ kind: 'string' })),
-  createDefaultValue: vi.fn(() => ''),
-  getByPath: vi.fn(),
-  setByPath: vi.fn(),
-}));
-
-// Theme state mock — prevents localStorage/matchMedia access in jsdom
-vi.mock('../../../src/client/js/state/theme.svelte', () => ({
-  initTheme: vi.fn(() => () => {}),
-  cycleTheme: vi.fn(),
-  theme: { resolved: 'dark', icon: 'brightness_auto', label: 'Auto' },
-}));
-
-// Prevent accumulated renders from bleeding between tests
-afterEach(() => cleanup());
-
-beforeEach(() => {
-  // jsdom does not implement showModal/close — stub them
-  HTMLDialogElement.prototype.showModal = vi.fn();
-  HTMLDialogElement.prototype.close = vi.fn();
-  HTMLElement.prototype.showPopover = vi.fn();
-  HTMLElement.prototype.hidePopover = vi.fn();
-});
-
-describe('Admin', () => {
-  /*
-  //////////////////////////////
-  // Not ready — BackendPicker
-  //////////////////////////////
-  */
-
-  it('renders BackendPicker when backend is not ready', () => {
-    mockBackendReady.mockReturnValue(false);
-    mockRoute.mockReturnValue({ view: 'home' });
-
-    const { container } = render(Admin, { props: {} });
-
-    // BackendPicker renders a .picker element
-    expect(container.querySelector('.picker')).not.toBeNull();
-  });
-
-  it('does not render sidebar navigation when backend is not ready', () => {
-    mockBackendReady.mockReturnValue(false);
-    mockRoute.mockReturnValue({ view: 'home' });
-
-    const { container } = render(Admin, { props: {} });
-
-    expect(container.querySelector('.sidebar')).toBeNull();
-  });
-
-  /*
-  //////////////////////////////
-  // Ready, home view — collections sidebar only
-  //////////////////////////////
-  */
-
-  it('renders the collections sidebar when ready at home view', () => {
-    mockBackendReady.mockReturnValue(true);
-    mockRoute.mockReturnValue({ view: 'home' });
-    mockCollections.mockReturnValue(['posts', 'pages']);
-
-    const { container } = render(Admin, { props: {} });
-
-    const sidebars = container.querySelectorAll('.sidebar');
-    expect(sidebars.length).toBe(1);
-  });
-
-  it('shows collection items in the sidebar when backend is ready', () => {
-    mockBackendReady.mockReturnValue(true);
-    mockRoute.mockReturnValue({ view: 'home' });
-    mockCollections.mockReturnValue(['posts', 'pages']);
-
-    const { container } = render(Admin, { props: {} });
-
-    const links = container.querySelectorAll('.sidebar-link');
-    expect(links.length).toBe(2);
-  });
-
-  it('does not render the editor area when at home view', () => {
-    mockBackendReady.mockReturnValue(true);
-    mockRoute.mockReturnValue({ view: 'home' });
-    mockCollections.mockReturnValue([]);
-
-    const { container } = render(Admin, { props: {} });
-
-    expect(container.querySelector('.editor-area')).toBeNull();
-  });
-
-  /*
-  //////////////////////////////
-  // Ready, collection view — both sidebars
-  //////////////////////////////
-  */
-
-  it('renders both sidebars when a collection is selected', () => {
-    mockBackendReady.mockReturnValue(true);
-    mockRoute.mockReturnValue({
-      view: 'collection',
-      collection: 'posts',
-    });
-    mockCollections.mockReturnValue(['posts']);
-    mockContentList.mockReturnValue([]);
-
-    const { container } = render(Admin, { props: {} });
-
-    const sidebars = container.querySelectorAll('.sidebar');
-    expect(sidebars.length).toBe(2);
-  });
-
-  it('does not render the editor area in collection view', () => {
-    mockBackendReady.mockReturnValue(true);
-    mockRoute.mockReturnValue({
-      view: 'collection',
-      collection: 'posts',
-    });
-    mockCollections.mockReturnValue(['posts']);
-    mockContentList.mockReturnValue([]);
-
-    const { container } = render(Admin, { props: {} });
-
-    expect(container.querySelector('.editor-area')).toBeNull();
-  });
-
-  /*
-  //////////////////////////////
-  // Ready, file view — editor area rendered
-  //////////////////////////////
-  */
-
-  it('renders the editor area when a file is open', () => {
-    mockBackendReady.mockReturnValue(true);
-    mockRoute.mockReturnValue({
-      view: 'file',
-      collection: 'posts',
-      slug: 'my-post',
-    });
-    mockCollections.mockReturnValue(['posts']);
-    mockContentList.mockReturnValue([]);
-    mockEditorFile.mockReturnValue({
-      filename: 'my-post.md',
-      dirty: false,
-      saving: false,
-      draftId: null,
-      formData: {},
-      body: '',
-      bodyLoaded: false,
-      isNewDraft: false,
-    });
-
-    const { container } = render(Admin, { props: {} });
-
-    expect(container.querySelector('.editor-area')).not.toBeNull();
-  });
-
-  it('renders both sidebars and the editor area in file view', () => {
-    mockBackendReady.mockReturnValue(true);
-    mockRoute.mockReturnValue({
-      view: 'file',
-      collection: 'posts',
-      slug: 'my-post',
-    });
-    mockCollections.mockReturnValue(['posts']);
-    mockContentList.mockReturnValue([]);
-    mockEditorFile.mockReturnValue({
-      filename: 'my-post.md',
-      dirty: false,
-      saving: false,
-      draftId: null,
-      formData: {},
-      body: '',
-      bodyLoaded: false,
-      isNewDraft: false,
-    });
-
-    const { container } = render(Admin, { props: {} });
-
-    const sidebars = container.querySelectorAll('.sidebar');
-    expect(sidebars.length).toBe(2);
-    expect(container.querySelector('.editor-area')).not.toBeNull();
-  });
-
-  /*
-  //////////////////////////////
-  // Ready, draft view — editor area rendered
-  //////////////////////////////
-  */
-
-  it('renders the editor area when a draft is open', () => {
-    mockBackendReady.mockReturnValue(true);
-    mockRoute.mockReturnValue({
-      view: 'draft',
-      collection: 'posts',
-      draftId: 'abc-123',
-    });
-    mockCollections.mockReturnValue(['posts']);
-    mockContentList.mockReturnValue([]);
-    mockEditorFile.mockReturnValue({
-      filename: '',
-      dirty: false,
-      saving: false,
-      draftId: 'abc-123',
-      formData: {},
-      body: '',
-      bodyLoaded: true,
-      isNewDraft: true,
-    });
-
-    const { container } = render(Admin, { props: {} });
-
-    expect(container.querySelector('.editor-area')).not.toBeNull();
-  });
-
-  /*
-  //////////////////////////////
-  // admin CSS class states
-  //////////////////////////////
-  */
-
-  it('adds admin--connected class when backend is ready', () => {
-    mockBackendReady.mockReturnValue(true);
-    mockRoute.mockReturnValue({ view: 'home' });
-    mockCollections.mockReturnValue([]);
-
-    const { container } = render(Admin, { props: {} });
-
-    expect(container.querySelector('.admin--connected')).not.toBeNull();
-  });
-
-  it('does not add admin--connected class when backend is not ready', () => {
-    mockBackendReady.mockReturnValue(false);
-    mockRoute.mockReturnValue({ view: 'home' });
-
-    const { container } = render(Admin, { props: {} });
-
-    expect(container.querySelector('.admin--connected')).toBeNull();
-  });
-});

package/tests/client/components/BackendPicker.test.ts

@@ -1,239 +0,0 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { render, cleanup, fireEvent } from '@testing-library/svelte';
-import BackendPicker from '../../../src/client/components/BackendPicker.svelte';
-
-/**
- * Tests for the BackendPicker component.
- * Mocks state.svelte to control the backend type and permission state
- * without triggering Svelte 5 rune initialization in jsdom.
- */
-
-// vi.hoisted ensures these declarations are available when vi.mock factories run,
-// since vi.mock calls are hoisted to the top of the file by Vitest.
-const {
-  mockBackendType,
-  mockPermissionState,
-  mockError,
-  mockPickDirectory,
-  mockRequestPermission,
-  mockConnectGitHub,
-} = vi.hoisted(() => ({
-  mockBackendType: vi.fn(() => null as string | null),
-  mockPermissionState: vi.fn(() => 'denied' as string),
-  mockError: vi.fn(() => null as string | null),
-  mockPickDirectory: vi.fn(),
-  mockRequestPermission: vi.fn(),
-  mockConnectGitHub: vi.fn(() => Promise.resolve()),
-}));
-
-vi.mock('../../../src/client/js/state/state.svelte', () => ({
-  backend: {
-    get type() {
-      return mockBackendType();
-    },
-    get ready() {
-      return false;
-    },
-    get permission() {
-      return mockPermissionState();
-    },
-  },
-  content: {
-    get list() {
-      return [];
-    },
-    get loading() {
-      return false;
-    },
-    get error() {
-      return mockError();
-    },
-  },
-  pickDirectory: mockPickDirectory,
-  requestPermission: mockRequestPermission,
-  connectGitHub: mockConnectGitHub,
-}));
-
-// Prevent accumulated renders from bleeding between tests
-afterEach(() => cleanup());
-
-describe('BackendPicker', () => {
-  /*
-  //////////////////////////////
-  // Normal (non-reauth) state
-  //////////////////////////////
-  */
-
-  it('renders the picker title when not in reauth state', () => {
-    mockBackendType.mockReturnValue(null);
-    mockPermissionState.mockReturnValue('denied');
-
-    const { container } = render(BackendPicker, { props: {} });
-    expect(container.querySelector('.picker-title')?.textContent?.trim()).toBe(
-      'Connect to your project',
-    );
-  });
-
-  it('renders the Local Folder and GitHub options', () => {
-    mockBackendType.mockReturnValue(null);
-    mockPermissionState.mockReturnValue('denied');
-
-    const { container } = render(BackendPicker, { props: {} });
-    const headings = Array.from(container.querySelectorAll('h3')).map((h) =>
-      h.textContent?.trim(),
-    );
-
-    expect(headings).toContain('Local Folder');
-    expect(headings).toContain('GitHub Repository');
-  });
-
-  /*
-  //////////////////////////////
-  // pickDirectory
-  //////////////////////////////
-  */
-
-  it('calls pickDirectory when the "Choose project folder" button is clicked', async () => {
-    mockBackendType.mockReturnValue(null);
-    mockPermissionState.mockReturnValue('denied');
-    mockPickDirectory.mockClear();
-
-    const { container } = render(BackendPicker, { props: {} });
-
-    const buttons = Array.from(container.querySelectorAll('button'));
-    const folderBtn = buttons.find(
-      (b) => b.textContent?.trim() === 'Choose project folder',
-    )!;
-    await fireEvent.click(folderBtn);
-
-    expect(mockPickDirectory).toHaveBeenCalledOnce();
-  });
-
-  /*
-  //////////////////////////////
-  // GitHub connect
-  //////////////////////////////
-  */
-
-  it('renders the GitHub form with token and repo inputs', () => {
-    mockBackendType.mockReturnValue(null);
-    mockPermissionState.mockReturnValue('denied');
-
-    const { container } = render(BackendPicker, { props: {} });
-
-    expect(container.querySelector('input[type="password"]')).not.toBeNull();
-    expect(container.querySelector('input[type="text"]')).not.toBeNull();
-  });
-
-  it('disables the Connect button when token and repo are empty', () => {
-    mockBackendType.mockReturnValue(null);
-    mockPermissionState.mockReturnValue('denied');
-
-    const { container } = render(BackendPicker, { props: {} });
-
-    const buttons = Array.from(
-      container.querySelectorAll('button'),
-    ) as HTMLButtonElement[];
-    const connectBtn = buttons.find(
-      (b) => b.textContent?.trim() === 'Connect',
-    )!;
-
-    expect(connectBtn?.disabled).toBe(true);
-  });
-
-  it('calls connectGitHub when the form is submitted with token and repo', async () => {
-    mockBackendType.mockReturnValue(null);
-    mockPermissionState.mockReturnValue('denied');
-    mockConnectGitHub.mockClear();
-
-    const { container } = render(BackendPicker, { props: {} });
-
-    const tokenInput = container.querySelector(
-      'input[type="password"]',
-    ) as HTMLInputElement;
-    const repoInput = container.querySelector(
-      'input[type="text"]',
-    ) as HTMLInputElement;
-
-    await fireEvent.input(tokenInput, { target: { value: 'ghp_token' } });
-    await fireEvent.input(repoInput, { target: { value: 'owner/repo' } });
-
-    const form = container.querySelector('form')!;
-    await fireEvent.submit(form);
-
-    expect(mockConnectGitHub).toHaveBeenCalledOnce();
-    expect(mockConnectGitHub).toHaveBeenCalledWith('ghp_token', 'owner/repo');
-  });
-
-  /*
-  //////////////////////////////
-  // Re-auth state
-  //////////////////////////////
-  */
-
-  it('renders the re-auth message when backend is fsa and permission is prompt', () => {
-    mockBackendType.mockReturnValue('fsa');
-    mockPermissionState.mockReturnValue('prompt');
-
-    const { container } = render(BackendPicker, { props: {} });
-
-    expect(container.textContent).toContain('re-authorization');
-  });
-
-  it('renders a Re-authorize button in the reauth state', () => {
-    mockBackendType.mockReturnValue('fsa');
-    mockPermissionState.mockReturnValue('prompt');
-
-    const { container } = render(BackendPicker, { props: {} });
-
-    const buttons = Array.from(container.querySelectorAll('button'));
-    const reauthBtn = buttons.find(
-      (b) => b.textContent?.trim() === 'Re-authorize folder',
-    );
-    expect(reauthBtn).not.toBeUndefined();
-  });
-
-  it('calls requestPermission when the Re-authorize button is clicked', async () => {
-    mockBackendType.mockReturnValue('fsa');
-    mockPermissionState.mockReturnValue('prompt');
-    mockRequestPermission.mockClear();
-
-    const { container } = render(BackendPicker, { props: {} });
-
-    const buttons = Array.from(container.querySelectorAll('button'));
-    const reauthBtn = buttons.find(
-      (b) => b.textContent?.trim() === 'Re-authorize folder',
-    )!;
-    await fireEvent.click(reauthBtn);
-
-    expect(mockRequestPermission).toHaveBeenCalledOnce();
-  });
-
-  /*
-  //////////////////////////////
-  // Error display
-  //////////////////////////////
-  */
-
-  it('renders the error message when error state is present', () => {
-    mockBackendType.mockReturnValue(null);
-    mockPermissionState.mockReturnValue('denied');
-    mockError.mockReturnValue('Something went wrong');
-
-    const { container } = render(BackendPicker, { props: {} });
-
-    expect(container.querySelector('.error')?.textContent?.trim()).toBe(
-      'Something went wrong',
-    );
-  });
-
-  it('does not render an error when error state is null', () => {
-    mockBackendType.mockReturnValue(null);
-    mockPermissionState.mockReturnValue('denied');
-    mockError.mockReturnValue(null);
-
-    const { container } = render(BackendPicker, { props: {} });
-
-    expect(container.querySelector('.error')).toBeNull();
-  });
-});