Merge pull request #2 from devitools/test/react-unit-tests

test: add @ybyra/react unit tests, fix playground tests, and fix docs MIME error

Author: wilcorrea

docs/.vitepress/config.ts

@@ -33,10 +33,10 @@ export default defineConfig({
       {
         text: 'Demos',
         items: [
-          { text: 'React Web', link: '/demo/react-web/', target: '_blank' },
-          { text: 'React Native', link: '/demo/react-native/', target: '_blank' },
-          { text: 'Vue + Quasar', link: '/demo/vue-quasar/', target: '_blank' },
-          { text: 'SvelteKit', link: '/demo/sveltekit/', target: '_blank' },
+          { text: 'React Web', link: 'https://devitools.github.io/ybyra/demo/react-web/', target: '_blank' },
+          { text: 'React Native', link: 'https://devitools.github.io/ybyra/demo/react-native/', target: '_blank' },
+          { text: 'Vue + Quasar', link: 'https://devitools.github.io/ybyra/demo/vue-quasar/', target: '_blank' },
+          { text: 'SvelteKit', link: 'https://devitools.github.io/ybyra/demo/sveltekit/', target: '_blank' },
         ],
       },
     ],

packages/react-native/testing/setup.ts

@@ -32,3 +32,14 @@ vi.mock('@ybyra/persistence', () => ({
     search: vi.fn(),
   })),
 }))
+
+vi.mock('@ybyra/persistence/web', () => ({
+  createWebDriver: vi.fn(() => ({
+    initialize: vi.fn(),
+    create: vi.fn(),
+    read: vi.fn(),
+    update: vi.fn(),
+    destroy: vi.fn(),
+    search: vi.fn(),
+  })),
+}))

packages/react/src/icons.test.ts

@@ -0,0 +1,100 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { configureIcons, resolveActionIcon, resolveGroupIcon } from './icons'
+
+beforeEach(() => {
+  // Reset global icon map before each test to avoid state bleed
+  configureIcons({})
+})
+
+describe('configureIcons', () => {
+  it('sets the icon map', () => {
+    configureIcons({
+      person: {
+        actions: { save: 'save-icon' },
+      },
+    })
+    expect(resolveActionIcon('person', 'save')).toBe('save-icon')
+  })
+
+  it('replaces the entire map on subsequent calls', () => {
+    configureIcons({ person: { actions: { save: 'old-icon' } } })
+    configureIcons({ order: { actions: { submit: 'new-icon' } } })
+    expect(resolveActionIcon('person', 'save')).toBeUndefined()
+    expect(resolveActionIcon('order', 'submit')).toBe('new-icon')
+  })
+})
+
+describe('resolveActionIcon', () => {
+  it('returns domain-specific action icon', () => {
+    configureIcons({
+      person: {
+        actions: { save: 'person-save-icon' },
+      },
+      common: {
+        actions: { save: 'common-save-icon' },
+      },
+    })
+    expect(resolveActionIcon('person', 'save')).toBe('person-save-icon')
+  })
+
+  it('falls back to common action icon', () => {
+    configureIcons({
+      common: {
+        actions: { save: 'common-save-icon' },
+      },
+    })
+    expect(resolveActionIcon('person', 'save')).toBe('common-save-icon')
+  })
+
+  it('returns undefined when no icon exists', () => {
+    configureIcons({})
+    expect(resolveActionIcon('person', 'save')).toBeUndefined()
+  })
+})
+
+describe('resolveGroupIcon', () => {
+  it('returns domain-specific group icon', () => {
+    configureIcons({
+      person: {
+        groups: { personal: 'personal-icon' },
+      },
+      common: {
+        groups: { personal: 'common-personal-icon' },
+      },
+    })
+    expect(resolveGroupIcon('person', 'personal')).toBe('personal-icon')
+  })
+
+  it('falls back to common group icon', () => {
+    configureIcons({
+      common: {
+        groups: { personal: 'common-personal-icon' },
+      },
+    })
+    expect(resolveGroupIcon('person', 'personal')).toBe('common-personal-icon')
+  })
+
+  it('returns undefined when no icon exists', () => {
+    configureIcons({})
+    expect(resolveGroupIcon('person', 'personal')).toBeUndefined()
+  })
+})
+
+describe('icon resolution with multiple domains', () => {
+  it('resolves icons from the correct domain', () => {
+    configureIcons({
+      person: {
+        actions: { save: 'person-save' },
+        groups: { info: 'person-info' },
+      },
+      order: {
+        actions: { save: 'order-save' },
+        groups: { info: 'order-info' },
+      },
+    })
+    expect(resolveActionIcon('person', 'save')).toBe('person-save')
+    expect(resolveActionIcon('order', 'save')).toBe('order-save')
+    expect(resolveGroupIcon('person', 'info')).toBe('person-info')
+    expect(resolveGroupIcon('order', 'info')).toBe('order-info')
+  })
+})

