Merge pull request #27 from 100monkeys-ai/fix-render-component-mount-14696471798748370391

🧹 [code health] Implement renderComponent component mounting

Author: Theaxiom

fsl/test/src/mocks.fx

@@ -21,8 +21,12 @@ export async function renderComponent(
   component: unknown,
   props?: Record<string, unknown>
 ): Promise<RenderResult> {
-  // TODO: Mount the component using the Forge runtime in test mode
   const container = document.createElement('div')
+
+  const componentFn = component as (props: Record<string, unknown>) => Element
+  const element = componentFn(props ?? {})
+  container.appendChild(element)
+
   document.body.appendChild(container)
 
   return {

fsl/test/tests/test.test.fx

@@ -1,6 +1,6 @@
 // forge:test self-tests
 // These tests verify the test runner's own assertion API.
-import { describe, it, expect } from '../src/index.fx'
+import { describe, it, expect, renderComponent } from '../src/index.fx'
 
 describe('expect().toBe', () => {
   it('passes for identical primitives', () => {
@@ -28,3 +28,20 @@ describe('expect().toThrow', () => {
     expect(() => { throw new Error('boom') }).toThrow('boom')
   })
 })
+
+describe('renderComponent', () => {
+  it('mounts a component and renders its output', async () => {
+    // Dummy component function mimicking compiled Forge output
+    const MyComponent = (props: { title?: string } = {}) => {
+      const el = document.createElement('div')
+      el.textContent = props.title ?? 'Hello World'
+      return el
+    }
+
+    const { getByText, unmount } = await renderComponent(MyComponent, { title: 'Test Component' })
+
+    expect(getByText('Test Component')).toBeDefined()
+
+    unmount()
+  })
+})