@tft/crispr-forms-testing 21.0.1

package/CLAUDE.md

@@ -0,0 +1,105 @@
+# crispr-forms-testing
+
+Playwright helpers and field test factories for testing forms built with `@tft/crispr-forms`.
+
+## Setup
+
+### 1. Load the Angular JIT compiler
+The lib re-exports `@angular/compiler` automatically when you import from it. You do NOT need a separate fixture file — just import directly:
+
+```ts
+import { testField, getMatFormField } from '@tft/crispr-forms-testing';
+```
+
+If you are NOT importing from this lib in a given file, add this at the top of your Playwright setup or fixture:
+```ts
+import '@angular/compiler';
+```
+
+### 2. Use `testField` to generate standard assertions from a config
+```ts
+import { test } from '@playwright/test';
+import { testField } from '@tft/crispr-forms-testing';
+import { myFormConfig } from './my-form.config';
+
+test.describe('My Form', () => {
+  test.beforeEach(async ({ page }) => page.goto('/my-form'));
+  for (const field of myFormConfig.fields) {
+    testField(field);
+  }
+});
+```
+
+## testId attribute pattern
+
+Every crispr-forms field has `data-testid` set automatically. The value is the full control path:
+
+| Context | testId value |
+|---------|-------------|
+| Top-level field `firstName` | `firstName` |
+| In a subGroup `address` | `address.firstName` |
+| In a formGroupList `contacts` at index 2 | `contacts[2].firstName` |
+| Doubly-nested | `contacts[2].address.city` |
+
+## Helper functions
+
+### Locators
+- `getMatFormField(page, testId)` — the root element with `data-testid` (usually `mat-form-field`, `mat-checkbox`, or `mat-slider`)
+- `getInput(page, testId)` — `input` inside the field
+- `getLabel(page, testId)` — `mat-label` inside the field
+- `getHint(page, testId)` — `mat-hint` inside the field
+- `getMatSelect(page, testId)` — `mat-select` inside a select field
+- `getCheckbox(page, testId)` — `mat-checkbox` element
+- `getAutocompleteInput(page, testId)` — the visible `role="textbox"` input in autocomplete (NOT the hidden formControlName anchor)
+- `getError(page, testId, fieldType?)` — the `<p class="tft-control-error">` paragraph. `fieldType` defaults to `'input'`; pass the field's kebab-case type for other fields (e.g. `'select'`, `'autocomplete'`, `'autocomplete-chiplist'`, `'checkbox'`, `'datepicker'`, `'textarea'`)
+
+### Actions
+- `touchInput(page, testId)` — click + Tab to blur
+- `touchSelect(page, testId)` — open + Escape + Tab (Tab is required; Escape alone does not fire blur)
+- `touchCheckbox(page, testId)` — click + click + Tab (leaves unchecked, triggers requiredTrue)
+- `touchAutocomplete(page, testId)` — click visible input + Tab
+- `touchDatepicker(page, testId)` — click input + Tab
+- `openSelect(page, testId)` — clicks mat-select to open panel
+- `selectOption(page, testId, optionLabel)` — opens select and clicks the option
+- `submitForm(page, nth?)` — programmatically clicks crispr-form's hidden submit button (index `nth`, defaults to 0)
+
+## Known quirks
+
+### Autocomplete and chiplist: use submitForm() to trigger errors
+Both fields use a hidden `display:none` `[formControlName]` anchor for validation. The visible input has no validators. Blurring the visible input does NOT touch the hidden control. Use `submitForm()` instead — it fires `ControlErrorsFormDirective.submit$` which forces all controls to display errors regardless of touched state.
+
+### submitForm() must use page.evaluate
+The hidden submit button is `display:none`, so Playwright pointer events can't reach it. `submitForm()` calls `document.querySelector('[data-testid="submit-trigger"]').click()` via `page.evaluate`.
+
+### touchSelect() requires Tab after Escape
+Pressing Escape dismisses the mat-select panel but leaves the trigger element focused. `ControlErrorsDirective` listens for `blur` events. Without the Tab press, no blur fires and the error never appears.
+
+### getError() targets the inner <p>, not the host element
+`tft-control-error` host elements are always in the DOM (even when empty). Autocomplete/chiplist render two of them (one per internal input). Targeting `p.tft-control-error` (the inner paragraph, only present when there is error text) avoids Playwright strict-mode failures.
+
+### Slider: plain <label>, not mat-label
+Slider is not inside a `mat-form-field`, so it uses a plain `<label>`. `getLabel()` (which queries `mat-label`) won't work — query `.locator('label')` on the slider host instead.
+
+### Slider: min/max are native HTML attributes
+Read `min`/`max` from `input[matSliderThumb]` native HTML attributes, not `aria-valuemin`/`aria-valuemax`.
+
+### Unit conversion: required errors are not testable
+The `displayValueControl` (visible input) is separate from the `[formControlName]` that holds validators. Validation errors are never wired to the visible input, so required error tests are not possible for this field type.
+
+## Field test factories
+
+Each factory registers Playwright `test()` calls conditioned on the config:
+
+| Factory | Config type | Tests generated |
+|---------|-------------|-----------------|
+| `testInputField` | `InputFieldConfig` | label, input type, placeholder, hint, required, min, max, maxLength |
+| `testTextareaField` | `TextareaFieldConfig` | label, hint, required |
+| `testCheckboxField` | `CheckboxFieldConfig` | label, requiredTrue error |
+| `testSelectField` | `SelectFieldConfig` | label, hint, options count, select option, required |
+| `testDatepickerField` | `DatepickerFieldConfig` | label, hint, toggle button, required |
+| `testSliderField` | `SliderFieldConfig` | renders, label, min, max |
+| `testAutocompleteField` | `AutocompleteFieldConfig` | label, hint, dropdown, select option, required (via submitForm) |
+| `testAutocompleteChiplistField` | `AutocompleteChiplistFieldConfig` | label, hint, type+see options, add chip, remove chip, minArrayLength error |
+| `testFileUploadField` | `FileUploadFieldConfig` | label, drop zone text, select button |
+| `testUnitConversionField` | `UnitConversionFieldConfig` | label, number input, unit select |
+| `testField` | `AnyFieldConfig` | dispatches to the correct factory above; skips non-control fields |

package/field-tests/autocomplete-chiplist.tests.d.ts

@@ -0,0 +1,10 @@
+import type { AutocompleteChiplistFieldConfig } from '@tft/crispr-forms/utils';
+/**
+ * Registers Playwright tests for an AUTOCOMPLETE_CHIPLIST field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ *
+ * Note: like autocomplete, errors require `submitForm()` rather than blur because
+ * the hidden `[formControlName]` anchor is what holds validators. Blurring the
+ * visible search input does not touch the hidden control.
+ */
+export declare function testAutocompleteChiplistField(config: AutocompleteChiplistFieldConfig): void;

package/field-tests/autocomplete-chiplist.tests.js

@@ -0,0 +1,51 @@
+import { test, expect } from '@playwright/test';
+import { getLabel, getHint, getError, getMatFormField, submitForm } from '../helpers/form.helpers';
+/**
+ * Registers Playwright tests for an AUTOCOMPLETE_CHIPLIST field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ *
+ * Note: like autocomplete, errors require `submitForm()` rather than blur because
+ * the hidden `[formControlName]` anchor is what holds validators. Blurring the
+ * visible search input does not touch the hidden control.
+ */
+export function testAutocompleteChiplistField(config) {
+    if (config.label) {
+        test('renders label', async ({ page }) => {
+            await expect(getLabel(page, config.controlName)).toHaveText(config.label);
+        });
+    }
+    if (config.hint) {
+        test('shows hint when untouched', async ({ page }) => {
+            await expect(getHint(page, config.controlName)).toBeVisible();
+        });
+    }
+    test('can type and see options', async ({ page }) => {
+        const searchInput = getMatFormField(page, config.controlName).locator('input[matInput]');
+        await searchInput.fill('Option');
+        const options = page.locator('mat-option');
+        await expect(options.first()).toBeVisible();
+    });
+    test('can add a chip by selecting an option', async ({ page }) => {
+        const searchInput = getMatFormField(page, config.controlName).locator('input[matInput]');
+        await searchInput.fill('Option A');
+        await page.locator('mat-option').filter({ hasText: 'Option A' }).click();
+        const chip = getMatFormField(page, config.controlName).locator('mat-chip-row').first();
+        await expect(chip).toContainText('Option A');
+    });
+    test('can remove a chip', async ({ page }) => {
+        const searchInput = getMatFormField(page, config.controlName).locator('input[matInput]');
+        await searchInput.fill('Option A');
+        await page.locator('mat-option').filter({ hasText: 'Option A' }).click();
+        const removeBtn = getMatFormField(page, config.controlName).locator('mat-chip-row mat-icon[matChipRemove]').first();
+        if (await removeBtn.isVisible()) {
+            await removeBtn.click();
+            const chips = getMatFormField(page, config.controlName).locator('mat-chip-row');
+            await expect(chips).toHaveCount(0);
+        }
+    });
+    test('shows error when not enough chips selected', async ({ page }) => {
+        await submitForm(page);
+        await expect(getError(page, config.controlName, 'autocomplete-chiplist')).toBeVisible();
+    });
+}
+//# sourceMappingURL=autocomplete-chiplist.tests.js.map

