@ng-forge/dynamic-forms 0.1.2 → 0.2.0

package/fesm2022/ng-forge-dynamic-forms-testing.mjs

@@ -0,0 +1,971 @@
+import { vi } from 'vitest';
+import { ConsoleLogger, DynamicFormLogger, DynamicForm, BUILT_IN_FIELDS, FIELD_SIGNAL_CONTEXT, provideDynamicForm, EventBus, FIELD_REGISTRY } from '@ng-forge/dynamic-forms';
+import { TestBed } from '@angular/core/testing';
+import * as i0 from '@angular/core';
+import { computed, signal, Injector, runInInjectionContext, input, Component, ChangeDetectionStrategy, Injectable } from '@angular/core';
+import { firstValueFrom, race, timer, BehaviorSubject } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { valueFieldMapper, checkboxFieldMapper } from '@ng-forge/dynamic-forms/integration';
+import { form, Field } from '@angular/forms/signals';
+
+/**
+ * Creates a promise that resolves after the specified delay.
+ *
+ * Utility function for testing scenarios where you need to wait for
+ * asynchronous operations, animations, or timing-dependent behavior.
+ *
+ * @param ms - Delay in milliseconds (defaults to 0 for next tick)
+ * @returns Promise that resolves after the specified delay
+ *
+ * @example
+ * ```typescript
+ * // Wait for async operations in tests
+ * await delay(100);
+ * expect(component.isLoaded).toBe(true);
+ *
+ * // Wait for next tick (micro-task)
+ * await delay();
+ * fixture.detectChanges();
+ * ```
+ */
+function delay(ms = 0) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/**
+ * Creates a mock logger with vitest spies for all methods.
+ * Useful for testing code that uses the logger.
+ */
+function createMockLogger() {
+    return {
+        debug: vi.fn(),
+        info: vi.fn(),
+        warn: vi.fn(),
+        error: vi.fn(),
+    };
+}
+/**
+ * Provider for a console logger in tests.
+ * Add this to TestBed.configureTestingModule providers when not using provideDynamicForm().
+ */
+function provideTestLogger() {
+    return { provide: DynamicFormLogger, useValue: new ConsoleLogger() };
+}
+
+/**
+ * Fluent API for building form configurations
+ */
+class FormConfigBuilder {
+    fields = [];
+    field(field) {
+        this.fields.push(field);
+        return this;
+    }
+    inputField(key, props) {
+        return this.field({
+            key,
+            type: 'input',
+            label: key.charAt(0).toUpperCase() + key.slice(1),
+            props: { placeholder: `Enter ${key}`, ...props },
+        });
+    }
+    requiredInputField(key, props) {
+        const inputField = {
+            key,
+            type: 'input',
+            label: key.charAt(0).toUpperCase() + key.slice(1),
+            required: true,
+            props: { placeholder: `Enter ${key}`, ...props },
+        };
+        return this.field(inputField);
+    }
+    selectField(key, options, props) {
+        const selectField = {
+            key,
+            type: 'select',
+            label: key.charAt(0).toUpperCase() + key.slice(1),
+            options,
+            props: props || {},
+        };
+        return this.field(selectField);
+    }
+    checkboxField(key, props) {
+        return this.field({
+            key,
+            type: 'checkbox',
+            label: key.charAt(0).toUpperCase() + key.slice(1),
+            props: props || {},
+        });
+    }
+    rowField(key, fields) {
+        return this.field({
+            key,
+            type: 'row',
+            fields,
+        });
+    }
+    groupField(key, fields) {
+        return this.field({
+            key,
+            type: 'group',
+            fields,
+        });
+    }
+    buttonField(key, props) {
+        return this.field({
+            key,
+            type: 'button',
+            label: key.charAt(0).toUpperCase() + key.slice(1),
+            props: props || {},
+        });
+    }
+    pageField(key, fields, title) {
+        const pageFields = title ? [{ key: `${key}-title`, type: 'text', label: title }, ...fields] : fields;
+        return this.field({
+            key,
+            type: 'page',
+            fields: pageFields,
+        });
+    }
+    build() {
+        return { fields: this.fields };
+    }
+}
+/**
+ * Utility class for testing dynamic forms
+ */
+class DynamicFormTestUtils {
+    /**
+     * Creates a new form config builder
+     */
+    static builder() {
+        return new FormConfigBuilder();
+    }
+    /**
+     * Creates a dynamic form test setup with optional test field registration
+     */
+    static async createTest(testConfig) {
+        const fixture = TestBed.createComponent(DynamicForm);
+        const component = fixture.componentInstance;
+        // Access fieldRegistry from the component instance (injected by Angular DI)
+        const fieldRegistry = component['fieldRegistry'];
+        // Register test fields if requested
+        if (testConfig.registerTestFields !== false) {
+            DynamicFormTestUtils.registerTestFields(fieldRegistry);
+        }
+        // Set up the component - use 'dynamic-form' as the input name since config uses alias: 'dynamic-form'
+        fixture.componentRef.setInput('dynamic-form', testConfig.config);
+        if (testConfig.initialValue !== undefined) {
+            fixture.componentRef.setInput('value', testConfig.initialValue);
+        }
+        fixture.detectChanges();
+        await DynamicFormTestUtils.waitForInit(fixture);
+        return {
+            component: component,
+            fixture: fixture,
+        };
+    }
+    /**
+     * Registers common test field types including built-in types like page, row, group
+     * @internal
+     */
+    static registerTestFields(fieldRegistry) {
+        // Input field mapper that extends value field mapper (returns Signal)
+        const inputMapper = (fieldDef) => {
+            const baseInputsSignal = valueFieldMapper(fieldDef);
+            // Return computed signal that adds input-specific inputs
+            return computed(() => ({
+                ...baseInputsSignal(),
+                type: fieldDef.props?.['type'] || 'text',
+                placeholder: fieldDef.props?.['placeholder'] || '',
+            }));
+        };
+        // Select field mapper that extends value field mapper (returns Signal)
+        const selectMapper = (fieldDef) => {
+            const baseInputsSignal = valueFieldMapper(fieldDef);
+            // Return computed signal that adds select-specific inputs
+            return computed(() => ({
+                ...baseInputsSignal(),
+                options: fieldDef.options || [], // Safe cast: SelectField extends FieldDef with options property
+            }));
+        };
+        // Checkbox field mapper - uses checked instead of value (already returns Signal)
+        const checkboxMapper = (fieldDef) => {
+            return checkboxFieldMapper(fieldDef);
+        };
+        // Button field mapper that extends value field mapper (already returns Signal)
+        const buttonMapper = (fieldDef) => {
+            return valueFieldMapper(fieldDef);
+        };
+        // Register built-in fields first (page, row, group)
+        fieldRegistry.registerTypes(BUILT_IN_FIELDS);
+        // Then register test field types
+        fieldRegistry.registerTypes([
+            {
+                name: 'input',
+                loadComponent: () => Promise.resolve().then(function () { return testInput_harness; }),
+                mapper: inputMapper,
+            },
+            {
+                name: 'select',
+                loadComponent: () => Promise.resolve().then(function () { return testSelect_harness; }),
+                mapper: selectMapper,
+            },
+            {
+                name: 'checkbox',
+                loadComponent: () => Promise.resolve().then(function () { return testCheckbox_harness; }),
+                mapper: checkboxMapper,
+            },
+            {
+                name: 'button',
+                loadComponent: () => import('./ng-forge-dynamic-forms-testing-test-button.harness-CbctXjtc.mjs'),
+                mapper: buttonMapper,
+            },
+        ]);
+    }
+    /**
+     * Waits for the dynamic form to initialize.
+     * Uses the initialized$ observable directly which has shareReplay for late subscribers.
+     * @param fixture - The component fixture
+     * @param timeoutMs - Maximum time to wait for initialization (default: 100ms)
+     */
+    static async waitForInit(fixture, timeoutMs = 100) {
+        const component = fixture.componentInstance;
+        // Trigger initial change detection
+        fixture.detectChanges();
+        TestBed.flushEffects();
+        // Use the initialized$ observable directly (with shareReplay) for proper replay behavior
+        // Race against a timeout to prevent hanging if initialization already happened
+        await firstValueFrom(race(component.initialized$.pipe(map(() => true)), timer(timeoutMs).pipe(map(() => false))));
+        // Stabilization cycles for async components
+        for (let i = 0; i < 2; i++) {
+            TestBed.flushEffects();
+            fixture.detectChanges();
+            await delay(0);
+        }
+        await fixture.whenStable();
+        TestBed.flushEffects();
+        fixture.detectChanges();
+    }
+    /**
+     * Waits for an element to appear in the DOM with retries
+     */
+    static async waitForElement(fixture, selector, maxAttempts = 10) {
+        for (let attempt = 0; attempt < maxAttempts; attempt++) {
+            const element = fixture.nativeElement.querySelector(selector);
+            if (element) {
+                return element;
+            }
+            // Wait and retry
+            TestBed.flushEffects();
+            fixture.detectChanges();
+            await delay(50);
+        }
+        throw new Error(`[Dynamic Forms] Element not found with selector: ${selector} after ${maxAttempts} attempts`);
+    }
+    /**
+     * Simulates user input on a field element
+     */
+    static async simulateInput(fixture, selector, value) {
+        const input = await DynamicFormTestUtils.waitForElement(fixture, selector);
+        input.value = value;
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        fixture.detectChanges();
+        await delay(0);
+    }
+    /**
+     * Simulates user blur on a field element
+     */
+    static async simulateBlur(fixture, selector) {
+        const element = await DynamicFormTestUtils.waitForElement(fixture, selector);
+        element.dispatchEvent(new Event('blur', { bubbles: true }));
+        fixture.detectChanges();
+        await delay(0);
+    }
+    /**
+     * Simulates user selection on a select element
+     */
+    static async simulateSelect(fixture, selector, value) {
+        const select = await DynamicFormTestUtils.waitForElement(fixture, selector);
+        select.value = value;
+        select.dispatchEvent(new Event('change', { bubbles: true }));
+        fixture.detectChanges();
+        await delay(0);
+    }
+    /**
+     * Simulates checkbox toggle
+     */
+    static async simulateCheckbox(fixture, selector, checked) {
+        const checkbox = await DynamicFormTestUtils.waitForElement(fixture, selector);
+        checkbox.checked = checked;
+        checkbox.dispatchEvent(new Event('input', { bubbles: true }));
+        checkbox.dispatchEvent(new Event('change', { bubbles: true }));
+        fixture.detectChanges();
+        await delay(0);
+    }
+    /**
+     * Simulates button click
+     */
+    static async simulateButtonClick(fixture, selector) {
+        const button = await DynamicFormTestUtils.waitForElement(fixture, selector);
+        button.click();
+        fixture.detectChanges();
+        await delay(0);
+    }
+    /**
+     * Gets the current form value from the component
+     */
+    static getFormValue(component) {
+        return component.formValue();
+    }
+    /**
+     * Gets validation errors from the component
+     */
+    static getFormErrors(component) {
+        return component.errors();
+    }
+    /**
+     * Checks if the form is valid
+     */
+    static isFormValid(component) {
+        return component.valid();
+    }
+    /**
+     * Gets all field elements from the fixture
+     */
+    static getFieldElements(fixture, fieldType) {
+        return fixture.nativeElement.querySelectorAll(`df-test-${fieldType}`);
+    }
+    /**
+     * Asserts that a field has a specific value
+     */
+    static async assertFieldValue(fixture, fieldSelector, expectedValue) {
+        const element = await DynamicFormTestUtils.waitForElement(fixture, fieldSelector);
+        const actualValue = element.type === 'checkbox' ? element.checked.toString() : element.value;
+        if (actualValue !== expectedValue) {
+            throw new Error(`[Dynamic Forms] Expected field value to be "${expectedValue}", but got "${actualValue}"`);
+        }
+    }
+    /**
+     * Asserts that the form has a specific value
+     */
+    static assertFormValue(component, expectedValue) {
+        const actualValue = component.formValue();
+        if (JSON.stringify(actualValue) !== JSON.stringify(expectedValue)) {
+            throw new Error(`[Dynamic Forms] Expected form value to be ${JSON.stringify(expectedValue)}, but got ${JSON.stringify(actualValue)}`);
+        }
+    }
+}
+
+/**
+ * Creates a test injector with FIELD_SIGNAL_CONTEXT provided.
+ *
+ * This utility simplifies testing of mappers and components that inject FIELD_SIGNAL_CONTEXT.
+ *
+ * @example
+ * ```typescript
+ * // Basic usage
+ * const testInjector = createTestFormInjector();
+ *
+ * // With custom initial value
+ * const testInjector = createTestFormInjector({
+ *   initialValue: { username: 'test' }
+ * });
+ *
+ * // With validation messages
+ * const testInjector = createTestFormInjector({
+ *   defaultValidationMessages: { required: 'This field is required' }
+ * });
+ * ```
+ */
+function createTestFormInjector(config = {}) {
+    const { parentInjector, initialValue = {}, defaultValues = () => initialValue, defaultValidationMessages, valueSignal, form: customForm, } = config;
+    // Create value signal
+    const value = valueSignal ?? signal(initialValue);
+    // Create form instance in injection context
+    let formInstance;
+    if (customForm) {
+        formInstance = customForm;
+    }
+    else {
+        const tempInjector = parentInjector || Injector.create({ providers: [] });
+        formInstance = runInInjectionContext(tempInjector, () => form(value));
+    }
+    // Create field signal context
+    const fieldSignalContext = {
+        injector: parentInjector || Injector.create({ providers: [] }),
+        value,
+        defaultValues,
+        form: formInstance,
+        defaultValidationMessages,
+    };
+    // Create injector with context
+    return Injector.create({
+        parent: parentInjector,
+        providers: [
+            {
+                provide: FIELD_SIGNAL_CONTEXT,
+                useValue: fieldSignalContext,
+            },
+        ],
+    });
+}
+/**
+ * Runs a mapper function in a test injection context.
+ *
+ * This is a convenience wrapper that creates a test injector and runs the mapper
+ * function within it, returning the result.
+ *
+ * @example
+ * ```typescript
+ * // Test a mapper without context overrides
+ * const bindings = testMapper(() => mapValueField(fieldDef));
+ *
+ * // Test a mapper with custom context
+ * const bindings = testMapper(
+ *   () => mapValueField(fieldDef),
+ *   { initialValue: { username: 'test' } }
+ * );
+ *
+ * // Test a mapper with validation messages
+ * const bindings = testMapper(
+ *   () => mapValueField(fieldDef),
+ *   { defaultValidationMessages: { required: 'Required field' } }
+ * );
+ * ```
+ */
+function testMapper(mapperFn, context) {
+    const testInjector = createTestFormInjector(context);
+    return runInInjectionContext(testInjector, mapperFn);
+}
+/**
+ * Creates a field signal context for testing without creating an injector.
+ *
+ * Useful when you need to manually provide the context or test context creation logic.
+ *
+ * @example
+ * ```typescript
+ * const context = createTestFieldContext({
+ *   initialValue: { name: 'test' }
+ * });
+ *
+ * // Use in your own injector
+ * const injector = Injector.create({
+ *   providers: [
+ *     { provide: FIELD_SIGNAL_CONTEXT, useValue: context }
+ *   ]
+ * });
+ * ```
+ */
+function createTestFieldContext(config = {}) {
+    const { parentInjector, initialValue = {}, defaultValues = () => initialValue, defaultValidationMessages, valueSignal, form: customForm, } = config;
+    const injector = parentInjector || Injector.create({ providers: [] });
+    const value = valueSignal ?? signal(initialValue);
+    let formInstance;
+    if (customForm) {
+        formInstance = customForm;
+    }
+    else {
+        formInstance = runInInjectionContext(injector, () => form(value));
+    }
+    return {
+        injector,
+        value,
+        defaultValues,
+        form: formInstance,
+        defaultValidationMessages,
+    };
+}
+
+/**
+ * Fluent API for building form configurations using existing field structure
+ */
+class TestFormConfigBuilder {
+    fields = [];
+    field(field) {
+        this.fields.push(field);
+        return this;
+    }
+    inputField(key, props) {
+        return this.field({
+            key,
+            type: 'input',
+            label: key.charAt(0).toUpperCase() + key.slice(1),
+            ...props,
+        });
+    }
+    requiredInputField(key, props) {
+        return this.inputField(key, { required: true, ...props });
+    }
+    checkboxField(key, props) {
+        return this.field({
+            key,
+            type: 'checkbox',
+            label: key.charAt(0).toUpperCase() + key.slice(1),
+            ...props,
+        });
+    }
+    build() {
+        return { fields: this.fields };
+    }
+}
+/**
+ * Simple utility class for testing dynamic forms
+ */
+class SimpleTestUtils {
+    /**
+     * Creates a new form config builder
+     */
+    static builder() {
+        return new TestFormConfigBuilder();
+    }
+    /**
+     * Creates a simple test component - assumes TestBed is already configured
+     */
+    static createComponent(config = { fields: [] }, initialValue) {
+        const fixture = TestBed.createComponent(DynamicForm);
+        const component = fixture.componentInstance;
+        // Use 'dynamic-form' as the input name since config uses alias: 'dynamic-form'
+        fixture.componentRef.setInput('dynamic-form', config);
+        if (initialValue !== undefined) {
+            fixture.componentRef.setInput('value', initialValue);
+        }
+        fixture.detectChanges();
+        TestBed.flushEffects();
+        // Cast to SimpleTestResult - type variance in DynamicForm generics doesn't affect runtime behavior
+        return { component, fixture };
+    }
+    /**
+     * Waits for the dynamic form to initialize
+     */
+    static async waitForInit(fixture) {
+        await delay(0);
+        fixture.detectChanges();
+        TestBed.flushEffects();
+        await delay(0);
+    }
+    /**
+     * Simulates user input on a field element
+     */
+    static async simulateInput(fixture, selector, value) {
+        const input = fixture.nativeElement.querySelector(selector);
+        if (!input) {
+            throw new Error(`[Dynamic Forms] Input element not found with selector: ${selector}`);
+        }
+        input.value = value;
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        fixture.detectChanges();
+        await delay(0);
+    }
+    /**
+     * Simulates checkbox toggle
+     */
+    static async simulateCheckbox(fixture, selector, checked) {
+        const checkbox = fixture.nativeElement.querySelector(selector);
+        if (!checkbox) {
+            throw new Error(`[Dynamic Forms] Checkbox element not found with selector: ${selector}`);
+        }
+        checkbox.checked = checked;
+        checkbox.dispatchEvent(new Event('change', { bubbles: true }));
+        fixture.detectChanges();
+        await delay(0);
+    }
+    /**
+     * Gets the current form value from the component
+     */
+    static getFormValue(component) {
+        return component.formValue();
+    }
+    /**
+     * Checks if the form is valid
+     */
+    static isFormValid(component) {
+        return component.valid();
+    }
+    /**
+     * Asserts that the form has a specific value
+     */
+    static assertFormValue(component, expectedValue) {
+        const actualValue = component.formValue();
+        if (JSON.stringify(actualValue) !== JSON.stringify(expectedValue)) {
+            throw new Error(`[Dynamic Forms] Expected form value to be ${JSON.stringify(expectedValue)}, but got ${JSON.stringify(actualValue)}`);
+        }
+    }
+}
+// Mock field component for testing
+// Includes all inputs that baseFieldMapper and valueFieldMapper might create bindings for
+class TestFieldComponent {
+    // Field tree input
+    field = input(...(ngDevMode ? [undefined, { debugName: "field" }] : []));
+    // Required inputs from baseFieldMapper
+    key = input('', ...(ngDevMode ? [{ debugName: "key" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
+    tabIndex = input(undefined, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
+    props = input(undefined, ...(ngDevMode ? [{ debugName: "props" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    // Array-related inputs
+    arrayContext = input(undefined, ...(ngDevMode ? [{ debugName: "arrayContext" }] : []));
+    fields = input([], ...(ngDevMode ? [{ debugName: "fields" }] : []));
+    // Validation inputs from valueFieldMapper
+    validationMessages = input(undefined, ...(ngDevMode ? [{ debugName: "validationMessages" }] : []));
+    defaultValidationMessages = input(undefined, ...(ngDevMode ? [{ debugName: "defaultValidationMessages" }] : []));
+    value = signal('test', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TestFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TestFieldComponent, isStandalone: true, selector: "df-test-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, arrayContext: { classPropertyName: "arrayContext", publicName: "arrayContext", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<div>Test Field: {{ value() }}</div>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TestFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'df-test-field',
+                    template: '<div>Test Field: {{ value() }}</div>',
+                }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], arrayContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrayContext", required: false }] }], fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
+/**
+ * Creates a simple test setup for individual field components
+ */
+function setupSimpleTest(componentType, config) {
+    const mockFieldType = {
+        name: 'test',
+        loadComponent: async () => TestFieldComponent,
+        mapper: () => computed(() => ({})), // Simple mapper that returns empty inputs signal for testing
+    };
+    TestBed.configureTestingModule({
+        imports: [componentType],
+        providers: [
+            provideDynamicForm(),
+            EventBus,
+            {
+                provide: FIELD_REGISTRY,
+                useValue: new Map([['test', mockFieldType]]),
+            },
+            {
+                provide: FIELD_SIGNAL_CONTEXT,
+                useFactory: (injector) => {
+                    // Create test context using factory
+                    return runInInjectionContext(injector, () => {
+                        const defaultValue = (config.value || {});
+                        const valueSignal = signal(defaultValue, ...(ngDevMode ? [{ debugName: "valueSignal" }] : []));
+                        const formInstance = form(valueSignal);
+                        return {
+                            injector,
+                            value: valueSignal,
+                            defaultValues: () => defaultValue,
+                            form: formInstance,
+                            defaultValidationMessages: undefined,
+                        };
+                    });
+                },
+                deps: [Injector],
+            },
+        ],
+    });
+    const fixture = TestBed.createComponent(componentType);
+    const component = fixture.componentInstance;
+    fixture.componentRef.setInput('field', config.field);
+    fixture.componentRef.setInput('key', config.field.key);
+    if (config.value !== undefined) {
+        fixture.componentRef.setInput('value', config.value);
+    }
+    if (config.pageIndex !== undefined) {
+        fixture.componentRef.setInput('pageIndex', config.pageIndex);
+    }
+    if (config.isVisible !== undefined) {
+        fixture.componentRef.setInput('isVisible', config.isVisible);
+    }
+    // Set any additional inputs provided in config
+    Object.keys(config).forEach((key) => {
+        if (!['field', 'value', 'pageIndex', 'isVisible'].includes(key) && config[key] !== undefined) {
+            fixture.componentRef.setInput(key, config[key]);
+        }
+    });
+    fixture.detectChanges();
+    return { component, fixture };
+}
+/**
+ * Creates a simple test field definition
+ */
+function createSimpleTestField(key, label) {
+    return {
+        key,
+        type: 'test',
+        label,
+    };
+}
+
+class TestInputHarness {
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
+    // Field-specific properties
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : []));
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
+    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
+    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TestInputHarness, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TestInputHarness, isStandalone: true, selector: "df-test-input", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<input [type]="type()" [field]="field()" />`, isInline: true, dependencies: [{ kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TestInputHarness, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'df-test-input',
+                    template: `<input [type]="type()" [field]="field()" />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [Field],
+                }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
+
+var testInput_harness = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    default: TestInputHarness
+});
+
+class TestCheckboxHarness {
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
+    // Field-specific properties
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : []));
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
+    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
+    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TestCheckboxHarness, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: TestCheckboxHarness, isStandalone: true, selector: "df-test-checkbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ` <input type="checkbox" [field]="field()" /> `, isInline: true, dependencies: [{ kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TestCheckboxHarness, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'df-test-checkbox',
+                    template: ` <input type="checkbox" [field]="field()" /> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [Field],
+                }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
+
+var testCheckbox_harness = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    default: TestCheckboxHarness
+});
+
+/**
+ * Test harness component for select fields
+ */
+class TestSelectHarness {
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
+    // Field-specific properties
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
+    tabIndex = input(undefined, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
+    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    props = input({}, ...(ngDevMode ? [{ debugName: "props" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TestSelectHarness, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TestSelectHarness, isStandalone: true, selector: "df-test-select", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @let f = field();
+    <select [field]="f">
+      <option value="">Select...</option>
+      @for (option of options(); track option.value) {
+        <option [value]="option.value">{{ option.label }}</option>
+      }
+    </select>
+  `, isInline: true, dependencies: [{ kind: "directive", type: Field, selector: "[field]", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TestSelectHarness, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'df-test-select',
+                    template: `
+    @let f = field();
+    <select [field]="f">
+      <option value="">Select...</option>
+      @for (option of options(); track option.value) {
+        <option [value]="option.value">{{ option.label }}</option>
+      }
+    </select>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [Field],
+                }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
+
+var testSelect_harness = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    default: TestSelectHarness
+});
+
+/**
+ * Fake translation service for testing dynamic text functionality.
+ * Provides Observable-based translation methods with language switching simulation.
+ *
+ * @example
+ * ```typescript
+ * TestBed.configureTestingModule({
+ *   providers: [
+ *     { provide: TranslationService, useClass: FakeTranslationService }
+ *   ]
+ * });
+ *
+ * const service = TestBed.inject(FakeTranslationService);
+ * service.setTranslations({
+ *   'form.username.label': 'Username',
+ *   'validation.required': 'This field is required'
+ * });
+ * ```
+ *
+ * @public
+ */
+class FakeTranslationService {
+    translations = new BehaviorSubject({});
+    currentLanguage = signal('en', ...(ngDevMode ? [{ debugName: "currentLanguage" }] : []));
+    /**
+     * Set the translation dictionary
+     */
+    setTranslations(translations) {
+        this.translations.next(translations);
+    }
+    /**
+     * Add translations to the existing dictionary
+     */
+    addTranslations(translations) {
+        const current = this.translations.value;
+        this.translations.next({ ...current, ...translations });
+    }
+    /**
+     * Simulate language change
+     */
+    setLanguage(language) {
+        this.currentLanguage.set(language);
+        // Trigger translation updates by emitting current translations
+        this.translations.next(this.translations.value);
+    }
+    /**
+     * Get current language as signal
+     */
+    getLanguage() {
+        return this.currentLanguage;
+    }
+    /**
+     * Translate a key and return an Observable
+     * Supports parameter interpolation using {{param}} syntax
+     */
+    translate(key, params) {
+        return this.translations.pipe(map((translations) => {
+            const translatedValue = translations[key] || key;
+            return this.interpolateParams(translatedValue, params);
+        }));
+    }
+    /**
+     * Get instant translation (synchronous)
+     * Supports parameter interpolation using {{param}} syntax
+     */
+    instant(key, params) {
+        const translations = this.translations.value;
+        const translatedValue = translations[key] || key;
+        return this.interpolateParams(translatedValue, params);
+    }
+    /**
+     * Simulate translation for validation errors
+     * Uses validation.${errorKind} pattern
+     */
+    translateValidationError(errorKind, params) {
+        const key = `validation.${errorKind}`;
+        return this.translate(key, params);
+    }
+    /**
+     * Get all current translations
+     */
+    getTranslations() {
+        return this.translations.value;
+    }
+    /**
+     * Clear all translations
+     */
+    clearTranslations() {
+        this.translations.next({});
+    }
+    interpolateParams(template, params) {
+        if (!params) {
+            return template;
+        }
+        let result = template;
+        Object.entries(params).forEach(([key, value]) => {
+            const placeholder = new RegExp(`{{\\s*${key}\\s*}}`, 'g');
+            result = result.replace(placeholder, String(value));
+        });
+        return result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FakeTranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FakeTranslationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FakeTranslationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+/**
+ * Default translations for common form fields and validation messages
+ * Useful for quick testing setup
+ */
+const DEFAULT_TEST_TRANSLATIONS = {
+    // Form field labels
+    'form.username.label': 'Username',
+    'form.email.label': 'Email Address',
+    'form.password.label': 'Password',
+    'form.firstName.label': 'First Name',
+    'form.lastName.label': 'Last Name',
+    'form.phone.label': 'Phone Number',
+    'form.address.label': 'Address',
+    // Form field placeholders
+    'form.username.placeholder': 'Enter your username',
+    'form.email.placeholder': 'Enter your email address',
+    'form.password.placeholder': 'Enter your password',
+    // Validation messages
+    'validation.required': 'This field is required',
+    'validation.email': 'Please enter a valid email address',
+    'validation.min': 'Value must be at least {{min}}',
+    'validation.max': 'Value must be at most {{max}}',
+    'validation.minLength': 'Must be at least {{requiredLength}} characters',
+    'validation.maxLength': 'Must be at most {{requiredLength}} characters',
+    'validation.pattern': 'Invalid format',
+    // Button labels
+    'buttons.submit': 'Submit',
+    'buttons.cancel': 'Cancel',
+    'buttons.save': 'Save',
+    'buttons.delete': 'Delete',
+    'buttons.edit': 'Edit',
+    // Multi-language examples for testing language switching
+    greeting: 'Hello',
+    goodbye: 'Goodbye',
+};
+/**
+ * Alternative translations for testing language switching
+ */
+const SPANISH_TEST_TRANSLATIONS = {
+    'form.username.label': 'Nombre de usuario',
+    'form.email.label': 'Dirección de correo electrónico',
+    'form.password.label': 'Contraseña',
+    'validation.required': 'Este campo es obligatorio',
+    'validation.email': 'Por favor ingrese una dirección de correo válida',
+    greeting: 'Hola',
+    goodbye: 'Adiós',
+};
+/**
+ * Test utility to create a configured FakeTranslationService with default translations
+ */
+function createTestTranslationService(initialTranslations = DEFAULT_TEST_TRANSLATIONS) {
+    const service = new FakeTranslationService();
+    service.setTranslations(initialTranslations);
+    return service;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_TEST_TRANSLATIONS, DynamicFormTestUtils, FakeTranslationService, FormConfigBuilder, SPANISH_TEST_TRANSLATIONS, TestFormConfigBuilder as SimpleFormConfigBuilder, SimpleTestUtils, TestCheckboxHarness as TestCheckboxHarnessComponent, TestFieldComponent, TestInputHarness as TestInputHarnessComponent, TestSelectHarness as TestSelectHarnessComponent, createMockLogger, createSimpleTestField, createTestFieldContext, createTestFormInjector, createTestTranslationService, delay, provideTestLogger, setupSimpleTest, testMapper };
+//# sourceMappingURL=ng-forge-dynamic-forms-testing.mjs.map