@dynamic-field-kit/angular 1.3.3 → 1.4.0

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.ts → test/setup.ts}

@@ -1,5 +1,5 @@
-import 'zone.js';
-import 'zone.js/testing';
+import '@analogjs/vitest-angular/setup-zone';
+
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,

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

@@ -1,21 +1,9 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "./dist-spec",
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "target": "ES2020",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "declaration": false,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "skipLibCheck": true,
-    "noImplicitAny": false,
-    "strict": false
+    "outDir": "./out-tsc/spec",
+    "target": "ES2022",
+    "useDefineForClassFields": true
   },
-  "include": ["test/**/*.ts"],
-  "exclude": ["node_modules", "dist", "dist-spec", "examples", "src"]
+  "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/angular.json

@@ -1,27 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "dynamic-field-kit-angular": {
-      "projectType": "library",
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "dfk",
-      "architect": {
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "test.ts",
-            "polyfills": ["zone.js"],
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": [],
-            "styles": [],
-            "scripts": []
-          }
-        }
-      }
-    }
-  }
-}

package/karma.conf.js

@@ -1,37 +0,0 @@
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', 'karma-typescript'],
-    plugins: [
-      'karma-jasmine',
-      'karma-chrome-launcher',
-      'karma-typescript',
-      'karma-coverage',
-    ],
-    files: [{ pattern: 'test/**/*.spec.ts', included: true }],
-    preprocessors: {
-      'test/**/*.spec.ts': ['karma-typescript'],
-    },
-    client: {
-      jasmine: {},
-    },
-    karmaTypescriptConfig: {
-      tsconfig: './tsconfig.spec.json',
-    },
-    reporters: ['progress', 'coverage'],
-    browsers: ['ChromeHeadless'],
-    customLaunchers: {
-      ChromeHeadlessCI: {
-        base: 'ChromeHeadless',
-        flags: ['--no-sandbox', '--disable-gpu'],
-      },
-    },
-    singleRun: true,
-    coverageReporter: {
-      reporters: [
-        { type: 'lcov', dir: 'coverage', subdir: '.' },
-        { type: 'text-summary' },
-      ],
-    },
-  });
-};

package/test/angular.spec.ts

@@ -1,102 +0,0 @@
-describe('Angular Package', () => {
-  describe('Components', () => {
-    it('should have DynamicInput component', () => {
-      expect(true).toBe(true);
-    });
-
-    it('should have FieldInput component', () => {
-      expect(true).toBe(true);
-    });
-
-    it('should have MultiFieldInput component', () => {
-      expect(true).toBe(true);
-    });
-  });
-
-  describe('Field Description', () => {
-    it('should create field with name and type', () => {
-      const field = { name: 'username', type: 'text' };
-      expect(field.name).toBe('username');
-      expect(field.type).toBe('text');
-    });
-
-    it('should support optional label', () => {
-      const field = { name: 'email', type: 'text', label: 'Email' };
-      expect(field.label).toBe('Email');
-    });
-
-    it('should support placeholder', () => {
-      const field = { name: 'name', type: 'text', placeholder: 'Enter name' };
-      expect(field.placeholder).toBe('Enter name');
-    });
-
-    it('should support required flag', () => {
-      const field = { name: 'email', type: 'text', required: true };
-      expect(field.required).toBe(true);
-    });
-
-    it('should support options for select fields', () => {
-      const field = {
-        name: 'country',
-        type: 'text',
-        options: [{ label: 'Vietnam', value: 'vn' }],
-      };
-      expect(field.options?.length).toBe(1);
-    });
-
-    it('should support className', () => {
-      const field = { name: 'test', type: 'text', className: 'custom-class' };
-      expect(field.className).toBe('custom-class');
-    });
-
-    it('should support description', () => {
-      const field = { name: 'test', type: 'text', description: 'Help text' };
-      expect(field.description).toBe('Help text');
-    });
-  });
-
-  describe('Layouts', () => {
-    it('should support row layout', () => {
-      expect('row').toBe('row');
-    });
-
-    it('should support grid layout', () => {
-      expect('grid').toBe('grid');
-    });
-
-    it('should support column layout', () => {
-      expect('column').toBe('column');
-    });
-  });
-
-  describe('appearCondition', () => {
-    it('should evaluate appearCondition', () => {
-      const condition = (data: any) => data.show === true;
-      expect(condition({ show: true })).toBe(true);
-      expect(condition({ show: false })).toBe(false);
-    });
-
-    it('should filter fields based on appearCondition', () => {
-      const fields = [
-        { name: 'alwaysShow', type: 'text' },
-        {
-          name: 'conditional',
-          type: 'text',
-          appearCondition: (data: any) => data.accountType === 'business',
-        },
-      ];
-
-      const visibleForPersonal = fields.filter(
-        (f) =>
-          !f.appearCondition || f.appearCondition({ accountType: 'personal' })
-      );
-      expect(visibleForPersonal.length).toBe(1);
-
-      const visibleForBusiness = fields.filter(
-        (f) =>
-          !f.appearCondition || f.appearCondition({ accountType: 'business' })
-      );
-      expect(visibleForBusiness.length).toBe(2);
-    });
-  });
-});

