Skip to content

857 Progress Block Test Cases#991

Merged
johbaxter merged 9 commits intodevfrom
test-progress-bar
Apr 25, 2025
Merged

857 Progress Block Test Cases#991
johbaxter merged 9 commits intodevfrom
test-progress-bar

Conversation

@RNubla
Copy link
Copy Markdown
Contributor

@RNubla RNubla commented Apr 25, 2025

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

@RNubla RNubla added the Test Used for tickets related to FE testing label Apr 25, 2025
@RNubla RNubla requested a review from memisrose April 25, 2025 13:50
@RNubla RNubla requested a review from a team as a code owner April 25, 2025 13:51
@github-actions
Copy link
Copy Markdown

@CodiumAI-Agent /describe

@RNubla RNubla linked an issue Apr 25, 2025 that may be closed by this pull request
@QodoAI-Agent
Copy link
Copy Markdown

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
    Copy link
    Copy Markdown

    @CodiumAI-Agent /review

    @github-actions
    Copy link
    Copy Markdown

    @CodiumAI-Agent /improve

    @QodoAI-Agent
    Copy link
    Copy Markdown

    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
    Copy link
    Copy Markdown

    QodoAI-Agent commented Apr 25, 2025

    PR Code Suggestions ✨

    Latest suggestions up to 99f6629

    CategorySuggestion                                                                                                                                    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
    CategorySuggestion                                                                                                                                    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

    @memisrose memisrose marked this pull request as draft April 25, 2025 21:17
    @johbaxter johbaxter marked this pull request as ready for review April 25, 2025 21:31
    @johbaxter
    Copy link
    Copy Markdown
    Contributor

    @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

    @johbaxter johbaxter merged commit 7cbbf20 into dev Apr 25, 2025
    3 checks passed
    @johbaxter johbaxter deleted the test-progress-bar branch April 25, 2025 21:33
    @github-actions
    Copy link
    Copy Markdown

    @CodiumAI-Agent /update_changelog

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

    Labels

    Test Used for tickets related to FE testing

    Projects

    None yet

    Development

    Successfully merging this pull request may close these issues.

    Progress Block

    3 participants