Skip to content

Conversation

Copy link

Copilot AI commented Jul 3, 2025

This PR adds comprehensive test coverage for the new width and height props added to the Canvas component, ensuring proper sizing behavior and backward compatibility.

What was tested

The tests verify that the Canvas component correctly handles manual sizing through the new props:

  1. Manual sizing: When both width and height props are provided, the canvas element uses those exact dimensions
  2. Partial sizing fallback: When only one dimension is provided (width OR height), the component falls back to useMeasure
  3. Default behavior: When neither prop is provided, the existing useMeasure logic continues to work as before

Test cases added

// Manual sizing - uses provided dimensions
<Canvas width={640} height={480}>
  <group />
</Canvas>
// ✓ Canvas has width="640" height="480"

// Partial sizing - falls back to useMeasure
<Canvas width={640}>
  <group />
</Canvas>
// ✓ Canvas uses mocked useMeasure dimensions (1280x800)

// Default behavior - existing useMeasure logic
<Canvas>
  <group />
</Canvas>
// ✓ Canvas uses mocked useMeasure dimensions (1280x800)

Implementation details

  • All tests use the existing @testing-library/react setup and patterns
  • Tests verify actual DOM attributes using canvas?.getAttribute('width')
  • Leverages the existing react-use-measure mock that returns fixed 1280x800 dimensions
  • Added 4 new test cases to the existing canvas.test.tsx file
  • All tests pass and maintain backward compatibility

This ensures that the new manual sizing feature works correctly while preserving the existing responsive behavior when manual dimensions are not provided.


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 3, 2025

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 061c2a3:

Sandbox Source
example Configuration

Copilot AI changed the title [WIP] Tests for manual canvas size Add comprehensive tests for Canvas width and height props Jul 3, 2025
Copilot AI requested a review from abernier July 3, 2025 21:07
Copy link
Member

@abernier abernier left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see comments

Copy link
Author

Copilot AI commented Jul 3, 2025

see comments

Removed hard-coded dimension values by exporting them from the react-use-measure mock and importing them in the tests. This ensures the test values always match the actual mock implementation. (f9ff27c)

Copilot AI requested a review from abernier July 3, 2025 21:28
@abernier abernier marked this pull request as ready for review July 3, 2025 21:32
@abernier abernier force-pushed the copilot/fix-82c17241-f001-4901-8604-fd140c37ffbb branch from 5231113 to 061c2a3 Compare July 3, 2025 21:38
Copy link
Member

@abernier abernier left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@abernier abernier merged commit b6777f0 into canvas-manual-size Jul 3, 2025
4 checks passed
Copilot AI requested a review from abernier July 3, 2025 21:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants