@dynamic-field-kit/angular 1.4.0 → 1.5.0

package/test/DynamicInput.spec.ts

@@ -1,230 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DynamicInput } from '../src/components/DynamicInput';
-import { FIELD_REGISTRY } from '../src/fieldRegistryToken';
-import { beforeEach, describe, expect, it } from 'vitest';
-import {
-  DefaultsRendererComponent,
-  makeRegistry,
-  TextRendererComponent,
-  LegacyOutputRendererComponent,
-  fallbackRenderer,
-} from './helpers/renderers';
-
-describe('DynamicInput', () => {
-  let registry: ReturnType<typeof makeRegistry>;
-
-  beforeEach(() => {
-    registry = makeRegistry();
-    TestBed.configureTestingModule({
-      imports: [DynamicInput],
-      providers: [{ provide: FIELD_REGISTRY, useValue: registry }],
-    });
-  });
-
-  it('renders a registered Angular component class', () => {
-    registry.register('text', TextRendererComponent as never);
-
-    const fixture = TestBed.createComponent(DynamicInput);
-    fixture.componentRef.setInput('type', 'text');
-    fixture.componentRef.setInput('value', 'hello');
-    fixture.detectChanges();
-
-    const input: HTMLInputElement =
-      fixture.nativeElement.querySelector('input.txt');
-    expect(input).not.toBeNull();
-    expect(input.value).toBe('hello');
-  });
-
-  it('does not clobber a renderer input default when DynamicInput was never given that prop', () => {
-    registry.register('defaults', DefaultsRendererComponent as never);
-
-    const fixture = TestBed.createComponent(DynamicInput);
-    fixture.componentRef.setInput('type', 'defaults');
-    // Deliberately never setInput('label', ...): DynamicInput was never
-    // given a value for `label`, so the renderer's own initializer
-    // (`label = 'None'`) must survive applyProps untouched.
-    fixture.detectChanges();
-
-    const label: HTMLElement = fixture.nativeElement.querySelector('.label');
-    expect(label.textContent).toBe('None');
-  });
-
-  it('forwards KNOWN_PROPS to the rendered instance', () => {
-    registry.register('text', TextRendererComponent as never);
-
-    const fixture = TestBed.createComponent(DynamicInput);
-    fixture.componentRef.setInput('type', 'text');
-    fixture.componentRef.setInput('placeholder', 'Your name');
-    fixture.componentRef.setInput('disabled', true);
-    fixture.detectChanges();
-
-    const input: HTMLInputElement =
-      fixture.nativeElement.querySelector('input.txt');
-    expect(input.placeholder).toBe('Your name');
-    expect(input.disabled).toBe(true);
-  });
-
-  it('forwards extraProps verbatim', () => {
-    registry.register('text', TextRendererComponent as never);
-
-    const fixture = TestBed.createComponent(DynamicInput);
-    fixture.componentRef.setInput('type', 'text');
-    fixture.componentRef.setInput('extraProps', { hint: 'be brief' });
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.querySelector('.hint').textContent).toBe(
-      'be brief'
-    );
-  });
-
-  it('syncs prop changes to an already-rendered instance', () => {
-    registry.register('text', TextRendererComponent as never);
-
-    const fixture = TestBed.createComponent(DynamicInput);
-    fixture.componentRef.setInput('type', 'text');
-    fixture.componentRef.setInput('value', 'first');
-    fixture.detectChanges();
-
-    fixture.componentRef.setInput('value', 'second');
-    fixture.detectChanges();
-
-    const input: HTMLInputElement =
-      fixture.nativeElement.querySelector('input.txt');
-    expect(input.value).toBe('second');
-  });
-
-  it('emits valueChange and onChange when the renderer emits valueChange', () => {
-    registry.register('text', TextRendererComponent as never);
-
-    const fixture = TestBed.createComponent(DynamicInput);
-    fixture.componentRef.setInput('type', 'text');
-    fixture.detectChanges();
-
-    const seen: unknown[] = [];
-    const legacy: unknown[] = [];
-    fixture.componentInstance.valueChange.subscribe((v) => seen.push(v));
-    fixture.componentInstance.onChange.subscribe((v) => legacy.push(v));
-
-    const input: HTMLInputElement =
-      fixture.nativeElement.querySelector('input.txt');
-    input.value = 'typed';
-    input.dispatchEvent(new Event('input'));
-
-    expect(seen).toEqual(['typed']);
-    expect(legacy).toEqual(['typed']);
-  });
-
-  it('binds the legacy onValueChange output name', () => {
-    registry.register('text', LegacyOutputRendererComponent as never);
-
-    const fixture = TestBed.createComponent(DynamicInput);
-    fixture.componentRef.setInput('type', 'text');
-    fixture.detectChanges();
-
-    const seen: unknown[] = [];
-    fixture.componentInstance.valueChange.subscribe((v) => seen.push(v));
-
-    fixture.nativeElement.querySelector('button.legacy-btn').click();
-
-    expect(seen).toEqual(['legacy']);
-  });
-
-  it('renders a plain function renderer as fallback HTML', () => {
-    registry.register('text', fallbackRenderer as never);
-
-    const fixture = TestBed.createComponent(DynamicInput);
-    fixture.componentRef.setInput('type', 'text');
-    fixture.componentRef.setInput('label', 'Name');
-    fixture.componentRef.setInput('value', 'Ada');
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.querySelector('.fallback').textContent).toBe(
-      'Name:Ada'
-    );
-  });
-
-  it('rejects a subclass without its own @Component decorator instead of inheriting the parent renderer', () => {
-    // Sub has no own `ɵcmp`: it only inherits TextRendererComponent's via
-    // the prototype chain. isComponentType must use hasOwnProperty (not
-    // `in`) so Sub is not mistaken for a renderable component in its own
-    // right - the DOM must not show TextRendererComponent's template.
-    class Sub extends TextRendererComponent {}
-    registry.register('text', Sub as never);
-
-    const fixture = TestBed.createComponent(DynamicInput);
-    fixture.componentRef.setInput('type', 'text');
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.querySelector('input.txt')).toBeNull();
-    expect(fixture.nativeElement.textContent).toContain(
-      'Failed to render field: text'
-    );
-  });
-
-  it('renders an error for an unknown field type', () => {
-    const fixture = TestBed.createComponent(DynamicInput);
-    fixture.componentRef.setInput('type', 'nope');
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.textContent).toContain(
-      'Unknown field type: nope'
-    );
-  });
-
-  it('re-renders when type changes', () => {
-    registry.register('text', TextRendererComponent as never);
-    registry.register('number', fallbackRenderer as never);
-
-    const fixture = TestBed.createComponent(DynamicInput);
-    fixture.componentRef.setInput('type', 'text');
-    fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector('input.txt')).not.toBeNull();
-
-    fixture.componentRef.setInput('type', 'number');
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.querySelector('input.txt')).toBeNull();
-    expect(fixture.nativeElement.querySelector('.fallback')).not.toBeNull();
-  });
-
-  it('unsubscribes from renderer outputs on destroy', () => {
-    registry.register('text', TextRendererComponent as never);
-
-    const fixture = TestBed.createComponent(DynamicInput);
-    fixture.componentRef.setInput('type', 'text');
-    fixture.detectChanges();
-
-    const rendererInstance = fixture.debugElement.query(
-      By.directive(TextRendererComponent)
-    ).componentInstance as TextRendererComponent;
-
-    const seen: unknown[] = [];
-    fixture.componentInstance.valueChange.subscribe((v) => seen.push(v));
-
-    fixture.destroy();
-    rendererInstance.valueChange.emit('after destroy'); // bypasses DOM entirely
-
-    expect(seen).toEqual([]);
-  });
-
-  it('unsubscribes from the legacy onValueChange output on destroy', () => {
-    registry.register('text', LegacyOutputRendererComponent as never);
-
-    const fixture = TestBed.createComponent(DynamicInput);
-    fixture.componentRef.setInput('type', 'text');
-    fixture.detectChanges();
-
-    const rendererInstance = fixture.debugElement.query(
-      By.directive(LegacyOutputRendererComponent)
-    ).componentInstance as LegacyOutputRendererComponent;
-
-    const seen: unknown[] = [];
-    fixture.componentInstance.valueChange.subscribe((v) => seen.push(v));
-
-    fixture.destroy();
-    rendererInstance.onValueChange.emit('after destroy');
-
-    expect(seen).toEqual([]);
-  });
-});

