Testing

Overview

@xngui/testing ships category-agnostic primitives only — configureXComponent, XHarnessBase, and harness factories. Every component harness lives next to its trio under libs/components/.

Contributor workflows

Layout

Artifact	Location	Role
`*.harness.ts`	`libs/components/<category>/<name>/src/lib/*.harness.ts`	Extends XHarnessBase — DOM queries only
`*.spec.ts`	`libs/components/<category>/<name>/src/lib/*.spec.ts`	Vitest + TestBed via configureXComponent
`@xngui/testing`	`libs/testing — primitives only`	No per-component harnesses in the package

Harness

Harnesses query DOM through data-state and ARIA — never fixture.nativeElement.querySelector in specs. Extend XHarnessBase or category bases (XNativeButtonHarnessBase, XFieldHostHarnessBase).

Spec

Vitest + @analogjs/vitest-angular. One focused it per public input and output; logic tests cover keyboard, disabled guards, and validation integration.

Factories

example.ts

import { beforeEach, describe, expect, it } from 'vitest';import { configureXComponent, createXComponentHarness } from '@xngui/testing';import { XButtonHarness } from './button.harness';import { XButton } from './button';describe('XButton', () => {  beforeEach(async () => {    await configureXComponent(XButton);  });  it('reflects disabled state', async () => {    const { harness } = await createXComponentHarness(XButton, XButtonHarness, { disabled: true });    expect(harness.isDisabled()).toBe(true);  });});

example.ts

import { configureXComponent, createXHostHarness } from '@xngui/testing';beforeEach(async () => {  await configureXComponent(ToggleGroupHost);});const { harness } = await createXHostHarness(ToggleGroupHost, XToggleGroupHarness, {  selector: 'x-toggle-group',});

example.ts

describe('inputs', () => { * one it per public input * });describe('outputs', () => { * one it per public output * });describe('logic', () => { * keyboard, guards, focus * });

See actions/testing and forms/testing README files for category harness patterns. libs/components/actions/testing/README.md · libs/components/forms/testing/README.md

Run

pnpm nx run components:test
pnpm nx affected -t test