nebula-cms 0.1.0

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

@@ -0,0 +1,446 @@
+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

@@ -0,0 +1,239 @@
+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();
+  });
+});