nebula-cms 0.1.3 → 0.1.4

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

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

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

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