package/field-tests/autocomplete-chiplist.tests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-chiplist.tests.js","sourceRoot":"","sources":["../../../../libs/crispr-forms-testing/src/field-tests/autocomplete-chiplist.tests.ts"],"names":[],"mappings":"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","sourcesContent":["import { test, expect } from '@playwright/test';\nimport type { AutocompleteChiplistFieldConfig } from '@tft/crispr-forms/utils';\nimport { getLabel, getHint, getError, getMatFormField, submitForm } from '../helpers/form.helpers';\n\n/**\n * Registers Playwright tests for an AUTOCOMPLETE_CHIPLIST field config.\n * Call inside a `test.describe` block that has already navigated to the page.\n *\n * Note: like autocomplete, errors require `submitForm()` rather than blur because\n * the hidden `[formControlName]` anchor is what holds validators. Blurring the\n * visible search input does not touch the hidden control.\n */\nexport function testAutocompleteChiplistField(config: AutocompleteChiplistFieldConfig) {\n  if (config.label) {\n    test('renders label', async ({ page }) => {\n      await expect(getLabel(page, config.controlName)).toHaveText(config.label);\n    });\n  }\n\n  if (config.hint) {\n    test('shows hint when untouched', async ({ page }) => {\n      await expect(getHint(page, config.controlName)).toBeVisible();\n    });\n  }\n\n  test('can type and see options', async ({ page }) => {\n    const searchInput = getMatFormField(page, config.controlName).locator('input[matInput]');\n    await searchInput.fill('Option');\n    const options = page.locator('mat-option');\n    await expect(options.first()).toBeVisible();\n  });\n\n  test('can add a chip by selecting an option', async ({ page }) => {\n    const searchInput = getMatFormField(page, config.controlName).locator('input[matInput]');\n    await searchInput.fill('Option A');\n    await page.locator('mat-option').filter({ hasText: 'Option A' }).click();\n    const chip = getMatFormField(page, config.controlName).locator('mat-chip-row').first();\n    await expect(chip).toContainText('Option A');\n  });\n\n  test('can remove a chip', async ({ page }) => {\n    const searchInput = getMatFormField(page, config.controlName).locator('input[matInput]');\n    await searchInput.fill('Option A');\n    await page.locator('mat-option').filter({ hasText: 'Option A' }).click();\n    const removeBtn = getMatFormField(page, config.controlName).locator('mat-chip-row mat-icon[matChipRemove]').first();\n    if (await removeBtn.isVisible()) {\n      await removeBtn.click();\n      const chips = getMatFormField(page, config.controlName).locator('mat-chip-row');\n      await expect(chips).toHaveCount(0);\n    }\n  });\n\n  test('shows error when not enough chips selected', async ({ page }) => {\n    await submitForm(page);\n    await expect(getError(page, config.controlName, 'autocomplete-chiplist')).toBeVisible();\n  });\n}\n"]}

package/field-tests/autocomplete.tests.d.ts

@@ -0,0 +1,11 @@
+import type { AutocompleteFieldConfig } from '@tft/crispr-forms/utils';
+/**
+ * Registers Playwright tests for an AUTOCOMPLETE field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ *
+ * Note: errors are triggered via `submitForm()` rather than blur because the
+ * autocomplete uses a hidden `[formControlName]` anchor for validation — blurring
+ * the visible input does not touch the hidden control. `submitForm()` fires
+ * `ControlErrorsFormDirective.submit$` which forces all controls to show errors.
+ */
+export declare function testAutocompleteField(config: AutocompleteFieldConfig): void;

package/field-tests/autocomplete.tests.js

@@ -0,0 +1,42 @@
+import { test, expect } from '@playwright/test';
+import { Validators } from '@angular/forms';
+import { getLabel, getHint, getError, getAutocompleteInput, submitForm } from '../helpers/form.helpers';
+/**
+ * Registers Playwright tests for an AUTOCOMPLETE field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ *
+ * Note: errors are triggered via `submitForm()` rather than blur because the
+ * autocomplete uses a hidden `[formControlName]` anchor for validation — blurring
+ * the visible input does not touch the hidden control. `submitForm()` fires
+ * `ControlErrorsFormDirective.submit$` which forces all controls to show errors.
+ */
+export function testAutocompleteField(config) {
+    if (config.label) {
+        test('renders label', async ({ page }) => {
+            await expect(getLabel(page, config.controlName)).toHaveText(config.label);
+        });
+    }
+    if (config.hint) {
+        test('shows hint when untouched', async ({ page }) => {
+            await expect(getHint(page, config.controlName)).toBeVisible();
+        });
+    }
+    test('shows dropdown options when typing', async ({ page }) => {
+        await getAutocompleteInput(page, config.controlName).fill('Option');
+        const options = page.locator('mat-option');
+        await expect(options.first()).toBeVisible();
+    });
+    test('can select an autocomplete option', async ({ page }) => {
+        await getAutocompleteInput(page, config.controlName).fill('Option A');
+        await page.locator('mat-option').filter({ hasText: 'Option A' }).click();
+        await expect(getAutocompleteInput(page, config.controlName)).toHaveValue('Option A');
+    });
+    if (config.validators?.includes(Validators.required)) {
+        test('shows required error when form submitted empty', async ({ page }) => {
+            await getAutocompleteInput(page, config.controlName).fill('');
+            await submitForm(page);
+            await expect(getError(page, config.controlName, 'autocomplete')).toBeVisible();
+        });
+    }
+}
+//# sourceMappingURL=autocomplete.tests.js.map

package/field-tests/autocomplete.tests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.tests.js","sourceRoot":"","sources":["../../../../libs/crispr-forms-testing/src/field-tests/autocomplete.tests.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAExG;;;;;;;;GAQG;AACH,MAAM,UAAU,qBAAqB,CAAC,MAA+B;IACnE,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACvC,MAAM,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5E,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC;QAChB,IAAI,CAAC,2BAA2B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACnD,MAAM,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAChE,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,CAAC,oCAAoC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC5D,MAAM,oBAAoB,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpE,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC3C,MAAM,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,mCAAmC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC3D,MAAM,oBAAoB,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtE,MAAM,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;QACzE,MAAM,MAAM,CAAC,oBAAoB,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IACvF,CAAC,CAAC,CAAC;IAEH,IAAI,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;QACrD,IAAI,CAAC,gDAAgD,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACxE,MAAM,oBAAoB,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAC9D,MAAM,UAAU,CAAC,IAAI,CAAC,CAAC;YACvB,MAAM,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QACjF,CAAC,CAAC,CAAC;IACL,CAAC;AACH,CAAC","sourcesContent":["import { test, expect } from '@playwright/test';\nimport type { AutocompleteFieldConfig } from '@tft/crispr-forms/utils';\nimport { Validators } from '@angular/forms';\nimport { getLabel, getHint, getError, getAutocompleteInput, submitForm } from '../helpers/form.helpers';\n\n/**\n * Registers Playwright tests for an AUTOCOMPLETE field config.\n * Call inside a `test.describe` block that has already navigated to the page.\n *\n * Note: errors are triggered via `submitForm()` rather than blur because the\n * autocomplete uses a hidden `[formControlName]` anchor for validation — blurring\n * the visible input does not touch the hidden control. `submitForm()` fires\n * `ControlErrorsFormDirective.submit$` which forces all controls to show errors.\n */\nexport function testAutocompleteField(config: AutocompleteFieldConfig) {\n  if (config.label) {\n    test('renders label', async ({ page }) => {\n      await expect(getLabel(page, config.controlName)).toHaveText(config.label);\n    });\n  }\n\n  if (config.hint) {\n    test('shows hint when untouched', async ({ page }) => {\n      await expect(getHint(page, config.controlName)).toBeVisible();\n    });\n  }\n\n  test('shows dropdown options when typing', async ({ page }) => {\n    await getAutocompleteInput(page, config.controlName).fill('Option');\n    const options = page.locator('mat-option');\n    await expect(options.first()).toBeVisible();\n  });\n\n  test('can select an autocomplete option', async ({ page }) => {\n    await getAutocompleteInput(page, config.controlName).fill('Option A');\n    await page.locator('mat-option').filter({ hasText: 'Option A' }).click();\n    await expect(getAutocompleteInput(page, config.controlName)).toHaveValue('Option A');\n  });\n\n  if (config.validators?.includes(Validators.required)) {\n    test('shows required error when form submitted empty', async ({ page }) => {\n      await getAutocompleteInput(page, config.controlName).fill('');\n      await submitForm(page);\n      await expect(getError(page, config.controlName, 'autocomplete')).toBeVisible();\n    });\n  }\n}\n"]}

package/field-tests/checkbox.tests.d.ts

@@ -0,0 +1,6 @@
+import type { CheckboxFieldConfig } from '@tft/crispr-forms/utils';
+/**
+ * Registers Playwright tests for a CHECKBOX field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ */
+export declare function testCheckboxField(config: CheckboxFieldConfig): void;

package/field-tests/checkbox.tests.js

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test';
+import { Validators } from '@angular/forms';
+import { getCheckbox, getError } from '../helpers/form.helpers';
+/**
+ * Registers Playwright tests for a CHECKBOX field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ */
+export function testCheckboxField(config) {
+    test('renders label', async ({ page }) => {
+        const label = getCheckbox(page, config.controlName).locator('.mdc-label');
+        await expect(label).toContainText(config.label);
+    });
+    if (config.validators?.includes(Validators.requiredTrue)) {
+        test('shows error when unchecked and blurred', async ({ page }) => {
+            await getCheckbox(page, config.controlName).click();
+            await getCheckbox(page, config.controlName).click();
+            await page.keyboard.press('Tab');
+            await expect(getError(page, config.controlName, 'checkbox')).toBeVisible();
+        });
+        test('no error when checked', async ({ page }) => {
+            await getCheckbox(page, config.controlName).click();
+            await page.keyboard.press('Tab');
+            await expect(getError(page, config.controlName, 'checkbox')).not.toBeVisible();
+        });
+    }
+}
+//# sourceMappingURL=checkbox.tests.js.map

package/field-tests/checkbox.tests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.tests.js","sourceRoot":"","sources":["../../../../libs/crispr-forms-testing/src/field-tests/checkbox.tests.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEhE;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAAC,MAA2B;IAC3D,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACvC,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC1E,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC,CAAC,CAAC;IAEH,IAAI,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,CAAC;QACzD,IAAI,CAAC,wCAAwC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YAChE,MAAM,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,EAAE,CAAC;YACpD,MAAM,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,EAAE,CAAC;YACpD,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACjC,MAAM,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC7E,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,uBAAuB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YAC/C,MAAM,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,EAAE,CAAC;YACpD,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACjC,MAAM,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;QACjF,CAAC,CAAC,CAAC;IACL,CAAC;AACH,CAAC","sourcesContent":["import { test, expect } from '@playwright/test';\nimport type { CheckboxFieldConfig } from '@tft/crispr-forms/utils';\nimport { Validators } from '@angular/forms';\nimport { getCheckbox, getError } from '../helpers/form.helpers';\n\n/**\n * Registers Playwright tests for a CHECKBOX field config.\n * Call inside a `test.describe` block that has already navigated to the page.\n */\nexport function testCheckboxField(config: CheckboxFieldConfig) {\n  test('renders label', async ({ page }) => {\n    const label = getCheckbox(page, config.controlName).locator('.mdc-label');\n    await expect(label).toContainText(config.label);\n  });\n\n  if (config.validators?.includes(Validators.requiredTrue)) {\n    test('shows error when unchecked and blurred', async ({ page }) => {\n      await getCheckbox(page, config.controlName).click();\n      await getCheckbox(page, config.controlName).click();\n      await page.keyboard.press('Tab');\n      await expect(getError(page, config.controlName, 'checkbox')).toBeVisible();\n    });\n\n    test('no error when checked', async ({ page }) => {\n      await getCheckbox(page, config.controlName).click();\n      await page.keyboard.press('Tab');\n      await expect(getError(page, config.controlName, 'checkbox')).not.toBeVisible();\n    });\n  }\n}\n"]}

package/field-tests/datepicker.tests.d.ts

@@ -0,0 +1,6 @@
+import type { DatepickerFieldConfig } from '@tft/crispr-forms/utils';
+/**
+ * Registers Playwright tests for a DATEPICKER field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ */
+export declare function testDatepickerField(config: DatepickerFieldConfig): void;

package/field-tests/datepicker.tests.js

@@ -0,0 +1,30 @@
+import { test, expect } from '@playwright/test';
+import { Validators } from '@angular/forms';
+import { getLabel, getHint, getError, getMatFormField, touchDatepicker } from '../helpers/form.helpers';
+/**
+ * Registers Playwright tests for a DATEPICKER field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ */
+export function testDatepickerField(config) {
+    if (config.label) {
+        test('renders label', async ({ page }) => {
+            await expect(getLabel(page, config.controlName)).toHaveText(config.label);
+        });
+    }
+    if (config.hint) {
+        test('shows hint when untouched', async ({ page }) => {
+            await expect(getHint(page, config.controlName)).toBeVisible();
+        });
+    }
+    test('renders datepicker toggle button', async ({ page }) => {
+        const toggle = getMatFormField(page, config.controlName).locator('mat-datepicker-toggle');
+        await expect(toggle).toBeVisible();
+    });
+    if (config.validators?.includes(Validators.required)) {
+        test('shows required error when blurred without date', async ({ page }) => {
+            await touchDatepicker(page, config.controlName);
+            await expect(getError(page, config.controlName, 'datepicker')).toBeVisible();
+        });
+    }
+}
+//# sourceMappingURL=datepicker.tests.js.map

package/field-tests/datepicker.tests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.tests.js","sourceRoot":"","sources":["../../../../libs/crispr-forms-testing/src/field-tests/datepicker.tests.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAExG;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,MAA6B;IAC/D,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACvC,MAAM,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5E,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC;QAChB,IAAI,CAAC,2BAA2B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACnD,MAAM,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAChE,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,CAAC,kCAAkC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC1D,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC;QAC1F,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,IAAI,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;QACrD,IAAI,CAAC,gDAAgD,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACxE,MAAM,eAAe,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;YAChD,MAAM,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC/E,CAAC,CAAC,CAAC;IACL,CAAC;AACH,CAAC","sourcesContent":["import { test, expect } from '@playwright/test';\nimport type { DatepickerFieldConfig } from '@tft/crispr-forms/utils';\nimport { Validators } from '@angular/forms';\nimport { getLabel, getHint, getError, getMatFormField, touchDatepicker } from '../helpers/form.helpers';\n\n/**\n * Registers Playwright tests for a DATEPICKER field config.\n * Call inside a `test.describe` block that has already navigated to the page.\n */\nexport function testDatepickerField(config: DatepickerFieldConfig) {\n  if (config.label) {\n    test('renders label', async ({ page }) => {\n      await expect(getLabel(page, config.controlName)).toHaveText(config.label);\n    });\n  }\n\n  if (config.hint) {\n    test('shows hint when untouched', async ({ page }) => {\n      await expect(getHint(page, config.controlName)).toBeVisible();\n    });\n  }\n\n  test('renders datepicker toggle button', async ({ page }) => {\n    const toggle = getMatFormField(page, config.controlName).locator('mat-datepicker-toggle');\n    await expect(toggle).toBeVisible();\n  });\n\n  if (config.validators?.includes(Validators.required)) {\n    test('shows required error when blurred without date', async ({ page }) => {\n      await touchDatepicker(page, config.controlName);\n      await expect(getError(page, config.controlName, 'datepicker')).toBeVisible();\n    });\n  }\n}\n"]}

package/field-tests/field-test-factory.d.ts

@@ -0,0 +1,21 @@
+import type { AnyFieldConfig } from '@tft/crispr-forms/utils';
+/**
+ * Registers a `test.describe` block for a field config, automatically selecting
+ * the correct test suite based on `controlType`.
+ *
+ * Non-control fields (heading, divider, button) are skipped silently.
+ *
+ * @example
+ * ```ts
+ * import { testField } from '@tft/crispr-forms-testing';
+ * import { myFormConfig } from './my-form.config';
+ *
+ * test.describe('My Form', () => {
+ *   test.beforeEach(async ({ page }) => page.goto('/my-form'));
+ *   for (const field of myFormConfig.fields) {
+ *     testField(field);
+ *   }
+ * });
+ * ```
+ */
+export declare function testField(config: AnyFieldConfig): void;

package/field-tests/field-test-factory.js

@@ -0,0 +1,69 @@
+import { test } from '@playwright/test';
+import { testInputField } from './input.tests';
+import { testTextareaField } from './textarea.tests';
+import { testCheckboxField } from './checkbox.tests';
+import { testSelectField } from './select.tests';
+import { testSliderField } from './slider.tests';
+import { testDatepickerField } from './datepicker.tests';
+import { testAutocompleteField } from './autocomplete.tests';
+import { testAutocompleteChiplistField } from './autocomplete-chiplist.tests';
+import { testFileUploadField } from './file-upload.tests';
+import { testUnitConversionField } from './unit-conversion.tests';
+/**
+ * Registers a `test.describe` block for a field config, automatically selecting
+ * the correct test suite based on `controlType`.
+ *
+ * Non-control fields (heading, divider, button) are skipped silently.
+ *
+ * @example
+ * ```ts
+ * import { testField } from '@tft/crispr-forms-testing';
+ * import { myFormConfig } from './my-form.config';
+ *
+ * test.describe('My Form', () => {
+ *   test.beforeEach(async ({ page }) => page.goto('/my-form'));
+ *   for (const field of myFormConfig.fields) {
+ *     testField(field);
+ *   }
+ * });
+ * ```
+ */
+export function testField(config) {
+    if (!('controlName' in config))
+        return;
+    test.describe(config.controlName, () => {
+        switch (config.controlType) {
+            case 'input':
+                testInputField(config);
+                break;
+            case 'textarea':
+                testTextareaField(config);
+                break;
+            case 'checkbox':
+                testCheckboxField(config);
+                break;
+            case 'select':
+                testSelectField(config);
+                break;
+            case 'slider':
+                testSliderField(config);
+                break;
+            case 'datepicker':
+                testDatepickerField(config);
+                break;
+            case 'autocomplete':
+                testAutocompleteField(config);
+                break;
+            case 'autocompleteChiplist':
+                testAutocompleteChiplistField(config);
+                break;
+            case 'fileUpload':
+                testFileUploadField(config);
+                break;
+            case 'unitConversion':
+                testUnitConversionField(config);
+                break;
+        }
+    });
+}
+//# sourceMappingURL=field-test-factory.js.map

