nebula-cms 0.1.3 → 0.1.4

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

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

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

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

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

@@ -1,19 +0,0 @@
-/* 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

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