nebula-cms 0.1.3 → 0.1.4

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

@@ -1,246 +0,0 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { render, cleanup, within, fireEvent } from '@testing-library/svelte';
-import EnumField from '../../../../src/client/components/fields/EnumField.svelte';
-
-/**
- * Tests for the EnumField component.
- * Covers label derivation, options rendering, empty placeholder logic,
- * onChange behavior, nullable handling, and read-only state.
- */
-
-// Prevent accumulated renders from bleeding between tests
-afterEach(() => cleanup());
-
-describe('EnumField', () => {
-  const options = ['draft', 'published', 'archived'];
-
-  /*
-  //////////////////////////////
-  // Label rendering
-  //////////////////////////////
-  */
-
-  it('renders a label derived from the name', () => {
-    const { container } = render(EnumField, {
-      props: {
-        name: 'status',
-        schema: { type: 'string' },
-        value: 'draft',
-        options,
-        onchange: vi.fn(),
-      },
-    });
-
-    expect(within(container).getByText('Status')).toBeTruthy();
-  });
-
-  it('renders the schema title as label when provided', () => {
-    const { container } = render(EnumField, {
-      props: {
-        name: 'status',
-        schema: { type: 'string', title: 'Publication Status' },
-        value: 'draft',
-        options,
-        onchange: vi.fn(),
-      },
-    });
-
-    expect(within(container).getByLabelText('Publication Status')).toBeTruthy();
-  });
-
-  it('shows a required marker when required is true', () => {
-    const { container } = render(EnumField, {
-      props: {
-        name: 'status',
-        schema: { type: 'string' },
-        value: 'draft',
-        options,
-        required: true,
-        onchange: vi.fn(),
-      },
-    });
-
-    expect(container.querySelector('.field-required')).not.toBeNull();
-  });
-
-  /*
-  //////////////////////////////
-  // Options rendering
-  //////////////////////////////
-  */
-
-  it('renders all provided options', () => {
-    const { container } = render(EnumField, {
-      props: {
-        name: 'status',
-        schema: { type: 'string' },
-        value: 'draft',
-        options,
-        onchange: vi.fn(),
-      },
-    });
-
-    const select = container.querySelector('select')!;
-    const optionValues = Array.from(select.querySelectorAll('option')).map(
-      (o) => (o as HTMLOptionElement).value,
-    );
-    expect(optionValues).toContain('draft');
-    expect(optionValues).toContain('published');
-    expect(optionValues).toContain('archived');
-  });
-
-  it('includes an empty placeholder option when not required', () => {
-    const { container } = render(EnumField, {
-      props: {
-        name: 'status',
-        schema: { type: 'string' },
-        value: 'draft',
-        options,
-        required: false,
-        onchange: vi.fn(),
-      },
-    });
-
-    const select = container.querySelector('select')!;
-    const optionEls = Array.from(
-      select.querySelectorAll('option'),
-    ) as HTMLOptionElement[];
-    expect(optionEls.some((o) => o.value === '')).toBe(true);
-  });
-
-  it('includes an empty placeholder option when value is null even if required', () => {
-    const { container } = render(EnumField, {
-      props: {
-        name: 'status',
-        schema: { type: 'string' },
-        value: null,
-        options,
-        required: true,
-        onchange: vi.fn(),
-      },
-    });
-
-    const select = container.querySelector('select')!;
-    const optionEls = Array.from(
-      select.querySelectorAll('option'),
-    ) as HTMLOptionElement[];
-    expect(optionEls.some((o) => o.value === '')).toBe(true);
-  });
-
-  it('omits the empty placeholder option when required and value is set', () => {
-    const { container } = render(EnumField, {
-      props: {
-        name: 'status',
-        schema: { type: 'string' },
-        value: 'draft',
-        options,
-        required: true,
-        onchange: vi.fn(),
-      },
-    });
-
-    const select = container.querySelector('select')!;
-    const optionEls = Array.from(
-      select.querySelectorAll('option'),
-    ) as HTMLOptionElement[];
-    expect(optionEls.some((o) => o.value === '')).toBe(false);
-  });
-
-  /*
-  //////////////////////////////
-  // onChange behavior
-  //////////////////////////////
-  */
-
-  it('calls onchange with the selected string value', async () => {
-    const onchange = vi.fn();
-
-    const { container } = render(EnumField, {
-      props: {
-        name: 'status',
-        schema: { type: 'string' },
-        value: 'draft',
-        options,
-        onchange,
-      },
-    });
-
-    const select = container.querySelector('select')!;
-    await fireEvent.change(select, { target: { value: 'published' } });
-
-    expect(onchange).toHaveBeenCalledWith('published');
-  });
-
-  it('calls onchange with null when empty option is selected on nullable fields', async () => {
-    const onchange = vi.fn();
-
-    const { container } = render(EnumField, {
-      props: {
-        name: 'status',
-        schema: { type: 'string', _nullable: true },
-        value: 'draft',
-        options,
-        onchange,
-      },
-    });
-
-    const select = container.querySelector('select')!;
-    await fireEvent.change(select, { target: { value: '' } });
-
-    expect(onchange).toHaveBeenCalledWith(null);
-  });
-
-  it('calls onchange with empty string when empty option selected on non-nullable fields', async () => {
-    const onchange = vi.fn();
-
-    const { container } = render(EnumField, {
-      props: {
-        name: 'status',
-        schema: { type: 'string' },
-        value: 'draft',
-        options,
-        onchange,
-      },
-    });
-
-    const select = container.querySelector('select')!;
-    await fireEvent.change(select, { target: { value: '' } });
-
-    expect(onchange).toHaveBeenCalledWith('');
-  });
-
-  /*
-  //////////////////////////////
-  // Deprecated / read-only
-  //////////////////////////////
-  */
-
-  it('applies the deprecated class when schema.deprecated is true', () => {
-    const { container } = render(EnumField, {
-      props: {
-        name: 'status',
-        schema: { type: 'string', deprecated: true },
-        value: 'draft',
-        options,
-        onchange: vi.fn(),
-      },
-    });
-
-    expect(container.querySelector('.field--deprecated')).not.toBeNull();
-  });
-
-  it('disables the select when schema.readOnly is true', () => {
-    const { container } = render(EnumField, {
-      props: {
-        name: 'status',
-        schema: { type: 'string', readOnly: true },
-        value: 'draft',
-        options,
-        onchange: vi.fn(),
-      },
-    });
-
-    const select = container.querySelector('select') as HTMLSelectElement;
-    expect(select.disabled).toBe(true);
-  });
-});

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

