nebula-cms 0.1.0

package/tests/client/components/fields/SchemaField.test.ts

@@ -0,0 +1,190 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, cleanup, within, fireEvent } from '@testing-library/svelte';
+import SchemaField from '../../../../src/client/components/fields/SchemaField.svelte';
+
+/**
+ * Tests for the SchemaField component.
+ * SchemaField is a dispatch router — it resolves a schema node to the correct
+ * leaf field component. Tests verify that the right field type is rendered
+ * for each schema kind and that nullable anyOf schemas are unwrapped correctly.
+ */
+
+// Prevent accumulated renders from bleeding between tests
+afterEach(() => cleanup());
+
+describe('SchemaField', () => {
+  /*
+  //////////////////////////////
+  // Routing by type
+  //////////////////////////////
+  */
+
+  it('renders a text input for a string schema', () => {
+    const { container } = render(SchemaField, {
+      props: {
+        name: 'title',
+        schema: { type: 'string' },
+        value: 'hello',
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(container.querySelector('input[type="text"]')).not.toBeNull();
+  });
+
+  it('renders a number input for a number schema', () => {
+    const { container } = render(SchemaField, {
+      props: {
+        name: 'count',
+        schema: { type: 'number' },
+        value: 0,
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(container.querySelector('input[type="number"]')).not.toBeNull();
+  });
+
+  it('renders a number input for an integer schema', () => {
+    const { container } = render(SchemaField, {
+      props: {
+        name: 'count',
+        schema: { type: 'integer' },
+        value: 0,
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(container.querySelector('input[type="number"]')).not.toBeNull();
+  });
+
+  it('renders a checkbox for a boolean schema', () => {
+    const { container } = render(SchemaField, {
+      props: {
+        name: 'isActive',
+        schema: { type: 'boolean' },
+        value: false,
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(container.querySelector('input[type="checkbox"]')).not.toBeNull();
+  });
+
+  it('renders a select for an enum schema', () => {
+    const { container } = render(SchemaField, {
+      props: {
+        name: 'status',
+        schema: { type: 'string', enum: ['draft', 'published'] },
+        value: 'draft',
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(container.querySelector('select')).not.toBeNull();
+  });
+
+  it('renders a date input for a date-time string schema', () => {
+    const { container } = render(SchemaField, {
+      props: {
+        name: 'publishedAt',
+        schema: { type: 'string', format: 'date-time' },
+        value: '',
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(container.querySelector('input[type="date"]')).not.toBeNull();
+  });
+
+  it('renders a fieldset for an object schema', () => {
+    const { container } = render(SchemaField, {
+      props: {
+        name: 'meta',
+        schema: {
+          type: 'object',
+          properties: { note: { type: 'string', title: 'Note' } },
+        },
+        value: { note: '' },
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(container.querySelector('fieldset')).not.toBeNull();
+  });
+
+  it('renders an array fieldset for an array schema', () => {
+    const { container } = render(SchemaField, {
+      props: {
+        name: 'tags',
+        schema: { type: 'array', items: { type: 'string' } },
+        value: [],
+        onchange: vi.fn(),
+      },
+    });
+
+    // ArrayField renders a <fieldset>
+    expect(container.querySelector('fieldset')).not.toBeNull();
+  });
+
+  /*
+  //////////////////////////////
+  // Nullable anyOf unwrapping
+  //////////////////////////////
+  */
+
+  it('renders a text input for a nullable string anyOf schema', () => {
+    const { container } = render(SchemaField, {
+      props: {
+        name: 'bio',
+        schema: { anyOf: [{ type: 'string' }, { type: 'null' }] },
+        value: null,
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(container.querySelector('input[type="text"]')).not.toBeNull();
+  });
+
+  it('calls onchange with null when a nullable string field is cleared', async () => {
+    const onchange = vi.fn();
+
+    const { container } = render(SchemaField, {
+      props: {
+        name: 'bio',
+        schema: { anyOf: [{ type: 'string' }, { type: 'null' }] },
+        value: 'some text',
+        onchange,
+      },
+    });
+
+    const input = container.querySelector('input[type="text"]')!;
+    await fireEvent.input(input, { target: { value: '' } });
+
+    expect(onchange).toHaveBeenCalledWith(null);
+  });
+
+  /*
+  //////////////////////////////
+  // onChange passthrough
+  //////////////////////////////
+  */
+
+  it('passes onchange calls through for string fields', async () => {
+    const onchange = vi.fn();
+
+    const { container } = render(SchemaField, {
+      props: {
+        name: 'title',
+        schema: { type: 'string' },
+        value: '',
+        onchange,
+      },
+    });
+
+    const input = container.querySelector('input[type="text"]')!;
+    await fireEvent.input(input, { target: { value: 'new title' } });
+
+    expect(onchange).toHaveBeenCalledWith('new title');
+  });
+});

package/tests/client/components/fields/StringField.test.ts

@@ -0,0 +1,223 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, cleanup, within, fireEvent } from '@testing-library/svelte';
+import StringField from '../../../../src/client/components/fields/StringField.svelte';
+
+/**
+ * Tests for the StringField component.
+ * Covers label derivation, input rendering, textarea mode, onChange behavior,
+ * nullable empty values, and schema constraints.
+ */
+
+// Prevent accumulated renders from bleeding between tests
+afterEach(() => cleanup());
+
+describe('StringField', () => {
+  /*
+  //////////////////////////////
+  // Label rendering
+  //////////////////////////////
+  */
+
+  it('renders a label derived from the name when schema has no title', () => {
+    const { container } = render(StringField, {
+      props: {
+        name: 'myField',
+        schema: { type: 'string' },
+        value: '',
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(within(container).getByText('My Field')).toBeTruthy();
+  });
+
+  it('renders the schema title as label when provided', () => {
+    const { container } = render(StringField, {
+      props: {
+        name: 'myField',
+        schema: { type: 'string', title: 'Custom Title' },
+        value: '',
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(within(container).getByLabelText('Custom Title')).toBeTruthy();
+  });
+
+  it('shows a required marker when required is true', () => {
+    const { container } = render(StringField, {
+      props: {
+        name: 'myField',
+        schema: { type: 'string' },
+        value: '',
+        required: true,
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(container.querySelector('.field-required')).not.toBeNull();
+  });
+
+  /*
+  //////////////////////////////
+  // Input rendering and value
+  //////////////////////////////
+  */
+
+  it('renders a text input with the provided value', () => {
+    const { container } = render(StringField, {
+      props: {
+        name: 'myField',
+        schema: { type: 'string' },
+        value: 'hello',
+        onchange: vi.fn(),
+      },
+    });
+
+    // Svelte 5 sets value as a DOM property, not an HTML attribute
+    const input = container.querySelector(
+      'input[type="text"]',
+    ) as HTMLInputElement;
+    expect(input).not.toBeNull();
+    expect(input.value).toBe('hello');
+  });
+
+  it('renders a textarea when schema widget is "textarea"', () => {
+    const { container } = render(StringField, {
+      props: {
+        name: 'myField',
+        schema: { type: 'string', widget: 'textarea' },
+        value: 'body text',
+        onchange: vi.fn(),
+      },
+    });
+
+    const textarea = container.querySelector('textarea');
+    expect(textarea).not.toBeNull();
+    expect(textarea!.value).toBe('body text');
+  });
+
+  it('sets the maxlength attribute from schema maxLength', () => {
+    const { container } = render(StringField, {
+      props: {
+        name: 'myField',
+        schema: { type: 'string', maxLength: 50 },
+        value: '',
+        onchange: vi.fn(),
+      },
+    });
+
+    const input = container.querySelector(
+      'input[type="text"]',
+    ) as HTMLInputElement;
+    expect(input.maxLength).toBe(50);
+  });
+
+  it('renders the description as help text', () => {
+    const { container } = render(StringField, {
+      props: {
+        name: 'myField',
+        schema: { type: 'string', description: 'Enter a value' },
+        value: '',
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(within(container).getByText('Enter a value')).toBeTruthy();
+  });
+
+  /*
+  //////////////////////////////
+  // onChange behavior
+  //////////////////////////////
+  */
+
+  it('calls onchange with the new string value on input', async () => {
+    const onchange = vi.fn();
+
+    const { container } = render(StringField, {
+      props: {
+        name: 'myField',
+        schema: { type: 'string' },
+        value: '',
+        onchange,
+      },
+    });
+
+    const input = container.querySelector('input[type="text"]')!;
+    await fireEvent.input(input, { target: { value: 'new value' } });
+
+    expect(onchange).toHaveBeenCalledWith('new value');
+  });
+
+  it('calls onchange with null for empty input on nullable fields', async () => {
+    const onchange = vi.fn();
+
+    const { container } = render(StringField, {
+      props: {
+        name: 'myField',
+        schema: { type: 'string', _nullable: true },
+        value: 'existing',
+        onchange,
+      },
+    });
+
+    const input = container.querySelector('input[type="text"]')!;
+    await fireEvent.input(input, { target: { value: '' } });
+
+    expect(onchange).toHaveBeenCalledWith(null);
+  });
+
+  it('calls onchange with empty string for empty input on non-nullable fields', async () => {
+    const onchange = vi.fn();
+
+    const { container } = render(StringField, {
+      props: {
+        name: 'myField',
+        schema: { type: 'string' },
+        value: 'existing',
+        onchange,
+      },
+    });
+
+    const input = container.querySelector('input[type="text"]')!;
+    await fireEvent.input(input, { target: { value: '' } });
+
+    expect(onchange).toHaveBeenCalledWith('');
+  });
+
+  /*
+  //////////////////////////////
+  // Deprecated / read-only
+  //////////////////////////////
+  */
+
+  it('applies the deprecated class when schema.deprecated is true', () => {
+    const { container } = render(StringField, {
+      props: {
+        name: 'myField',
+        schema: { type: 'string', deprecated: true },
+        value: '',
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(container.querySelector('.field--deprecated')).not.toBeNull();
+  });
+
+  it('renders the input as readonly when schema.readOnly is true', () => {
+    const { container } = render(StringField, {
+      props: {
+        name: 'myField',
+        schema: { type: 'string', readOnly: true },
+        value: '',
+        onchange: vi.fn(),
+      },
+    });
+
+    const input = container.querySelector(
+      'input[type="text"]',
+    ) as HTMLInputElement;
+    expect(input.readOnly).toBe(true);
+  });
+});

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

@@ -0,0 +1,285 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, cleanup, fireEvent } from '@testing-library/svelte';
+import AdminSidebar from '../../../../src/client/components/sidebar/AdminSidebar.svelte';
+
+/**
+ * Tests for the AdminSidebar component.
+ * Mocks all JS module imports to avoid Svelte 5 rune initialization issues
+ * in the jsdom environment. Verifies item rendering, search filtering,
+ * active item highlighting, showAdd prop, and showFooter prop.
+ */
+
+vi.mock('../../../../src/client/js/utils/sort', async () => {
+  const { createSortMock } = await import('./sort-mock');
+  return createSortMock();
+});
+
+vi.mock('../../../../src/client/js/state/router.svelte', () => ({
+  navigate: vi.fn(),
+  adminPath: vi.fn((...segments) =>
+    segments.length === 0 ? '/admin' : '/admin/' + segments.join('/'),
+  ),
+}));
+
+vi.mock('../../../../src/client/js/drafts/storage', () => ({
+  saveDraft: vi.fn(() => Promise.resolve()),
+}));
+
+vi.mock('../../../../src/client/js/state/state.svelte', () => ({
+  reloadCollection: vi.fn(),
+  disconnect: vi.fn(),
+  refreshDrafts: vi.fn(() => Promise.resolve()),
+}));
+
+// 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());
+
+/** Sample items used in multiple tests. */
+const sampleItems = [
+  { label: 'Alpha Post', href: '/admin/posts/alpha' },
+  { label: 'Beta Post', href: '/admin/posts/beta' },
+  { label: 'Gamma Post', href: '/admin/posts/gamma' },
+];
+
+describe('AdminSidebar', () => {
+  /*
+  //////////////////////////////
+  // Item list rendering
+  //////////////////////////////
+  */
+
+  it('renders all provided items as links', () => {
+    const { container } = render(AdminSidebar, {
+      props: {
+        title: 'Posts',
+        items: sampleItems,
+      },
+    });
+
+    const links = container.querySelectorAll('.sidebar-link');
+    expect(links.length).toBe(3);
+  });
+
+  it('renders the sidebar heading', () => {
+    const { container } = render(AdminSidebar, {
+      props: { title: 'Collections', items: [] },
+    });
+
+    expect(
+      container.querySelector('.sidebar-heading')?.textContent?.trim(),
+    ).toBe('Collections');
+  });
+
+  it('renders a "No items found." message when items is empty', () => {
+    const { container } = render(AdminSidebar, {
+      props: { title: 'Posts', items: [] },
+    });
+
+    expect(container.querySelector('.status')?.textContent?.trim()).toBe(
+      'No items found.',
+    );
+  });
+
+  it('renders a loading message when loading prop is true', () => {
+    const { container } = render(AdminSidebar, {
+      props: { title: 'Posts', items: [], loading: true },
+    });
+
+    expect(container.querySelector('.status')?.textContent?.trim()).toBe(
+      'Loading...',
+    );
+  });
+
+  it('renders an error message when error prop is set', () => {
+    const { container } = render(AdminSidebar, {
+      props: {
+        title: 'Posts',
+        items: [],
+        error: 'Failed to load',
+      },
+    });
+
+    expect(container.querySelector('.status')?.textContent?.trim()).toBe(
+      'Failed to load',
+    );
+  });
+
+  /*
+  //////////////////////////////
+  // Active item
+  //////////////////////////////
+  */
+
+  it('sets aria-current="page" on the active item link', () => {
+    const { container } = render(AdminSidebar, {
+      props: {
+        title: 'Posts',
+        items: sampleItems,
+        activeItem: '/admin/posts/beta',
+      },
+    });
+
+    const links = Array.from(container.querySelectorAll('.sidebar-link'));
+    const active = links.find((l) => l.getAttribute('aria-current') === 'page');
+
+    expect(active).not.toBeUndefined();
+    expect(active?.getAttribute('href')).toBe('/admin/posts/beta');
+  });
+
+  it('does not set aria-current on non-active items', () => {
+    const { container } = render(AdminSidebar, {
+      props: {
+        title: 'Posts',
+        items: sampleItems,
+        activeItem: '/admin/posts/beta',
+      },
+    });
+
+    const links = Array.from(container.querySelectorAll('.sidebar-link'));
+    const nonActive = links.filter(
+      (l) => l.getAttribute('href') !== '/admin/posts/beta',
+    );
+
+    for (const link of nonActive) {
+      expect(link.getAttribute('aria-current')).toBeNull();
+    }
+  });
+
+  /*
+  //////////////////////////////
+  // Search filtering
+  //////////////////////////////
+  */
+
+  it('filters items when the search input has a value', async () => {
+    const { container } = render(AdminSidebar, {
+      props: { title: 'Posts', items: sampleItems },
+    });
+
+    const input = container.querySelector('.search-input') as HTMLInputElement;
+    await fireEvent.input(input, { target: { value: 'beta' } });
+
+    const links = container.querySelectorAll('.sidebar-link');
+    expect(links.length).toBe(1);
+    expect(links[0].getAttribute('href')).toBe('/admin/posts/beta');
+  });
+
+  it('shows all items when the search input is cleared', async () => {
+    const { container } = render(AdminSidebar, {
+      props: { title: 'Posts', items: sampleItems },
+    });
+
+    const input = container.querySelector('.search-input') as HTMLInputElement;
+    await fireEvent.input(input, { target: { value: 'alpha' } });
+    await fireEvent.input(input, { target: { value: '' } });
+
+    const links = container.querySelectorAll('.sidebar-link');
+    expect(links.length).toBe(3);
+  });
+
+  it('shows "No items found." when no items match the search query', async () => {
+    const { container } = render(AdminSidebar, {
+      props: { title: 'Posts', items: sampleItems },
+    });
+
+    const input = container.querySelector('.search-input') as HTMLInputElement;
+    await fireEvent.input(input, { target: { value: 'zzznomatch' } });
+
+    expect(container.querySelector('.status')?.textContent?.trim()).toBe(
+      'No items found.',
+    );
+  });
+
+  /*
+  //////////////////////////////
+  // showAdd prop
+  //////////////////////////////
+  */
+
+  it('renders the add button when showAdd is true', () => {
+    const { container } = render(AdminSidebar, {
+      props: {
+        title: 'Posts',
+        items: sampleItems,
+        showAdd: true,
+        collection: 'posts',
+      },
+    });
+
+    expect(container.querySelector('.add-btn')).not.toBeNull();
+  });
+
+  it('does not render the add button when showAdd is false', () => {
+    const { container } = render(AdminSidebar, {
+      props: { title: 'Posts', items: sampleItems, showAdd: false },
+    });
+
+    expect(container.querySelector('.add-btn')).toBeNull();
+  });
+
+  /*
+  //////////////////////////////
+  // showFooter prop
+  //////////////////////////////
+  */
+
+  it('renders the footer when showFooter is true', () => {
+    const { container } = render(AdminSidebar, {
+      props: { title: 'Posts', items: sampleItems, showFooter: true },
+    });
+
+    expect(container.querySelector('.sidebar-footer')).not.toBeNull();
+  });
+
+  it('does not render the footer when showFooter is false', () => {
+    const { container } = render(AdminSidebar, {
+      props: { title: 'Posts', items: sampleItems, showFooter: false },
+    });
+
+    expect(container.querySelector('.sidebar-footer')).toBeNull();
+  });
+
+  it('renders the logout button inside the footer', () => {
+    const { container } = render(AdminSidebar, {
+      props: { title: 'Posts', items: sampleItems, showFooter: true },
+    });
+
+    const footer = container.querySelector('.sidebar-footer');
+    expect(footer?.querySelector('.logout-btn')).not.toBeNull();
+  });
+
+  /*
+  //////////////////////////////
+  // Sort controls
+  //////////////////////////////
+  */
+
+  it('renders the sort control when hasDates is true', () => {
+    const { container } = render(AdminSidebar, {
+      props: {
+        title: 'Posts',
+        items: sampleItems,
+        hasDates: true,
+        storageKey: 'posts',
+      },
+    });
+
+    // The AdminSidebarSort component renders a .sort-btn
+    expect(container.querySelector('.sort-btn')).not.toBeNull();
+  });
+
+  it('does not render the sort control when hasDates is false', () => {
+    const { container } = render(AdminSidebar, {
+      props: { title: 'Posts', items: sampleItems, hasDates: false },
+    });
+
+    expect(container.querySelector('.sort-btn')).toBeNull();
+  });
+});