nebula-cms 0.1.0

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

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

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

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