nebula-cms 0.1.0

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

@@ -0,0 +1,53 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, cleanup } from '@testing-library/svelte';
+import DraftChip from '../../../src/client/components/DraftChip.svelte';
+
+/**
+ * Tests for the DraftChip component.
+ * Verifies that the correct text and CSS modifier classes are applied for each variant.
+ */
+
+// Explicit cleanup after each test prevents accumulated renders from bleeding
+// into subsequent assertions when using container-scoped queries.
+afterEach(() => cleanup());
+
+describe('DraftChip', () => {
+  /*
+  //////////////////////////////
+  // draft variant
+  //////////////////////////////
+  */
+
+  it('renders "draft" text with chip--draft class when variant is draft', () => {
+    const { container } = render(DraftChip, { props: { variant: 'draft' } });
+    const chip = container.querySelector('.chip');
+
+    expect(chip).not.toBeNull();
+    expect(chip!.textContent?.trim()).toBe('draft');
+    expect(chip!.classList.contains('chip--draft')).toBe(true);
+    expect(chip!.classList.contains('chip--outdated')).toBe(false);
+  });
+
+  /*
+  //////////////////////////////
+  // outdated variant
+  //////////////////////////////
+  */
+
+  it('renders "outdated" text with chip--outdated class when variant is outdated', () => {
+    const { container } = render(DraftChip, { props: { variant: 'outdated' } });
+    const chip = container.querySelector('.chip');
+
+    expect(chip).not.toBeNull();
+    expect(chip!.textContent?.trim()).toBe('outdated');
+    expect(chip!.classList.contains('chip--outdated')).toBe(true);
+    expect(chip!.classList.contains('chip--draft')).toBe(false);
+  });
+
+  it('renders a span element', () => {
+    const { container } = render(DraftChip, { props: { variant: 'draft' } });
+    const chip = container.querySelector('span.chip');
+
+    expect(chip).not.toBeNull();
+  });
+});

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

