nebula-cms 0.1.0

package/tests/client/components/sidebar/AdminSidebarSort.test.ts

@@ -0,0 +1,135 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { render, cleanup, fireEvent } from '@testing-library/svelte';
+import AdminSidebarSort from '../../../../src/client/components/sidebar/AdminSidebarSort.svelte';
+
+/**
+ * Tests for the AdminSidebarSort component.
+ * Verifies that sort mode buttons render correctly and clicking a popover option
+ * calls writeSortMode with the selected mode.
+ */
+
+vi.mock('../../../../src/client/js/utils/sort', async () => {
+  const { createSortMock } = await import('./sort-mock');
+  return createSortMock();
+});
+
+// Prevent accumulated renders from bleeding between tests
+afterEach(() => cleanup());
+
+beforeEach(() => {
+  // jsdom does not implement the Popover API — stub hidePopover
+  HTMLElement.prototype.hidePopover = vi.fn();
+  HTMLElement.prototype.showPopover = vi.fn();
+});
+
+describe('AdminSidebarSort', () => {
+  /*
+  //////////////////////////////
+  // Initial render
+  //////////////////////////////
+  */
+
+  it('renders the sort button with the active mode icon', () => {
+    const { container } = render(AdminSidebarSort, {
+      props: { sortMode: 'alpha' },
+    });
+
+    const btn = container.querySelector('.sort-btn');
+    expect(btn).not.toBeNull();
+    expect(btn!.getAttribute('title')).toBe('Alphabetical');
+    expect(btn!.textContent?.trim()).toBe('sort_by_alpha');
+  });
+
+  it('renders popover options for all modes except the active one', () => {
+    const { container } = render(AdminSidebarSort, {
+      props: { sortMode: 'alpha' },
+    });
+
+    const options = container.querySelectorAll('.sort-option');
+    // alpha is active, so the two remaining modes appear as options
+    expect(options.length).toBe(2);
+
+    const labels = Array.from(options).map((o) => o.textContent?.trim());
+    expect(labels.some((l) => l?.includes('Oldest first'))).toBe(true);
+    expect(labels.some((l) => l?.includes('Newest first'))).toBe(true);
+  });
+
+  it('does not render the active mode as a popover option', () => {
+    const { container } = render(AdminSidebarSort, {
+      props: { sortMode: 'date-asc' },
+    });
+
+    const options = Array.from(container.querySelectorAll('.sort-option'));
+    const hasDateAsc = options.some((o) =>
+      o.textContent?.includes('Oldest first'),
+    );
+    expect(hasDateAsc).toBe(false);
+  });
+
+  /*
+  //////////////////////////////
+  // Sort option click
+  //////////////////////////////
+  */
+
+  it('calls writeSortMode with the selected mode and storageKey when a popover option is clicked', async () => {
+    const { writeSortMode } =
+      await import('../../../../src/client/js/utils/sort');
+    const writeMock = writeSortMode as ReturnType<typeof vi.fn>;
+    writeMock.mockClear();
+
+    const { container } = render(AdminSidebarSort, {
+      props: { sortMode: 'alpha', storageKey: 'posts' },
+    });
+
+    const firstOption = container.querySelector(
+      '.sort-option',
+    ) as HTMLButtonElement;
+    await fireEvent.click(firstOption);
+
+    expect(writeMock).toHaveBeenCalledOnce();
+    expect(writeMock).toHaveBeenCalledWith('posts', expect.any(String));
+  });
+
+  it('does not call writeSortMode when no storageKey is provided', async () => {
+    const { writeSortMode } =
+      await import('../../../../src/client/js/utils/sort');
+    const writeMock = writeSortMode as ReturnType<typeof vi.fn>;
+    writeMock.mockClear();
+
+    const { container } = render(AdminSidebarSort, {
+      props: { sortMode: 'alpha' },
+    });
+
+    const firstOption = container.querySelector(
+      '.sort-option',
+    ) as HTMLButtonElement;
+    await fireEvent.click(firstOption);
+
+    expect(writeMock).not.toHaveBeenCalled();
+  });
+
+  /*
+  //////////////////////////////
+  // Popover ID
+  //////////////////////////////
+  */
+
+  it('uses the storageKey in the popover element ID', () => {
+    const { container } = render(AdminSidebarSort, {
+      props: { sortMode: 'alpha', storageKey: 'blog' },
+    });
+
+    const popover = container.querySelector('.sort-popover');
+    expect(popover?.id).toBe('sort-popover-blog');
+  });
+
+  it('falls back to "default" in the popover ID when no storageKey', () => {
+    const { container } = render(AdminSidebarSort, {
+      props: { sortMode: 'alpha' },
+    });
+
+    const popover = container.querySelector('.sort-popover');
+    expect(popover?.id).toBe('sort-popover-default');
+  });
+});

