Skip to content

Commit

Permalink
create ReactThreeTestInstance class & move types to folder
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshuaellis
joshuaellis committed Mar 15, 2021
1 parent 1b1cfcb commit 3f5cbb7
Show file tree
Hide file tree
Showing 19 changed files with 660 additions and 376 deletions.
2 changes: 1 addition & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ dist/
build/
types/
# commit types in src
!src/types/
!packages/*/src/types/
Thumbs.db
ehthumbs.db
Desktop.ini
Expand Down
4 changes: 2 additions & 2 deletions packages/fiber/src/core/renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,16 @@ export type ClassConstructor = {
// This type clamps down on a couple of assumptions that we can make regarding native types, which
// could anything from scene objects, THREE.Objects, JSM, user-defined classes and non-scene objects.
// What they all need to have in common is defined here ...
export type Instance = Omit<THREE.Object3D, 'parent' | 'children' | 'attach' | 'remove' | 'raycast'> & {
export type BaseInstance = Omit<THREE.Object3D, 'parent' | 'children' | 'attach' | 'add' | 'remove' | 'raycast'> & {
__r3f: LocalState
parent: Instance | null
children: Instance[]
attach?: string
remove: (...object: Instance[]) => Instance
add: (...object: Instance[]) => Instance
raycast?: (raycaster: THREE.Raycaster, intersects: THREE.Intersection[]) => void
[key: string]: any
}
export type Instance = BaseInstance & { [key: string]: any }

export type InstanceProps = {
[key: string]: unknown
Expand Down
268 changes: 16 additions & 252 deletions packages/test-renderer/src/__tests__/RTTR.core.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
jest.mock('scheduler', () => require('scheduler/unstable_mock'))

import * as React from 'react'
import { Mesh } from 'three'
import { BoxBufferGeometry, Material, Mesh } from 'three'

import ReactThreeTestRenderer from '../index'

type ExampleComp = Mesh<BoxBufferGeometry, Material>

describe('ReactThreeTestRenderer Core', () => {
it('renders a simple component in default blocking mode', async () => {
const Mesh = () => {
Expand Down Expand Up @@ -148,7 +150,7 @@ describe('ReactThreeTestRenderer Core', () => {

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

expect(renderer.scene.children[0].position.x).toEqual(7)
expect(renderer.scene.children[0].instance.position.x).toEqual(7)
expect(renders).toBe(12)
})

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

expect(renderer.scene.children[0].material.type).toEqual('MeshBasicMaterial')
expect(renderer.scene.children[0].material.name).toEqual('basicMat')
let childInstance = renderer.scene.children[0].instance as ExampleComp

expect(childInstance.material.type).toEqual('MeshBasicMaterial')
expect(childInstance.material.name).toEqual('basicMat')

await renderer.update(
<mesh>
Expand All @@ -172,8 +176,10 @@ describe('ReactThreeTestRenderer Core', () => {
</mesh>,
)

expect(renderer.scene.children[0].material.type).toEqual('MeshStandardMaterial')
expect(renderer.scene.children[0].material.name).toEqual('standardMat')
childInstance = renderer.scene.children[0].instance as ExampleComp

expect(childInstance.material.type).toEqual('MeshStandardMaterial')
expect(childInstance.material.name).toEqual('standardMat')
})

it('exposes the instance', async () => {
Expand Down Expand Up @@ -253,83 +259,7 @@ describe('ReactThreeTestRenderer Core', () => {
</group>,
)

expect(renderer.toTree()).toEqual([
{
type: 'group',
props: {},
children: [
{
type: 'mesh',
props: {
['position-z']: 12,
},
children: [
{
type: 'boxGeometry',
props: {
args: [2, 2],
attach: 'geometry',
},
children: [],
},
{
type: 'meshBasicMaterial',
props: {
attach: 'material',
},
children: [],
},
],
},
{
type: 'mesh',
props: {
['position-y']: 12,
},
children: [
{
type: 'boxGeometry',
props: {
args: [4, 4],
attach: 'geometry',
},
children: [],
},
{
type: 'meshBasicMaterial',
props: {
attach: 'material',
},
children: [],
},
],
},
{
type: 'mesh',
props: {
['position-x']: 12,
},
children: [
{
type: 'boxGeometry',
props: {
args: [6, 6],
attach: 'geometry',
},
children: [],
},
{
type: 'meshBasicMaterial',
props: {
attach: 'material',
},
children: [],
},
],
},
],
},
])
expect(renderer.toTree()).toMatchSnapshot()

await renderer.update(
<group>
Expand All @@ -348,83 +278,7 @@ describe('ReactThreeTestRenderer Core', () => {
</group>,
)

expect(renderer.toTree()).toEqual([
{
type: 'group',
props: {},
children: [
{
type: 'mesh',
props: {
['rotation-x']: 1,
},
children: [
{
type: 'boxGeometry',
props: {
args: [6, 6],
attach: 'geometry',
},
children: [],
},
{
type: 'meshBasicMaterial',
props: {
attach: 'material',
},
children: [],
},
],
},
{
type: 'mesh',
props: {
['position-y']: 12,
},
children: [
{
type: 'boxGeometry',
props: {
args: [4, 4],
attach: 'geometry',
},
children: [],
},
{
type: 'meshBasicMaterial',
props: {
attach: 'material',
},
children: [],
},
],
},
{
type: 'mesh',
props: {
['position-x']: 12,
},
children: [
{
type: 'boxGeometry',
props: {
args: [2, 2],
attach: 'geometry',
},
children: [],
},
{
type: 'meshBasicMaterial',
props: {
attach: 'material',
},
children: [],
},
],
},
],
},
])
expect(renderer.toTree()).toMatchSnapshot()
})

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

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

expect(renderer.toTree()).toEqual([
{
type: 'group',
props: {
position: [1, 2, 3],
},
children: [
{
type: 'mesh',
props: {},
children: [
{
type: 'bufferGeometry',
props: { attach: 'geometry' },
children: [
{
type: 'bufferAttribute',
props: {
attachObject: ['attributes', 'position'],
array: vertices,
count: vertices.length / 3,
itemSize: 3,
},
children: [],
},
],
},
{
type: 'meshBasicMaterial',
props: {
attach: 'material',
color: 'hotpink',
},
children: [],
},
],
},
{
type: 'color',
props: {
attach: 'background',
args: [0, 0, 255],
},
children: [],
},
],
},
])
expect(renderer.toTree()).toMatchSnapshot()
})

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

expect(renderer.toTree()).toEqual([
{
type: 'group',
props: {},
children: [
{
type: 'color',
props: {
args: [0, 0, 0],
attach: 'background',
},
children: [],
},
],
},
{
type: 'group',
props: {},
children: [
{
type: 'color',
props: {
args: [0, 0, 255],
attach: 'background',
},
children: [],
},
],
},
{
type: 'group',
props: {},
children: [
{
type: 'color',
props: {
args: [255, 0, 0],
attach: 'background',
},
children: [],
},
],
},
])
expect(renderer.toTree()).toMatchSnapshot()
})

it('root instance and refs return the same value', async () => {
Expand Down
5 changes: 3 additions & 2 deletions packages/test-renderer/src/__tests__/RTTR.events.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@ jest.mock('scheduler', () => require('scheduler/unstable_mock'))

import * as React from 'react'

import ReactThreeTestRenderer, { MockSyntheticEvent } from '../index'
import ReactThreeTestRenderer from '../index'
import type { ReactThreeTest } from '../index'

describe('ReactThreeTestRenderer Events', () => {
it('should fire an event', async () => {
const handlePointerDown = jest.fn().mockImplementationOnce((event: MockSyntheticEvent) => {
const handlePointerDown = jest.fn().mockImplementationOnce((event: ReactThreeTest.MockSyntheticEvent) => {
expect(() => event.stopPropagation()).not.toThrow()
expect(event.offsetX).toEqual(640)
expect(event.offsetY).toEqual(400)
Expand Down
6 changes: 3 additions & 3 deletions packages/test-renderer/src/__tests__/RTTR.hooks.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ describe('ReactThreeTestRenderer Hooks', () => {

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

expect(renderer.scene.children[0]).toBe(MockMesh)
expect(renderer.scene.children[0].instance).toBe(MockMesh)
})

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

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

expect(renderer.scene.children[0].rotation.x).toEqual(0)
expect(renderer.scene.children[0].instance.rotation.x).toEqual(0)

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

await waitFor(() => expect(renderer.scene.children[0].rotation.x).toEqual(2))
await waitFor(() => expect(renderer.scene.children[0].instance.rotation.x).toEqual(2))
})
})
Loading

0 comments on commit 3f5cbb7

Please sign in to comment.