@@ -1,240 +0,0 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { render, cleanup, within, fireEvent } from '@testing-library/svelte';
-import NumberField from '../../../../src/client/components/fields/NumberField.svelte';
-
-/**
- * Tests for the NumberField component.
- * Covers label derivation, input constraints, onChange behavior,
- * nullable empty values, and constraint text rendering.
- */
-
-// Prevent accumulated renders from bleeding between tests
-afterEach(() => cleanup());
-
-describe('NumberField', () => {
-  /*
-  //////////////////////////////
-  // Label rendering
-  //////////////////////////////
-  */
-
-  it('renders a label derived from the name', () => {
-    const { container } = render(NumberField, {
-      props: {
-        name: 'count',
-        schema: { type: 'number' },
-        value: 0,
-        onchange: vi.fn(),
-      },
-    });
-
-    expect(within(container).getByText('Count')).toBeTruthy();
-  });
-
-  it('renders the schema title as label when provided', () => {
-    const { container } = render(NumberField, {
-      props: {
-        name: 'count',
-        schema: { type: 'number', title: 'Item Count' },
-        value: 0,
-        onchange: vi.fn(),
-      },
-    });
-
-    expect(within(container).getByLabelText('Item Count')).toBeTruthy();
-  });
-
-  it('shows a required marker when required is true', () => {
-    const { container } = render(NumberField, {
-      props: {
-        name: 'count',
-        schema: { type: 'number' },
-        value: 0,
-        required: true,
-        onchange: vi.fn(),
-      },
-    });
-
-    expect(container.querySelector('.field-required')).not.toBeNull();
-  });
-
-  /*
-  //////////////////////////////
-  // Input rendering and value
-  //////////////////////////////
-  */
-
-  it('renders a number input with the provided value', () => {
-    const { container } = render(NumberField, {
-      props: {
-        name: 'count',
-        schema: { type: 'number' },
-        value: 42,
-        onchange: vi.fn(),
-      },
-    });
-
-    // Svelte 5 sets value as a DOM property, not an HTML attribute
-    const input = container.querySelector(
-      'input[type="number"]',
-    ) as HTMLInputElement;
-    expect(input).not.toBeNull();
-    expect(input.value).toBe('42');
-  });
-
-  it('applies min from schema.minimum', () => {
-    const { container } = render(NumberField, {
-      props: {
-        name: 'count',
-        schema: { type: 'number', minimum: 5 },
-        value: 10,
-        onchange: vi.fn(),
-      },
-    });
-
-    const input = container.querySelector(
-      'input[type="number"]',
-    ) as HTMLInputElement;
-    expect(Number(input.min)).toBe(5);
-  });
-
-  it('applies max from schema.maximum', () => {
-    const { container } = render(NumberField, {
-      props: {
-        name: 'count',
-        schema: { type: 'number', maximum: 100 },
-        value: 10,
-        onchange: vi.fn(),
-      },
-    });
-
-    const input = container.querySelector(
-      'input[type="number"]',
-    ) as HTMLInputElement;
-    expect(Number(input.max)).toBe(100);
-  });
-
-  it('applies step from schema.multipleOf', () => {
-    const { container } = render(NumberField, {
-      props: {
-        name: 'count',
-        schema: { type: 'number', multipleOf: 5 },
-        value: 10,
-        onchange: vi.fn(),
-      },
-    });
-
-    const input = container.querySelector(
-      'input[type="number"]',
-    ) as HTMLInputElement;
-    expect(Number(input.step)).toBe(5);
-  });
-
-  it('renders constraint text in the help paragraph', () => {
-    const { container } = render(NumberField, {
-      props: {
-        name: 'count',
-        schema: { type: 'number', minimum: 0, maximum: 100 },
-        value: 10,
-        onchange: vi.fn(),
-      },
-    });
-
-    expect(within(container).getByText('min 0, max 100')).toBeTruthy();
-  });
-
-  /*
-  //////////////////////////////
-  // onChange behavior
-  //////////////////////////////
-  */
-
-  it('calls onchange with a parsed float on input', async () => {
-    const onchange = vi.fn();
-
-    const { container } = render(NumberField, {
-      props: {
-        name: 'count',
-        schema: { type: 'number' },
-        value: 0,
-        onchange,
-      },
-    });
-
-    const input = container.querySelector('input[type="number"]')!;
-    await fireEvent.input(input, { target: { value: '3.14' } });
-
-    expect(onchange).toHaveBeenCalledWith(3.14);
-  });
-
-  it('calls onchange with 0 for empty input on non-nullable fields', async () => {
-    const onchange = vi.fn();
-
-    const { container } = render(NumberField, {
-      props: {
-        name: 'count',
-        schema: { type: 'number' },
-        value: 5,
-        onchange,
-      },
-    });
-
-    const input = container.querySelector('input[type="number"]')!;
-    await fireEvent.input(input, { target: { value: '' } });
-
-    expect(onchange).toHaveBeenCalledWith(0);
-  });
-
-  it('calls onchange with null for empty input on nullable fields', async () => {
-    const onchange = vi.fn();
-
-    const { container } = render(NumberField, {
-      props: {
-        name: 'count',
-        schema: { type: 'number', _nullable: true },
-        value: 5,
-        onchange,
-      },
-    });
-
-    const input = container.querySelector('input[type="number"]')!;
-    await fireEvent.input(input, { target: { value: '' } });
-
-    expect(onchange).toHaveBeenCalledWith(null);
-  });
-
-  /*
-  //////////////////////////////
-  // Deprecated / read-only
-  //////////////////////////////
-  */
-
-  it('applies the deprecated class when schema.deprecated is true', () => {
-    const { container } = render(NumberField, {
-      props: {
-        name: 'count',
-        schema: { type: 'number', deprecated: true },
-        value: 0,
-        onchange: vi.fn(),
-      },
-    });
-
-    expect(container.querySelector('.field--deprecated')).not.toBeNull();
-  });
-
-  it('renders the input as readonly when schema.readOnly is true', () => {
-    const { container } = render(NumberField, {
-      props: {
-        name: 'count',
-        schema: { type: 'number', readOnly: true },
-        value: 0,
-        onchange: vi.fn(),
-      },
-    });
-
-    const input = container.querySelector(
-      'input[type="number"]',
-    ) as HTMLInputElement;
-    expect(input.readOnly).toBe(true);
-  });
-});

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

