857 Progress Block Test Cases

[RNubla]

Description

Test cases for progress bar block component

Changes Made

Add <RenderEngine/> in<MockProvider/>

How to Test

1. Steps to reproduce/test the behavior
   • pnpm run test
2. Expected outcomes
   • All test should pass

Notes

[github-actions]

@CodiumAI-Agent /describe

[QodoAI-Agent]

Title

857 Progress Block Test Cases

---

User description

Description

Test cases for progress bar block component

Changes Made

Add <RenderEngine/> in<MockProvider/>

How to Test

1. Steps to reproduce/test the behavior
   • pnpm run test
2. Expected outcomes
   • All test should pass

Notes

---

PR Type

Tests, Enhancement

---

Description

• Add comprehensive ProgressBlock test cases

• Test conditional rendering and label inclusion

• Validate percentage outputs at 0, 25, 100%

• Enhance test utils with RendererEngine integration

---

Changes walkthrough 📝

	Relevant files
Tests	ProgressBlock.spec.tsx Add ProgressBlock test suite                                                          libs/renderer/src/testing/block-defaults/ProgressBlock.spec.tsx Introduce full test suite for ProgressBlock Assert rendering based on show property Verify label presence and percentage text Check both circular and linear progress types +174/-0
Enhancement	index.tsx Integrate RendererEngine in test utils                                      libs/renderer/src/testing/utils/index.tsx Import and render RendererEngine in MockProvider Pass renderEngineId from UI props Update customRender to extract and forward renderEngineId +7/-5

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /review

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 PR contains tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Missing Children Rendering The MockProvider no longer renders its children inside , so the wrapped UI components like won’t appear. You need to include {children} alongside <RendererEngine> within <Blocks>. <RendererEngine id={renderEngineId}/> </Blocks> Incorrect Data Types The show property in test blocks is defined as strings ("true"/"false") but should be boolean values to match expected component props. show: "true", }, id: "progress-id", widget: "progress", slots: { children: { children: [], name: "", }, }, listeners: { onChange: [], }, }, }; describe("Progress Block", async () => { it("Should render the Progress Block", async () => { const { container } = render( <ProgressBlock data-testid="progressId" id="progress-id" />, { blocks: blocks, }, ); const element = screen.queryByRole("progressbar") // screen.debug() expect(element).toBeInTheDocument(); }); it("Should not render the Progress Block", async () => { const localBlocks = { "progress-id": { ...blocks["progress-id"], data: { type: "linear", value: 25, includeLabel: true, size: "300px", show: "false",

[QodoAI-Agent]

PR Code Suggestions ✨

Latest suggestions up to 99f6629

Category	Suggestion	Impact
Possible issue	Render children inside provider Ensure the original children (the rendered UI) are passed through inside the provider so tests actually render the component under test. libs/renderer/src/testing/utils/index.tsx [15-33] const MockProvider: React.FC<MockProviderProps> = ({ children, - blocks, renderEngineId, + blocks, + renderEngineId, queryConfig, }) => { const store = new StateStore({ ... }); return ( <Blocks state={store} registry={DefaultBlocks}> <RendererEngine id={renderEngineId}/> + {children} </Blocks> ); }; Suggestion importance[1-10]: 10 __ Why: Without rendering the children inside MockProvider, the component under test will never mount; adding {children} fixes a critical test setup bug.	High
General	Use boolean for show flag Use actual boolean values for show rather than strings to match the component API and avoid truthiness bugs. libs/renderer/src/testing/block-defaults/ProgressBlock.spec.tsx [11-49] data: { type: "linear", value: 25, includeLabel: true, size: "300px", - show: "true", + show: true, }, ... data: { type: "linear", value: 25, includeLabel: true, size: "300px", - show: "false", + show: false, }, Suggestion importance[1-10]: 7 __ Why: Passing string values for a boolean prop can cause falsy/truthy mismatches; updating to true/false aligns tests with the component API.	Medium

---

Previous suggestions

Suggestions up to commit 9e76aa1

Category	Suggestion	Impact
Possible issue	Render wrapped children Include {children} inside <Blocks> so the wrapped UI (e.g., <ProgressBlock>) is actually rendered. libs/renderer/src/testing/utils/index.tsx [31-33] <Blocks state={store} registry={DefaultBlocks}> <RendererEngine id={renderEngineId}/> + {children} </Blocks> Suggestion importance[1-10]: 9 __ Why: Without {children} inside <Blocks> the rendered UI never appears in tests, so adding it fixes a critical rendering bug.	High
	Use boolean for show flag Change the show property from a string to a boolean to match the component’s expected prop type. libs/renderer/src/testing/block-defaults/ProgressBlock.spec.tsx [11] -show: "true", +show: true, Suggestion importance[1-10]: 7 __ Why: The tests define show as a string but the component likely expects a boolean, so correcting this improves type correctness and test reliability.	Medium
General	Use getByRole for assertions Use getByRole (or findByRole for async) instead of queryByRole to ensure the test fails if the element isn’t present. libs/renderer/src/testing/block-defaults/ProgressBlock.spec.tsx [36] -const element = screen.queryByRole("progressbar") +const element = screen.getByRole("progressbar") Suggestion importance[1-10]: 4 __ Why: Switching from queryByRole to getByRole ensures the test fails immediately if the element is missing, improving test strictness with minimal impact.	Low

[johbaxter]

@memisrose i know you just marked it as draft, but i made small changes to radio block while looking at this branch.

All changes that you were going to ask for can we have in a separate PR

[github-actions]

@CodiumAI-Agent /update_changelog