@dynamic-field-kit/angular 1.2.10 → 1.4.0

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)');
+  });
+});

package/test/publicApi.spec.ts

@@ -0,0 +1,64 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { FieldRegistry, fieldRegistry } from '@dynamic-field-kit/core';
+import { describe, expect, it } from 'vitest';
+import * as publicApi from '../src/public-api';
+import { FIELD_REGISTRY } from '../src/fieldRegistryToken';
+import { DynamicFieldKitModule } from '../src/lib/dynamic-field-kit.module';
+import { makeRegistry, TextRendererComponent } from './helpers/renderers';
+
+describe('public API', () => {
+  it('exports the components, registry and validation helpers', () => {
+    expect(publicApi.DynamicInput).toBeDefined();
+    expect(publicApi.FieldInput).toBeDefined();
+    expect(publicApi.MultiFieldInput).toBeDefined();
+    expect(publicApi.FIELD_REGISTRY).toBe(FIELD_REGISTRY);
+    expect(publicApi.FieldRegistry).toBe(FieldRegistry);
+    expect(typeof publicApi.validateField).toBe('function');
+    expect(typeof publicApi.validateFields).toBe('function');
+    expect(typeof publicApi.resolveDisabled).toBe('function');
+    expect(typeof publicApi.resolveReadOnly).toBe('function');
+  });
+});
+
+describe('FIELD_REGISTRY token', () => {
+  it('defaults to the process-wide singleton', () => {
+    TestBed.configureTestingModule({});
+
+    expect(TestBed.inject(FIELD_REGISTRY)).toBe(fieldRegistry);
+  });
+
+  it('can be overridden with a scoped registry', () => {
+    const scoped = makeRegistry();
+    TestBed.configureTestingModule({
+      providers: [{ provide: FIELD_REGISTRY, useValue: scoped }],
+    });
+
+    expect(TestBed.inject(FIELD_REGISTRY)).toBe(scoped);
+    expect(TestBed.inject(FIELD_REGISTRY)).not.toBe(fieldRegistry);
+  });
+});
+
+describe('DynamicFieldKitModule', () => {
+  @Component({
+    standalone: true,
+    imports: [DynamicFieldKitModule],
+    template: `<dfk-field-input
+      [fieldDescription]="{ name: 'a', type: 'text' }"
+    ></dfk-field-input>`,
+  })
+  class ModuleHost {}
+
+  it('exports the components for template use', () => {
+    const scoped = makeRegistry();
+    scoped.register('text', TextRendererComponent as never);
+    TestBed.configureTestingModule({
+      providers: [{ provide: FIELD_REGISTRY, useValue: scoped }],
+    });
+
+    const fixture = TestBed.createComponent(ModuleHost);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('input.txt')).not.toBeNull();
+  });
+});

package/test/setup.ts

@@ -0,0 +1,12 @@
+import '@analogjs/vitest-angular/setup-zone';
+
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);

package/test/smoke.spec.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { fieldRegistry } from '@dynamic-field-kit/core';
+import { describe, expect, it } from 'vitest';
+
+@Component({
+  selector: 'dfk-smoke',
+  standalone: true,
+  template: `<span class="smoke">{{ label }}</span>`,
+})
+class SmokeComponent {
+  label = 'mounted';
+}
+
+describe('vitest + Angular infrastructure', () => {
+  it('imports @dynamic-field-kit/core', () => {
+    expect(typeof fieldRegistry.register).toBe('function');
+  });
+
+  it('mounts a component through TestBed', () => {
+    const fixture = TestBed.createComponent(SmokeComponent);
+    fixture.detectChanges();
+
+    const el: HTMLElement = fixture.nativeElement.querySelector('.smoke');
+    expect(el.textContent).toBe('mounted');
+  });
+});

package/tsconfig.json

@@ -1,13 +1,13 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "composite": false,
-    "declaration": true,
-    "outDir": "dist",
-    "target": "ES2019",
-    "module": "ES2020",
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true
-  },
-  "include": ["src/**/*"]
-}
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "composite": false,
+    "declaration": true,
+    "outDir": "dist",
+    "target": "ES2019",
+    "module": "ES2020",
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
+  },
+  "include": ["src/**/*"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "target": "ES2022",
+    "useDefineForClassFields": true
+  },
+  "include": ["src/**/*.ts", "test/**/*.ts"]
+}

package/vitest.config.ts

@@ -0,0 +1,30 @@
+/// <reference types="vitest" />
+import angular from '@analogjs/vite-plugin-angular';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  // disableTypeChecking:false turns Angular semantic diagnostics (NG2007 etc.)
+  // back on for specs — otherwise only the ng-packagr build typechecks src, and
+  // spec files get no type checking at all.
+  plugins: [angular({ disableTypeChecking: false })],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['test/setup.ts'],
+    include: ['test/**/*.spec.ts'],
+    pool: 'forks',
+    coverage: {
+      provider: 'istanbul',
+      reportsDirectory: 'coverage',
+      reporter: ['lcov', 'text-summary'],
+      include: ['src/**/*.ts'],
+      // Coverage floor — fails the run when coverage drops below these numbers.
+      thresholds: {
+        statements: 85,
+        branches: 75,
+        functions: 85,
+        lines: 85,
+      },
+    },
+  },
+});

package/src/adapters/tailwind.ts

@@ -1,13 +0,0 @@
-// Minimal Tailwind adapter placeholder for Angular package.
-// Mirrors the React adapter shape: expose helper class names.
-
-export const tailwind = {
-  input: 'px-2 py-1 border rounded',
-  label: 'text-sm font-medium mb-1',
-};
-
-export default tailwind;
-// Minimal Tailwind adapter placeholder for Angular package
-export function cx(...parts: Array<string | false | null | undefined>) {
-  return parts.filter(Boolean).join(' ');
-}

package/src/components/imports.ts

@@ -1,3 +0,0 @@
-import { CommonModule } from '@angular/common';
-
-export const BaseImports = [CommonModule];

package/src/examples/index.ts

@@ -1,4 +0,0 @@
-export { TextFieldComponent } from './text-field.component';
-import './registerExample';
-
-export {};

package/src/examples/registerExample.ts

@@ -1,7 +0,0 @@
-import { fieldRegistry } from '@dynamic-field-kit/core';
-import { TextFieldComponent } from './text-field.component';
-
-// Example: register Angular component class into shared registry
-fieldRegistry.register('text', TextFieldComponent as any);
-
-export {};

package/src/examples/text-field.component.ts

@@ -1,18 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'dfk-text-field',
-  standalone: true,
-  template: ` <input [value]="value ?? ''" (input)="onInput($event)" /> `,
-})
-export class TextFieldComponent {
-  @Input() value?: any;
-  @Output() valueChange = new EventEmitter<any>();
-  @Output() onValueChange = new EventEmitter<any>();
-
-  onInput(e: any) {
-    const value = e.target.value;
-    this.valueChange.emit(value);
-    this.onValueChange.emit(value);
-  }
-}

package/src/types.ts

@@ -1 +0,0 @@
-export * from '@dynamic-field-kit/core';