fireEvent

fireEvent is a method on NgtTestBed that allows us to fire events on any element in the scene graph.

`fireEvent(element, eventName, eventData)`

fireEvent accepts three arguments:

element is the element to fire the event on
eventName is the name of the event to fire. Must be events that are supported by Angular Three events system.
eventData is an optional object that contains the event data

1
const { fixture, fireEvent } = NgtTestBed.create(SceneGraph);
2

3
await fireEvent(mesh, 'click');
4
fixture.detectChanges();
5

6
await fireEvent(mesh, 'pointerover');
7
fixture.detectChanges();

`fireEvent.setAutoDetectChanges(auto: boolean)`

After firing an event, we need to call fixture.detectChanges() to flush any changes that may have occurred (e.g: signal state changes).

We can use fireEvent.setAutoDetectChanges(true) to automatically call fixture.detectChanges() after firing an event. This toggles an internal flag whose life-cycle is tied to the scope of the test. If we want to disable auto-detection anytime, we can call fireEvent.setAutoDetectChanges(false).

1
const { fireEvent } = NgtTestBed.create(SceneGraph);
2
fireEvent.setAutoDetectChanges(true);
3

4
await fireEvent(mesh, 'click');
5
await fireEvent(mesh, 'pointerover');

Example Scenario

For this example, we will use fireEvent to fire pointerover, pointerout, and click events on the cube and assert the cube’s state after each event.

1
import { NgtTestBed } from 'angular-three/testing';
2

3
describe('SceneGraph', () => {
4
  it('should render', async () => {
5
    const { scene, fireEvent, advance } = NgtTestBed.create(SceneGraph);
6
    fireEvent.setAutoDetectChanges(true);
7

8
    expect(scene.children.length).toEqual(1);
9
    const mesh = scene.children[0] as Mesh;
10
    expect(mesh.isMesh).toEqual(true);
11

12
    expect(material.color.getHexString()).toEqual('ffa500');
13

14
    await fireEvent(mesh, 'pointerover');
15
    expect(material.color.getHexString()).toEqual('ff69b4');
16

17
    await fireEvent(mesh, 'pointerout');
18
    expect(material.color.getHexString()).toEqual('ffa500');
19

20
    await fireEvent(mesh, 'click');
21
    expect(mesh.scale.toArray()).toEqual([1.5, 1.5, 1.5]);
22
  });
23
});

Last but not least, we will use advance to test the animations.