chore: closing the test coverage gap

Author: soup-in-boots

packages/core/src/localizer.js

@@ -30,7 +30,24 @@ function autoTemplate(template) {
                 template
             );
         }
-        return template;
+        
+        // Create a routing function that uses the specialized methods
+        function route(value) {
+            if (value instanceof Date) {
+                return template.getLocalizedDate(value);
+            } else if (typeof value === 'number') {
+                return template.getLocalizedNumber(value);
+            } else {
+                return template.getLocalizedString(value);
+            }
+        }
+        
+        // Copy all the specialized methods to the route function
+        route.getLocalizedString = template.getLocalizedString;
+        route.getLocalizedDate = template.getLocalizedDate;
+        route.getLocalizedNumber = template.getLocalizedNumber;
+        
+        return route;
     } else {
         Object.assign(
             route,

packages/core/src/types.js

@@ -9,15 +9,18 @@ export const FormType = t.oneOfType([
 ]);
 export const FormsType = t.arrayOf(
     function (propValue, key, componentName, location, propFullName) {
-        const isString = typeof propValue[key] === 'string';
-        const isObject =
-            typeof propValue[key] === 'object' && propValue[key] !== null;
+        const item = propValue[key];
+        const isString = typeof item === 'string';
+        const isObject = typeof item === 'object' && item !== null;
 
         if (!isString && !isObject) {
             return new Error(
-                `Invalid prop \`${propFullName}\` of type \`${typeof propValue[key]}\` supplied to \`${componentName}\`, expected \`string\` or \`object\`.`
+                `Invalid prop \`${propFullName}\` of type \`${typeof item}\` supplied to \`${componentName}\`, expected \`string\` or \`object\`.`
             );
         }
+        
+        // Return null for valid cases (string or object)
+        return null;
     }
 );
 FormType.items = FormsType;

packages/core/test/components/mapper/dynamic.test.jsx

@@ -0,0 +1,102 @@
+import { describe, it } from 'mocha';
+import * as chai from 'chai';
+import React from 'react';
+import { render, renderHook } from '@testing-library/react';
+import { RenderingContext, ModelContext } from '@forml/context';
+import { useModelStore } from '@forml/hooks';
+import Dynamic from '../../../src/components/mapper/dynamic.jsx';
+
+const { expect } = chai;
+
+describe('Dynamic Component', function () {
+    const mockRenderingContext = {
+        prefix: '',
+        mapper: {
+            text: () => <input type="text" data-testid="text-field" />,
+        },
+        decorator: {},
+        localizer: (value) => value,
+    };
+
+    function makeWrapper({ modelStore }) {
+        return ({ children }) => (
+            <RenderingContext.Provider value={mockRenderingContext}>
+                <ModelContext.Provider value={modelStore}>
+                    {children}
+                </ModelContext.Provider>
+            </RenderingContext.Provider>
+        );
+    }
+
+    it('renders with dynamic form generation', function () {
+        const schema = {
+            type: 'object',
+            properties: {
+                dynamicField: { type: 'string' },
+            },
+        };
+        const model = {};
+        const modelStore = renderHook(() => useModelStore(schema, model)).result
+            .current;
+
+        const mockForm = {
+            key: 'dynamicField',
+            generate: [
+                {
+                    type: 'text',
+                    title: 'Dynamic Field',
+                },
+            ],
+        };
+
+        const mockOnChange = () => {};
+        const wrapper = makeWrapper({ modelStore });
+
+        const { getByTestId } = render(
+            <Dynamic form={mockForm} onChange={mockOnChange} />,
+            { wrapper }
+        );
+
+        // The dynamic component should render the generated form
+        expect(getByTestId('text-field')).to.exist;
+    });
+
+    it('creates proper nested context with prefix', function () {
+        const schema = {
+            type: 'object',
+            properties: {
+                nested: {
+                    type: 'object',
+                    properties: {
+                        field: { type: 'string' },
+                    },
+                },
+            },
+        };
+        const model = {};
+        const modelStore = renderHook(() => useModelStore(schema, model)).result
+            .current;
+
+        const mockForm = {
+            key: 'nested.field',
+            generate: [
+                {
+                    type: 'text',
+                    title: 'Nested Dynamic Field',
+                },
+            ],
+        };
+
+        const mockOnChange = () => {};
+        const wrapper = makeWrapper({ modelStore });
+
+        // Just ensure it renders without error
+        const { container } = render(
+            <Dynamic form={mockForm} onChange={mockOnChange} />,
+            { wrapper }
+        );
+
+        expect(container.firstChild).to.exist;
+    });
+});
+

packages/core/test/components/mapper/null.test.jsx

@@ -0,0 +1,25 @@
+import { describe, it } from 'mocha';
+import * as chai from 'chai';
+import React from 'react';
+import { render } from '@testing-library/react';
+import Null from '../../../src/components/mapper/null.jsx';
+
+const { expect } = chai;
+
+describe('Null Component', function () {
+    it('renders and returns null', function () {
+        const mockForm = {
+            type: 'null',
+            title: 'Null Field'
+        };
+
+        const { container } = render(<Null form={mockForm} />);
+        
+        // The null component should render nothing
+        expect(container.firstChild).to.be.null;
+    });
+
+    it('has the correct displayName', function () {
+        expect(Null.name).to.equal('Null');
+    });
+});

packages/core/test/components/mapper/tabs.test.jsx

@@ -0,0 +1,182 @@
+import { describe, it } from 'mocha';
+import * as chai from 'chai';
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { RenderingContext, ModelContext } from '@forml/context';
+import Tabs from '../../../src/components/mapper/tabs.jsx';
+
+const { expect } = chai;
+
+describe('Tabs Component', function () {
+    // Mock tab decorator
+    function MockTab(props) {
+        const { form, activate, index } = props;
+        return (
+            <button data-testid={`tab-${index}`} onClick={activate}>
+                {form.title || `Tab ${index}`}
+            </button>
+        );
+    }
+    function MockPanel(props) {
+        const { form, index, children } = props;
+        return (
+            <div data-testid={`panel-${index}`}>
+                <h3>{form.title}</h3>
+                {children}
+            </div>
+        );
+    }
+    function MockTabsContainer(props) {
+        const { tabs, panels, value = 0, activateTab } = props;
+        return (
+            <div data-testid="tabs-container">
+                <div data-testid="tab-list">{tabs}</div>
+                <div data-testid="panel-content">{panels[value]}</div>
+            </div>
+        );
+    }
+    MockTabsContainer.Panel = MockPanel;
+    MockTabsContainer.Tab = MockTab;
+
+    const mockTabsDecorator = {
+        tabs: MockTabsContainer,
+    };
+
+    const mockRenderingContext = {
+        prefix: '',
+        mapper: {
+            text: (props) => (
+                <input type="text" data-testid="text-field" {...props} />
+            ),
+        },
+        decorator: mockTabsDecorator,
+        localizer: (value) => value,
+    };
+
+    const mockModelContext = {
+        model: {},
+        keyMaps: {},
+        schema: {},
+    };
+
+    function wrapper({ children }) {
+        return (
+            <RenderingContext.Provider value={mockRenderingContext}>
+                <ModelContext.Provider value={mockModelContext}>
+                    {children}
+                </ModelContext.Provider>
+            </RenderingContext.Provider>
+        );
+    }
+
+    it('renders tabs with multiple tab items', function () {
+        const mockForm = {
+            type: 'tabs',
+            tabs: [
+                {
+                    title: 'Tab One',
+                    type: 'text',
+                    schema: { type: 'string' },
+                },
+                {
+                    title: 'Tab Two',
+                    type: 'text',
+                    schema: { type: 'string' },
+                },
+                {
+                    title: 'Tab Three',
+                    type: 'text',
+                    schema: { type: 'string' },
+                },
+            ],
+        };
+
+        const mockOnChange = () => {};
+
+        const { getByTestId } = render(
+            <Tabs form={mockForm} onChange={mockOnChange} />,
+            { wrapper }
+        );
+
+        // Should render all tabs
+        expect(getByTestId('tab-0')).to.exist;
+        expect(getByTestId('tab-1')).to.exist;
+        expect(getByTestId('tab-2')).to.exist;
+
+        // Should render the tabs container
+        expect(getByTestId('tabs-container')).to.exist;
+        expect(getByTestId('panel-content')).to.exist;
+    });
+
+    it('handles tab activation', function () {
+        const mockForm = {
+            type: 'tabs',
+            tabs: [
+                {
+                    title: 'First Tab',
+                    type: 'text',
+                    schema: { type: 'string' },
+                },
+                {
+                    title: 'Second Tab',
+                    type: 'text',
+                    schema: { type: 'string' },
+                },
+            ],
+        };
+
+        const mockOnChange = () => {};
+
+        const { getByTestId } = render(
+            <Tabs form={mockForm} onChange={mockOnChange} />,
+            { wrapper }
+        );
+
+        // Click on the second tab to activate it
+        const secondTab = getByTestId('tab-1');
+        fireEvent.click(secondTab);
+
+        // Should successfully handle the tab click
+        expect(secondTab).to.exist;
+    });
+
+    it('renders with htmlClass when provided', function () {
+        const mockForm = {
+            type: 'tabs',
+            htmlClass: 'custom-tabs',
+            tabs: [
+                {
+                    title: 'Tab',
+                    type: 'text',
+                    schema: { type: 'string' },
+                },
+            ],
+        };
+
+        const mockOnChange = () => {};
+
+        const { getByTestId } = render(
+            <Tabs form={mockForm} onChange={mockOnChange} />,
+            { wrapper }
+        );
+
+        expect(getByTestId('tabs-container')).to.exist;
+    });
+
+    it('handles empty tabs array', function () {
+        const mockForm = {
+            type: 'tabs',
+            tabs: [],
+        };
+
+        const mockOnChange = () => {};
+
+        const { getByTestId } = render(
+            <Tabs form={mockForm} onChange={mockOnChange} />,
+            { wrapper }
+        );
+
+        expect(getByTestId('tabs-container')).to.exist;
+    });
+});
+