package/tests/client/components/sidebar/sort-mock.ts

@@ -0,0 +1,23 @@
+/* Shared sort module mock for sidebar component tests. */
+import { vi } from 'vitest';
+
+/**
+ * Returns a mock factory for the sort module used by vi.mock.
+ * @return {Record<string, unknown>} The mock module exports
+ */
+export function createSortMock() {
+  return {
+    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'],
+    readSortMode: vi.fn(() => 'alpha'),
+    writeSortMode: vi.fn(),
+    createComparator: vi.fn(
+      () => (a: { label: string }, b: { label: string }) =>
+        a.label.localeCompare(b.label),
+    ),
+  };
+}

package/tests/client/js/drafts/fixtures.ts

@@ -0,0 +1,22 @@
+/* Shared test fixtures for draft-related tests. */
+
+import type { Draft } from '../../../../src/client/js/drafts/storage';
+
+/**
+ * Creates a Draft object with sensible defaults, allowing per-test overrides.
+ * @param {Partial<Draft>} overrides - Fields to override on the default draft
+ * @return {Draft} A complete Draft object
+ */
+export function makeDraft(overrides: Partial<Draft> = {}): Draft {
+  return {
+    id: 'draft-001',
+    collection: 'posts',
+    filename: 'hello-world.md',
+    isNew: false,
+    formData: { title: 'Hello World' },
+    body: '# Hello World\n\nBody content.',
+    snapshot: '{"body":"original","formData":{"title":"Original"}}',
+    createdAt: '2026-01-01T00:00:00.000Z',
+    ...overrides,
+  };
+}

package/tests/client/js/drafts/merge.test.ts