package/field-tests/field-test-factory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-test-factory.js","sourceRoot":"","sources":["../../../../libs/crispr-forms-testing/src/field-tests/field-test-factory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAcxC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,6BAA6B,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAElE;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,SAAS,CAAC,MAAsB;IAC9C,IAAI,CAAC,CAAC,aAAa,IAAI,MAAM,CAAC;QAAE,OAAO;IAEvC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,GAAG,EAAE;QACrC,QAAQ,MAAM,CAAC,WAAW,EAAE,CAAC;YAC3B,KAAK,OAAO;gBACV,cAAc,CAAC,MAA0B,CAAC,CAAC;gBAC3C,MAAM;YACR,KAAK,UAAU;gBACb,iBAAiB,CAAC,MAA6B,CAAC,CAAC;gBACjD,MAAM;YACR,KAAK,UAAU;gBACb,iBAAiB,CAAC,MAA6B,CAAC,CAAC;gBACjD,MAAM;YACR,KAAK,QAAQ;gBACX,eAAe,CAAC,MAA2B,CAAC,CAAC;gBAC7C,MAAM;YACR,KAAK,QAAQ;gBACX,eAAe,CAAC,MAA2B,CAAC,CAAC;gBAC7C,MAAM;YACR,KAAK,YAAY;gBACf,mBAAmB,CAAC,MAA+B,CAAC,CAAC;gBACrD,MAAM;YACR,KAAK,cAAc;gBACjB,qBAAqB,CAAC,MAAiC,CAAC,CAAC;gBACzD,MAAM;YACR,KAAK,sBAAsB;gBACzB,6BAA6B,CAAC,MAAyC,CAAC,CAAC;gBACzE,MAAM;YACR,KAAK,YAAY;gBACf,mBAAmB,CAAC,MAA+B,CAAC,CAAC;gBACrD,MAAM;YACR,KAAK,gBAAgB;gBACnB,uBAAuB,CAAC,MAAmC,CAAC,CAAC;gBAC7D,MAAM;QACV,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport type {\n  AnyFieldConfig,\n  InputFieldConfig,\n  TextareaFieldConfig,\n  CheckboxFieldConfig,\n  SelectFieldConfig,\n  SliderFieldConfig,\n  DatepickerFieldConfig,\n  AutocompleteFieldConfig,\n  AutocompleteChiplistFieldConfig,\n  FileUploadFieldConfig,\n  UnitConversionFieldConfig,\n} from '@tft/crispr-forms/utils';\nimport { testInputField } from './input.tests';\nimport { testTextareaField } from './textarea.tests';\nimport { testCheckboxField } from './checkbox.tests';\nimport { testSelectField } from './select.tests';\nimport { testSliderField } from './slider.tests';\nimport { testDatepickerField } from './datepicker.tests';\nimport { testAutocompleteField } from './autocomplete.tests';\nimport { testAutocompleteChiplistField } from './autocomplete-chiplist.tests';\nimport { testFileUploadField } from './file-upload.tests';\nimport { testUnitConversionField } from './unit-conversion.tests';\n\n/**\n * Registers a `test.describe` block for a field config, automatically selecting\n * the correct test suite based on `controlType`.\n *\n * Non-control fields (heading, divider, button) are skipped silently.\n *\n * @example\n * ```ts\n * import { testField } from '@tft/crispr-forms-testing';\n * import { myFormConfig } from './my-form.config';\n *\n * test.describe('My Form', () => {\n *   test.beforeEach(async ({ page }) => page.goto('/my-form'));\n *   for (const field of myFormConfig.fields) {\n *     testField(field);\n *   }\n * });\n * ```\n */\nexport function testField(config: AnyFieldConfig) {\n  if (!('controlName' in config)) return;\n\n  test.describe(config.controlName, () => {\n    switch (config.controlType) {\n      case 'input':\n        testInputField(config as InputFieldConfig);\n        break;\n      case 'textarea':\n        testTextareaField(config as TextareaFieldConfig);\n        break;\n      case 'checkbox':\n        testCheckboxField(config as CheckboxFieldConfig);\n        break;\n      case 'select':\n        testSelectField(config as SelectFieldConfig);\n        break;\n      case 'slider':\n        testSliderField(config as SliderFieldConfig);\n        break;\n      case 'datepicker':\n        testDatepickerField(config as DatepickerFieldConfig);\n        break;\n      case 'autocomplete':\n        testAutocompleteField(config as AutocompleteFieldConfig);\n        break;\n      case 'autocompleteChiplist':\n        testAutocompleteChiplistField(config as AutocompleteChiplistFieldConfig);\n        break;\n      case 'fileUpload':\n        testFileUploadField(config as FileUploadFieldConfig);\n        break;\n      case 'unitConversion':\n        testUnitConversionField(config as UnitConversionFieldConfig);\n        break;\n    }\n  });\n}\n"]}

package/field-tests/file-upload.tests.d.ts

@@ -0,0 +1,6 @@
+import type { FileUploadFieldConfig } from '@tft/crispr-forms/utils';
+/**
+ * Registers Playwright tests for a FILE_UPLOAD field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ */
+export declare function testFileUploadField(config: FileUploadFieldConfig): void;

package/field-tests/file-upload.tests.js

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test';
+import { getLabel, getMatFormField } from '../helpers/form.helpers';
+/**
+ * Registers Playwright tests for a FILE_UPLOAD field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ */
+export function testFileUploadField(config) {
+    if (config.label) {
+        test('renders label', async ({ page }) => {
+            await expect(getLabel(page, config.controlName)).toHaveText(config.label);
+        });
+    }
+    test('shows drop zone text', async ({ page }) => {
+        if (config.dropZoneText) {
+            const dropZone = getMatFormField(page, config.controlName).locator('.drop-info');
+            await expect(dropZone).toContainText(config.dropZoneText);
+        }
+    });
+    test('shows select files button', async ({ page }) => {
+        const button = getMatFormField(page, config.controlName).locator('button');
+        await expect(button).toBeVisible();
+        if (config.selectButtonText) {
+            await expect(button).toContainText(config.selectButtonText);
+        }
+    });
+}
+//# sourceMappingURL=file-upload.tests.js.map

package/field-tests/file-upload.tests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.tests.js","sourceRoot":"","sources":["../../../../libs/crispr-forms-testing/src/field-tests/file-upload.tests.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEpE;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,MAA6B;IAC/D,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACvC,MAAM,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5E,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC9C,IAAI,MAAM,CAAC,YAAY,EAAE,CAAC;YACxB,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;YACjF,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QAC5D,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,2BAA2B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACnD,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QAC3E,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC;QACnC,IAAI,MAAM,CAAC,gBAAgB,EAAE,CAAC;YAC5B,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { test, expect } from '@playwright/test';\nimport type { FileUploadFieldConfig } from '@tft/crispr-forms/utils';\nimport { getLabel, getMatFormField } from '../helpers/form.helpers';\n\n/**\n * Registers Playwright tests for a FILE_UPLOAD field config.\n * Call inside a `test.describe` block that has already navigated to the page.\n */\nexport function testFileUploadField(config: FileUploadFieldConfig) {\n  if (config.label) {\n    test('renders label', async ({ page }) => {\n      await expect(getLabel(page, config.controlName)).toHaveText(config.label);\n    });\n  }\n\n  test('shows drop zone text', async ({ page }) => {\n    if (config.dropZoneText) {\n      const dropZone = getMatFormField(page, config.controlName).locator('.drop-info');\n      await expect(dropZone).toContainText(config.dropZoneText);\n    }\n  });\n\n  test('shows select files button', async ({ page }) => {\n    const button = getMatFormField(page, config.controlName).locator('button');\n    await expect(button).toBeVisible();\n    if (config.selectButtonText) {\n      await expect(button).toContainText(config.selectButtonText);\n    }\n  });\n}\n"]}

package/field-tests/input.tests.d.ts

@@ -0,0 +1,15 @@
+import type { InputFieldConfig } from '@tft/crispr-forms/utils';
+/**
+ * Registers Playwright tests for an INPUT field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ *
+ * Tests generated based on config:
+ * - Always: renders label, has correct input type
+ * - If `placeholder`: renders placeholder attribute
+ * - If `hint`: shows hint when untouched
+ * - If `Validators.required`: shows required error on blur
+ * - If `min`: validates min boundary
+ * - If `max`: validates max boundary
+ * - If `maxLength`: enforces maxLength attribute
+ */
+export declare function testInputField(config: InputFieldConfig): void;

package/field-tests/input.tests.js

@@ -0,0 +1,73 @@
+import { test, expect } from '@playwright/test';
+import { Validators } from '@angular/forms';
+import { getInput, getError, getLabel, getHint, touchInput } from '../helpers/form.helpers';
+/**
+ * Registers Playwright tests for an INPUT field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ *
+ * Tests generated based on config:
+ * - Always: renders label, has correct input type
+ * - If `placeholder`: renders placeholder attribute
+ * - If `hint`: shows hint when untouched
+ * - If `Validators.required`: shows required error on blur
+ * - If `min`: validates min boundary
+ * - If `max`: validates max boundary
+ * - If `maxLength`: enforces maxLength attribute
+ */
+export function testInputField(config) {
+    test('renders label', async ({ page }) => {
+        await expect(getLabel(page, config.controlName)).toHaveText(config.label);
+    });
+    test(`has input type "${config.inputType ?? 'text'}"`, async ({ page }) => {
+        await expect(getInput(page, config.controlName)).toHaveAttribute('type', config.inputType ?? 'text');
+    });
+    if (config.placeholder) {
+        test('renders placeholder', async ({ page }) => {
+            await expect(getInput(page, config.controlName)).toHaveAttribute('placeholder', config.placeholder);
+        });
+    }
+    if (config.hint) {
+        test('shows hint when untouched', async ({ page }) => {
+            await expect(getHint(page, config.controlName)).toBeVisible();
+        });
+    }
+    if (config.validators?.includes(Validators.required)) {
+        test('shows required error when blurred empty', async ({ page }) => {
+            await touchInput(page, config.controlName);
+            await expect(getError(page, config.controlName)).toBeVisible();
+        });
+    }
+    if (config.min !== undefined) {
+        test(`shows error when value is below min (${config.min})`, async ({ page }) => {
+            await getInput(page, config.controlName).fill(String(config.min - 1));
+            await touchInput(page, config.controlName);
+            await expect(getError(page, config.controlName)).toBeVisible();
+        });
+        test(`accepts value at min boundary (${config.min})`, async ({ page }) => {
+            await getInput(page, config.controlName).fill(String(config.min));
+            await touchInput(page, config.controlName);
+            await expect(getError(page, config.controlName)).not.toBeVisible();
+        });
+    }
+    if (config.max !== undefined) {
+        test(`shows error when value exceeds max (${config.max})`, async ({ page }) => {
+            await getInput(page, config.controlName).fill(String(config.max + 1));
+            await touchInput(page, config.controlName);
+            await expect(getError(page, config.controlName)).toBeVisible();
+        });
+        test(`accepts value at max boundary (${config.max})`, async ({ page }) => {
+            await getInput(page, config.controlName).fill(String(config.max));
+            await touchInput(page, config.controlName);
+            await expect(getError(page, config.controlName)).not.toBeVisible();
+        });
+    }
+    if (config.maxLength !== undefined) {
+        test(`enforces maxLength of ${config.maxLength}`, async ({ page }) => {
+            const overLimit = 'a'.repeat(config.maxLength + 1);
+            await getInput(page, config.controlName).fill(overLimit);
+            const value = await getInput(page, config.controlName).inputValue();
+            expect(value.length).toBeLessThanOrEqual(config.maxLength);
+        });
+    }
+}
+//# sourceMappingURL=input.tests.js.map