@@ -1,157 +0,0 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { render, cleanup, within, fireEvent } from '@testing-library/svelte';
-import ObjectField from '../../../../src/client/components/fields/ObjectField.svelte';
-
-/**
- * Tests for the ObjectField component.
- * Covers fieldset vs. inline rendering, child field display,
- * and change propagation for individual properties.
- *
- * Child field labels include an aria-hidden required marker (*) which causes
- * getByLabelText exact-text matching to fail. We query inputs via their `id`
- * attribute (which matches the schema property key) instead.
- */
-
-// Prevent accumulated renders from bleeding between tests
-afterEach(() => cleanup());
-
-describe('ObjectField', () => {
-  const schema = {
-    type: 'object',
-    title: 'Address',
-    properties: {
-      street: { type: 'string', title: 'Street' },
-      city: { type: 'string', title: 'City' },
-    },
-    required: ['street'],
-  };
-
-  /*
-  //////////////////////////////
-  // Fieldset rendering (default)
-  //////////////////////////////
-  */
-
-  it('renders a fieldset with a legend derived from the schema title', () => {
-    const { container } = render(ObjectField, {
-      props: {
-        name: 'address',
-        schema,
-        value: { street: '123 Main St', city: 'Springfield' },
-        onchange: vi.fn(),
-      },
-    });
-
-    expect(container.querySelector('fieldset.object-field')).not.toBeNull();
-    expect(within(container).getByText('Address')).toBeTruthy();
-  });
-
-  it('shows a required marker on the legend when required is true', () => {
-    const { container } = render(ObjectField, {
-      props: {
-        name: 'address',
-        schema,
-        value: {},
-        required: true,
-        onchange: vi.fn(),
-      },
-    });
-
-    expect(container.querySelector('.object-field__required')).not.toBeNull();
-  });
-
-  it('renders child fields for each schema property', () => {
-    const { container } = render(ObjectField, {
-      props: {
-        name: 'address',
-        schema,
-        value: { street: '123 Main St', city: 'Springfield' },
-        onchange: vi.fn(),
-      },
-    });
-
-    // Query by `id` which is set to the property key by SchemaField -> StringField
-    expect(container.querySelector('#street')).not.toBeNull();
-    expect(container.querySelector('#city')).not.toBeNull();
-  });
-
-  it('populates child fields with the corresponding values', () => {
-    const { container } = render(ObjectField, {
-      props: {
-        name: 'address',
-        schema,
-        value: { street: '123 Main St', city: 'Springfield' },
-        onchange: vi.fn(),
-      },
-    });
-
-    // Svelte 5 sets value as a DOM property, not an HTML attribute
-    const streetInput = container.querySelector('#street') as HTMLInputElement;
-    const cityInput = container.querySelector('#city') as HTMLInputElement;
-    expect(streetInput.value).toBe('123 Main St');
-    expect(cityInput.value).toBe('Springfield');
-  });
-
-  /*
-  //////////////////////////////
-  // Inline rendering
-  //////////////////////////////
-  */
-
-  it('renders without a fieldset when inline is true', () => {
-    const { container } = render(ObjectField, {
-      props: {
-        name: 'address',
-        schema,
-        value: { street: '1 Road', city: 'Town' },
-        onchange: vi.fn(),
-        inline: true,
-      },
-    });
-
-    expect(container.querySelector('fieldset')).toBeNull();
-    expect(container.querySelector('.object-field--inline')).not.toBeNull();
-  });
-
-  /*
-  //////////////////////////////
-  // onChange behavior
-  //////////////////////////////
-  */
-
-  it('calls onchange with the full updated object when a child field changes', async () => {
-    const onchange = vi.fn();
-
-    const { container } = render(ObjectField, {
-      props: {
-        name: 'address',
-        schema,
-        value: { street: '123 Main St', city: 'Springfield' },
-        onchange,
-      },
-    });
-
-    const streetInput = container.querySelector('#street')!;
-    await fireEvent.input(streetInput, { target: { value: '456 Oak Ave' } });
-
-    expect(onchange).toHaveBeenCalledWith({
-      street: '456 Oak Ave',
-      city: 'Springfield',
-    });
-  });
-
-  it('defaults to an empty object when value is null', () => {
-    const { container } = render(ObjectField, {
-      props: {
-        name: 'address',
-        schema,
-        value: null,
-        onchange: vi.fn(),
-      },
-    });
-
-    // Inputs should render with empty values when value defaults to {}
-    const streetInput = container.querySelector('#street') as HTMLInputElement;
-    expect(streetInput.value).toBe('');
-  });
-});