@@ -0,0 +1,282 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+
+//////////////////////////////
+// Worker global stub — must exist before any module import
+//
+// merge.svelte.ts calls `new Worker(new URL(...), ...)` inside ensureDiffWorker()
+// when processing candidate drafts. The stub must be in place before the module
+// is evaluated so that the constructor does not throw in Node.js.
+//////////////////////////////
+
+const { FakeWorker } = vi.hoisted(() => {
+  /** Minimal Worker stub that captures message listeners and postMessage calls. */
+  class FakeWorker {
+    listeners: Array<(event: MessageEvent) => void> = [];
+    postMessage = vi.fn();
+    terminate = vi.fn();
+
+    /** @param {string} _type - The event type to listen for */
+    addEventListener(_type: string, cb: (event: MessageEvent) => void) {
+      this.listeners.push(cb);
+    }
+
+    /**
+     * Simulates a message arriving from the worker.
+     * @param {unknown} data - The message data to dispatch
+     * @return {void}
+     */
+    simulateMessage(data: unknown): void {
+      for (const l of this.listeners) {
+        l({ data } as MessageEvent);
+      }
+    }
+  }
+
+  vi.stubGlobal('Worker', FakeWorker);
+  return { FakeWorker };
+});
+
+//////////////////////////////
+// Module-level mocks
+//////////////////////////////
+
+vi.mock('../../../../src/client/js/drafts/storage', () => ({
+  loadDrafts: vi.fn(async () => []),
+}));
+
+// storageClient is a direct object export (not a getter function), so the
+// mock uses a hoisted ref that tests swap between null and a fake client.
+const { mockStorageClientRef } = vi.hoisted(() => ({
+  mockStorageClientRef: { current: null as any },
+}));
+vi.mock('../../../../src/client/js/state/state.svelte', () => ({
+  get storageClient() {
+    return mockStorageClientRef.current;
+  },
+}));
+
+// js-yaml is a real dependency but we need to control its output in some tests
+vi.mock('js-yaml', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('js-yaml')>();
+  return { ...actual };
+});
+
+import { loadDrafts } from '../../../../src/client/js/drafts/storage';
+// storageClient import removed — tests configure mockStorageClientRef.current directly
+import type { Draft } from '../../../../src/client/js/drafts/storage';
+
+/**
+ * Builds a minimal Draft fixture for merge tests.
+ * @param {Partial<Draft>} overrides - Optional field overrides
+ * @return {Draft} A complete Draft object
+ */
+function makeDraft(overrides: Partial<Draft> = {}): Draft {
+  return {
+    id: 'draft-001',
+    collection: 'posts',
+    filename: 'post.md',
+    isNew: false,
+    formData: { title: 'Post' },
+    body: 'Body',
+    snapshot: '{"body":"original","formData":{"title":"Original"}}',
+    createdAt: '2026-01-01T00:00:00.000Z',
+    ...overrides,
+  };
+}
+
+//////////////////////////////
+// drafts / outdatedMap
+//////////////////////////////
+
+describe('drafts / outdatedMap — reactive exports', () => {
+  afterEach(() => {
+    vi.resetModules();
+  });
+
+  it('drafts is an empty array before mergeDrafts is called', async () => {
+    vi.resetModules();
+    const { drafts } =
+      await import('../../../../src/client/js/drafts/merge.svelte');
+    expect(drafts.all).toEqual([]);
+  });
+
+  it('outdatedMap is an empty object before mergeDrafts is called', async () => {
+    vi.resetModules();
+    const { drafts } =
+      await import('../../../../src/client/js/drafts/merge.svelte');
+    expect(drafts.outdated).toEqual({});
+  });
+});
+
+//////////////////////////////
+// mergeDrafts
+//////////////////////////////
+
+describe('mergeDrafts', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.resetModules();
+  });
+
+  it('populates drafts with the loaded drafts', async () => {
+    const drafts = [makeDraft({ id: 'md-01' }), makeDraft({ id: 'md-02' })];
+    vi.mocked(loadDrafts).mockResolvedValue(drafts);
+    // No storage client — candidates go through the empty-entries path
+    mockStorageClientRef.current = null;
+
+    vi.resetModules();
+    const mod = await import('../../../../src/client/js/drafts/merge.svelte');
+    await mod.mergeDrafts('posts');
+
+    expect(mod.drafts.all).toEqual(drafts);
+  });
+
+  it('sets outdatedMap to {} when there are no candidate drafts', async () => {
+    // All drafts are new — no candidates for comparison
+    vi.mocked(loadDrafts).mockResolvedValue([
+      makeDraft({ id: 'new-01', isNew: true, snapshot: null }),
+    ]);
+    mockStorageClientRef.current = null;
+
+    vi.resetModules();
+    const mod = await import('../../../../src/client/js/drafts/merge.svelte');
+    await mod.mergeDrafts('posts');
+
+    expect(mod.drafts.outdated).toEqual({});
+  });
+
+  it('sets outdatedMap to {} when storage client is not available', async () => {
+    vi.mocked(loadDrafts).mockResolvedValue([
+      makeDraft({ id: 'no-client-01', isNew: false, snapshot: 'snap' }),
+    ]);
+    mockStorageClientRef.current = null;
+
+    vi.resetModules();
+    const mod = await import('../../../../src/client/js/drafts/merge.svelte');
+    await mod.mergeDrafts('posts');
+
+    expect(mod.drafts.outdated).toEqual({});
+  });
+
+  it('calls loadDrafts with the collection name', async () => {
+    vi.mocked(loadDrafts).mockResolvedValue([]);
+    mockStorageClientRef.current = null;
+
+    vi.resetModules();
+    const mod = await import('../../../../src/client/js/drafts/merge.svelte');
+    await mod.mergeDrafts('articles');
+
+    expect(loadDrafts).toHaveBeenCalledWith('articles');
+  });
+
+  it('sets outdatedMap to {} when all candidate files are unreadable', async () => {
+    // Client exists but readFile throws for every file
+    const fakeClient = {
+      readFile: vi.fn().mockRejectedValue(new Error('not found')),
+    };
+    vi.mocked(loadDrafts).mockResolvedValue([
+      makeDraft({
+        id: 'err-01',
+        isNew: false,
+        snapshot: 'snap',
+        filename: 'x.md',
+      }),
+    ]);
+    mockStorageClientRef.current = fakeClient;
+
+    vi.resetModules();
+    const mod = await import('../../../../src/client/js/drafts/merge.svelte');
+    await mod.mergeDrafts('posts');
+
+    expect(mod.drafts.outdated).toEqual({});
+  });
+});
+
+//////////////////////////////
+// refreshDrafts
+//////////////////////////////
+
+describe('refreshDrafts', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.resetModules();
+  });
+
+  it('re-loads drafts from storage and updates the reactive list', async () => {
+    const initial = [makeDraft({ id: 'rf-01' })];
+    const refreshed = [makeDraft({ id: 'rf-01' }), makeDraft({ id: 'rf-02' })];
+
+    vi.mocked(loadDrafts).mockResolvedValueOnce(initial);
+    mockStorageClientRef.current = null;
+
+    vi.resetModules();
+    const mod = await import('../../../../src/client/js/drafts/merge.svelte');
+    await mod.mergeDrafts('posts');
+    expect(mod.drafts.all).toHaveLength(1);
+
+    vi.mocked(loadDrafts).mockResolvedValueOnce(refreshed);
+    await mod.refreshDrafts('posts');
+    expect(mod.drafts.all).toHaveLength(2);
+  });
+
+  it('calls loadDrafts with the correct collection', async () => {
+    vi.mocked(loadDrafts).mockResolvedValue([]);
+
+    vi.resetModules();
+    const mod = await import('../../../../src/client/js/drafts/merge.svelte');
+    await mod.refreshDrafts('pages');
+
+    expect(loadDrafts).toHaveBeenCalledWith('pages');
+  });
+});
+
+//////////////////////////////
+// resetDraftMerge
+//////////////////////////////
+
+describe('resetDraftMerge', () => {
+  afterEach(() => {
+    vi.resetModules();
+  });
+
+  it('clears the drafts list', async () => {
+    vi.mocked(loadDrafts).mockResolvedValue([makeDraft({ id: 'rst-01' })]);
+    mockStorageClientRef.current = null;
+
+    vi.resetModules();
+    const mod = await import('../../../../src/client/js/drafts/merge.svelte');
+    await mod.mergeDrafts('posts');
+    expect(mod.drafts.all).toHaveLength(1);
+
+    mod.resetDraftMerge();
+    expect(mod.drafts.all).toEqual([]);
+  });
+
+  it('clears the outdatedMap', async () => {
+    vi.mocked(loadDrafts).mockResolvedValue([]);
+    mockStorageClientRef.current = null;
+
+    vi.resetModules();
+    const mod = await import('../../../../src/client/js/drafts/merge.svelte');
+    await mod.mergeDrafts('posts');
+
+    mod.resetDraftMerge();
+    expect(mod.drafts.outdated).toEqual({});
+  });
+
+  it('is safe to call multiple times without throwing', async () => {
+    vi.resetModules();
+    const { resetDraftMerge } =
+      await import('../../../../src/client/js/drafts/merge.svelte');
+    expect(() => {
+      resetDraftMerge();
+      resetDraftMerge();
+    }).not.toThrow();
+  });
+});