Skip to content

Commit 4b0ec0d

Browse files
committed
docs: add testing section
1 parent 8c1729b commit 4b0ec0d

File tree

1 file changed

+42
-0
lines changed
  • apps/astro-docs/src/content/docs/blog

1 file changed

+42
-0
lines changed

apps/astro-docs/src/content/docs/blog/v2.mdx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ Consequently, even though the surface-level APIs of v1 and v2 are similar, as bo
3232
- Better composability 🧩
3333
- Better `Portal` powered components 🪞
3434
- Improved documentation 📖
35+
- Testing (Experimental) 🧪
3536

3637
While this list might seem modest at first glance, the core improvements in Angular Three v2 unlock a wealth of potential that has been incorporated into other packages like `angular-three-soba`, `angular-three-cannon`, and `angular-three-postprocessing`.
3738

@@ -374,6 +375,47 @@ Angular Three v2 documentation is powered by [Starlight](https://starlight.astro
374375

375376
This very release blog post is powered by the same stack, making it a delight to work with. With this, we aim to provide a superior documentation experience for Angular Three users.
376377

378+
### Testing (Experimental) 🧪
379+
380+
Angular Three v2 introduces an experimental testing module available through the `angular-three/testing` entry point. This module provides utilities to help you write unit tests for your Angular Three components and scene graphs.
381+
382+
:::caution
383+
384+
The testing API is currently in Developer Preview and may be subject to changes without following semantic versioning.
385+
386+
:::
387+
388+
### Key Features
389+
390+
1. **NgtTestBed**: A utility that extends Angular's TestBed, specifically tailored for Angular Three components.
391+
2. **Mocked Rendering**: Tests run without actual 3D rendering, focusing on scene graph state assertions.
392+
3. **Event Simulation**: Ability to simulate Three.js-specific events like `click`, `pointerover`, etc.
393+
4. **Animation Frame Control**: Methods to advance animation frames for testing time-based behaviors.
394+
395+
### Basic Usage
396+
397+
Here's a simple example of how you might use the testing utilities:
398+
399+
```ts
400+
import { NgtTestBed } from 'angular-three/testing';
401+
402+
describe('MyThreeComponent', () => {
403+
it('should render a mesh', async () => {
404+
const { scene, fireEvent, advance } = NgtTestBed.create(MyThreeComponent);
405+
406+
expect(scene.children.length).toBe(1);
407+
const mesh = scene.children[0] as THREE.Mesh;
408+
expect(mesh.isMesh).toBe(true);
409+
410+
await fireEvent(mesh, 'click');
411+
// Assert changes after click
412+
413+
await advance(1); // Advance one frame
414+
// Assert changes after animation
415+
});
416+
});
417+
```
418+
377419
## Getting Started
378420

379421
To get started with Angular Three v2, check out the [documentation](https://angularthree.org/).

0 commit comments

Comments
 (0)