nebula-cms 0.1.0

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

@@ -0,0 +1,197 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, cleanup, within, fireEvent } from '@testing-library/svelte';
+import ArrayField from '../../../../src/client/components/fields/ArrayField.svelte';
+
+/**
+ * Tests for the ArrayField component.
+ * Covers label rendering, empty-state display, add/remove item behavior,
+ * maxItems/minItems constraints, and item value update propagation.
+ */
+
+// Prevent accumulated renders from bleeding between tests
+afterEach(() => cleanup());
+
+describe('ArrayField', () => {
+  const stringItemSchema = { type: 'string' };
+
+  /*
+  //////////////////////////////
+  // Label rendering
+  //////////////////////////////
+  */
+
+  it('renders a legend derived from the name', () => {
+    const { container } = render(ArrayField, {
+      props: {
+        name: 'tags',
+        schema: { type: 'array', items: stringItemSchema },
+        value: [],
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(within(container).getByText('Tags')).toBeTruthy();
+  });
+
+  it('renders the schema title as legend when provided', () => {
+    const { container } = render(ArrayField, {
+      props: {
+        name: 'tags',
+        schema: {
+          type: 'array',
+          title: 'Article Tags',
+          items: stringItemSchema,
+        },
+        value: [],
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(within(container).getByText('Article Tags')).toBeTruthy();
+  });
+
+  it('shows a required marker when required is true', () => {
+    const { container } = render(ArrayField, {
+      props: {
+        name: 'tags',
+        schema: { type: 'array', items: stringItemSchema },
+        value: [],
+        required: true,
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(container.querySelector('.array-field__required')).not.toBeNull();
+  });
+
+  /*
+  //////////////////////////////
+  // Empty state
+  //////////////////////////////
+  */
+
+  it('renders "No items" when the array is empty', () => {
+    const { container } = render(ArrayField, {
+      props: {
+        name: 'tags',
+        schema: { type: 'array', items: stringItemSchema },
+        value: [],
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(within(container).getByText('No items')).toBeTruthy();
+  });
+
+  it('does not render "No items" when the array has items', () => {
+    const { container } = render(ArrayField, {
+      props: {
+        name: 'tags',
+        schema: { type: 'array', items: stringItemSchema },
+        value: ['hello'],
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(within(container).queryByText('No items')).toBeNull();
+  });
+
+  /*
+  //////////////////////////////
+  // Add item
+  //////////////////////////////
+  */
+
+  it('renders an "Add item" button', () => {
+    const { container } = render(ArrayField, {
+      props: {
+        name: 'tags',
+        schema: { type: 'array', items: stringItemSchema },
+        value: [],
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(
+      within(container).getByRole('button', { name: /Add item/i }),
+    ).toBeTruthy();
+  });
+
+  it('calls onchange with a new item appended when Add item is clicked', async () => {
+    const onchange = vi.fn();
+
+    const { container } = render(ArrayField, {
+      props: {
+        name: 'tags',
+        schema: { type: 'array', items: stringItemSchema },
+        value: ['first'],
+        onchange,
+      },
+    });
+
+    await fireEvent.click(
+      within(container).getByRole('button', { name: /Add item/i }),
+    );
+
+    // createDefaultValue for string schema returns ''
+    expect(onchange).toHaveBeenCalledWith(['first', '']);
+  });
+
+  it('disables the Add item button when maxItems is reached', () => {
+    const { container } = render(ArrayField, {
+      props: {
+        name: 'tags',
+        schema: { type: 'array', items: stringItemSchema, maxItems: 2 },
+        value: ['a', 'b'],
+        onchange: vi.fn(),
+      },
+    });
+
+    const addBtn = within(container).getByRole('button', {
+      name: /Add item/i,
+    }) as HTMLButtonElement;
+    expect(addBtn.disabled).toBe(true);
+  });
+
+  /*
+  //////////////////////////////
+  // Remove item
+  //////////////////////////////
+  */
+
+  it('calls onchange without the removed item when Remove is clicked', async () => {
+    const onchange = vi.fn();
+
+    const { container } = render(ArrayField, {
+      props: {
+        name: 'tags',
+        schema: { type: 'array', items: stringItemSchema },
+        value: ['one', 'two'],
+        onchange,
+      },
+    });
+
+    const removeBtns = within(container).getAllByRole('button', {
+      name: /Remove item/i,
+    });
+    await fireEvent.click(removeBtns[0]);
+
+    expect(onchange).toHaveBeenCalledWith(['two']);
+  });
+
+  it('disables the Remove item button when minItems is reached', () => {
+    const { container } = render(ArrayField, {
+      props: {
+        name: 'tags',
+        schema: { type: 'array', items: stringItemSchema, minItems: 1 },
+        value: ['only'],
+        onchange: vi.fn(),
+      },
+    });
+
+    const removeBtn = within(container).getByRole('button', {
+      name: /Remove item/i,
+    }) as HTMLButtonElement;
+    expect(removeBtn.disabled).toBe(true);
+  });
+});

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

@@ -0,0 +1,206 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, cleanup, within, fireEvent } from '@testing-library/svelte';
+import BooleanField from '../../../../src/client/components/fields/BooleanField.svelte';
+
+/**
+ * Tests for the BooleanField component.
+ * Covers label derivation, checked state, onChange behavior, nullable handling,
+ * and read-only rendering.
+ */
+
+// Prevent accumulated renders from bleeding between tests
+afterEach(() => cleanup());
+
+describe('BooleanField', () => {
+  /*
+  //////////////////////////////
+  // Label rendering
+  //////////////////////////////
+  */
+
+  it('renders a label derived from the name', () => {
+    const { container } = render(BooleanField, {
+      props: {
+        name: 'isActive',
+        schema: { type: 'boolean' },
+        value: false,
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(within(container).getByText('Is Active')).toBeTruthy();
+  });
+
+  it('renders the schema title as label when provided', () => {
+    const { container } = render(BooleanField, {
+      props: {
+        name: 'isActive',
+        schema: { type: 'boolean', title: 'Active Status' },
+        value: false,
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(within(container).getByLabelText('Active Status')).toBeTruthy();
+  });
+
+  it('shows a required marker when required is true', () => {
+    const { container } = render(BooleanField, {
+      props: {
+        name: 'isActive',
+        schema: { type: 'boolean' },
+        value: false,
+        required: true,
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(container.querySelector('.field-required')).not.toBeNull();
+  });
+
+  /*
+  //////////////////////////////
+  // Checkbox state
+  //////////////////////////////
+  */
+
+  it('renders an unchecked checkbox when value is false', () => {
+    const { container } = render(BooleanField, {
+      props: {
+        name: 'isActive',
+        schema: { type: 'boolean' },
+        value: false,
+        onchange: vi.fn(),
+      },
+    });
+
+    // Svelte 5 sets checked as a DOM property, not an HTML attribute
+    const checkbox = container.querySelector(
+      'input[type="checkbox"]',
+    ) as HTMLInputElement;
+    expect(checkbox).not.toBeNull();
+    expect(checkbox.checked).toBe(false);
+  });
+
+  it('renders a checked checkbox when value is true', () => {
+    const { container } = render(BooleanField, {
+      props: {
+        name: 'isActive',
+        schema: { type: 'boolean' },
+        value: true,
+        onchange: vi.fn(),
+      },
+    });
+
+    const checkbox = container.querySelector(
+      'input[type="checkbox"]',
+    ) as HTMLInputElement;
+    expect(checkbox.checked).toBe(true);
+  });
+
+  it('renders an unchecked checkbox when value is non-boolean', () => {
+    const { container } = render(BooleanField, {
+      props: {
+        name: 'isActive',
+        schema: { type: 'boolean' },
+        value: null,
+        onchange: vi.fn(),
+      },
+    });
+
+    const checkbox = container.querySelector(
+      'input[type="checkbox"]',
+    ) as HTMLInputElement;
+    expect(checkbox.checked).toBe(false);
+  });
+
+  /*
+  //////////////////////////////
+  // onChange behavior
+  //////////////////////////////
+  */
+
+  it('calls onchange with true when checkbox is checked', async () => {
+    const onchange = vi.fn();
+
+    const { container } = render(BooleanField, {
+      props: {
+        name: 'isActive',
+        schema: { type: 'boolean' },
+        value: false,
+        onchange,
+      },
+    });
+
+    const checkbox = container.querySelector('input[type="checkbox"]')!;
+    await fireEvent.change(checkbox, { target: { checked: true } });
+
+    expect(onchange).toHaveBeenCalledWith(true);
+  });
+
+  it('calls onchange with false when checkbox is unchecked', async () => {
+    const onchange = vi.fn();
+
+    const { container } = render(BooleanField, {
+      props: {
+        name: 'isActive',
+        schema: { type: 'boolean' },
+        value: true,
+        onchange,
+      },
+    });
+
+    const checkbox = container.querySelector('input[type="checkbox"]')!;
+    await fireEvent.change(checkbox, { target: { checked: false } });
+
+    expect(onchange).toHaveBeenCalledWith(false);
+  });
+
+  it('renders a description when schema.description is set', () => {
+    const { container } = render(BooleanField, {
+      props: {
+        name: 'isActive',
+        schema: { type: 'boolean', description: 'Enables the feature' },
+        value: false,
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(within(container).getByText('Enables the feature')).toBeTruthy();
+  });
+
+  /*
+  //////////////////////////////
+  // Deprecated / read-only
+  //////////////////////////////
+  */
+
+  it('applies the deprecated class when schema.deprecated is true', () => {
+    const { container } = render(BooleanField, {
+      props: {
+        name: 'isActive',
+        schema: { type: 'boolean', deprecated: true },
+        value: false,
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(container.querySelector('.field--deprecated')).not.toBeNull();
+  });
+
+  it('disables the checkbox when schema.readOnly is true', () => {
+    const { container } = render(BooleanField, {
+      props: {
+        name: 'isActive',
+        schema: { type: 'boolean', readOnly: true },
+        value: false,
+        onchange: vi.fn(),
+      },
+    });
+
+    const checkbox = container.querySelector(
+      'input[type="checkbox"]',
+    ) as HTMLInputElement;
+    expect(checkbox.disabled).toBe(true);
+  });
+});

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

@@ -0,0 +1,210 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, cleanup, within, fireEvent } from '@testing-library/svelte';
+import DateField from '../../../../src/client/components/fields/DateField.svelte';
+
+/**
+ * Tests for the DateField component.
+ * Covers label derivation, YYYY-MM-DD value coercion from ISO strings and Date objects,
+ * onChange behavior, and nullable handling.
+ */
+
+// Prevent accumulated renders from bleeding between tests
+afterEach(() => cleanup());
+
+describe('DateField', () => {
+  /*
+  //////////////////////////////
+  // Label rendering
+  //////////////////////////////
+  */
+
+  it('renders a label derived from the name', () => {
+    const { container } = render(DateField, {
+      props: {
+        name: 'publishedAt',
+        schema: { type: 'string', format: 'date-time' },
+        value: '',
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(within(container).getByText('Published At')).toBeTruthy();
+  });
+
+  it('renders the schema title as label when provided', () => {
+    const { container } = render(DateField, {
+      props: {
+        name: 'publishedAt',
+        schema: { type: 'string', format: 'date-time', title: 'Publish Date' },
+        value: '',
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(within(container).getByLabelText('Publish Date')).toBeTruthy();
+  });
+
+  it('shows a required marker when required is true', () => {
+    const { container } = render(DateField, {
+      props: {
+        name: 'publishedAt',
+        schema: { type: 'string', format: 'date-time' },
+        value: '',
+        required: true,
+        onchange: vi.fn(),
+      },
+    });
+
+    expect(container.querySelector('.field-required')).not.toBeNull();
+  });
+
+  /*
+  //////////////////////////////
+  // Input value coercion
+  //////////////////////////////
+  */
+
+  it('renders an empty input when value is empty string', () => {
+    const { container } = render(DateField, {
+      props: {
+        name: 'publishedAt',
+        schema: { type: 'string', format: 'date-time' },
+        value: '',
+        onchange: vi.fn(),
+      },
+    });
+
+    const input = container.querySelector(
+      'input[type="date"]',
+    ) as HTMLInputElement;
+    expect(input).not.toBeNull();
+    expect(input.value).toBe('');
+  });
+
+  it('slices YYYY-MM-DD from an ISO string value', () => {
+    const { container } = render(DateField, {
+      props: {
+        name: 'publishedAt',
+        schema: { type: 'string', format: 'date-time' },
+        value: '2024-03-15T12:00:00Z',
+        onchange: vi.fn(),
+      },
+    });
+
+    // Svelte 5 sets value as a DOM property, not an HTML attribute
+    const input = container.querySelector(
+      'input[type="date"]',
+    ) as HTMLInputElement;
+    expect(input.value).toBe('2024-03-15');
+  });
+
+  it('converts a Date object to YYYY-MM-DD using UTC components', () => {
+    // Use a Date at midnight UTC to verify no timezone shift occurs
+    const date = new Date('2024-06-01T00:00:00Z');
+    const { container } = render(DateField, {
+      props: {
+        name: 'publishedAt',
+        schema: { type: 'string', format: 'date-time' },
+        value: date,
+        onchange: vi.fn(),
+      },
+    });
+
+    const input = container.querySelector(
+      'input[type="date"]',
+    ) as HTMLInputElement;
+    expect(input.value).toBe('2024-06-01');
+  });
+
+  /*
+  //////////////////////////////
+  // onChange behavior
+  //////////////////////////////
+  */
+
+  it('calls onchange with the raw date string on input', async () => {
+    const onchange = vi.fn();
+    const { container } = render(DateField, {
+      props: {
+        name: 'publishedAt',
+        schema: { type: 'string', format: 'date-time' },
+        value: '',
+        onchange,
+      },
+    });
+
+    const input = container.querySelector('input[type="date"]')!;
+    await fireEvent.input(input, { target: { value: '2024-09-20' } });
+
+    expect(onchange).toHaveBeenCalledWith('2024-09-20');
+  });
+
+  it('calls onchange with null for empty input on nullable fields', async () => {
+    const onchange = vi.fn();
+    const { container } = render(DateField, {
+      props: {
+        name: 'publishedAt',
+        schema: { type: 'string', format: 'date-time', _nullable: true },
+        value: '2024-01-01',
+        onchange,
+      },
+    });
+
+    const input = container.querySelector('input[type="date"]')!;
+    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(DateField, {
+      props: {
+        name: 'publishedAt',
+        schema: { type: 'string', format: 'date-time' },
+        value: '2024-01-01',
+        onchange,
+      },
+    });
+
+    const input = container.querySelector('input[type="date"]')!;
+    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(DateField, {
+      props: {
+        name: 'publishedAt',
+        schema: { type: 'string', format: 'date-time', 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(DateField, {
+      props: {
+        name: 'publishedAt',
+        schema: { type: 'string', format: 'date-time', readOnly: true },
+        value: '',
+        onchange: vi.fn(),
+      },
+    });
+
+    const input = container.querySelector(
+      'input[type="date"]',
+    ) as HTMLInputElement;
+    expect(input.readOnly).toBe(true);
+  });
+});