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, a Change Detection is needed with fixture.detectChanges() to flush any changes that may have occurred (e.g: signal state changes).

fireEvent does this automatically, but we can disable it by calling fireEvent.setAutoDetectChanges(false).

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

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

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

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

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

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

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

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

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

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