ngx-json-render 0.3.0 → 0.5.0

package/README.md

@@ -371,6 +371,66 @@ The check waits for the spec to settle. While `loading` is true a missing child
 is a patch that has not arrived yet, not a defect, so nothing is reported and
 `strict` keeps rendering; the hooks check once, when the generation completes.
 
+Pass the catalog too, and the same check covers what structure alone cannot
+see — every `type` is one the catalog defines, and the props match its schema:
+
+```html
+<json-render [spec]="spec()" [registry]="registry" [catalog]="catalog" validate="strict" />
+```
+
+### Capping what a spec may cost
+
+`validate` describes a spec. `renderLimits` constrains it:
+
+```html
+<json-render
+  [spec]="spec()"
+  [registry]="registry"
+  [renderLimits]="{ maxElements: 500, maxDepth: 16, maxRepeatItems: 200 }"
+/>
+```
+
+```ts
+readonly ui = injectUIStream({
+  api: '/api/generate',
+  renderLimits: { maxElements: 500, maxDepth: 16 },
+});
+```
+
+| Limit            | What it caps                    | When it is passed                                               |
+| ---------------- | ------------------------------- | --------------------------------------------------------------- |
+| `maxElements`    | Elements in the spec            | Nothing renders — there is no useful part of an oversized graph |
+| `maxDepth`       | Nesting, counting the root as 1 | Elements below the cap do not render; what fits still does      |
+| `maxRepeatItems` | Items one `repeat` expands      | The surplus items do not render                                 |
+
+Every limit is opt-in and unset means unlimited; there are no defaults, so
+upgrading changes nothing about what your app renders today.
+
+An element a cap refuses does not act either. `watch` is the one thing an
+element does without being on screen, and it stays unwired while the element is
+capped — otherwise a spec could keep dispatching actions from behind a limit
+that was supposed to have stopped it. The same holds for the element that
+closes a cycle.
+
+Two things follow from limits being a control rather than a report. They are
+enforced in **every** mode, `validate="off"` included — the app already made
+the decision by setting a number. And they apply while `loading`: a partial
+spec is a subset of the finished one, so a cap can only ever fire early, never
+falsely. Under `strict`, a spec over `maxDepth` is refused outright rather than
+truncated, which is how an app says it would rather draw nothing than draw the
+first sixteen levels of something hostile.
+
+In the hooks, a limit fails the generation instead of calling `onComplete`, in
+any mode — the same reasoning as `strict`: `onComplete` is where apps persist a
+spec, and this is one the app has already refused.
+
+One order is deliberate rather than incidental. The cheap caps run before the
+structural check, because core's `validateSpec` walks the tree by recursion:
+the specs that most need a limit are exactly the ones that would overflow the
+stack proving they exceed it. If you accept specs you did not generate, set
+`maxDepth` — with no cap there is nothing to stop the check from recursing as
+deep as the spec asks.
+
 ## Testing
 
 `ngx-json-render/testing` is a separate entry point, so nothing in it can reach
@@ -413,6 +473,40 @@ the harness: `text` / `texts` / `find` / `findAll` for the DOM, `click` /
 Options mirror the renderer's inputs, plus `providers` for anything the
 components under test inject.
 
+### Mounting one component
+
+`renderComponent` mounts a catalog component with no renderer and no spec. You
+give it props and read back what it emitted and what it wrote to bound props.
+It tests the component as a presentational one — what it draws, and what it
+says when used — and leaves what the spec does with that to `renderSpec`:
+
+```ts
+import { renderComponent } from 'ngx-json-render/testing';
+
+it('emits press, and stays quiet once disabled', async () => {
+  const button = await renderComponent(MyButton, { props: { label: 'Save' } });
+
+  expect(button.text('button')).toBe('Save');
+  await button.click('button');
+  expect(button.emitted).toEqual(['press']);
+
+  await button.patchProps({ disabled: true });
+  expect(button.find<HTMLButtonElement>('button').disabled).toBe(true);
+});
+```
+
+`bindings` says which props are two-way bound (`{ checked: '/dark' }`): a
+`setBound` on one of them is recorded in `writes` and lands back in the props,
+and on any other prop it is the same no-op it is under the renderer. `on` lists
+the events the spec would bind, for components that read `ctx.on(event).bound`;
+`key`, `type` and `loading` fill in the rest of the context, and `setProps` /
+`patchProps` / `setLoading` change it between frames. The DOM helpers are the
+same as `renderSpec`'s.
+
+A component that renders `<jr-children>`, registers field validation or
+dispatches actions itself needs the renderer's own services, and there is no
+honest fake for a subtree — it fails with a message pointing at `renderSpec`.
+
 ### Replaying a generation
 
 `recordedTransport` is a `fetch` that answers from a recording, so a test runs