packages/react/src/proxy.test.ts

@@ -0,0 +1,181 @@
+import { describe, it, expect } from 'vitest'
+import { createStateProxy, createSchemaProxy } from './proxy'
+import type { FieldConfig } from '@ybyra/core'
+
+function makeFieldConfig(overrides: Partial<FieldConfig> = {}): FieldConfig {
+  return {
+    component: 'text',
+    dataType: 'string',
+    attrs: {},
+    form: { width: 100, height: 1, hidden: false, disabled: false, order: 0 },
+    table: { show: false, width: 'auto', sortable: false, filterable: false, order: 0 },
+    validations: [],
+    scopes: null,
+    states: [],
+    defaultValue: undefined,
+    ...overrides,
+  }
+}
+
+describe('createStateProxy', () => {
+  it('reads existing values from snapshot', () => {
+    const snapshot = { name: 'Alice', age: 30 }
+    const { proxy } = createStateProxy(snapshot)
+    expect(proxy.name).toBe('Alice')
+    expect(proxy.age).toBe(30)
+  })
+
+  it('tracks mutations via set', () => {
+    const { proxy, getChanges } = createStateProxy({ name: 'Alice' })
+    proxy.name = 'Bob'
+    expect(proxy.name).toBe('Bob')
+    expect(getChanges()).toEqual({ name: 'Bob' })
+  })
+
+  it('getChanges returns only modified fields', () => {
+    const { proxy, getChanges } = createStateProxy({ name: 'Alice', age: 30 })
+    proxy.name = 'Bob'
+    const changes = getChanges()
+    expect(changes).toEqual({ name: 'Bob' })
+    expect(changes).not.toHaveProperty('age')
+  })
+
+  it('getChanges returns empty object when nothing changed', () => {
+    const { getChanges } = createStateProxy({ name: 'Alice' })
+    expect(getChanges()).toEqual({})
+  })
+
+  it('does not mutate the original snapshot object', () => {
+    const snapshot = { name: 'Alice', age: 30 }
+    const { proxy } = createStateProxy(snapshot)
+    proxy.name = 'Bob'
+    proxy.age = 99
+    expect(snapshot.name).toBe('Alice')
+    expect(snapshot.age).toBe(30)
+  })
+
+  it('multiple sets to same key keeps latest value', () => {
+    const { proxy, getChanges } = createStateProxy({ name: 'Alice' })
+    proxy.name = 'Bob'
+    proxy.name = 'Charlie'
+    expect(proxy.name).toBe('Charlie')
+    expect(getChanges()).toEqual({ name: 'Charlie' })
+  })
+
+  it('handles setting value to undefined', () => {
+    const { proxy, getChanges } = createStateProxy({ name: 'Alice' })
+    proxy.name = undefined
+    expect(proxy.name).toBeUndefined()
+    expect(getChanges()).toEqual({ name: undefined })
+  })
+
+  it('handles setting value to null', () => {
+    const { proxy, getChanges } = createStateProxy({ name: 'Alice' })
+    proxy.name = null
+    expect(proxy.name).toBeNull()
+    expect(getChanges()).toEqual({ name: null })
+  })
+})
+
+// Known issue: structuredClone does not reliably clone RegExp objects inside
+// ValidationRule params. If createSchemaProxy is used with structuredClone
+// upstream (e.g., via toConfig()), RegExp-based pattern validations may throw.
+// This is an upstream concern in @ybyra/core, not a proxy behavior issue — see
+// TextFieldDefinition.pattern() which stores a raw RegExp in validation params.
+
+describe('createSchemaProxy', () => {
+  it('provides field proxies with defaults from config', () => {
+    const fields = {
+      name: makeFieldConfig({
+        form: { width: 50, height: 2, hidden: false, disabled: false, order: 0 },
+      }),
+    }
+    const { proxy } = createSchemaProxy(fields, {})
+    expect(proxy.name.width).toBe(50)
+    expect(proxy.name.height).toBe(2)
+    expect(proxy.name.hidden).toBe(false)
+    expect(proxy.name.disabled).toBe(false)
+    expect(proxy.name.state).toBe('')
+  })
+
+  it('merges currentOverrides into field defaults', () => {
+    const fields = {
+      name: makeFieldConfig({
+        form: { width: 50, height: 2, hidden: false, disabled: false, order: 0 },
+      }),
+    }
+    const overrides = { name: { hidden: true, width: 75 } }
+    const { proxy } = createSchemaProxy(fields, overrides)
+    expect(proxy.name.hidden).toBe(true)
+    expect(proxy.name.width).toBe(75)
+    // Non-overridden properties keep config defaults
+    expect(proxy.name.height).toBe(2)
+    expect(proxy.name.disabled).toBe(false)
+  })
+
+  it('tracks field property mutations', () => {
+    const fields = { name: makeFieldConfig() }
+    const { proxy, getOverrides } = createSchemaProxy(fields, {})
+    proxy.name.hidden = true
+    expect(getOverrides()).toEqual({ name: { hidden: true } })
+  })
+
+  it('getOverrides returns only modified fields', () => {
+    const fields = {
+      name: makeFieldConfig(),
+      age: makeFieldConfig(),
+    }
+    const { proxy, getOverrides } = createSchemaProxy(fields, {})
+    proxy.name.hidden = true
+    const overrides = getOverrides()
+    expect(overrides).toHaveProperty('name')
+    expect(overrides).not.toHaveProperty('age')
+  })
+
+  it('getOverrides returns empty object when nothing changed', () => {
+    const fields = { name: makeFieldConfig() }
+    const { getOverrides } = createSchemaProxy(fields, {})
+    expect(getOverrides()).toEqual({})
+  })
+
+  it('setting hidden on a field appears in overrides', () => {
+    const fields = { name: makeFieldConfig() }
+    const { proxy, getOverrides } = createSchemaProxy(fields, {})
+    proxy.name.hidden = true
+    expect(getOverrides().name?.hidden).toBe(true)
+  })
+
+  it('setting width on a field appears in overrides', () => {
+    const fields = { name: makeFieldConfig() }
+    const { proxy, getOverrides } = createSchemaProxy(fields, {})
+    proxy.name.width = 200
+    expect(getOverrides().name?.width).toBe(200)
+  })
+
+  it('setting disabled on a field appears in overrides', () => {
+    const fields = { name: makeFieldConfig() }
+    const { proxy, getOverrides } = createSchemaProxy(fields, {})
+    proxy.name.disabled = true
+    expect(getOverrides().name?.disabled).toBe(true)
+  })
+
+  it('setting state on a field appears in overrides', () => {
+    const fields = { name: makeFieldConfig() }
+    const { proxy, getOverrides } = createSchemaProxy(fields, {})
+    proxy.name.state = 'editing'
+    expect(getOverrides().name?.state).toBe('editing')
+  })
+
+  it('multiple fields can be overridden independently', () => {
+    const fields = {
+      name: makeFieldConfig(),
+      age: makeFieldConfig(),
+    }
+    const { proxy, getOverrides } = createSchemaProxy(fields, {})
+    proxy.name.hidden = true
+    proxy.age.disabled = true
+    const overrides = getOverrides()
+    expect(overrides.name).toEqual({ hidden: true })
+    expect(overrides.age).toEqual({ disabled: true })
+  })
+})

