Introduction

angular-three/testing provides a set of utilities to help you write unit tests for scene graphs built with Angular Three.

In test environment, you do not actually render the scene graph. Instead, you assert the state of the scene graph against the expected state to ensure that the Angular Three renderer works as expected.

Example Scenario

Assuming you have the following SceneGraph

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngt-mesh
            #mesh
            [scale]="scale()"
            (click)="scale.set(scale() === 1 ? 1.5 : 1)"
            (pointerover)="color.set('mediumpurple')"
            (pointerout)="color.set('orange')"
        >
            <ngt-box-geometry />
            <ngt-mesh-basic-material [color]="color()" />
        </ngt-mesh>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SceneGraph {
    private meshRef = viewChild.required<ElementRef<Mesh>>('mesh');

    protected color = signal('mediumpurple');
    protected scale = signal(1);

    constructor() {
        extend({ Mesh, MeshBasicMaterial, BoxGeometry });

        injectBeforeRender(() => {
            const mesh = this.meshRef().nativeElement;
            mesh.rotation.x += 0.01;
        });
    }
}

The goal is to test the SceneGraph component and assert:

• The mesh is rendered
• The material color changes when the mesh is hovered
• The mesh scales when the mesh is clicked
• The mesh rotates by 0.01 radians per frame