@dynamic-field-kit/angular 1.3.3 → 1.4.0

package/test/FieldInput.spec.ts

@@ -1,44 +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', () => {
-  it('should create FieldInput', () => {
-    expect(true).toBe(true);
+  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('should accept fieldDescription prop', () => {
-    const fieldDesc: any = {
-      name: 'username',
+  it('renders the field described by fieldDescription', () => {
+    const fixture = TestBed.createComponent(FieldInput);
+    fixture.componentRef.setInput('fieldDescription', {
+      name: 'first',
       type: 'text',
-      label: 'Username',
-      placeholder: 'Enter name',
-    };
-    expect(fieldDesc.name).toBe('username');
-    expect(fieldDesc.type).toBe('text');
-    expect(fieldDesc.label).toBe('Username');
+      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('should pass options from fieldDescription', () => {
-    const fieldDesc: any = {
-      name: 'country',
+  it('emits onValueChangeField with the field name as key', () => {
+    const fixture = TestBed.createComponent(FieldInput);
+    fixture.componentRef.setInput('fieldDescription', {
+      name: 'first',
       type: 'text',
-      options: [{ label: 'USA' }, { label: 'VN' }],
-    };
-    expect(fieldDesc.options?.length).toBe(2);
+    });
+    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('should pass className from fieldDescription', () => {
-    const fieldDesc: any = {
-      name: 'test',
+  it('forwards error, disabled and readOnly to the renderer', () => {
+    const fixture = TestBed.createComponent(FieldInput);
+    fixture.componentRef.setInput('fieldDescription', {
+      name: 'email',
       type: 'text',
-      className: 'my-custom-class',
-    };
-    expect(fieldDesc.className).toBe('my-custom-class');
+    });
+    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('should pass description from fieldDescription', () => {
-    const fieldDesc: any = {
-      name: 'test',
+  it('forwards FieldDescription.props as extraProps', () => {
+    const fixture = TestBed.createComponent(FieldInput);
+    fixture.componentRef.setInput('fieldDescription', {
+      name: 'first',
       type: 'text',
-      description: 'This is a help text',
-    };
-    expect(fieldDesc.description).toBe('This is a help 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)');
+  });
+});

package/test/helpers/renderers.ts

@@ -0,0 +1,89 @@
+import { NgIf } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FieldRegistry } from '@dynamic-field-kit/core';
+
+// The field types the specs register. Without this augmentation `keyof
+// FieldTypeMap` is `never`, so `registry.register('text', …)` fails to compile
+// once vitest type-checking is enabled. Every spec imports this helper, so the
+// augmentation applies across the whole test compilation.
+declare module '@dynamic-field-kit/core' {
+  interface FieldTypeMap {
+    text: string;
+    number: number;
+    defaults: string;
+  }
+}
+
+@Component({
+  selector: 'dfk-test-text',
+  standalone: true,
+  imports: [NgIf],
+  template: `
+    <input
+      class="txt"
+      [value]="value ?? ''"
+      [disabled]="!!disabled"
+      [readOnly]="!!readOnly"
+      [placeholder]="placeholder ?? ''"
+      (input)="valueChange.emit($any($event.target).value)"
+    />
+    <span class="err" *ngIf="error">{{ errorText }}</span>
+    <span class="hint" *ngIf="hint">{{ hint }}</span>
+  `,
+})
+export class TextRendererComponent {
+  @Input() value?: unknown;
+  @Input() label?: string;
+  @Input() placeholder?: string;
+  @Input() required?: boolean;
+  @Input() disabled?: boolean;
+  @Input() readOnly?: boolean;
+  @Input() error?: string | string[];
+  @Input() options?: unknown[];
+  @Input() className?: string;
+  @Input() description?: string;
+  // Not a FieldRendererProps key: proves extraProps reach the instance.
+  @Input() hint?: string;
+
+  @Output() valueChange = new EventEmitter<unknown>();
+
+  get errorText(): string {
+    return ([] as string[]).concat(this.error ?? []).join(', ');
+  }
+}
+
+@Component({
+  selector: 'dfk-test-legacy',
+  standalone: true,
+  template: `<button class="legacy-btn" (click)="onValueChange.emit('legacy')">
+    go
+  </button>`,
+})
+export class LegacyOutputRendererComponent {
+  @Input() value?: unknown;
+  // Deliberately the legacy output name, to cover DynamicInput.bindOutputs.
+  @Output() onValueChange = new EventEmitter<unknown>();
+}
+
+@Component({
+  selector: 'dfk-test-defaults',
+  standalone: true,
+  template: `<span class="label">{{ label }}</span>`,
+})
+export class DefaultsRendererComponent {
+  // Initialized input: proves DynamicInput does not overwrite a renderer's
+  // own default with undefined for a prop it was never given.
+  @Input() label = 'None';
+  @Input() value?: unknown;
+  @Output() valueChange = new EventEmitter<unknown>();
+}
+
+export function fallbackRenderer(props: Record<string, unknown>): string {
+  return `<span class="fallback">${String(props['label'] ?? '')}:${String(
+    props['value'] ?? ''
+  )}</span>`;
+}
+
+export function makeRegistry(): FieldRegistry {
+  return new FieldRegistry();
+}

package/test/layout.spec.ts

@@ -0,0 +1,119 @@
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  ColumnLayout,
+  GridLayout,
+  RowLayout,
+} from '../src/layout/defaultLayouts';
+import { LayoutRegistry, layoutRegistry } from '../src/layout/layoutRegistry';
+
+@Component({
+  standalone: true,
+  imports: [ColumnLayout, RowLayout, GridLayout],
+  template: `
+    <ng-template #tpl><span class="child">x</span></ng-template>
+    <dfk-column-layout
+      [template]="tpl"
+      [config]="{ gap: 20 }"
+    ></dfk-column-layout>
+    <dfk-row-layout [template]="tpl"></dfk-row-layout>
+    <dfk-grid-layout
+      [template]="tpl"
+      [config]="{ columns: 3 }"
+    ></dfk-grid-layout>
+  `,
+})
+class LayoutHost {
+  @ViewChild('tpl', { static: true }) tpl!: TemplateRef<unknown>;
+}
+
+@Component({
+  standalone: true,
+  imports: [GridLayout],
+  template: `
+    <ng-template #tpl><span class="child">x</span></ng-template>
+    <dfk-grid-layout [template]="tpl"></dfk-grid-layout>
+  `,
+})
+class GridDefaultsHost {
+  @ViewChild('tpl', { static: true }) tpl!: TemplateRef<unknown>;
+}
+
+describe('LayoutRegistry', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('registers and retrieves a layout', () => {
+    const registry = new LayoutRegistry();
+    registry.register('custom', ColumnLayout);
+
+    expect(registry.get('custom')).toBe(ColumnLayout);
+  });
+
+  it('returns undefined for an unknown layout', () => {
+    expect(new LayoutRegistry().get('nope')).toBeUndefined();
+  });
+
+  it('warns when a layout type is registered twice', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+    const registry = new LayoutRegistry();
+    registry.register('custom', ColumnLayout);
+    registry.register('custom', RowLayout);
+
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(registry.get('custom')).toBe(RowLayout);
+  });
+
+  it('exports a shared registry instance', () => {
+    expect(layoutRegistry).toBeInstanceOf(LayoutRegistry);
+  });
+});
+
+describe('default layouts', () => {
+  it('renders the projected template with the configured gap', () => {
+    const fixture = TestBed.createComponent(LayoutHost);
+    fixture.detectChanges();
+
+    const column: HTMLElement = fixture.nativeElement.querySelector(
+      'dfk-column-layout > div'
+    );
+    expect(column.style.flexDirection).toBe('column');
+    expect(column.style.gap).toBe('20px');
+    expect(column.querySelector('.child')).not.toBeNull();
+  });
+
+  it('defaults the gap to 12px', () => {
+    const fixture = TestBed.createComponent(LayoutHost);
+    fixture.detectChanges();
+
+    const row: HTMLElement = fixture.nativeElement.querySelector(
+      'dfk-row-layout > div'
+    );
+    expect(row.style.flexDirection).toBe('row');
+    expect(row.style.gap).toBe('12px');
+  });
+
+  it('renders the grid layout with the configured column count', () => {
+    const fixture = TestBed.createComponent(LayoutHost);
+    fixture.detectChanges();
+
+    const grid: HTMLElement = fixture.nativeElement.querySelector(
+      'dfk-grid-layout > div'
+    );
+    expect(grid.style.display).toBe('grid');
+    expect(grid.style.gridTemplateColumns).toBe('repeat(3, 1fr)');
+    expect(grid.style.gap).toBe('12px');
+  });
+
+  it('defaults the grid columns to 2', () => {
+    const fixture = TestBed.createComponent(GridDefaultsHost);
+    fixture.detectChanges();
+
+    const grid: HTMLElement = fixture.nativeElement.querySelector(
+      'dfk-grid-layout > div'
+    );
+    expect(grid.style.gridTemplateColumns).toBe('repeat(2, 1fr)');
+  });
+});