package/field-tests/input.tests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.tests.js","sourceRoot":"","sources":["../../../../libs/crispr-forms-testing/src/field-tests/input.tests.ts"],"names":[],"mappings":"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","sourcesContent":["import { test, expect } from '@playwright/test';\nimport type { InputFieldConfig } from '@tft/crispr-forms/utils';\nimport { Validators } from '@angular/forms';\nimport { getInput, getError, getLabel, getHint, touchInput } from '../helpers/form.helpers';\n\n/**\n * Registers Playwright tests for an INPUT field config.\n * Call inside a `test.describe` block that has already navigated to the page.\n *\n * Tests generated based on config:\n * - Always: renders label, has correct input type\n * - If `placeholder`: renders placeholder attribute\n * - If `hint`: shows hint when untouched\n * - If `Validators.required`: shows required error on blur\n * - If `min`: validates min boundary\n * - If `max`: validates max boundary\n * - If `maxLength`: enforces maxLength attribute\n */\nexport function testInputField(config: InputFieldConfig) {\n  test('renders label', async ({ page }) => {\n    await expect(getLabel(page, config.controlName)).toHaveText(config.label);\n  });\n\n  test(`has input type \"${config.inputType ?? 'text'}\"`, async ({ page }) => {\n    await expect(getInput(page, config.controlName)).toHaveAttribute('type', config.inputType ?? 'text');\n  });\n\n  if (config.placeholder) {\n    test('renders placeholder', async ({ page }) => {\n      await expect(getInput(page, config.controlName)).toHaveAttribute('placeholder', config.placeholder);\n    });\n  }\n\n  if (config.hint) {\n    test('shows hint when untouched', async ({ page }) => {\n      await expect(getHint(page, config.controlName)).toBeVisible();\n    });\n  }\n\n  if (config.validators?.includes(Validators.required)) {\n    test('shows required error when blurred empty', async ({ page }) => {\n      await touchInput(page, config.controlName);\n      await expect(getError(page, config.controlName)).toBeVisible();\n    });\n  }\n\n  if (config.min !== undefined) {\n    test(`shows error when value is below min (${config.min})`, async ({ page }) => {\n      await getInput(page, config.controlName).fill(String(config.min - 1));\n      await touchInput(page, config.controlName);\n      await expect(getError(page, config.controlName)).toBeVisible();\n    });\n\n    test(`accepts value at min boundary (${config.min})`, async ({ page }) => {\n      await getInput(page, config.controlName).fill(String(config.min));\n      await touchInput(page, config.controlName);\n      await expect(getError(page, config.controlName)).not.toBeVisible();\n    });\n  }\n\n  if (config.max !== undefined) {\n    test(`shows error when value exceeds max (${config.max})`, async ({ page }) => {\n      await getInput(page, config.controlName).fill(String(config.max + 1));\n      await touchInput(page, config.controlName);\n      await expect(getError(page, config.controlName)).toBeVisible();\n    });\n\n    test(`accepts value at max boundary (${config.max})`, async ({ page }) => {\n      await getInput(page, config.controlName).fill(String(config.max));\n      await touchInput(page, config.controlName);\n      await expect(getError(page, config.controlName)).not.toBeVisible();\n    });\n  }\n\n  if (config.maxLength !== undefined) {\n    test(`enforces maxLength of ${config.maxLength}`, async ({ page }) => {\n      const overLimit = 'a'.repeat(config.maxLength + 1);\n      await getInput(page, config.controlName).fill(overLimit);\n      const value = await getInput(page, config.controlName).inputValue();\n      expect(value.length).toBeLessThanOrEqual(config.maxLength);\n    });\n  }\n}\n"]}

package/field-tests/select.tests.d.ts

@@ -0,0 +1,6 @@
+import type { SelectFieldConfig } from '@tft/crispr-forms/utils';
+/**
+ * Registers Playwright tests for a SELECT field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ */
+export declare function testSelectField(config: SelectFieldConfig): void;

package/field-tests/select.tests.js

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+import { Validators } from '@angular/forms';
+import { getLabel, getHint, getError, getMatSelect, openSelect, selectOption, touchSelect } from '../helpers/form.helpers';
+/**
+ * Registers Playwright tests for a SELECT field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ */
+export function testSelectField(config) {
+    if (config.label) {
+        test('renders label', async ({ page }) => {
+            await expect(getLabel(page, config.controlName)).toHaveText(config.label);
+        });
+    }
+    if (config.hint) {
+        test('shows hint when untouched', async ({ page }) => {
+            await expect(getHint(page, config.controlName)).toBeVisible();
+        });
+    }
+    if (Array.isArray(config.options)) {
+        test('shows all options when opened', async ({ page }) => {
+            await openSelect(page, config.controlName);
+            const options = page.locator('mat-option');
+            await expect(options).toHaveCount(config.options.length);
+            await page.keyboard.press('Escape');
+        });
+        test('can select an option', async ({ page }) => {
+            const firstOption = config.options[0];
+            await selectOption(page, config.controlName, firstOption.label);
+            await expect(getMatSelect(page, config.controlName)).toContainText(firstOption.label);
+        });
+    }
+    if (config.validators?.includes(Validators.required)) {
+        test('shows required error when blurred without selection', async ({ page }) => {
+            await touchSelect(page, config.controlName);
+            await expect(getError(page, config.controlName, 'select')).toBeVisible();
+        });
+    }
+}
+//# sourceMappingURL=select.tests.js.map

package/field-tests/select.tests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.tests.js","sourceRoot":"","sources":["../../../../libs/crispr-forms-testing/src/field-tests/select.tests.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3H;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,MAAyB;IACvD,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACvC,MAAM,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5E,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC;QAChB,IAAI,CAAC,2BAA2B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACnD,MAAM,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAChE,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC;QAClC,IAAI,CAAC,+BAA+B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACvD,MAAM,UAAU,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;YAC3C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;YAC3C,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAE,MAAM,CAAC,OAA0B,CAAC,MAAM,CAAC,CAAC;YAC7E,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YAC9C,MAAM,WAAW,GAAI,MAAM,CAAC,OAAoD,CAAC,CAAC,CAAC,CAAC;YACpF,MAAM,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;YAChE,MAAM,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACxF,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;QACrD,IAAI,CAAC,qDAAqD,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YAC7E,MAAM,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;YAC5C,MAAM,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC3E,CAAC,CAAC,CAAC;IACL,CAAC;AACH,CAAC","sourcesContent":["import { test, expect } from '@playwright/test';\nimport type { SelectFieldConfig, SelectOption } from '@tft/crispr-forms/utils';\nimport { Validators } from '@angular/forms';\nimport { getLabel, getHint, getError, getMatSelect, openSelect, selectOption, touchSelect } from '../helpers/form.helpers';\n\n/**\n * Registers Playwright tests for a SELECT field config.\n * Call inside a `test.describe` block that has already navigated to the page.\n */\nexport function testSelectField(config: SelectFieldConfig) {\n  if (config.label) {\n    test('renders label', async ({ page }) => {\n      await expect(getLabel(page, config.controlName)).toHaveText(config.label);\n    });\n  }\n\n  if (config.hint) {\n    test('shows hint when untouched', async ({ page }) => {\n      await expect(getHint(page, config.controlName)).toBeVisible();\n    });\n  }\n\n  if (Array.isArray(config.options)) {\n    test('shows all options when opened', async ({ page }) => {\n      await openSelect(page, config.controlName);\n      const options = page.locator('mat-option');\n      await expect(options).toHaveCount((config.options as SelectOption[]).length);\n      await page.keyboard.press('Escape');\n    });\n\n    test('can select an option', async ({ page }) => {\n      const firstOption = (config.options as Array<{ label: string; value: unknown }>)[0];\n      await selectOption(page, config.controlName, firstOption.label);\n      await expect(getMatSelect(page, config.controlName)).toContainText(firstOption.label);\n    });\n  }\n\n  if (config.validators?.includes(Validators.required)) {\n    test('shows required error when blurred without selection', async ({ page }) => {\n      await touchSelect(page, config.controlName);\n      await expect(getError(page, config.controlName, 'select')).toBeVisible();\n    });\n  }\n}\n"]}

package/field-tests/slider.tests.d.ts

@@ -0,0 +1,13 @@
+import type { SliderFieldConfig } from '@tft/crispr-forms/utils';
+/**
+ * Registers Playwright tests for a SLIDER field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ *
+ * Note: slider uses a plain `<label>` (not `<mat-label>`) because it is not
+ * rendered inside a `mat-form-field`. The `data-testid` is on the `<mat-slider>`
+ * element itself.
+ *
+ * Note: `min`/`max` are read from the native HTML attributes on `input[matSliderThumb]`,
+ * not from `aria-valuemin`/`aria-valuemax`.
+ */
+export declare function testSliderField(config: SliderFieldConfig): void;

package/field-tests/slider.tests.js

