Testing the AI Catalog Item Consumer Component

TL;DR

• Struggled with testing DOM text shown via a child component’s state-driven rendering
• Decided parent tests should only verify the state prop is passed correctly, leaving display logic to the child’s own tests
• Explored edge case: agent is private but has an undefined project ID
• Current behavior shows a ‘project is required’ message and highlights the project dropdown in red when opened, and no errors are thrown, consistent with how the frontend avoids throwing errors elsewhere
• Realized I need to study up on testing utilities and DOM rendering

DOM Testing Insight

While testing the AI catalog item consumer model, I initially struggled with testing the DOM for text that appears when the invalid feedback prop is rendered. I realized it doesn’t make sense to test for this string directly, since it’s displayed by a child element based on the state prop we pass to it. Because showing text based on that state prop is the child component’s responsibility, our parent tests should focus only on verifying that the state prop changes correctly. Testing the display logic itself should be left to the child component’s own tests.

Edge Case: Private Agent with Undefined Project ID

I’m now working on testing an unusual scenario where the agent is private but has an undefined project ID. While this situation seems unlikely, I’m unsure whether to throw an error. Since I don’t see errors being thrown elsewhere in the frontend—which makes sense, as we want to handle issues gracefully—the behaviour as-implemented immediately displays the “project is required” text and highlights the project dropdown with a red border when opened.

Next Step

Seems like I should study up on how you test utilities, render the DOM.