@dynamic-field-kit/angular 1.2.10 → 1.4.0

package/test/DynamicInput.spec.ts

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

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

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