From a571f5c83e557ee8616be76cf1db29988552256a Mon Sep 17 00:00:00 2001 From: AbsharHassan Date: Tue, 2 Jan 2024 10:55:41 +0500 Subject: [PATCH 1/3] fix: ensure proper prop passing to configure This commit resolves the issue where width and height properties were not properly structured as part of a size object in the configure function, causing errors in viewport calculation. Now, the function correctly creates and includes a size object with width, height, top, and left properties, ensuring accurate viewport handling as well as camera handling. Closes #3133 --- packages/test-renderer/src/index.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/test-renderer/src/index.tsx b/packages/test-renderer/src/index.tsx index 362b423f1f..363cd8745c 100644 --- a/packages/test-renderer/src/index.tsx +++ b/packages/test-renderer/src/index.tsx @@ -23,7 +23,18 @@ const act = _act as unknown as Act const create = async (element: React.ReactNode, options?: Partial): Promise => { const canvas = createCanvas(options) - const _root = createRoot(canvas).configure({ frameloop: 'never', ...options, events: undefined }) + let size + + if (typeof options !== 'undefined' && typeof options.width !== 'undefined' && typeof options.height !== 'undefined') { + size = { width: options.width, height: options.height, top: 0, left: 0 } + } + + const _root = createRoot(canvas).configure({ + frameloop: 'never', + ...options, + size, + events: undefined, + }) const _store = mockRoots.get(canvas)!.store await act(async () => _root.render(element)) From f950fe1f09748cac75c130f0967dacd79bd50627 Mon Sep 17 00:00:00 2001 From: AbsharHassan Date: Tue, 2 Jan 2024 11:08:35 +0500 Subject: [PATCH 2/3] test: enhance useThree hook test for accurate size property checking Updated the test for the useThree hook to accurately check the size property. The test now uses specific dimensions (width: 1280, height: 800) to create the component, ensuring that the size object is correctly tested against expected values. This change improves the test's effectiveness in catching potential size-related issues in the configure function. Related to #3133 --- packages/test-renderer/src/__tests__/RTTR.hooks.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/test-renderer/src/__tests__/RTTR.hooks.test.tsx b/packages/test-renderer/src/__tests__/RTTR.hooks.test.tsx index d2e5bbf493..1af14242d6 100644 --- a/packages/test-renderer/src/__tests__/RTTR.hooks.test.tsx +++ b/packages/test-renderer/src/__tests__/RTTR.hooks.test.tsx @@ -29,12 +29,12 @@ describe('ReactThreeTestRenderer Hooks', () => { return } - await ReactThreeTestRenderer.create() + await ReactThreeTestRenderer.create(, { width: 1280, height: 800 }) expect(result.camera instanceof THREE.Camera).toBeTruthy() expect(result.scene instanceof THREE.Scene).toBeTruthy() expect(result.raycaster instanceof THREE.Raycaster).toBeTruthy() - expect(result.size).toEqual({ height: 0, width: 0, top: 0, left: 0, updateStyle: false }) + expect(result.size).toEqual({ height: 800, width: 1280, top: 0, left: 0, updateStyle: true }) }) it('can handle useLoader hook', async () => { From ed2c0e319356c0b8be2e3c9cf1ff3ca06c7d994c Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Tue, 2 Jan 2024 02:45:07 -0600 Subject: [PATCH 3/3] fix: allow size to be overriden --- packages/test-renderer/src/index.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/test-renderer/src/index.tsx b/packages/test-renderer/src/index.tsx index 363cd8745c..810f867396 100644 --- a/packages/test-renderer/src/index.tsx +++ b/packages/test-renderer/src/index.tsx @@ -23,16 +23,17 @@ const act = _act as unknown as Act const create = async (element: React.ReactNode, options?: Partial): Promise => { const canvas = createCanvas(options) - let size - - if (typeof options !== 'undefined' && typeof options.width !== 'undefined' && typeof options.height !== 'undefined') { - size = { width: options.width, height: options.height, top: 0, left: 0 } - } - const _root = createRoot(canvas).configure({ frameloop: 'never', + // TODO: remove and use default behavior + size: { + width: options?.width ?? 1280, + height: options?.height ?? 800, + top: 0, + left: 0, + updateStyle: typeof HTMLCanvasElement !== 'undefined' && canvas instanceof HTMLCanvasElement, + }, ...options, - size, events: undefined, }) const _store = mockRoots.get(canvas)!.store