@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test';
+/**
+ * Registers Playwright tests for a SLIDER field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ *
+ * Note: slider uses a plain `<label>` (not `<mat-label>`) because it is not
+ * rendered inside a `mat-form-field`. The `data-testid` is on the `<mat-slider>`
+ * element itself.
+ *
+ * Note: `min`/`max` are read from the native HTML attributes on `input[matSliderThumb]`,
+ * not from `aria-valuemin`/`aria-valuemax`.
+ */
+export function testSliderField(config) {
+    test('renders slider', async ({ page }) => {
+        const slider = page.locator(`[data-testid="${config.controlName}"]`);
+        await expect(slider).toBeVisible();
+    });
+    if (config.label) {
+        test('renders label', async ({ page }) => {
+            const sliderHost = page.locator(`crispr-slider-field:has([data-testid="${config.controlName}"])`);
+            await expect(sliderHost.locator('label')).toContainText(config.label);
+        });
+    }
+    if (config.min !== undefined) {
+        test(`has correct min value (${config.min})`, async ({ page }) => {
+            const thumb = page.locator(`[data-testid="${config.controlName}"] input`);
+            await expect(thumb).toHaveAttribute('min', String(config.min));
+        });
+    }
+    if (config.max !== undefined) {
+        test(`has correct max value (${config.max})`, async ({ page }) => {
+            const thumb = page.locator(`[data-testid="${config.controlName}"] input`);
+            await expect(thumb).toHaveAttribute('max', String(config.max));
+        });
+    }
+}
+//# sourceMappingURL=slider.tests.js.map

package/field-tests/slider.tests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.tests.js","sourceRoot":"","sources":["../../../../libs/crispr-forms-testing/src/field-tests/slider.tests.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAGhD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,eAAe,CAAC,MAAyB;IACvD,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACxC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,MAAM,CAAC,WAAW,IAAI,CAAC,CAAC;QACrE,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACvC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,yCAAyC,MAAM,CAAC,WAAW,KAAK,CAAC,CAAC;YAClG,MAAM,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACxE,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,MAAM,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;QAC7B,IAAI,CAAC,0BAA0B,MAAM,CAAC,GAAG,GAAG,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YAC/D,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,MAAM,CAAC,WAAW,UAAU,CAAC,CAAC;YAC1E,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;QACjE,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,MAAM,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;QAC7B,IAAI,CAAC,0BAA0B,MAAM,CAAC,GAAG,GAAG,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YAC/D,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,MAAM,CAAC,WAAW,UAAU,CAAC,CAAC;YAC1E,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;QACjE,CAAC,CAAC,CAAC;IACL,CAAC;AACH,CAAC","sourcesContent":["import { test, expect } from '@playwright/test';\nimport type { SliderFieldConfig } from '@tft/crispr-forms/utils';\n\n/**\n * Registers Playwright tests for a SLIDER field config.\n * Call inside a `test.describe` block that has already navigated to the page.\n *\n * Note: slider uses a plain `<label>` (not `<mat-label>`) because it is not\n * rendered inside a `mat-form-field`. The `data-testid` is on the `<mat-slider>`\n * element itself.\n *\n * Note: `min`/`max` are read from the native HTML attributes on `input[matSliderThumb]`,\n * not from `aria-valuemin`/`aria-valuemax`.\n */\nexport function testSliderField(config: SliderFieldConfig) {\n  test('renders slider', async ({ page }) => {\n    const slider = page.locator(`[data-testid=\"${config.controlName}\"]`);\n    await expect(slider).toBeVisible();\n  });\n\n  if (config.label) {\n    test('renders label', async ({ page }) => {\n      const sliderHost = page.locator(`crispr-slider-field:has([data-testid=\"${config.controlName}\"])`);\n      await expect(sliderHost.locator('label')).toContainText(config.label);\n    });\n  }\n\n  if (config.min !== undefined) {\n    test(`has correct min value (${config.min})`, async ({ page }) => {\n      const thumb = page.locator(`[data-testid=\"${config.controlName}\"] input`);\n      await expect(thumb).toHaveAttribute('min', String(config.min));\n    });\n  }\n\n  if (config.max !== undefined) {\n    test(`has correct max value (${config.max})`, async ({ page }) => {\n      const thumb = page.locator(`[data-testid=\"${config.controlName}\"] input`);\n      await expect(thumb).toHaveAttribute('max', String(config.max));\n    });\n  }\n}\n"]}

package/field-tests/textarea.tests.d.ts

@@ -0,0 +1,6 @@
+import type { TextareaFieldConfig } from '@tft/crispr-forms/utils';
+/**
+ * Registers Playwright tests for a TEXTAREA field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ */
+export declare function testTextareaField(config: TextareaFieldConfig): void;

package/field-tests/textarea.tests.js

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test';
+import { Validators } from '@angular/forms';
+import { getMatFormField, getError, getLabel, getHint } from '../helpers/form.helpers';
+/**
+ * Registers Playwright tests for a TEXTAREA field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ */
+export function testTextareaField(config) {
+    if (config.label) {
+        test('renders label', async ({ page }) => {
+            await expect(getLabel(page, config.controlName)).toHaveText(config.label);
+        });
+    }
+    if (config.hint) {
+        test('shows hint when untouched', async ({ page }) => {
+            await expect(getHint(page, config.controlName)).toBeVisible();
+        });
+    }
+    if (config.validators?.includes(Validators.required)) {
+        test('shows required error when blurred empty', async ({ page }) => {
+            const textarea = getMatFormField(page, config.controlName).locator('textarea');
+            await textarea.click();
+            await page.keyboard.press('Tab');
+            await expect(getError(page, config.controlName, 'textarea')).toBeVisible();
+        });
+    }
+}
+//# sourceMappingURL=textarea.tests.js.map

package/field-tests/textarea.tests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.tests.js","sourceRoot":"","sources":["../../../../libs/crispr-forms-testing/src/field-tests/textarea.tests.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAEvF;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAAC,MAA2B;IAC3D,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACvC,MAAM,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5E,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC;QAChB,IAAI,CAAC,2BAA2B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACnD,MAAM,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAChE,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;QACrD,IAAI,CAAC,yCAAyC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACjE,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;YAC/E,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;YACvB,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACjC,MAAM,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC7E,CAAC,CAAC,CAAC;IACL,CAAC;AACH,CAAC","sourcesContent":["import { test, expect } from '@playwright/test';\nimport type { TextareaFieldConfig } from '@tft/crispr-forms/utils';\nimport { Validators } from '@angular/forms';\nimport { getMatFormField, getError, getLabel, getHint } from '../helpers/form.helpers';\n\n/**\n * Registers Playwright tests for a TEXTAREA field config.\n * Call inside a `test.describe` block that has already navigated to the page.\n */\nexport function testTextareaField(config: TextareaFieldConfig) {\n  if (config.label) {\n    test('renders label', async ({ page }) => {\n      await expect(getLabel(page, config.controlName)).toHaveText(config.label);\n    });\n  }\n\n  if (config.hint) {\n    test('shows hint when untouched', async ({ page }) => {\n      await expect(getHint(page, config.controlName)).toBeVisible();\n    });\n  }\n\n  if (config.validators?.includes(Validators.required)) {\n    test('shows required error when blurred empty', async ({ page }) => {\n      const textarea = getMatFormField(page, config.controlName).locator('textarea');\n      await textarea.click();\n      await page.keyboard.press('Tab');\n      await expect(getError(page, config.controlName, 'textarea')).toBeVisible();\n    });\n  }\n}\n"]}

package/field-tests/unit-conversion.tests.d.ts

@@ -0,0 +1,11 @@
+import type { UnitConversionFieldConfig } from '@tft/crispr-forms/utils';
+/**
+ * Registers Playwright tests for a UNIT_CONVERSION field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ *
+ * Note: required error display is not testable for this field type. The
+ * `displayValueControl` (what the user types into) is separate from the
+ * `[formControlName]` that holds validators, so validation errors are never
+ * wired to the visible input.
+ */
+export declare function testUnitConversionField(config: UnitConversionFieldConfig): void;

package/field-tests/unit-conversion.tests.js

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+import { getLabel, getMatFormField } from '../helpers/form.helpers';
+/**
+ * Registers Playwright tests for a UNIT_CONVERSION field config.
+ * Call inside a `test.describe` block that has already navigated to the page.
+ *
+ * Note: required error display is not testable for this field type. The
+ * `displayValueControl` (what the user types into) is separate from the
+ * `[formControlName]` that holds validators, so validation errors are never
+ * wired to the visible input.
+ */
+export function testUnitConversionField(config) {
+    if (config.label) {
+        test('renders label', async ({ page }) => {
+            await expect(getLabel(page, config.controlName)).toHaveText(config.label);
+        });
+    }
+    test('renders number input', async ({ page }) => {
+        const numberInput = getMatFormField(page, config.controlName).locator('input[type="number"]');
+        await expect(numberInput).toBeVisible();
+    });
+    if (config.showUnitSelect) {
+        test('renders unit select when showUnitSelect is true', async ({ page }) => {
+            const unitSelect = page.locator(`crispr-unit-conversion-field:has([data-testid="${config.controlName}"]) .unit-field mat-select`);
+            await expect(unitSelect).toBeVisible();
+        });
+    }
+}
+//# sourceMappingURL=unit-conversion.tests.js.map