@@ -616,10 +710,36 @@ string to the `navigate` callback you provide, verbatim. Treat it as untrusted:
 match it against known routes, and never hand it to `window.location` or
 `router.navigateByUrl` unchecked.
 
-**A spec sizes its own render tree.** `repeat` iterates a state array the spec
-may itself have supplied, so specs are a denial-of-service surface against the
-browser tab. Cap spec size and array lengths at the boundary where you accept
-one.
+**A spec cannot render forever.** Two elements naming each other as children,
+or one naming itself, would recurse until the tab died. The renderer refuses to
+draw an element that is rendering itself again _without reading any deeper into
+state_, so the cycle is broken where it closes and everything above it still
+renders. This holds in every mode, including `validate="off"` and mid-stream:
+it is a crash guard, not an opinion about spec quality. Core's `validateSpec`
+does not report cycles, so nothing else in the stack catches this for you.
+
+Recursion that goes somewhere is untouched. A tree — a comment thread, a file
+browser, a nested menu — is an element repeating over a path relative to the
+item it is already inside (`{"$item": "children"}`) and rendering itself for
+each one, so every pass reads one level further in and the drawing ends where
+the data does. What the guard stops is the pass that reads the same array
+again: `repeat` over a fixed `/items` inside itself never runs out, however
+much data there is.
+
+**A spec sizes its own render tree, up to the caps you set.** `repeat` iterates
+a state array the spec may itself have supplied, and nesting costs a component
+per level, so specs are a denial-of-service surface against the browser tab.
+`renderLimits` is the cap: `maxElements`, `maxDepth` and `maxRepeatItems`,
+enforced in every mode. They are unset by default — a renderer cannot guess
+what your catalog considers a reasonable page — so an app taking specs it did
+not generate should set all three. See
+[Capping what a spec may cost](#capping-what-a-spec-may-cost).
+
+**A spec can name components you never built.** `validate` with a `catalog`
+reports every `type` the catalog does not define and every prop its schema
+rejects; `strict` refuses such a spec outright. Without a catalog the renderer
+only warns and draws nothing in that element's place, which degrades well but
+tells you nothing until you read the console.
 
 **`confirm` is a UX affordance, not a security control.** It routes an action
 through the confirmation dialog before the handler runs, but it is set on the
@@ -635,33 +755,39 @@ Injectables/helpers: `injectRenderContext`, `injectElementKey`, `injectRepeatSco
 
 Tokens: `JR_CONFIRM_DIALOG` (replace the confirmation dialog), `JR_CONFIRM_LABELS` (its two words), `CONFIRM_CONTEXT`, `RENDER_CONTEXT`, `REPEAT_SCOPE`.
 
+Spec checking: `checkSpec`, `formatSpecCheckIssues`, and the types
+`RenderLimits`, `SpecCheck`, `SpecCheckIssue`, `SpecCheckIssueCode`,
+`SpecCheckOptions`, `SpecCatalog`, `SpecValidationMode`.
+
 `injectActions().execute()` rejects when the user dismisses a `confirm`
 dialog, which is a normal gesture rather than a failure — `isActionCancelled(error)`
 is how you tell the two apart.
 
 Registry & schema: `defineRegistry`, `createStoreSetState`, `schema`.
 
-Testing (`ngx-json-render/testing`): `renderSpec`, `recordedTransport`, `specStream`, `usageLine`.
+Testing (`ngx-json-render/testing`): `renderSpec`, `renderComponent`, `recordedTransport`, `specStream`, `usageLine`.
 
 Everything from `@json-render/core` (types, `createStateStore`, `nestedToFlat`, prompt builders, spec validators, SpecStream compiler) composes with this package; the most common symbols are re-exported.
 
 ## Renderer inputs
 
-| Input                 | Type                                 | Purpose                                                |
-| --------------------- | ------------------------------------ | ------------------------------------------------------ |
-| `spec`                | `Spec \| null`                       | The UI spec (may be partial while streaming)           |
-| `registry`            | `ComponentRegistry`                  | Catalog type → Angular component                       |
-| `loading`             | `boolean`                            | Suppress missing-element warnings while streaming      |
-| `fallback`            | `Type<unknown>`                      | Component for unknown types                            |
-| `validate`            | `'off' \| 'warn' \| 'strict'`        | Check the settled spec's structure (default `'off'`)   |
-| `state`               | `StateModel`                         | Initial state (uncontrolled; defaults to `spec.state`) |
-| `store`               | `StateStore`                         | External store (controlled mode)                       |
-| `handlers`            | `Record<string, ActionHandler>`      | Action handlers                                        |
-| `onAction`            | `(name, params) => unknown`          | Catch-all action handler                               |
-| `navigate`            | `(path) => void`                     | Used by `onSuccess: { navigate }`                      |
-| `validationFunctions` | `Record<string, ValidationFunction>` | Custom validation                                      |
-| `functions`           | `Record<string, ComputedFunction>`   | `$computed` functions                                  |
-| `directives`          | `DirectiveDefinition[]`              | Custom `$`-prefixed expressions                        |
+| Input                 | Type                                 | Purpose                                                 |
+| --------------------- | ------------------------------------ | ------------------------------------------------------- |
+| `spec`                | `Spec \| null`                       | The UI spec (may be partial while streaming)            |
+| `registry`            | `ComponentRegistry`                  | Catalog type → Angular component                        |
+| `loading`             | `boolean`                            | Suppress missing-element warnings while streaming       |
+| `fallback`            | `Type<unknown>`                      | Component for unknown types                             |
+| `validate`            | `'off' \| 'warn' \| 'strict'`        | Check the settled spec's structure (default `'off'`)    |
+| `renderLimits`        | `RenderLimits`                       | Cap elements, depth and repeat expansion (default none) |
+| `catalog`             | `Catalog`                            | Also check types and props against the catalog          |
+| `state`               | `StateModel`                         | Initial state (uncontrolled; defaults to `spec.state`)  |
+| `store`               | `StateStore`                         | External store (controlled mode)                        |
+| `handlers`            | `Record<string, ActionHandler>`      | Action handlers                                         |
+| `onAction`            | `(name, params) => unknown`          | Catch-all action handler                                |
+| `navigate`            | `(path) => void`                     | Used by `onSuccess: { navigate }`                       |
+| `validationFunctions` | `Record<string, ValidationFunction>` | Custom validation                                       |
+| `functions`           | `Record<string, ComputedFunction>`   | `$computed` functions                                   |
+| `directives`          | `DirectiveDefinition[]`              | Custom `$`-prefixed expressions                         |
 
 Output: `(stateChange)` — batched `{ path, value }[]` in uncontrolled mode.
 

package/fesm2022/ngx-json-render-testing.mjs

@@ -1,7 +1,8 @@
+import { NgComponentOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, ChangeDetectionStrategy, Component, provideZonelessChangeDetection } from '@angular/core';
+import { provideZonelessChangeDetection, inject, Injector, signal, ChangeDetectionStrategy, Component, computed, isDevMode } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { JsonRenderer, JsonRenderValidationService } from 'ngx-json-render';
+import { RENDER_CONTEXT, ELEMENT_KEY, JsonRenderer, JsonRenderValidationService } from 'ngx-json-render';
 
 /** The rejection `fetch` raises when its signal fires. */
 function abortError() {
@@ -163,6 +164,230 @@ function usageLine(usage) {
     });
 }
 
+/**
+ * What `renderSpec` and `renderComponent` share: the TestBed setup, the settle
+ * loop, and the handful of DOM queries a test runs against what rendered.
+ *
+ * @internal Not exported from the entry point.
+ */
+/**
+ * Configure the TestBed, unless the test already did.
+ *
+ * A test that called `TestBed.runInInjectionContext` first — or that renders
+ * a second time — has an instantiated module, and configuring it again
+ * throws. Its own module stands; the only thing that cannot be salvaged is
+ * this call's `providers`, so that is the one case worth failing over.
+ */
+function configureTestBed(caller, providers) {
+    try {
+        TestBed.configureTestingModule({
+            providers: [provideZonelessChangeDetection(), ...providers],
+        });
+    }
+    catch {
+        if (providers.length > 0) {
+            throw new Error(`${caller}: the TestBed was already instantiated, so \`providers\` cannot be applied. Pass them to your own TestBed.configureTestingModule() call instead.`);
+        }
+    }
+}
+/** Let effects, promises and change detection finish. */
+function settler(fixture) {
+    return async () => {
+        // Twice: the first pass runs the effects that a render schedules, the
+        // second renders what those effects changed. One pass leaves a test
+        // asserting against a frame that no browser would ever show.
+        await fixture.whenStable();
+        fixture.detectChanges();
+        await fixture.whenStable();
+    };
+}
+function domQueries(caller, element, settle) {
+    const resolve = (target) => {
+        if (typeof target !== 'string')
+            return target;
+        const found = element.querySelector(target);
+        if (!found) {
+            throw new Error(`${caller}: nothing matches ${JSON.stringify(target)}. Rendered HTML:\n${element.innerHTML}`);
+        }
+        return found;
+    };
+    return {
+        text: (selector) => ((selector ? resolve(selector) : element).textContent ?? '').trim(),
+        texts: (selector) => Array.from(element.querySelectorAll(selector)).map((el) => (el.textContent ?? '').trim()),
+        find: (selector) => resolve(selector),
+        findAll: (selector) => Array.from(element.querySelectorAll(selector)),
+        async click(target) {
+            resolve(target).click();
+            await settle();
+        },
+        async fill(target, value) {
+            const input = resolve(target);
+            input.value = value;
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+            await settle();
+        },
+    };
+}
+
+/**
+ * Mounted through `NgComponentOutlet` with an element injector, the way
+ * `<jr-element>` mounts a catalog component — so the context is the
+ * component's own, not the TestBed module's, and a test can mount twice.
+ */
+class JrComponentTestHost {
+    parent = inject(Injector);
+    component = signal(null, ...(ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []));
+    injector = signal(this.parent, ...(ngDevMode ? [{ debugName: "injector" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JrComponentTestHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: JrComponentTestHost, isStandalone: true, selector: "jr-component-test-host", ngImport: i0, template: `
+    @if (component(); as type) {
+      <ng-container *ngComponentOutlet="type; injector: injector()" />
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JrComponentTestHost, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-component-test-host',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgComponentOutlet],
+                    template: `
+    @if (component(); as type) {
+      <ng-container *ngComponentOutlet="type; injector: injector()" />
+    }
+  `,
+                }]
+        }] });
+/** The renderer-owned services a component can only have from a renderer. */
+const RENDERER_ONLY = /JsonRender(RootContext|StateService|ValidationService|ActionsService)/;
+/**
+ * Turn "no provider for the renderer's services" into what to do about it.
+ * `<jr-children>`, `injectFieldValidation` and `injectActions` all need a
+ * real renderer behind them; there is no honest fake for a subtree.
+ */
+function explainMissingRenderer(error) {
+    const message = error instanceof Error ? error.message : String(error);
+    if (RENDERER_ONLY.test(message)) {
+        throw new Error(`renderComponent: this component needs a real <json-render> — it renders <jr-children>, validates a field or dispatches actions itself. Test it with renderSpec instead.\n\n${message}`);
+    }
+    throw error;
+}
+/**
+ * Mount a catalog component with no renderer and no spec: hand it props, and
+ * read back the events it emitted and the values it wrote to bound props.
+ *
+ * This is the test of a component as a presentational one — what it draws
+ * for these props, and what it says when used. What the spec then does with
+ * that is the renderer's business, and `renderSpec` is where to test it.
+ *
+ * `props` is not inferred from the first value, so a later `patchProps` can
+ * set a prop the first render left out. Pass `P` to have the props typed.
+ *
+ * A component that renders `<jr-children>`, registers field validation or
+ * dispatches actions directly needs the renderer's services and fails with a
+ * message pointing at `renderSpec`.
+ *
+ * @example
+ * ```ts
+ * const button = await renderComponent(MyButton, { props: { label: 'Save' } });
+ *
+ * expect(button.text('button')).toBe('Save');
+ * await button.click('button');
+ * expect(button.emitted).toEqual(['press']);
+ *
+ * await button.patchProps({ disabled: true });
+ * expect(button.find<HTMLButtonElement>('button').disabled).toBe(true);
+ * ```
+ */
+async function renderComponent(component, options = {}) {
+    const emitted = [];
+    const writes = [];
+    const props = signal(options.props ?? {}, ...(ngDevMode ? [{ debugName: "props" }] : /* istanbul ignore next */ []));
+    const loading = signal(options.loading ?? false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    const bindings = options.bindings;
+    const boundEvents = new Set(options.on ?? []);
+    const key = signal(options.key ?? 'element', ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    const element = computed(() => ({
+        type: options.type ?? component.name,
+        props: props(),
+        children: [],
+    }), ...(ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []));
+    const emit = (event) => {
+        emitted.push(event);
+    };
+    const context = {
+        element,
+        props: props.asReadonly(),
+        emit,
+        on: (event) => ({
+            emit: () => emit(event),
+            shouldPreventDefault: false,
+            bound: boundEvents.has(event),
+        }),
+        bindings: signal(bindings).asReadonly(),
+        loading: loading.asReadonly(),
+        setBound: (prop, value) => {
+            if (!bindings?.[prop]) {
+                if (isDevMode()) {
+                    console.warn(`[ngx-json-render] setBound("${prop}"): prop has no $bindState/$bindItem binding`);
+                }
+                return;
+            }
+            writes.push({ prop, value });
+            // What the renderer's round trip amounts to: the write lands in state,
+            // and the bound prop resolves to it on the next read.
+            props.update((current) => ({ ...current, [prop]: value }));
+        },
+    };
+    configureTestBed('renderComponent', options.providers ?? []);
+    const fixture = TestBed.createComponent(JrComponentTestHost);
+    const host = fixture.componentInstance;
+    host.injector.set(Injector.create({
+        providers: [
+            { provide: RENDER_CONTEXT, useValue: context },
+            { provide: ELEMENT_KEY, useValue: key.asReadonly() },
+        ],
+        parent: host.parent,
+    }));
+    host.component.set(component);
+    const settle = settler(fixture);
+    try {
+        await settle();
+    }
+    catch (error) {
+        explainMissingRenderer(error);
+    }
+    const mounted = fixture.debugElement.query((candidate) => candidate.componentInstance instanceof component);
+    if (!mounted) {
+        throw new Error(`renderComponent: ${component.name} did not mount. Is it a component?`);
+    }
+    const root = fixture.nativeElement;
+    return {
+        fixture,
+        element: root,
+        component: mounted.componentInstance,
+        context,
+        emitted,
+        writes,
+        props: () => props(),
+        async setProps(next) {
+            props.set(next);
+            await settle();
+        },
+        async patchProps(patch) {
+            props.update((current) => ({ ...current, ...patch }));
+            await settle();
+        },
+        async setLoading(next) {
+            loading.set(next);
+            await settle();
+        },
+        settle,
+        ...domQueries('renderComponent', root, settle),
+        destroy: () => fixture.destroy(),
+    };
+}
+
 class JrTestHost {
     spec = signal(null, ...(ngDevMode ? [{ debugName: "spec" }] : /* istanbul ignore next */ []));
     registry = signal({}, ...(ngDevMode ? [{ debugName: "registry" }] : /* istanbul ignore next */ []));
@@ -194,7 +419,7 @@ class JrTestHost {
       [directives]="directives()"
       (stateChange)="record($event)"
     />
-  `, isInline: true, dependencies: [{ kind: "component", type: JsonRenderer, selector: "json-render", inputs: ["spec", "registry", "loading", "fallback", "validate", "state", "store", "handlers", "onAction", "navigate", "validationFunctions", "functions", "directives"], outputs: ["stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: JsonRenderer, selector: "json-render", inputs: ["spec", "registry", "loading", "fallback", "validate", "renderLimits", "catalog", "state", "store", "handlers", "onAction", "navigate", "validationFunctions", "functions", "directives"], outputs: ["stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: JrTestHost, decorators: [{
             type: Component,
@@ -238,26 +463,6 @@ function recordingHandlers(handlers, dispatched) {
     }
     return wrapped;
 }
-/**
- * Configure the TestBed, unless the test already did.
- *
- * A test that called `TestBed.runInInjectionContext` first — or that renders
- * a second spec — has an instantiated module, and configuring it again
- * throws. Its own module stands; the only thing that cannot be salvaged is
- * this call's `providers`, so that is the one case worth failing over.
- */
-function configureTestBed(providers) {
-    try {
-        TestBed.configureTestingModule({
-            providers: [provideZonelessChangeDetection(), ...providers],
-        });
-    }
-    catch {
-        if (providers.length > 0) {
-            throw new Error('renderSpec: the TestBed was already instantiated, so `providers` cannot be applied. Pass them to your own TestBed.configureTestingModule() call instead.');
-        }
-    }
-}
 /**
  * Render a spec against a registry and hand back the few things a test does
  * to it.
@@ -287,7 +492,7 @@ function configureTestBed(providers) {
 async function renderSpec(spec, options) {
     const dispatched = [];
     const changes = [];
-    configureTestBed(options.providers ?? []);
+    configureTestBed('renderSpec', options.providers ?? []);
     const fixture = TestBed.createComponent(JrTestHost);
     const host = fixture.componentInstance;
     host.registry.set(options.registry);
@@ -306,14 +511,7 @@ async function renderSpec(spec, options) {
     host.directives.set(options.directives);
     host.record = (batch) => changes.push(...batch);
     host.spec.set(spec);
-    const settle = async () => {
-        // Twice: the first pass runs the effects that a render schedules, the
-        // second renders what those effects changed. One pass leaves a test
-        // asserting against a frame that no browser would ever show.
-        await fixture.whenStable();
-        fixture.detectChanges();
-        await fixture.whenStable();
-    };
+    const settle = settler(fixture);
     await settle();
     const element = fixture.nativeElement;
     // Found by predicate rather than with `By.directive`, which would make
@@ -324,15 +522,6 @@ async function renderSpec(spec, options) {
     // From the renderer's own injector: these services are provided by the
     // component, so the root TestBed injector has never heard of them.
     const validation = rendererElement.injector.get(JsonRenderValidationService);
-    const resolve = (target) => {
-        if (typeof target !== 'string')
-            return target;
-        const found = element.querySelector(target);
-        if (!found) {
-            throw new Error(`renderSpec: nothing matches ${JSON.stringify(target)}. Rendered HTML:\n${element.innerHTML}`);
-        }
-        return found;
-    };
     return {
         fixture,
         element,
@@ -356,20 +545,7 @@ async function renderSpec(spec, options) {
             await settle();
         },
         state: () => store.state(),
-        text: (selector) => ((selector ? resolve(selector) : element).textContent ?? '').trim(),
-        texts: (selector) => Array.from(element.querySelectorAll(selector)).map((el) => (el.textContent ?? '').trim()),
-        find: (selector) => resolve(selector),
-        findAll: (selector) => Array.from(element.querySelectorAll(selector)),
-        async click(target) {
-            resolve(target).click();
-            await settle();
-        },
-        async fill(target, value) {
-            const input = resolve(target);
-            input.value = value;
-            input.dispatchEvent(new Event('input', { bubbles: true }));
-            await settle();
-        },
+        ...domQueries('renderSpec', element, settle),
         destroy: () => fixture.destroy(),
     };
 }
@@ -385,5 +561,5 @@ async function renderSpec(spec, options) {
  * Generated bundle index. Do not edit.
  */
 
-export { recordedTransport, renderSpec, specStream, usageLine };
+export { recordedTransport, renderComponent, renderSpec, specStream, usageLine };
 //# sourceMappingURL=ngx-json-render-testing.mjs.map