Introduction

Angular Three Testing provides a set of utilities to help us write unit tests for the scene graphs built with Angular Three.

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

Example Scenario

Assuming we have the following SceneGraph

1
@Component({
2
  standalone: true,
3
  template: `
4
    <ngt-mesh
5
      #mesh
6
      [scale]="clicked() ? 1.5 : 1"
7
      (click)="clicked.set(!clicked())"
8
      (pointerover)="hovered.set(true)"
9
      (pointerout)="hovered.set(false)"
10
    >
11
      <ngt-box-geometry />
12
      <ngt-mesh-basic-material [color]="hovered() ? 'hotpink' : 'orange'" />
13
    </ngt-mesh>
14
  `,
15
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
16
  changeDetection: ChangeDetectionStrategy.OnPush,
17
})
18
class SceneGraph {
19
  hovered = signal(false);
20
  clicked = signal(false);
21

22
  meshRef = viewChild.required<ElementRef<Mesh>>('mesh')
23

24
  constructor() {
25
    injectBeforeRender(() => {
26
      const mesh = this.meshRef().nativeElement;
27
      mesh.rotation.x += 0.01;
28
    })
29
  }
30
}

The rendered result of the above scene graph is as follows:

Our 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

First, let’s look at NgtTestBed