package/field-tests/unit-conversion.tests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"unit-conversion.tests.js","sourceRoot":"","sources":["../../../../libs/crispr-forms-testing/src/field-tests/unit-conversion.tests.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEpE;;;;;;;;GAQG;AACH,MAAM,UAAU,uBAAuB,CAAC,MAAiC;IACvE,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACvC,MAAM,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5E,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC9C,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC;QAC9F,MAAM,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,IAAI,MAAM,CAAC,cAAc,EAAE,CAAC;QAC1B,IAAI,CAAC,iDAAiD,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACzE,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,kDAAkD,MAAM,CAAC,WAAW,4BAA4B,CAAC,CAAC;YAClI,MAAM,MAAM,CAAC,UAAU,CAAC,CAAC,WAAW,EAAE,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC;AACH,CAAC","sourcesContent":["import { test, expect } from '@playwright/test';\nimport type { UnitConversionFieldConfig } from '@tft/crispr-forms/utils';\nimport { getLabel, getMatFormField } from '../helpers/form.helpers';\n\n/**\n * Registers Playwright tests for a UNIT_CONVERSION field config.\n * Call inside a `test.describe` block that has already navigated to the page.\n *\n * Note: required error display is not testable for this field type. The\n * `displayValueControl` (what the user types into) is separate from the\n * `[formControlName]` that holds validators, so validation errors are never\n * wired to the visible input.\n */\nexport function testUnitConversionField(config: UnitConversionFieldConfig) {\n  if (config.label) {\n    test('renders label', async ({ page }) => {\n      await expect(getLabel(page, config.controlName)).toHaveText(config.label);\n    });\n  }\n\n  test('renders number input', async ({ page }) => {\n    const numberInput = getMatFormField(page, config.controlName).locator('input[type=\"number\"]');\n    await expect(numberInput).toBeVisible();\n  });\n\n  if (config.showUnitSelect) {\n    test('renders unit select when showUnitSelect is true', async ({ page }) => {\n      const unitSelect = page.locator(`crispr-unit-conversion-field:has([data-testid=\"${config.controlName}\"]) .unit-field mat-select`);\n      await expect(unitSelect).toBeVisible();\n    });\n  }\n}\n"]}

package/helpers/form.helpers.d.ts

@@ -0,0 +1,80 @@
+import { Page, Locator } from '@playwright/test';
+/**
+ * Returns the locator for a field's root element (the element with `data-testid`).
+ * For most fields this is a `mat-form-field`; for checkbox/slider it is the control element.
+ *
+ * For nested fields, pass the full hierarchical testId path:
+ * - subGroup child: `'address.city'`
+ * - formGroupList item child: `'contacts[0].email'`
+ */
+export declare function getMatFormField(page: Page, testId: string): Locator;
+/**
+ * Returns the `<input>` inside a field. Works for INPUT, DATEPICKER, and other fields
+ * that render a single native input.
+ */
+export declare function getInput(page: Page, testId: string): Locator;
+/**
+ * Returns the validation error paragraph for a field.
+ *
+ * Targets the inner `<p class="tft-control-error">` rather than the host element to
+ * avoid Playwright strict-mode failures on fields like autocomplete/chiplist that
+ * render two `tft-control-error` host elements (one for each internal input).
+ *
+ * @param fieldType - The kebab-case field type used in the component selector,
+ *   e.g. `'input'`, `'select'`, `'autocomplete'`, `'autocomplete-chiplist'`,
+ *   `'checkbox'`, `'datepicker'`, `'textarea'`, `'slider'`. Defaults to `'input'`.
+ */
+export declare function getError(page: Page, testId: string, fieldType?: string): Locator;
+/**
+ * Returns the `<mat-label>` element inside a field's form field.
+ */
+export declare function getLabel(page: Page, testId: string): Locator;
+/**
+ * Returns the `<mat-hint>` element inside a field's form field.
+ */
+export declare function getHint(page: Page, testId: string): Locator;
+/**
+ * Clicks an input and presses Tab to trigger a real blur event.
+ * Angular's touched state is driven by blur, not just focus-out.
+ */
+export declare function touchInput(page: Page, testId: string): Promise<void>;
+/** Returns the `<mat-select>` element inside a select field. */
+export declare function getMatSelect(page: Page, testId: string): Locator;
+/** Opens a `mat-select` dropdown. */
+export declare function openSelect(page: Page, testId: string): Promise<void>;
+/** Opens a `mat-select`, clicks the option with the given label, and waits for it to close. */
+export declare function selectOption(page: Page, testId: string, optionLabel: string): Promise<void>;
+/**
+ * Opens a `mat-select`, presses Escape, then Tab to blur it.
+ * The extra Tab is required — Escape alone dismisses the panel but does not blur
+ * the trigger element, so `ControlErrorsDirective` never sees a blur event.
+ */
+export declare function touchSelect(page: Page, testId: string): Promise<void>;
+/** Returns the `<mat-checkbox>` element for a checkbox field. */
+export declare function getCheckbox(page: Page, testId: string): Locator;
+/**
+ * Clicks a checkbox twice (check then uncheck) and presses Tab to blur,
+ * leaving it unchecked and touched — useful for triggering `requiredTrue` errors.
+ */
+export declare function touchCheckbox(page: Page, testId: string): Promise<void>;
+/**
+ * Returns the visible search input for an autocomplete field.
+ * Note: this is the `role="textbox"` input, NOT the hidden `[formControlName]` anchor.
+ */
+export declare function getAutocompleteInput(page: Page, testId: string): Locator;
+/** Clicks the autocomplete input and presses Tab to blur. */
+export declare function touchAutocomplete(page: Page, testId: string): Promise<void>;
+/**
+ * Programmatically clicks the hidden crispr-form submit button.
+ *
+ * This fires both the native `submit` event (required by `ControlErrorsFormDirective`
+ * to show errors on untouched controls) and Angular's `ngSubmit` event.
+ *
+ * Must use `evaluate` + native `.click()` because `display:none` elements
+ * have no layout position for Playwright pointer events.
+ *
+ * @param nth - Zero-based index of the form on the page. Defaults to `0`.
+ */
+export declare function submitForm(page: Page, nth?: number): Promise<void>;
+/** Clicks the datepicker input and presses Tab to blur. */
+export declare function touchDatepicker(page: Page, testId: string): Promise<void>;

package/helpers/form.helpers.js

@@ -0,0 +1,123 @@
+/**
+ * Returns the locator for a field's root element (the element with `data-testid`).
+ * For most fields this is a `mat-form-field`; for checkbox/slider it is the control element.
+ *
+ * For nested fields, pass the full hierarchical testId path:
+ * - subGroup child: `'address.city'`
+ * - formGroupList item child: `'contacts[0].email'`
+ */
+export function getMatFormField(page, testId) {
+    return page.locator(`[data-testid="${testId}"]`);
+}
+/**
+ * Returns the `<input>` inside a field. Works for INPUT, DATEPICKER, and other fields
+ * that render a single native input.
+ */
+export function getInput(page, testId) {
+    return getMatFormField(page, testId).locator('input');
+}
+/**
+ * Returns the validation error paragraph for a field.
+ *
+ * Targets the inner `<p class="tft-control-error">` rather than the host element to
+ * avoid Playwright strict-mode failures on fields like autocomplete/chiplist that
+ * render two `tft-control-error` host elements (one for each internal input).
+ *
+ * @param fieldType - The kebab-case field type used in the component selector,
+ *   e.g. `'input'`, `'select'`, `'autocomplete'`, `'autocomplete-chiplist'`,
+ *   `'checkbox'`, `'datepicker'`, `'textarea'`, `'slider'`. Defaults to `'input'`.
+ */
+export function getError(page, testId, fieldType = 'input') {
+    return page.locator(`crispr-${fieldType}-field:has([data-testid="${testId}"]) p.tft-control-error`);
+}
+/**
+ * Returns the `<mat-label>` element inside a field's form field.
+ */
+export function getLabel(page, testId) {
+    return getMatFormField(page, testId).locator('mat-label');
+}
+/**
+ * Returns the `<mat-hint>` element inside a field's form field.
+ */
+export function getHint(page, testId) {
+    return getMatFormField(page, testId).locator('mat-hint');
+}
+/**
+ * Clicks an input and presses Tab to trigger a real blur event.
+ * Angular's touched state is driven by blur, not just focus-out.
+ */
+export async function touchInput(page, testId) {
+    await getInput(page, testId).click();
+    await page.keyboard.press('Tab');
+}
+/** Returns the `<mat-select>` element inside a select field. */
+export function getMatSelect(page, testId) {
+    return getMatFormField(page, testId).locator('mat-select');
+}
+/** Opens a `mat-select` dropdown. */
+export async function openSelect(page, testId) {
+    await getMatSelect(page, testId).click();
+}
+/** Opens a `mat-select`, clicks the option with the given label, and waits for it to close. */
+export async function selectOption(page, testId, optionLabel) {
+    await openSelect(page, testId);
+    await page.locator('mat-option').filter({ hasText: optionLabel }).click();
+}
+/**
+ * Opens a `mat-select`, presses Escape, then Tab to blur it.
+ * The extra Tab is required — Escape alone dismisses the panel but does not blur
+ * the trigger element, so `ControlErrorsDirective` never sees a blur event.
+ */
+export async function touchSelect(page, testId) {
+    await openSelect(page, testId);
+    await page.keyboard.press('Escape');
+    await page.keyboard.press('Tab');
+}
+/** Returns the `<mat-checkbox>` element for a checkbox field. */
+export function getCheckbox(page, testId) {
+    return page.locator(`[data-testid="${testId}"]`);
+}
+/**
+ * Clicks a checkbox twice (check then uncheck) and presses Tab to blur,
+ * leaving it unchecked and touched — useful for triggering `requiredTrue` errors.
+ */
+export async function touchCheckbox(page, testId) {
+    await getCheckbox(page, testId).click();
+    await getCheckbox(page, testId).click();
+    await page.keyboard.press('Tab');
+}
+/**
+ * Returns the visible search input for an autocomplete field.
+ * Note: this is the `role="textbox"` input, NOT the hidden `[formControlName]` anchor.
+ */
+export function getAutocompleteInput(page, testId) {
+    return getMatFormField(page, testId).locator('input[type="textbox"]');
+}
+/** Clicks the autocomplete input and presses Tab to blur. */
+export async function touchAutocomplete(page, testId) {
+    await getAutocompleteInput(page, testId).click();
+    await page.keyboard.press('Tab');
+}
+/**
+ * Programmatically clicks the hidden crispr-form submit button.
+ *
+ * This fires both the native `submit` event (required by `ControlErrorsFormDirective`
+ * to show errors on untouched controls) and Angular's `ngSubmit` event.
+ *
+ * Must use `evaluate` + native `.click()` because `display:none` elements
+ * have no layout position for Playwright pointer events.
+ *
+ * @param nth - Zero-based index of the form on the page. Defaults to `0`.
+ */
+export async function submitForm(page, nth = 0) {
+    await page.evaluate((n) => {
+        const triggers = document.querySelectorAll('[data-testid="submit-trigger"]');
+        triggers[n]?.click();
+    }, nth);
+}
+/** Clicks the datepicker input and presses Tab to blur. */
+export async function touchDatepicker(page, testId) {
+    await getMatFormField(page, testId).locator('input').click();
+    await page.keyboard.press('Tab');
+}
+//# sourceMappingURL=form.helpers.js.map

