nebula-cms 0.1.3 → 0.1.4

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

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

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

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