Skip to content

Commit 3f5cbb7

Browse files
joshuaellisjoshuaellis
committed
create ReactThreeTestInstance class & move types to folder
1 parent 1b1cfcb commit 3f5cbb7

19 files changed

+660
-376
lines changed

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ dist/
44
build/
55
types/
66
# commit types in src
7-
!src/types/
7+
!packages/*/src/types/
88
Thumbs.db
99
ehthumbs.db
1010
Desktop.ini

‎packages/fiber/src/core/renderer.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,16 @@ export type ClassConstructor = {
2626
// This type clamps down on a couple of assumptions that we can make regarding native types, which
2727
// could anything from scene objects, THREE.Objects, JSM, user-defined classes and non-scene objects.
2828
// What they all need to have in common is defined here ...
29-
export type Instance = Omit<THREE.Object3D, 'parent' | 'children' | 'attach' | 'remove' | 'raycast'> & {
29+
export type BaseInstance = Omit<THREE.Object3D, 'parent' | 'children' | 'attach' | 'add' | 'remove' | 'raycast'> & {
3030
__r3f: LocalState
3131
parent: Instance | null
3232
children: Instance[]
3333
attach?: string
3434
remove: (...object: Instance[]) => Instance
3535
add: (...object: Instance[]) => Instance
3636
raycast?: (raycaster: THREE.Raycaster, intersects: THREE.Intersection[]) => void
37-
[key: string]: any
3837
}
38+
export type Instance = BaseInstance & { [key: string]: any }
3939

4040
export type InstanceProps = {
4141
[key: string]: unknown

‎packages/test-renderer/src/__tests__/RTTR.core.test.tsx

+16-252
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
jest.mock('scheduler', () => require('scheduler/unstable_mock'))
22

33
import * as React from 'react'
4-
import { Mesh } from 'three'
4+
import { BoxBufferGeometry, Material, Mesh } from 'three'
55

66
import ReactThreeTestRenderer from '../index'
77

8+
type ExampleComp = Mesh<BoxBufferGeometry, Material>
9+
810
describe('ReactThreeTestRenderer Core', () => {
911
it('renders a simple component in default blocking mode', async () => {
1012
const Mesh = () => {
@@ -148,7 +150,7 @@ describe('ReactThreeTestRenderer Core', () => {
148150

149151
const renderer = await ReactThreeTestRenderer.create(<Component />)
150152

151-
expect(renderer.scene.children[0].position.x).toEqual(7)
153+
expect(renderer.scene.children[0].instance.position.x).toEqual(7)
152154
expect(renders).toBe(12)
153155
})
154156

@@ -161,8 +163,10 @@ describe('ReactThreeTestRenderer Core', () => {
161163
</mesh>,
162164
)
163165

164-
expect(renderer.scene.children[0].material.type).toEqual('MeshBasicMaterial')
165-
expect(renderer.scene.children[0].material.name).toEqual('basicMat')
166+
let childInstance = renderer.scene.children[0].instance as ExampleComp
167+
168+
expect(childInstance.material.type).toEqual('MeshBasicMaterial')
169+
expect(childInstance.material.name).toEqual('basicMat')
166170

167171
await renderer.update(
168172
<mesh>
@@ -172,8 +176,10 @@ describe('ReactThreeTestRenderer Core', () => {
172176
</mesh>,
173177
)
174178

175-
expect(renderer.scene.children[0].material.type).toEqual('MeshStandardMaterial')
176-
expect(renderer.scene.children[0].material.name).toEqual('standardMat')
179+
childInstance = renderer.scene.children[0].instance as ExampleComp
180+
181+
expect(childInstance.material.type).toEqual('MeshStandardMaterial')
182+
expect(childInstance.material.name).toEqual('standardMat')
177183
})
178184

179185
it('exposes the instance', async () => {
@@ -253,83 +259,7 @@ describe('ReactThreeTestRenderer Core', () => {
253259
</group>,
254260
)
255261

256-
expect(renderer.toTree()).toEqual([
257-
{
258-
type: 'group',
259-
props: {},
260-
children: [
261-
{
262-
type: 'mesh',
263-
props: {
264-
['position-z']: 12,
265-
},
266-
children: [
267-
{
268-
type: 'boxGeometry',
269-
props: {
270-
args: [2, 2],
271-
attach: 'geometry',
272-
},
273-
children: [],
274-
},
275-
{
276-
type: 'meshBasicMaterial',
277-
props: {
278-
attach: 'material',
279-
},
280-
children: [],
281-
},
282-
],
283-
},
284-
{
285-
type: 'mesh',
286-
props: {
287-
['position-y']: 12,
288-
},
289-
children: [
290-
{
291-
type: 'boxGeometry',
292-
props: {
293-
args: [4, 4],
294-
attach: 'geometry',
295-
},
296-
children: [],
297-
},
298-
{
299-
type: 'meshBasicMaterial',
300-
props: {
301-
attach: 'material',
302-
},
303-
children: [],
304-
},
305-
],
306-
},
307-
{
308-
type: 'mesh',
309-
props: {
310-
['position-x']: 12,
311-
},
312-
children: [
313-
{
314-
type: 'boxGeometry',
315-
props: {
316-
args: [6, 6],
317-
attach: 'geometry',
318-
},
319-
children: [],
320-
},
321-
{
322-
type: 'meshBasicMaterial',
323-
props: {
324-
attach: 'material',
325-
},
326-
children: [],
327-
},
328-
],
329-
},
330-
],
331-
},
332-
])
262+
expect(renderer.toTree()).toMatchSnapshot()
333263

334264
await renderer.update(
335265
<group>
@@ -348,83 +278,7 @@ describe('ReactThreeTestRenderer Core', () => {
348278
</group>,
349279
)
350280

351-
expect(renderer.toTree()).toEqual([
352-
{
353-
type: 'group',
354-
props: {},
355-
children: [
356-
{
357-
type: 'mesh',
358-
props: {
359-
['rotation-x']: 1,
360-
},
361-
children: [
362-
{
363-
type: 'boxGeometry',
364-
props: {
365-
args: [6, 6],
366-
attach: 'geometry',
367-
},
368-
children: [],
369-
},
370-
{
371-
type: 'meshBasicMaterial',
372-
props: {
373-
attach: 'material',
374-
},
375-
children: [],
376-
},
377-
],
378-
},
379-
{
380-
type: 'mesh',
381-
props: {
382-
['position-y']: 12,
383-
},
384-
children: [
385-
{
386-
type: 'boxGeometry',
387-
props: {
388-
args: [4, 4],
389-
attach: 'geometry',
390-
},
391-
children: [],
392-
},
393-
{
394-
type: 'meshBasicMaterial',
395-
props: {
396-
attach: 'material',
397-
},
398-
children: [],
399-
},
400-
],
401-
},
402-
{
403-
type: 'mesh',
404-
props: {
405-
['position-x']: 12,
406-
},
407-
children: [
408-
{
409-
type: 'boxGeometry',
410-
props: {
411-
args: [2, 2],
412-
attach: 'geometry',
413-
},
414-
children: [],
415-
},
416-
{
417-
type: 'meshBasicMaterial',
418-
props: {
419-
attach: 'material',
420-
},
421-
children: [],
422-
},
423-
],
424-
},
425-
],
426-
},
427-
])
281+
expect(renderer.toTree()).toMatchSnapshot()
428282
})
429283

430284
it('does the full lifecycle', async () => {
@@ -548,54 +402,7 @@ describe('ReactThreeTestRenderer Core', () => {
548402

549403
const renderer = await ReactThreeTestRenderer.create(<Component />)
550404

551-
expect(renderer.toTree()).toEqual([
552-
{
553-
type: 'group',
554-
props: {
555-
position: [1, 2, 3],
556-
},
557-
children: [
558-
{
559-
type: 'mesh',
560-
props: {},
561-
children: [
562-
{
563-
type: 'bufferGeometry',
564-
props: { attach: 'geometry' },
565-
children: [
566-
{
567-
type: 'bufferAttribute',
568-
props: {
569-
attachObject: ['attributes', 'position'],
570-
array: vertices,
571-
count: vertices.length / 3,
572-
itemSize: 3,
573-
},
574-
children: [],
575-
},
576-
],
577-
},
578-
{
579-
type: 'meshBasicMaterial',
580-
props: {
581-
attach: 'material',
582-
color: 'hotpink',
583-
},
584-
children: [],
585-
},
586-
],
587-
},
588-
{
589-
type: 'color',
590-
props: {
591-
attach: 'background',
592-
args: [0, 0, 255],
593-
},
594-
children: [],
595-
},
596-
],
597-
},
598-
])
405+
expect(renderer.toTree()).toMatchSnapshot()
599406
})
600407

601408
it('toTree() handles complicated tree of fragments', async () => {
@@ -617,50 +424,7 @@ describe('ReactThreeTestRenderer Core', () => {
617424
</>,
618425
)
619426

620-
expect(renderer.toTree()).toEqual([
621-
{
622-
type: 'group',
623-
props: {},
624-
children: [
625-
{
626-
type: 'color',
627-
props: {
628-
args: [0, 0, 0],
629-
attach: 'background',
630-
},
631-
children: [],
632-
},
633-
],
634-
},
635-
{
636-
type: 'group',
637-
props: {},
638-
children: [
639-
{
640-
type: 'color',
641-
props: {
642-
args: [0, 0, 255],
643-
attach: 'background',
644-
},
645-
children: [],
646-
},
647-
],
648-
},
649-
{
650-
type: 'group',
651-
props: {},
652-
children: [
653-
{
654-
type: 'color',
655-
props: {
656-
args: [255, 0, 0],
657-
attach: 'background',
658-
},
659-
children: [],
660-
},
661-
],
662-
},
663-
])
427+
expect(renderer.toTree()).toMatchSnapshot()
664428
})
665429

666430
it('root instance and refs return the same value', async () => {

‎packages/test-renderer/src/__tests__/RTTR.events.test.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@ jest.mock('scheduler', () => require('scheduler/unstable_mock'))
22

33
import * as React from 'react'
44

5-
import ReactThreeTestRenderer, { MockSyntheticEvent } from '../index'
5+
import ReactThreeTestRenderer from '../index'
6+
import type { ReactThreeTest } from '../index'
67

78
describe('ReactThreeTestRenderer Events', () => {
89
it('should fire an event', async () => {
9-
const handlePointerDown = jest.fn().mockImplementationOnce((event: MockSyntheticEvent) => {
10+
const handlePointerDown = jest.fn().mockImplementationOnce((event: ReactThreeTest.MockSyntheticEvent) => {
1011
expect(() => event.stopPropagation()).not.toThrow()
1112
expect(event.offsetX).toEqual(640)
1213
expect(event.offsetY).toEqual(400)

‎packages/test-renderer/src/__tests__/RTTR.hooks.test.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ describe('ReactThreeTestRenderer Hooks', () => {
7070

7171
await waitFor(() => expect(renderer.scene.children[0]).toBeDefined())
7272

73-
expect(renderer.scene.children[0]).toBe(MockMesh)
73+
expect(renderer.scene.children[0].instance).toBe(MockMesh)
7474
})
7575

7676
it('can handle useFrame hook using test renderers advanceFrames function', async () => {
@@ -90,12 +90,12 @@ describe('ReactThreeTestRenderer Hooks', () => {
9090

9191
const renderer = await ReactThreeTestRenderer.create(<Component />)
9292

93-
expect(renderer.scene.children[0].rotation.x).toEqual(0)
93+
expect(renderer.scene.children[0].instance.rotation.x).toEqual(0)
9494

9595
await ReactThreeTestRenderer.act(async () => {
9696
renderer.advanceFrames(2, 1)
9797
})
9898

99-
await waitFor(() => expect(renderer.scene.children[0].rotation.x).toEqual(2))
99+
await waitFor(() => expect(renderer.scene.children[0].instance.rotation.x).toEqual(2))
100100
})
101101
})

0 commit comments

Comments
 (0)