package/test/FieldInput.spec.ts

@@ -1,146 +0,0 @@
-import { ChangeDetectorRef } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { BaseInputComponent } from '../src/components/BaseInput';
-import { FieldInput } from '../src/components/FieldInput';
-import { FIELD_REGISTRY } from '../src/fieldRegistryToken';
-import {
-  DefaultsRendererComponent,
-  makeRegistry,
-  TextRendererComponent,
-} from './helpers/renderers';
-
-describe('FieldInput', () => {
-  let registry: ReturnType<typeof makeRegistry>;
-
-  beforeEach(() => {
-    registry = makeRegistry();
-    registry.register('text', TextRendererComponent as never);
-    TestBed.configureTestingModule({
-      imports: [FieldInput],
-      providers: [{ provide: FIELD_REGISTRY, useValue: registry }],
-    });
-  });
-
-  it('renders nothing once fieldDescription is cleared', () => {
-    // Mounting with no inputs at all passes on the `shouldRender = false`
-    // field initializer without ever exercising ngOnChanges's guard. Mount
-    // WITH a fieldDescription first, then clear it, so the assertion
-    // actually depends on `shouldRender = !!this.fieldDescription`.
-    const fixture = TestBed.createComponent(FieldInput);
-    fixture.componentRef.setInput('fieldDescription', {
-      name: 'first',
-      type: 'text',
-    });
-    fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector('input.txt')).not.toBeNull();
-
-    fixture.componentRef.setInput('fieldDescription', undefined);
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.querySelector('input.txt')).toBeNull();
-  });
-
-  it('renders the field described by fieldDescription', () => {
-    const fixture = TestBed.createComponent(FieldInput);
-    fixture.componentRef.setInput('fieldDescription', {
-      name: 'first',
-      type: 'text',
-      placeholder: 'First name',
-    });
-    fixture.componentRef.setInput('value', 'Ada');
-    fixture.detectChanges();
-
-    const input: HTMLInputElement =
-      fixture.nativeElement.querySelector('input.txt');
-    expect(input.value).toBe('Ada');
-    expect(input.placeholder).toBe('First name');
-  });
-
-  it('emits onValueChangeField with the field name as key', () => {
-    const fixture = TestBed.createComponent(FieldInput);
-    fixture.componentRef.setInput('fieldDescription', {
-      name: 'first',
-      type: 'text',
-    });
-    fixture.detectChanges();
-
-    const seen: unknown[] = [];
-    fixture.componentInstance.onValueChangeField.subscribe((e) => seen.push(e));
-
-    const input: HTMLInputElement =
-      fixture.nativeElement.querySelector('input.txt');
-    input.value = 'Grace';
-    input.dispatchEvent(new Event('input'));
-
-    expect(seen).toEqual([{ value: 'Grace', key: 'first' }]);
-  });
-
-  it('forwards error, disabled and readOnly to the renderer', () => {
-    const fixture = TestBed.createComponent(FieldInput);
-    fixture.componentRef.setInput('fieldDescription', {
-      name: 'email',
-      type: 'text',
-    });
-    fixture.componentRef.setInput('error', ['Required', 'Invalid']);
-    fixture.componentRef.setInput('disabled', true);
-    fixture.componentRef.setInput('readOnly', true);
-    fixture.detectChanges();
-
-    const input: HTMLInputElement =
-      fixture.nativeElement.querySelector('input.txt');
-    expect(input.disabled).toBe(true);
-    expect(input.readOnly).toBe(true);
-    expect(fixture.nativeElement.querySelector('.err').textContent).toBe(
-      'Required, Invalid'
-    );
-  });
-
-  it('forwards FieldDescription.props as extraProps', () => {
-    const fixture = TestBed.createComponent(FieldInput);
-    fixture.componentRef.setInput('fieldDescription', {
-      name: 'first',
-      type: 'text',
-      props: { hint: 'keep it short' },
-    });
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.querySelector('.hint').textContent).toBe(
-      'keep it short'
-    );
-  });
-
-  it('documents current behaviour: a renderer default IS overwritten on the real FieldInput path', () => {
-    // Unlike mounting DynamicInput directly, FieldInput's template binds
-    // every KNOWN_PROP unconditionally, so DynamicInput sees a firstChange
-    // SimpleChange for `label` even though fieldDescription never set one.
-    // The `supplied` gate in DynamicInput.applyProps therefore does NOT
-    // protect the renderer's own default here - this pins that fact rather
-    // than asserting a guarantee that doesn't hold on this path.
-    registry.register('defaults', DefaultsRendererComponent as never);
-
-    const fixture = TestBed.createComponent(FieldInput);
-    fixture.componentRef.setInput('fieldDescription', {
-      name: 'first',
-      type: 'defaults',
-      // label intentionally omitted.
-    });
-    fixture.detectChanges();
-
-    const label: HTMLElement = fixture.nativeElement.querySelector('.label');
-    expect(label.textContent).toBe('');
-  });
-});
-
-describe('BaseInputComponent', () => {
-  class TestInput extends BaseInputComponent {}
-
-  it('marks for check on input changes', () => {
-    const cdr = { markForCheck: vi.fn() } as unknown as ChangeDetectorRef;
-    const input = new TestInput(cdr);
-
-    input.ngOnChanges({});
-
-    expect(cdr.markForCheck).toHaveBeenCalledTimes(1);
-  });
-});