package/test/integration.spec.ts

@@ -1,57 +0,0 @@
-describe('Integration: Form with multiple fields', () => {
-  it('should create field descriptions', () => {
-    const fields = [
-      { name: 'name', type: 'text', label: 'Full Name' },
-      { name: 'email', type: 'text', label: 'Email' },
-    ];
-    expect(fields.length).toBe(2);
-    expect(fields[0].label).toBe('Full Name');
-  });
-
-  it('should handle form data', () => {
-    const formData = { name: 'John', email: 'john@example.com' };
-    expect(formData.name).toBe('John');
-    expect(formData.email).toBe('john@example.com');
-  });
-
-  it('should evaluate appearCondition', () => {
-    const condition = (data: any) => data.accountType === 'business';
-    expect(condition({ accountType: 'personal' })).toBe(false);
-    expect(condition({ accountType: 'business' })).toBe(true);
-  });
-});
-
-describe('FieldDescription', () => {
-  it('should have name and type', () => {
-    const field = { name: 'username', type: 'text' };
-    expect(field.name).toBe('username');
-    expect(field.type).toBe('text');
-  });
-
-  it('should support optional properties', () => {
-    const field = {
-      name: 'username',
-      type: 'text',
-      label: 'Username',
-      placeholder: 'Enter name',
-      required: true,
-      options: [{ label: 'Option 1' }],
-    };
-    expect(field.label).toBe('Username');
-    expect(field.required).toBe(true);
-    expect(field.options?.length).toBe(1);
-  });
-});
-
-describe('Properties', () => {
-  it('should be a record of key-value pairs', () => {
-    const props: Record<string, any> = {
-      username: 'john',
-      age: 25,
-      active: true,
-    };
-    expect(props.username).toBe('john');
-    expect(props.age).toBe(25);
-    expect(props.active).toBe(true);
-  });
-});

package/test/layouts.spec.ts

@@ -1,26 +0,0 @@
-describe('Layout: Row', () => {
-  it('should render fields in row layout', () => {
-    const layout = 'row';
-    expect(layout).toBe('row');
-  });
-});
-
-describe('Layout: Grid', () => {
-  it('should render fields in default grid layout', () => {
-    const layout = 'grid';
-    expect(layout).toBe('grid');
-  });
-
-  it('should support grid with columns option', () => {
-    const layout = { type: 'grid', columns: 3 };
-    expect(layout.type).toBe('grid');
-    expect(layout.columns).toBe(3);
-  });
-});
-
-describe('Layout: Column', () => {
-  it('should render fields in column layout', () => {
-    const layout = 'column';
-    expect(layout).toBe('column');
-  });
-});