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

const { fireEvent } = NgtTestBed.create(SceneGraph);

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

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).

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

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

await fireEvent(mesh, 'pointerover');
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.

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

describe('SceneGraph', () => {
  it('should render', async () => {
    const { scene, fireEvent, advance } = NgtTestBed.create(SceneGraph);

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

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

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

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

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

Note

We use color.getHexString() to compare the color because material.color is a Color instance, even though we use CSS Color string in the template.

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