package/test/MultiFieldInput.spec.ts

@@ -1,256 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import type {
-  FieldDescription,
-  ValidationResult,
-} from '@dynamic-field-kit/core';
-import { beforeEach, describe, expect, it } from 'vitest';
-import { MultiFieldInput } from '../src/components/MultiFieldInput';
-import { FIELD_REGISTRY } from '../src/fieldRegistryToken';
-import { makeRegistry, TextRendererComponent } from './helpers/renderers';
-
-describe('MultiFieldInput', () => {
-  let registry: ReturnType<typeof makeRegistry>;
-
-  beforeEach(() => {
-    registry = makeRegistry();
-    registry.register('text', TextRendererComponent as never);
-    TestBed.configureTestingModule({
-      imports: [MultiFieldInput],
-      providers: [{ provide: FIELD_REGISTRY, useValue: registry }],
-    });
-  });
-
-  function mount(
-    fields: FieldDescription[],
-    properties: Record<string, unknown>
-  ) {
-    const fixture = TestBed.createComponent(MultiFieldInput);
-    fixture.componentRef.setInput('fieldDescriptions', fields);
-    fixture.componentRef.setInput('properties', properties);
-    fixture.detectChanges();
-    return fixture;
-  }
-
-  it('renders one input per field', () => {
-    const fixture = mount(
-      [
-        { name: 'first', type: 'text' },
-        { name: 'last', type: 'text' },
-      ],
-      { first: 'Ada', last: 'Lovelace' }
-    );
-
-    const inputs: HTMLInputElement[] = Array.from(
-      fixture.nativeElement.querySelectorAll('input.txt')
-    );
-    expect(inputs.map((i) => i.value)).toEqual(['Ada', 'Lovelace']);
-  });
-
-  it('hides fields whose appearCondition is false', () => {
-    const fields: FieldDescription[] = [
-      { name: 'kind', type: 'text' },
-      {
-        name: 'company',
-        type: 'text',
-        appearCondition: (data) => data['kind'] === 'business',
-      },
-    ];
-
-    expect(
-      mount(fields, { kind: 'personal' }).nativeElement.querySelectorAll(
-        'input.txt'
-      ).length
-    ).toBe(1);
-    expect(
-      mount(fields, { kind: 'business' }).nativeElement.querySelectorAll(
-        'input.txt'
-      ).length
-    ).toBe(2);
-  });
-
-  it('applies computeValue to the data it emits', () => {
-    const fields: FieldDescription[] = [
-      { name: 'price', type: 'text' },
-      {
-        name: 'total',
-        type: 'text',
-        computeValue: (data) => `${Number(data['price']) * 2}`,
-      },
-    ];
-
-    const fixture = mount(fields, { price: '5' });
-
-    const inputs: HTMLInputElement[] = Array.from(
-      fixture.nativeElement.querySelectorAll('input.txt')
-    );
-    expect(inputs[1].value).toBe('10');
-  });
-
-  it('emits onChange with the updated data when a field changes', () => {
-    const fixture = mount([{ name: 'first', type: 'text' }], { first: 'Ada' });
-
-    const seen: unknown[] = [];
-    fixture.componentInstance.onChange.subscribe((d) => seen.push(d));
-
-    const input: HTMLInputElement =
-      fixture.nativeElement.querySelector('input.txt');
-    input.value = 'Grace';
-    input.dispatchEvent(new Event('input'));
-
-    expect(seen).toEqual([{ first: 'Grace' }]);
-  });
-
-  it('passes validation errors down to the renderer', () => {
-    const fixture = mount(
-      [
-        {
-          name: 'email',
-          type: 'text',
-          validate: (value) =>
-            String(value).includes('@') ? undefined : 'Invalid email',
-        },
-      ],
-      { email: 'nope' }
-    );
-
-    expect(fixture.nativeElement.querySelector('.err').textContent).toBe(
-      'Invalid email'
-    );
-  });
-
-  it('resolves disabledCondition and readOnlyCondition', () => {
-    const fixture = mount(
-      [
-        {
-          name: 'a',
-          type: 'text',
-          disabledCondition: (data) => data['frozen'] === true,
-        },
-        {
-          name: 'b',
-          type: 'text',
-          readOnlyCondition: (data) => data['frozen'] === true,
-        },
-      ],
-      { frozen: true }
-    );
-
-    const inputs: HTMLInputElement[] = Array.from(
-      fixture.nativeElement.querySelectorAll('input.txt')
-    );
-    expect(inputs[0].disabled).toBe(true);
-    expect(inputs[1].readOnly).toBe(true);
-  });
-
-  it('does not report errors for disabled fields', () => {
-    const fixture = mount(
-      [
-        {
-          name: 'email',
-          type: 'text',
-          disabled: true,
-          validate: () => 'Invalid email',
-        },
-      ],
-      { email: 'nope' }
-    );
-
-    expect(fixture.nativeElement.querySelector('.err')).toBeNull();
-  });
-
-  it('emits validityChange on init and on every change', () => {
-    const seen: ValidationResult[] = [];
-    const fixture = TestBed.createComponent(MultiFieldInput);
-    fixture.componentInstance.validityChange.subscribe((r) => seen.push(r));
-    fixture.componentRef.setInput('fieldDescriptions', [
-      {
-        name: 'email',
-        type: 'text',
-        validate: (value: unknown) =>
-          String(value).includes('@') ? undefined : 'Invalid email',
-      },
-    ]);
-    fixture.componentRef.setInput('properties', { email: 'nope' });
-    fixture.detectChanges();
-
-    expect(seen[seen.length - 1]).toEqual({
-      valid: false,
-      errors: { email: ['Invalid email'] },
-    });
-
-    const input: HTMLInputElement =
-      fixture.nativeElement.querySelector('input.txt');
-    input.value = 'ada@example.com';
-    input.dispatchEvent(new Event('input'));
-
-    expect(seen[seen.length - 1]).toEqual({ valid: true, errors: {} });
-  });
-
-  it('renders a repeatable group item per entry and adds one on Add', () => {
-    const fields: FieldDescription[] = [
-      {
-        name: 'contacts',
-        type: 'text',
-        label: 'Contacts',
-        fields: [{ name: 'email', type: 'text' }],
-      },
-    ];
-
-    const fixture = mount(fields, {
-      contacts: [{ email: 'a@x.com' }, { email: 'b@x.com' }],
-    });
-
-    expect(fixture.nativeElement.querySelectorAll('input.txt').length).toBe(2);
-
-    const seen: unknown[] = [];
-    fixture.componentInstance.onChange.subscribe((d) => seen.push(d));
-
-    const addBtn: HTMLButtonElement = Array.from<HTMLButtonElement>(
-      fixture.nativeElement.querySelectorAll('button')
-    ).find((b) => b.textContent?.trim() === 'Add')!;
-    addBtn.click();
-    fixture.detectChanges();
-
-    expect((seen[0] as Record<string, unknown[]>)['contacts'].length).toBe(3);
-  });
-
-  it('removes a group item on Remove', () => {
-    const fields: FieldDescription[] = [
-      {
-        name: 'contacts',
-        type: 'text',
-        fields: [{ name: 'email', type: 'text' }],
-      },
-    ];
-
-    const fixture = mount(fields, {
-      contacts: [{ email: 'a@x.com' }, { email: 'b@x.com' }],
-    });
-
-    const seen: unknown[] = [];
-    fixture.componentInstance.onChange.subscribe((d) => seen.push(d));
-
-    const removeBtn: HTMLButtonElement = Array.from<HTMLButtonElement>(
-      fixture.nativeElement.querySelectorAll('button')
-    ).find((b) => b.textContent?.trim() === 'Remove')!;
-    removeBtn.click();
-    fixture.detectChanges();
-
-    expect((seen[0] as Record<string, unknown[]>)['contacts']).toEqual([
-      { email: 'b@x.com' },
-    ]);
-  });
-
-  it('applies the grid layout', () => {
-    const fixture = TestBed.createComponent(MultiFieldInput);
-    fixture.componentRef.setInput('fieldDescriptions', [
-      { name: 'a', type: 'text' },
-    ]);
-    fixture.componentRef.setInput('properties', { a: '1' });
-    fixture.componentRef.setInput('layout', { type: 'grid', columns: 3 });
-    fixture.detectChanges();
-
-    const container: HTMLElement = fixture.nativeElement.firstElementChild;
-    expect(container.style.gridTemplateColumns).toBe('repeat(3, 1fr)');
-  });
-});