package/helpers/form.helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.helpers.js","sourceRoot":"","sources":["../../../../libs/crispr-forms-testing/src/helpers/form.helpers.ts"],"names":[],"mappings":"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","sourcesContent":["import { Page, Locator } from '@playwright/test';\n\n/**\n * Returns the locator for a field's root element (the element with `data-testid`).\n * For most fields this is a `mat-form-field`; for checkbox/slider it is the control element.\n *\n * For nested fields, pass the full hierarchical testId path:\n * - subGroup child: `'address.city'`\n * - formGroupList item child: `'contacts[0].email'`\n */\nexport function getMatFormField(page: Page, testId: string): Locator {\n  return page.locator(`[data-testid=\"${testId}\"]`);\n}\n\n/**\n * Returns the `<input>` inside a field. Works for INPUT, DATEPICKER, and other fields\n * that render a single native input.\n */\nexport function getInput(page: Page, testId: string): Locator {\n  return getMatFormField(page, testId).locator('input');\n}\n\n/**\n * Returns the validation error paragraph for a field.\n *\n * Targets the inner `<p class=\"tft-control-error\">` rather than the host element to\n * avoid Playwright strict-mode failures on fields like autocomplete/chiplist that\n * render two `tft-control-error` host elements (one for each internal input).\n *\n * @param fieldType - The kebab-case field type used in the component selector,\n *   e.g. `'input'`, `'select'`, `'autocomplete'`, `'autocomplete-chiplist'`,\n *   `'checkbox'`, `'datepicker'`, `'textarea'`, `'slider'`. Defaults to `'input'`.\n */\nexport function getError(page: Page, testId: string, fieldType = 'input'): Locator {\n  return page.locator(`crispr-${fieldType}-field:has([data-testid=\"${testId}\"]) p.tft-control-error`);\n}\n\n/**\n * Returns the `<mat-label>` element inside a field's form field.\n */\nexport function getLabel(page: Page, testId: string): Locator {\n  return getMatFormField(page, testId).locator('mat-label');\n}\n\n/**\n * Returns the `<mat-hint>` element inside a field's form field.\n */\nexport function getHint(page: Page, testId: string): Locator {\n  return getMatFormField(page, testId).locator('mat-hint');\n}\n\n/**\n * Clicks an input and presses Tab to trigger a real blur event.\n * Angular's touched state is driven by blur, not just focus-out.\n */\nexport async function touchInput(page: Page, testId: string): Promise<void> {\n  await getInput(page, testId).click();\n  await page.keyboard.press('Tab');\n}\n\n/** Returns the `<mat-select>` element inside a select field. */\nexport function getMatSelect(page: Page, testId: string): Locator {\n  return getMatFormField(page, testId).locator('mat-select');\n}\n\n/** Opens a `mat-select` dropdown. */\nexport async function openSelect(page: Page, testId: string): Promise<void> {\n  await getMatSelect(page, testId).click();\n}\n\n/** Opens a `mat-select`, clicks the option with the given label, and waits for it to close. */\nexport async function selectOption(page: Page, testId: string, optionLabel: string): Promise<void> {\n  await openSelect(page, testId);\n  await page.locator('mat-option').filter({ hasText: optionLabel }).click();\n}\n\n/**\n * Opens a `mat-select`, presses Escape, then Tab to blur it.\n * The extra Tab is required — Escape alone dismisses the panel but does not blur\n * the trigger element, so `ControlErrorsDirective` never sees a blur event.\n */\nexport async function touchSelect(page: Page, testId: string): Promise<void> {\n  await openSelect(page, testId);\n  await page.keyboard.press('Escape');\n  await page.keyboard.press('Tab');\n}\n\n/** Returns the `<mat-checkbox>` element for a checkbox field. */\nexport function getCheckbox(page: Page, testId: string): Locator {\n  return page.locator(`[data-testid=\"${testId}\"]`);\n}\n\n/**\n * Clicks a checkbox twice (check then uncheck) and presses Tab to blur,\n * leaving it unchecked and touched — useful for triggering `requiredTrue` errors.\n */\nexport async function touchCheckbox(page: Page, testId: string): Promise<void> {\n  await getCheckbox(page, testId).click();\n  await getCheckbox(page, testId).click();\n  await page.keyboard.press('Tab');\n}\n\n/**\n * Returns the visible search input for an autocomplete field.\n * Note: this is the `role=\"textbox\"` input, NOT the hidden `[formControlName]` anchor.\n */\nexport function getAutocompleteInput(page: Page, testId: string): Locator {\n  return getMatFormField(page, testId).locator('input[type=\"textbox\"]');\n}\n\n/** Clicks the autocomplete input and presses Tab to blur. */\nexport async function touchAutocomplete(page: Page, testId: string): Promise<void> {\n  await getAutocompleteInput(page, testId).click();\n  await page.keyboard.press('Tab');\n}\n\n/**\n * Programmatically clicks the hidden crispr-form submit button.\n *\n * This fires both the native `submit` event (required by `ControlErrorsFormDirective`\n * to show errors on untouched controls) and Angular's `ngSubmit` event.\n *\n * Must use `evaluate` + native `.click()` because `display:none` elements\n * have no layout position for Playwright pointer events.\n *\n * @param nth - Zero-based index of the form on the page. Defaults to `0`.\n */\nexport async function submitForm(page: Page, nth = 0): Promise<void> {\n  await page.evaluate((n) => {\n    const triggers = document.querySelectorAll<HTMLButtonElement>('[data-testid=\"submit-trigger\"]');\n    triggers[n]?.click();\n  }, nth);\n}\n\n/** Clicks the datepicker input and presses Tab to blur. */\nexport async function touchDatepicker(page: Page, testId: string): Promise<void> {\n  await getMatFormField(page, testId).locator('input').click();\n  await page.keyboard.press('Tab');\n}\n"]}

package/index.d.ts

@@ -0,0 +1,14 @@
+import '@angular/compiler';
+export * from '@playwright/test';
+export * from './helpers/form.helpers';
+export * from './field-tests/input.tests';
+export * from './field-tests/textarea.tests';
+export * from './field-tests/checkbox.tests';
+export * from './field-tests/select.tests';
+export * from './field-tests/slider.tests';
+export * from './field-tests/datepicker.tests';
+export * from './field-tests/autocomplete.tests';
+export * from './field-tests/autocomplete-chiplist.tests';
+export * from './field-tests/file-upload.tests';
+export * from './field-tests/unit-conversion.tests';
+export * from './field-tests/field-test-factory';

package/index.js

@@ -0,0 +1,18 @@
+// Load Angular's JIT compiler. Required because crispr-forms uses partial compilation
+// (Ivy linker format) which needs the JIT compiler as a fallback in Node/Playwright environments.
+import '@angular/compiler';
+// Re-export Playwright so consumers only need one import.
+export * from '@playwright/test';
+export * from './helpers/form.helpers';
+export * from './field-tests/input.tests';
+export * from './field-tests/textarea.tests';
+export * from './field-tests/checkbox.tests';
+export * from './field-tests/select.tests';
+export * from './field-tests/slider.tests';
+export * from './field-tests/datepicker.tests';
+export * from './field-tests/autocomplete.tests';
+export * from './field-tests/autocomplete-chiplist.tests';
+export * from './field-tests/file-upload.tests';
+export * from './field-tests/unit-conversion.tests';
+export * from './field-tests/field-test-factory';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../libs/crispr-forms-testing/src/index.ts"],"names":[],"mappings":"AAAA,sFAAsF;AACtF,kGAAkG;AAClG,OAAO,mBAAmB,CAAC;AAE3B,0DAA0D;AAC1D,cAAc,kBAAkB,CAAC;AAEjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC","sourcesContent":["// Load Angular's JIT compiler. Required because crispr-forms uses partial compilation\n// (Ivy linker format) which needs the JIT compiler as a fallback in Node/Playwright environments.\nimport '@angular/compiler';\n\n// Re-export Playwright so consumers only need one import.\nexport * from '@playwright/test';\n\nexport * from './helpers/form.helpers';\nexport * from './field-tests/input.tests';\nexport * from './field-tests/textarea.tests';\nexport * from './field-tests/checkbox.tests';\nexport * from './field-tests/select.tests';\nexport * from './field-tests/slider.tests';\nexport * from './field-tests/datepicker.tests';\nexport * from './field-tests/autocomplete.tests';\nexport * from './field-tests/autocomplete-chiplist.tests';\nexport * from './field-tests/file-upload.tests';\nexport * from './field-tests/unit-conversion.tests';\nexport * from './field-tests/field-test-factory';\n"]}

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@tft/crispr-forms-testing",
+  "version": "21.0.1",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    }
+  },
+  "peerDependencies": {
+    "@angular/compiler": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@playwright/test": ">=1.40.0",
+    "@tft/crispr-forms": "*"
+  }
+}