packages/react/src/registry.test.ts

@@ -0,0 +1,76 @@
+import { describe, it, expect } from 'vitest'
+import { registerRenderers, getRenderer, createRegistry } from './registry'
+import type { FieldRenderer } from './types'
+
+// Simple mock renderers — FieldRenderer is React.ComponentType<FieldRendererProps>,
+// so we cast arrow functions returning null.
+const FakeTextRenderer = (() => null) as unknown as FieldRenderer
+const FakeNumberRenderer = (() => null) as unknown as FieldRenderer
+const FakeSelectRenderer = (() => null) as unknown as FieldRenderer
+
+describe('global registry', () => {
+  describe('registerRenderers', () => {
+    it('registers renderer by component name', () => {
+      // Using unique names to avoid polluting other tests (global mutable state,
+      // no unregister API available)
+      registerRenderers({ 'test-text-global': FakeTextRenderer })
+      expect(getRenderer('test-text-global')).toBe(FakeTextRenderer)
+    })
+  })
+
+  describe('getRenderer', () => {
+    it('returns registered renderer', () => {
+      registerRenderers({ 'test-number-global': FakeNumberRenderer })
+      expect(getRenderer('test-number-global')).toBe(FakeNumberRenderer)
+    })
+
+    it('returns undefined for unregistered component', () => {
+      expect(getRenderer('nonexistent-component')).toBeUndefined()
+    })
+
+    it('overwrites existing renderer when re-registered', () => {
+      registerRenderers({ 'test-overwrite': FakeTextRenderer })
+      registerRenderers({ 'test-overwrite': FakeNumberRenderer })
+      expect(getRenderer('test-overwrite')).toBe(FakeNumberRenderer)
+    })
+  })
+})
+
+describe('createRegistry', () => {
+  it('creates an independent registry', () => {
+    const registry = createRegistry()
+    expect(registry).toHaveProperty('register')
+    expect(registry).toHaveProperty('get')
+  })
+
+  it('register adds renderers to scoped registry', () => {
+    const registry = createRegistry()
+    registry.register({ 'scoped-text': FakeTextRenderer })
+    expect(registry.get('scoped-text')).toBe(FakeTextRenderer)
+  })
+
+  it('get returns registered renderer from scoped registry', () => {
+    const registry = createRegistry()
+    registry.register({ 'scoped-number': FakeNumberRenderer })
+    expect(registry.get('scoped-number')).toBe(FakeNumberRenderer)
+  })
+
+  it('get returns undefined for unregistered component', () => {
+    const registry = createRegistry()
+    expect(registry.get('nonexistent')).toBeUndefined()
+  })
+
+  it('scoped registry is independent from global registry', () => {
+    // Register in global
+    registerRenderers({ 'global-only-renderer': FakeSelectRenderer })
+
+    // Create scoped — should not see global renderers
+    const registry = createRegistry()
+    expect(registry.get('global-only-renderer')).toBeUndefined()
+
+    // Register in scoped — should not appear in global
+    registry.register({ 'scoped-only-renderer': FakeTextRenderer })
+    expect(getRenderer('scoped-only-renderer')).toBeUndefined()
+    expect(registry.get('scoped-only-renderer')).toBe(FakeTextRenderer)
+  })
+})