@@ -0,0 +1,164 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, cleanup } from '@testing-library/svelte';
+import MetadataForm from '../../../src/client/components/MetadataForm.svelte';
+
+/**
+ * Tests for the MetadataForm component.
+ * Mocks schema-utils and editor.svelte to control field lists without
+ * triggering Svelte 5 rune initialization in jsdom.
+ *
+ * MetadataForm delegates the actual field rendering to SchemaField, which in
+ * turn renders leaf input components. These tests verify that the correct
+ * fields are surfaced based on the active tab and schema structure.
+ */
+
+// 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 { mockGetFieldsForTab, mockFormData } = vi.hoisted(() => ({
+  mockGetFieldsForTab: vi.fn(() => [] as string[]),
+  mockFormData: vi.fn(() => ({}) as Record<string, unknown>),
+}));
+
+vi.mock('../../../src/client/js/utils/schema-utils', () => ({
+  getFieldsForTab: mockGetFieldsForTab,
+  resolveFieldType: vi.fn((schema: Record<string, unknown>) => {
+    if (schema['type'] === 'string') return { kind: 'string' };
+    if (schema['type'] === 'boolean') return { kind: 'boolean' };
+    if (schema['type'] === 'number') return { kind: 'number' };
+    return { kind: 'unknown' };
+  }),
+  createDefaultValue: vi.fn(() => ''),
+  getByPath: vi.fn(),
+  setByPath: vi.fn(),
+  getProperties: vi.fn(
+    (schema: Record<string, unknown>) =>
+      schema['properties'] as Record<string, unknown> | undefined,
+  ),
+  getRequiredFields: vi.fn((schema: Record<string, unknown>) =>
+    Array.isArray(schema['required']) ? schema['required'] : [],
+  ),
+  isReadOnly: vi.fn(() => false),
+  isNullable: vi.fn(() => false),
+  getLabel: vi.fn((schema: Record<string, unknown>, name: string) =>
+    typeof schema['title'] === 'string' ? schema['title'] : name,
+  ),
+}));
+
+vi.mock('../../../src/client/js/editor/editor.svelte', () => ({
+  editor: {
+    get data() {
+      return mockFormData();
+    },
+    get tab() {
+      return 'metadata';
+    },
+    get originalFilename() {
+      return '';
+    },
+  },
+  updateFormField: vi.fn(),
+}));
+
+// Prevent accumulated renders from bleeding between tests
+afterEach(() => cleanup());
+
+/** Builds a minimal schema with string and boolean fields. */
+const sampleSchema = {
+  type: 'object',
+  properties: {
+    title: { type: 'string', title: 'Title' },
+    description: { type: 'string', title: 'Description' },
+    published: { type: 'boolean', title: 'Published' },
+  },
+  required: ['title'],
+};
+
+describe('MetadataForm', () => {
+  /*
+  //////////////////////////////
+  // Field rendering
+  //////////////////////////////
+  */
+
+  it('renders a field for each property returned by getFieldsForTab', () => {
+    mockGetFieldsForTab.mockReturnValue(['title', 'description']);
+    mockFormData.mockReturnValue({ title: 'Hello', description: 'World' });
+
+    const { container } = render(MetadataForm, {
+      props: { schema: sampleSchema },
+    });
+
+    // SchemaField renders a label element for each field
+    const labels = container.querySelectorAll('label');
+    expect(labels.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it('renders an empty form when getFieldsForTab returns no fields', () => {
+    mockGetFieldsForTab.mockReturnValue([]);
+    mockFormData.mockReturnValue({});
+
+    const { container } = render(MetadataForm, {
+      props: { schema: sampleSchema },
+    });
+
+    const form = container.querySelector('.metadata-form');
+    expect(form).not.toBeNull();
+    // No fields rendered
+    const inputs = container.querySelectorAll('input');
+    expect(inputs.length).toBe(0);
+  });
+
+  it('renders only fields for the active tab', () => {
+    // Only the title field is in the seo tab
+    mockGetFieldsForTab.mockImplementation(
+      (_schema: unknown, tab: string | null) =>
+        tab === 'seo' ? ['title'] : ['title', 'description'],
+    );
+    mockFormData.mockReturnValue({ title: '', description: '' });
+
+    const { container } = render(MetadataForm, {
+      props: { schema: sampleSchema, tab: 'seo' },
+    });
+
+    // Only "title" (string) is rendered for the seo tab
+    const inputs = container.querySelectorAll('input[type="text"]');
+    expect(inputs.length).toBe(1);
+  });
+
+  /*
+  //////////////////////////////
+  // Container structure
+  //////////////////////////////
+  */
+
+  it('renders the metadata-form wrapper element', () => {
+    mockGetFieldsForTab.mockReturnValue([]);
+    mockFormData.mockReturnValue({});
+
+    const { container } = render(MetadataForm, {
+      props: { schema: sampleSchema },
+    });
+
+    expect(container.querySelector('.metadata-form')).not.toBeNull();
+  });
+
+  /*
+  //////////////////////////////
+  // Required field passthrough
+  //////////////////////////////
+  */
+
+  it('passes required fields down to SchemaField', () => {
+    mockGetFieldsForTab.mockReturnValue(['title']);
+    mockFormData.mockReturnValue({ title: '' });
+
+    const { container } = render(MetadataForm, {
+      props: { schema: sampleSchema },
+    });
+
+    // StringField renders a .field-required span (the * marker) for required fields
+    // rather than adding the `required` attribute to the input element
+    const requiredMarker = container.querySelector('.field-required');
+    expect(requiredMarker).not.toBeNull();
+  });
+});

package/tests/client/components/dialogs/DeleteDraftDialog.test.ts

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, cleanup } from '@testing-library/svelte';
+import DeleteDraftDialog from '../../../../src/client/components/dialogs/DeleteDraftDialog.svelte';
+import { stubDialogMethods } from './dialog-stubs';
+
+/**
+ * Tests for the DeleteDraftDialog component.
+ * The component uses a native <dialog> element with showModal() — jsdom does not
+ * implement showModal(), so it is stubbed on HTMLDialogElement.prototype before each test.
+ *
+ * jsdom treats <dialog> as hidden from the accessibility tree when the `open` attribute
+ * is absent. Since our showModal stub doesn't set `open`, we query buttons via
+ * container.querySelector instead of getByRole to avoid hidden-element failures.
+ */
+
+// Prevent accumulated renders from bleeding between tests
+afterEach(() => cleanup());
+
+describe('DeleteDraftDialog', () => {
+  beforeEach(() => {
+    stubDialogMethods();
+  });
+
+  it('renders the dialog with title and message', () => {
+    const { container } = render(DeleteDraftDialog, {
+      props: { onConfirm: vi.fn(), onCancel: vi.fn() },
+    });
+
+    expect(container.querySelector('.dialog__title')?.textContent?.trim()).toBe(
+      'Delete Draft?',
+    );
+    expect(
+      container.querySelector('.dialog__message')?.textContent?.trim(),
+    ).toBe('This cannot be undone.');
+  });
+
+  it('renders Cancel and Delete buttons', () => {
+    const { container } = render(DeleteDraftDialog, {
+      props: { onConfirm: vi.fn(), onCancel: vi.fn() },
+    });
+
+    const buttons = container.querySelectorAll('button');
+    const labels = Array.from(buttons).map((b) => b.textContent?.trim());
+    expect(labels).toContain('Cancel');
+    expect(labels).toContain('Delete');
+  });
+
+  it('calls onConfirm when the Delete button is clicked', async () => {
+    const { fireEvent } = await import('@testing-library/svelte');
+    const onConfirm = vi.fn();
+    const onCancel = vi.fn();
+
+    const { container } = render(DeleteDraftDialog, {
+      props: { onConfirm, onCancel },
+    });
+    const deleteBtn = Array.from(container.querySelectorAll('button')).find(
+      (b) => b.textContent?.trim() === 'Delete',
+    )!;
+
+    await fireEvent.click(deleteBtn);
+
+    expect(onConfirm).toHaveBeenCalledOnce();
+    expect(onCancel).not.toHaveBeenCalled();
+  });
+
+  it('calls onCancel when the Cancel button is clicked', async () => {
+    const { fireEvent } = await import('@testing-library/svelte');
+    const onConfirm = vi.fn();
+    const onCancel = vi.fn();
+
+    const { container } = render(DeleteDraftDialog, {
+      props: { onConfirm, onCancel },
+    });
+    const cancelBtn = Array.from(container.querySelectorAll('button')).find(
+      (b) => b.textContent?.trim() === 'Cancel',
+    )!;
+
+    await fireEvent.click(cancelBtn);
+
+    expect(onCancel).toHaveBeenCalledOnce();
+    expect(onConfirm).not.toHaveBeenCalled();
+  });
+
+  it('calls showModal on the dialog element on mount', () => {
+    render(DeleteDraftDialog, {
+      props: { onConfirm: vi.fn(), onCancel: vi.fn() },
+    });
+
+    expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled();
+  });
+});

package/tests/client/components/dialogs/FilenameDialog.test.ts

@@ -0,0 +1,209 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, cleanup, fireEvent } from '@testing-library/svelte';
+import FilenameDialog from '../../../../src/client/components/dialogs/FilenameDialog.svelte';
+import { stubDialogMethods } from './dialog-stubs';
+
+/**
+ * Tests for the FilenameDialog component.
+ * Mocks slugify so tests are not sensitive to the slug implementation.
+ * The component uses a native <dialog> element — showModal/close are stubbed before each test.
+ *
+ * jsdom treats <dialog> as hidden from the accessibility tree when `open` is absent.
+ * Since our showModal stub does not set `open`, buttons are queried via
+ * container.querySelector instead of getByRole to avoid hidden-element failures.
+ */
+vi.mock('../../../../src/client/js/utils/slug', () => ({
+  slugify: vi.fn((s: string) => s.toLowerCase().replace(/\s+/g, '-')),
+}));
+
+// Prevent accumulated renders from bleeding between tests
+afterEach(() => cleanup());
+
+/**
+ * Finds the first button in a container whose trimmed text matches the given label.
+ * @param {HTMLElement} container - The DOM container to search within
+ * @param {string} label - The button text to match
+ * @return {HTMLButtonElement | null} The matching button, or null if not found
+ */
+function getButton(
+  container: HTMLElement,
+  label: string,
+): HTMLButtonElement | null {
+  return (
+    (Array.from(container.querySelectorAll('button')).find(
+      (b) => b.textContent?.trim() === label,
+    ) as HTMLButtonElement | undefined) ?? null
+  );
+}
+
+describe('FilenameDialog', () => {
+  beforeEach(() => {
+    stubDialogMethods();
+  });
+
+  it('renders with the slug pre-filled from the title prop', () => {
+    const { container } = render(FilenameDialog, {
+      props: {
+        title: 'My Post',
+        existingFilenames: [],
+        onConfirm: vi.fn(),
+        onCancel: vi.fn(),
+      },
+    });
+
+    const input = container.querySelector(
+      'input[type="text"]',
+    ) as HTMLInputElement;
+    expect(input).not.toBeNull();
+    // slugify mock lowercases and replaces spaces with hyphens
+    expect(input.value).toBe('my-post');
+  });
+
+  it('renders the .md extension label', () => {
+    const { container } = render(FilenameDialog, {
+      props: {
+        title: 'Hello',
+        existingFilenames: [],
+        onConfirm: vi.fn(),
+        onCancel: vi.fn(),
+      },
+    });
+
+    expect(container.querySelector('.extension')?.textContent?.trim()).toBe(
+      '.md',
+    );
+  });
+
+  it('shows an error when the filename matches an existing one', () => {
+    const { container } = render(FilenameDialog, {
+      props: {
+        title: 'hello',
+        existingFilenames: ['hello.md'],
+        onConfirm: vi.fn(),
+        onCancel: vi.fn(),
+      },
+    });
+
+    // The slug mock produces "hello" from "hello", so hello.md is a duplicate
+    expect(container.querySelector('.error')?.textContent?.trim()).toBe(
+      'A file with this name already exists',
+    );
+  });
+
+  it('shows an error when the slug is empty', () => {
+    const { container } = render(FilenameDialog, {
+      props: {
+        title: '',
+        existingFilenames: [],
+        onConfirm: vi.fn(),
+        onCancel: vi.fn(),
+      },
+    });
+
+    expect(container.querySelector('.error')?.textContent?.trim()).toBe(
+      'Filename cannot be empty',
+    );
+  });
+
+  it('disables the Confirm button when there is a validation error', () => {
+    const { container } = render(FilenameDialog, {
+      props: {
+        title: 'hello',
+        existingFilenames: ['hello.md'],
+        onConfirm: vi.fn(),
+        onCancel: vi.fn(),
+      },
+    });
+
+    const confirmBtn = getButton(container, 'Confirm');
+    expect(confirmBtn?.disabled).toBe(true);
+  });
+
+  it('enables the Confirm button when the filename is valid', () => {
+    const { container } = render(FilenameDialog, {
+      props: {
+        title: 'New Post',
+        existingFilenames: [],
+        onConfirm: vi.fn(),
+        onCancel: vi.fn(),
+      },
+    });
+
+    const confirmBtn = getButton(container, 'Confirm');
+    expect(confirmBtn?.disabled).toBe(false);
+  });
+
+  it('calls onConfirm with the full filename when Confirm is clicked', async () => {
+    const onConfirm = vi.fn();
+
+    const { container } = render(FilenameDialog, {
+      props: {
+        title: 'My Post',
+        existingFilenames: [],
+        onConfirm,
+        onCancel: vi.fn(),
+      },
+    });
+
+    await fireEvent.click(getButton(container, 'Confirm')!);
+
+    expect(onConfirm).toHaveBeenCalledWith('my-post.md');
+  });
+
+  it('calls onCancel when the Cancel button is clicked', async () => {
+    const onCancel = vi.fn();
+
+    const { container } = render(FilenameDialog, {
+      props: {
+        title: 'My Post',
+        existingFilenames: [],
+        onConfirm: vi.fn(),
+        onCancel,
+      },
+    });
+
+    await fireEvent.click(getButton(container, 'Cancel')!);
+
+    expect(onCancel).toHaveBeenCalledOnce();
+  });
+
+  it('does not call onConfirm when there is a validation error', async () => {
+    const onConfirm = vi.fn();
+
+    const { container } = render(FilenameDialog, {
+      props: {
+        title: 'hello',
+        existingFilenames: ['hello.md'],
+        onConfirm,
+        onCancel: vi.fn(),
+      },
+    });
+
+    await fireEvent.click(getButton(container, 'Confirm')!);
+
+    expect(onConfirm).not.toHaveBeenCalled();
+  });
+
+  it('updates the slug when the input changes and calls onConfirm with the new value', async () => {
+    const onConfirm = vi.fn();
+
+    const { container } = render(FilenameDialog, {
+      props: {
+        title: 'My Post',
+        existingFilenames: [],
+        onConfirm,
+        onCancel: vi.fn(),
+      },
+    });
+
+    const input = container.querySelector(
+      'input[type="text"]',
+    ) as HTMLInputElement;
+
+    // Fire input event to update the bound slug value via Svelte's bind:value handler
+    await fireEvent.input(input, { target: { value: 'custom-slug' } });
+    await fireEvent.click(getButton(container, 'Confirm')!);
+
+    expect(onConfirm).toHaveBeenCalledWith('custom-slug.md');
+  });
+});

package/tests/client/components/dialogs/dialog-stubs.ts

@@ -0,0 +1,19 @@
+/* Shared dialog test stubs for component tests.
+ *
+ * jsdom does not implement showModal() or close() on HTMLDialogElement.
+ * Components that render <dialog> elements need these methods stubbed
+ * before rendering. Call stubDialogMethods() in a beforeEach block.
+ */
+
+import { vi } from 'vitest';
+
+/**
+ * Stubs showModal and close on HTMLDialogElement.prototype so that
+ * Svelte components using native <dialog> elements can mount without
+ * throwing in jsdom.
+ * @return {void}
+ */
+export function stubDialogMethods(): void {
+  HTMLDialogElement.prototype.showModal = vi.fn();
+  HTMLDialogElement.prototype.close = vi.fn();
+}

package/tests/client/components/editor/EditorPane.test.ts

@@ -0,0 +1,100 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, cleanup } from '@testing-library/svelte';
+import EditorPane from '../../../../src/client/components/editor/EditorPane.svelte';
+import { makeEditorFile } from './fixtures';
+
+/**
+ * Tests for the EditorPane component.
+ * Full editing behaviour (CodeMirror interactions, live text changes) is deferred to E2E tests.
+ * These tests verify that the component mounts and unmounts without error under
+ * common file states, and that the expected container elements are present in the DOM.
+ *
+ * @codemirror/* and @lezer/* imports are redirected to tests/stubs/codemirror.ts
+ * via the resolve.alias setting in vitest.config.ts (components project), so no
+ * explicit vi.mock calls are needed for those packages.
+ *
+ * editor.svelte is mocked to avoid Svelte 5 rune initialization in jsdom.
+ */
+
+// vi.hoisted ensures these declarations are available when vi.mock factories run.
+const { mockGetEditorFile } = vi.hoisted(() => ({
+  mockGetEditorFile: vi.fn(() => null),
+}));
+
+vi.mock('../../../../src/client/js/editor/editor.svelte', () => ({
+  getEditorFile: mockGetEditorFile,
+  updateBody: vi.fn(),
+  changeFileFormat: vi.fn(),
+}));
+
+// FormatSelector imports schema.svelte which depends on virtual:collections
+vi.mock('../../../../src/client/js/state/schema.svelte', () => ({
+  schema: { active: null },
+}));
+
+// Prevent accumulated renders from bleeding between tests
+afterEach(() => cleanup());
+
+describe('EditorPane', () => {
+  /*
+  //////////////////////////////
+  // DOM structure
+  //////////////////////////////
+  */
+
+  it('renders the outer wrapper element', () => {
+    mockGetEditorFile.mockReturnValue(null);
+
+    const { container } = render(EditorPane, { props: {} });
+    expect(container.querySelector('.editor-wrapper')).not.toBeNull();
+  });
+
+  it('renders the editor box element', () => {
+    mockGetEditorFile.mockReturnValue(null);
+
+    const { container } = render(EditorPane, { props: {} });
+    expect(container.querySelector('.editor-box')).not.toBeNull();
+  });
+
+  it('renders the editor pane container element', () => {
+    mockGetEditorFile.mockReturnValue(null);
+
+    const { container } = render(EditorPane, { props: {} });
+    expect(container.querySelector('.editor-pane')).not.toBeNull();
+  });
+
+  /*
+  //////////////////////////////
+  // Mount/unmount without error
+  //////////////////////////////
+  */
+
+  it('mounts without error when no file is open', () => {
+    mockGetEditorFile.mockReturnValue(null);
+
+    expect(() => render(EditorPane, { props: {} })).not.toThrow();
+  });
+
+  it('mounts without error when a file with body is open', () => {
+    mockGetEditorFile.mockReturnValue(
+      makeEditorFile({ body: '# Hello', filename: 'post.md' }),
+    );
+
+    expect(() => render(EditorPane, { props: {} })).not.toThrow();
+  });
+
+  it('mounts without error when body is not yet loaded', () => {
+    mockGetEditorFile.mockReturnValue(
+      makeEditorFile({ bodyLoaded: false, filename: 'post.md' }),
+    );
+
+    expect(() => render(EditorPane, { props: {} })).not.toThrow();
+  });
+
+  it('unmounts without error', () => {
+    mockGetEditorFile.mockReturnValue(null);
+
+    const { unmount } = render(EditorPane, { props: {} });
+    expect(() => unmount()).not.toThrow();
+  });
+});