@hubspot/ui-extensions 0.11.2 → 0.11.4

package/dist/experimental/testing/__tests__/findChild.spec.js

@@ -1,27 +1,31 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Alert, Button, ButtonRow } from '../../../index';
-import { render } from '../index';
-import { ComponentNotFoundError, FindInvalidComponentError, } from '../internal/errors';
+import { Alert, Button, ButtonRow } from "../../../index.js";
+import { createRenderer } from "../index.js";
+import { ComponentNotFoundError, FindInvalidComponentError, } from "../internal/errors.js";
 describe('findChild()', () => {
     it('should allow finding a child from the root node', () => {
         const buttonLabel = '';
-        const { findChild } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const { render, findChild } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
         expect(findChild(ButtonRow)).toBeDefined();
     });
     it('should allow finding a child from a nested component', () => {
         const buttonLabel = '';
-        const { find } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
         const buttonRow = find(ButtonRow);
         expect(buttonRow.findChild(Button).props).toEqual({ variant: 'primary' });
     });
     it('should throw an error when no match is found', () => {
-        const { find } = render(_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Click me!" }) }));
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Click me!" }) }));
         const buttonRow = find(ButtonRow);
         expect(() => buttonRow.findChild(Alert)).toThrow(ComponentNotFoundError);
     });
     it('should throw an error when target component is invalid', () => {
-        const { find } = render(_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Click me!" }) }));
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Click me!" }) }));
         const MyFakeComponent = () => { };
         const buttonRow = find(ButtonRow);
         expect(() => buttonRow.findChild(MyFakeComponent)).toThrow(FindInvalidComponentError);

package/dist/experimental/testing/__tests__/fragments.spec.js

@@ -1,18 +1,20 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Alert, Button, ButtonRow, List, Text } from '../../../index';
-import { render } from '../index';
-import { InvalidFragmentPropArrayError } from '../internal/errors';
+import { Alert, Button, ButtonRow, List, Text } from "../../../index.js";
+import { createRenderer } from "../index.js";
+import { InvalidFragmentPropArrayError } from "../internal/errors.js";
 describe('fragments', () => {
     it('should allow assertions against components with fragment props', () => {
         const buttonLabel = 'Click me!';
-        const { find } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: _jsx(List, { children: _jsx(Text, { children: "Item 1" }) }), children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: _jsx(List, { children: _jsx(Text, { children: "Item 1" }) }), children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
         expect(find(Text).text).toEqual('Item 1');
         expect(find(Button).text).toEqual(buttonLabel);
     });
     it('should handle undefined fragment props', () => {
         const buttonLabel = 'Click me!';
-        const { find } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
         const button = find(Button);
         const { props: buttonProps } = button;
         expect(buttonProps.overlay).toBeUndefined();
@@ -20,29 +22,33 @@ describe('fragments', () => {
     });
     it('should handle null fragment props', () => {
         const buttonLabel = 'Click me!';
-        const { find } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: null, children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: null, children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
         const button = find(Button);
         const { props: buttonProps } = button;
-        expect(buttonProps.overlay?.children).toHaveLength(0);
+        expect(buttonProps.overlay?.childNodes).toHaveLength(0);
         expect(find(Alert).props).toEqual({ title: 'My Alert' });
     });
     it('should throw an error if an array fragment prop is passed', () => {
         const buttonLabel = 'Click me!';
         const arrayProp = [1, 2, 3];
+        const { render } = createRenderer('crm.record.tab');
         expect(() => {
             render(_jsx(Button, { variant: "primary", overlay: arrayProp, children: buttonLabel }));
         }).toThrow(InvalidFragmentPropArrayError);
     });
     it('should handle string fragment props', () => {
         const buttonLabel = 'Click me!';
-        const { find } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: "My Overlay", children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: "My Overlay", children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
         const button = find(Button);
         expect(button.props.overlay?.text).toEqual('My Overlay');
         expect(find(Alert).props).toEqual({ title: 'My Alert' });
     });
     it('should handle fragment props that are a JSX fragment', () => {
         const buttonLabel = 'Click me!';
-        const { find } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: _jsx(_Fragment, { children: "My Overlay" }), children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: _jsx(_Fragment, { children: "My Overlay" }), children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
         const button = find(Button);
         expect(button.props.overlay?.text).toEqual('My Overlay');
         expect(find(Alert).props).toEqual({ title: 'My Alert' });
@@ -52,7 +58,8 @@ describe('fragments', () => {
         function MyOverlay() {
             return (_jsx(List, { children: _jsx(Text, { children: "Item 1" }) }));
         }
-        const { find } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: _jsx(MyOverlay, {}), children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: _jsx(MyOverlay, {}), children: buttonLabel }) }), _jsx(Alert, { title: "My Alert" })] }));
         expect(find(Text).text).toEqual('Item 1');
         expect(find(Button).text).toEqual(buttonLabel);
     });

package/dist/experimental/testing/__tests__/invalid-components.spec.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { describe, expect, it } from 'vitest';
-import { Alert, Button, ButtonRow, Text } from '../../../index';
-import { render } from '../index';
-import { InvalidComponentsError } from '../internal/errors';
-import { createDeferred } from '../internal/utils/promise-utils';
+import { Alert, Button, ButtonRow, Text } from "../../../index.js";
+import { createRenderer } from "../index.js";
+import { InvalidComponentsError } from "../internal/errors.js";
+import { createDeferred } from "../internal/utils/promise-utils.js";
 const setTimeoutPromise = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 describe('handling invalid components', () => {
     it('should throw an error if initial render contains invalid components', () => {
+        const { render } = createRenderer('crm.record.tab');
         function MyComponent() {
             return (_jsx("div", { children: _jsx("span", { children: _jsx(Button, { variant: "primary", children: "Click me!" }) }) }));
         }
@@ -22,12 +23,14 @@ describe('handling invalid components', () => {
         expect(errorMessage).toMatchSnapshot();
     });
     it('should throw an error if initial render contains invalid components inside a fragment', () => {
+        const { render } = createRenderer('crm.record.tab');
         function MyComponent() {
             return (_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: _jsx("div", { children: "Overlay" }), children: "Click me!" }) }), _jsx(Alert, { title: "My Alert" })] }));
         }
         expect(() => render(_jsx(MyComponent, {}))).toThrow(InvalidComponentsError);
     });
     it('should throw an error if triggering an event results in an invalid component to be rendered', () => {
+        const { render } = createRenderer('crm.record.tab');
         function Counter() {
             const [count, setCount] = useState(0);
             const handleClick = () => {
@@ -52,7 +55,8 @@ describe('handling invalid components', () => {
             }, []);
             return (_jsx(Button, { children: count === 0 ? 'Click me!' : _jsxs("div", { children: ["Clicked ", count, " times"] }) }));
         }
-        const { find, waitFor } = render(_jsx(AsyncCounter, {}));
+        const { render, find, waitFor } = createRenderer('crm.record.tab');
+        render(_jsx(AsyncCounter, {}));
         expect(find(Button).text).toEqual('Click me!');
         await expect(waitFor(() => {
             expect(find(Button).text).toEqual('Clicked 1 times');
@@ -74,15 +78,19 @@ describe('handling invalid components', () => {
             if (isPending) {
                 return _jsx(Text, { children: "Loading..." });
             }
+            // NOTE: `<div>` is an invalid component that should trigger an error after it is loaded.
             return _jsx("div", { children: "Loaded!" });
         }
         const loadingDeferred = createDeferred();
-        const { find } = render(_jsx(AsyncCounter, { promise: loadingDeferred.promise }));
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(AsyncCounter, { promise: loadingDeferred.promise }));
         expect(find(Text).text).toEqual('Loading...');
         loadingDeferred.resolve();
-        await setTimeoutPromise(0);
+        await loadingDeferred.promise;
+        // Wait another 5ms to be extra sure that the component has rerendered
+        await setTimeoutPromise(5);
         expect(() => {
-            find(Button);
+            find(Text);
         }).toThrow(InvalidComponentsError);
     });
 });

package/dist/experimental/testing/__tests__/isMatch.spec.js

@@ -1,60 +1,113 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Alert, Button } from '../../../index';
-import { render } from '../index';
+import { Alert, Button } from "../../../index.js";
+import { createRenderer, isMatch, isRenderedFragmentNode, } from "../index.js";
 describe('isMatch()', () => {
-    it('should allow assertions against a mix of text and element nodes', () => {
-        const { getRootNode, isMatch } = render(_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", children: "Click me!" }), _jsx(Alert, { title: "My Alert" }), "Hello"] }));
-        const rootNode = getRootNode();
-        const children = rootNode.children;
-        const buttonNode = children[0];
-        const alertNode = children[1];
-        const textNode = children[2];
-        if (isMatch(buttonNode, Button)) {
-            expect(buttonNode.props.variant).toEqual('primary');
-        }
-        else {
-            throw new Error('Expected button node');
-        }
-        expect(isMatch(alertNode, Button)).toBe(false);
-        expect(isMatch(textNode, Button)).toBe(false);
+    describe('isMatch() utility function', () => {
+        it('should allow assertions against a mix of text and element nodes', () => {
+            const { render, getRootNode } = createRenderer('crm.record.tab');
+            render(_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", children: "Click me!" }), _jsx(Alert, { title: "My Alert" }), "Hello"] }));
+            const rootNode = getRootNode();
+            const { childNodes } = rootNode;
+            const buttonNode = childNodes[0];
+            const alertNode = childNodes[1];
+            const textNode = childNodes[2];
+            if (isMatch(buttonNode, Button)) {
+                expect(buttonNode.props.variant).toEqual('primary');
+            }
+            else {
+                throw new Error('Expected button node');
+            }
+            expect(isMatch(alertNode, Button)).toBe(false);
+            expect(isMatch(textNode, Button)).toBe(false);
+        });
+        it('should allow a custom matcher function to be provided', () => {
+            const { render, getRootNode } = createRenderer('crm.record.tab');
+            render(_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", children: "Primary" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Alert, { title: "My Alert" }), "Hello"] }));
+            const rootNode = getRootNode();
+            const { childNodes } = rootNode;
+            const primaryButtonNode = childNodes[0];
+            const secondaryButtonNode = childNodes[1];
+            const alertNode = childNodes[2];
+            const textNode = childNodes[3];
+            const matcher = (node) => node.props.variant === 'primary';
+            if (isMatch(primaryButtonNode, Button, matcher)) {
+                expect(primaryButtonNode.props.variant).toEqual('primary');
+            }
+            else {
+                throw new Error('Expected button node');
+            }
+            expect(isMatch(secondaryButtonNode, Button, matcher)).toBe(false);
+            expect(isMatch(alertNode, Button, matcher)).toBe(false);
+            expect(isMatch(textNode, Button, matcher)).toBe(false);
+        });
+        it('should allow a partial props object to be provided for matching', () => {
+            const { render, getRootNode } = createRenderer('crm.record.tab');
+            render(_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", children: "Primary" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Alert, { title: "My Alert" }), "Hello"] }));
+            const rootNode = getRootNode();
+            const { childNodes } = rootNode;
+            const primaryButtonNode = childNodes[0];
+            const secondaryButtonNode = childNodes[1];
+            const alertNode = childNodes[2];
+            const textNode = childNodes[3];
+            const matcher = { variant: 'primary' };
+            if (isMatch(primaryButtonNode, Button, matcher)) {
+                expect(primaryButtonNode.props.variant).toEqual('primary');
+            }
+            else {
+                throw new Error('Expected button node');
+            }
+            expect(isMatch(secondaryButtonNode, Button, matcher)).toBe(false);
+            expect(isMatch(alertNode, Button, matcher)).toBe(false);
+            expect(isMatch(textNode, Button, matcher)).toBe(false);
+        });
     });
-    it('should allow a custom matcher function to be provided', () => {
-        const { getRootNode, isMatch } = render(_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", children: "Primary" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Alert, { title: "My Alert" }), "Hello"] }));
-        const rootNode = getRootNode();
-        const children = rootNode.children;
-        const primaryButtonNode = children[0];
-        const secondaryButtonNode = children[1];
-        const alertNode = children[2];
-        const textNode = children[3];
-        const matcher = (node) => node.props.variant === 'primary';
-        if (isMatch(primaryButtonNode, Button, matcher)) {
-            expect(primaryButtonNode.props.variant).toEqual('primary');
-        }
-        else {
-            throw new Error('Expected button node');
-        }
-        expect(isMatch(secondaryButtonNode, Button, matcher)).toBe(false);
-        expect(isMatch(alertNode, Button, matcher)).toBe(false);
-        expect(isMatch(textNode, Button, matcher)).toBe(false);
+    describe('RenderedText.isMatch()', () => {
+        it('should work correctly for text nodes', () => {
+            const { render, find } = createRenderer('crm.record.tab');
+            render(_jsx(Button, { variant: "primary", children: "Primary" }));
+            const buttonNode = find(Button);
+            const textNode = buttonNode.childNodes[0];
+            expect(textNode.isMatch(Button)).toBe(false);
+            expect(textNode.isMatch(Button) && textNode.props.variant === 'primary').toBe(false);
+        });
     });
-    it('should allow a partial props object to be provided for matching', () => {
-        const { getRootNode, isMatch } = render(_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", children: "Primary" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Alert, { title: "My Alert" }), "Hello"] }));
-        const rootNode = getRootNode();
-        const children = rootNode.children;
-        const primaryButtonNode = children[0];
-        const secondaryButtonNode = children[1];
-        const alertNode = children[2];
-        const textNode = children[3];
-        const matcher = { variant: 'primary' };
-        if (isMatch(primaryButtonNode, Button, matcher)) {
-            expect(primaryButtonNode.props.variant).toEqual('primary');
-        }
-        else {
-            throw new Error('Expected button node');
-        }
-        expect(isMatch(secondaryButtonNode, Button, matcher)).toBe(false);
-        expect(isMatch(alertNode, Button, matcher)).toBe(false);
-        expect(isMatch(textNode, Button, matcher)).toBe(false);
+    describe('RenderedElement.isMatch()', () => {
+        it('should work correctly for element nodes', () => {
+            const { render, find } = createRenderer('crm.record.tab');
+            render(_jsx(Button, { variant: "primary", children: "Primary" }));
+            const buttonNode = find(Button);
+            expect(buttonNode.isMatch(Button)).toBe(true);
+        });
+        it('should work correctly for element nodes with a custom matcher function', () => {
+            const { render, find } = createRenderer('crm.record.tab');
+            render(_jsx(Button, { variant: "primary", children: "Primary" }));
+            const buttonNode = find(Button);
+            expect(buttonNode.isMatch(Button, (node) => node.props.variant === 'primary')).toBe(true);
+        });
+        it('should work correctly for element nodes with a partial props object', () => {
+            const { render, find } = createRenderer('crm.record.tab');
+            render(_jsx(Button, { variant: "primary", children: "Primary" }));
+            const buttonNode = find(Button);
+            expect(buttonNode.isMatch(Button, { variant: 'primary' })).toBe(true);
+        });
+    });
+    describe('RenderedFragment.isMatch()', () => {
+        it('should work correctly for fragment nodes', () => {
+            const { render, find } = createRenderer('crm.record.tab');
+            render(_jsx(Button, { variant: "primary", overlay: _jsx(_Fragment, { children: "My Overlay" }), children: "Hello" }));
+            const buttonNode = find(Button);
+            const overlayFragmentNode = buttonNode.props.overlay;
+            expect(isRenderedFragmentNode(overlayFragmentNode)).toBe(true);
+            expect(overlayFragmentNode.isMatch(Button)).toBe(false);
+        });
+    });
+    describe('RenderedRoot.isMatch()', () => {
+        it('should work correctly for root nodes', () => {
+            const { render, getRootNode } = createRenderer('crm.record.tab');
+            render(_jsx(Button, { variant: "primary", children: "Primary" }));
+            const rootNode = getRootNode();
+            expect(rootNode.isMatch(Button)).toBe(false);
+        });
     });
 });

package/dist/experimental/testing/__tests__/logger.spec.js

@@ -0,0 +1,10 @@
+import { describe, expect, it } from 'vitest';
+import { logger } from "../../../logger.js";
+describe('logger in test environment', () => {
+    it('should be available', () => {
+        expect(logger.debug).toBeInstanceOf(Function);
+        expect(logger.info).toBeInstanceOf(Function);
+        expect(logger.warn).toBeInstanceOf(Function);
+        expect(logger.error).toBeInstanceOf(Function);
+    });
+});

package/dist/experimental/testing/__tests__/maybeFind.spec.js

@@ -1,56 +1,65 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Alert, Button, ButtonRow, Text } from '../../../index';
-import { render } from '../index';
+import { Alert, Button, ButtonRow, Text } from "../../../index.js";
+import { createRenderer } from "../index.js";
 describe('maybeFind()', () => {
     it('should return the element when found', () => {
-        const { maybeFind } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const { render, maybeFind } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }), _jsx(Alert, { title: "My Alert" })] }));
         const button = maybeFind(Button);
         expect(button).toBeDefined();
         expect(button?.props).toEqual({ variant: 'primary' });
     });
     it('should return null when element is not found', () => {
-        const { maybeFind } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const { render, maybeFind } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }), _jsx(Alert, { title: "My Alert" })] }));
         const text = maybeFind(Text);
         expect(text).toBeNull();
     });
     it('should return the first matching element when multiple elements match', () => {
-        const { maybeFind } = render(_jsxs(_Fragment, { children: [_jsx(Alert, { title: "First Alert" }), _jsx(Alert, { title: "Second Alert" }), _jsx(Alert, { title: "Third Alert" })] }));
+        const { render, maybeFind } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(Alert, { title: "First Alert" }), _jsx(Alert, { title: "Second Alert" }), _jsx(Alert, { title: "Third Alert" })] }));
         const alert = maybeFind(Alert);
         expect(alert).toBeDefined();
         expect(alert?.props).toMatchObject({ title: 'First Alert' });
     });
     it('should support matcher function', () => {
-        const { maybeFind } = render(_jsx(_Fragment, { children: _jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" })] }) }));
+        const { render, maybeFind } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" })] }) }));
         const primaryButton = maybeFind(Button, (node) => node.props.variant === 'primary');
         expect(primaryButton).toBeDefined();
         expect(primaryButton?.props).toMatchObject({ variant: 'primary' });
     });
     it('should return null when matcher function does not match any elements', () => {
-        const { maybeFind } = render(_jsx(_Fragment, { children: _jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "secondary", children: "Button 2" })] }) }));
+        const { render, maybeFind } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "secondary", children: "Button 2" })] }) }));
         const primaryButton = maybeFind(Button, (node) => node.props.variant === 'primary');
         expect(primaryButton).toBeNull();
     });
     it('should support matcher object', () => {
-        const { maybeFind } = render(_jsx(_Fragment, { children: _jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" })] }) }));
+        const { render, maybeFind } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" })] }) }));
         const primaryButton = maybeFind(Button, { variant: 'primary' });
         expect(primaryButton).toBeDefined();
         expect(primaryButton?.props).toMatchObject({ variant: 'primary' });
     });
     it('should return null when matcher object does not match any elements', () => {
-        const { maybeFind } = render(_jsx(_Fragment, { children: _jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "secondary", children: "Button 2" })] }) }));
+        const { render, maybeFind } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "secondary", children: "Button 2" })] }) }));
         const primaryButton = maybeFind(Button, { variant: 'primary' });
         expect(primaryButton).toBeNull();
     });
     it('should work on nested element nodes', () => {
-        const { find } = render(_jsx(_Fragment, { children: _jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }) }));
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }) }));
         const buttonRow = find(ButtonRow);
         const nestedButton = buttonRow.maybeFind(Button);
         expect(nestedButton).toBeDefined();
         expect(nestedButton?.props).toMatchObject({ variant: 'primary' });
     });
     it('should return null on nested element when not found', () => {
-        const { find } = render(_jsx(_Fragment, { children: _jsx(ButtonRow, { children: _jsx(Button, { variant: "secondary", children: "Button 1" }) }) }));
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(ButtonRow, { children: _jsx(Button, { variant: "secondary", children: "Button 1" }) }) }));
         const buttonRow = find(ButtonRow);
         const text = buttonRow.maybeFind(Text);
         expect(text).toBeNull();

package/dist/experimental/testing/__tests__/maybeFindByTestId.spec.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from 'vitest';
+import { Alert, Button, ButtonRow } from "../../../index.js";
+import { createRenderer } from "../index.js";
+import { ComponentMismatchedByTestIdError, FindInvalidComponentError, } from "../internal/errors.js";
+describe('maybeFindByTestId()', () => {
+    it('should return the element when found by testId', () => {
+        const { render, maybeFindByTestId } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(Button, { variant: "primary", testId: "my-button", children: "Click me" }) }));
+        const button = maybeFindByTestId(Button, 'my-button');
+        expect(button).toBeDefined();
+        expect(button?.props).toMatchObject({
+            variant: 'primary',
+            testId: 'my-button',
+        });
+    });
+    it('should return null when element with the given testId is not found', () => {
+        const { render, maybeFindByTestId } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(Button, { variant: "primary", testId: "my-button", children: "Click me" }) }));
+        const button = maybeFindByTestId(Button, 'non-existent-testid');
+        expect(button).toBeNull();
+    });
+    it('should throw ComponentMismatchedByTestIdError when testId exists but component type does not match', () => {
+        const { render, maybeFindByTestId } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(Button, { variant: "primary", testId: "my-button", children: "Click me" }) }));
+        expect(() => maybeFindByTestId(Alert, 'my-button')).toThrow(ComponentMismatchedByTestIdError);
+    });
+    it('should throw FindInvalidComponentError when target component is invalid', () => {
+        const { render, maybeFindByTestId } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(Button, { variant: "primary", testId: "my-button", children: "Click me" }) }));
+        const MyFakeComponent = () => { };
+        expect(() => maybeFindByTestId(MyFakeComponent, 'my-button')).toThrow(FindInvalidComponentError);
+    });
+    it('should return null after re-rendering removes the component', () => {
+        const { render, maybeFindByTestId } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(Button, { variant: "primary", testId: "my-button", children: "Click me" }) }));
+        let button = maybeFindByTestId(Button, 'my-button');
+        expect(button).toBeDefined();
+        render(_jsx(_Fragment, { children: _jsx(Alert, { title: "My Alert" }) }));
+        button = maybeFindByTestId(Button, 'my-button');
+        expect(button).toBeNull();
+    });
+    it('should handle multiple components with different testIds', () => {
+        const { render, maybeFindByTestId } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", testId: "button-1", children: "Button 1" }), _jsx(Button, { variant: "secondary", testId: "button-2", children: "Button 2" }), _jsx(Button, { variant: "destructive", testId: "button-3", children: "Button 3" })] }));
+        const button1 = maybeFindByTestId(Button, 'button-1');
+        expect(button1?.props.variant).toEqual('primary');
+        const button2 = maybeFindByTestId(Button, 'button-2');
+        expect(button2?.props.variant).toEqual('secondary');
+        const button3 = maybeFindByTestId(Button, 'button-3');
+        expect(button3?.props.variant).toEqual('destructive');
+        const button4 = maybeFindByTestId(Button, 'button-4');
+        expect(button4).toBeNull();
+    });
+    it('should work with nested components', () => {
+        const { render, maybeFindByTestId } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", testId: "nested-button", children: "Nested" }) }) }));
+        const button = maybeFindByTestId(Button, 'nested-button');
+        expect(button).toBeDefined();
+        expect(button?.props).toMatchObject({
+            variant: 'primary',
+            testId: 'nested-button',
+        });
+    });
+});

package/dist/experimental/testing/__tests__/maybeFindChild.spec.js

@@ -1,54 +1,63 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { describe, expect, it } from 'vitest';
-import { Alert, Button, ButtonRow, Text } from '../../../index';
-import { render } from '../index';
+import { Alert, Button, ButtonRow, Text } from "../../../index.js";
+import { createRenderer } from "../index.js";
 describe('maybeFindChild()', () => {
     it('should return direct child from the root node', () => {
-        const { maybeFindChild } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const { render, maybeFindChild } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }), _jsx(Alert, { title: "My Alert" })] }));
         const alert = maybeFindChild(Alert);
         expect(alert).toBeDefined();
         expect(alert?.props).toEqual({ title: 'My Alert' });
     });
     it('should return null when direct child is not found', () => {
-        const { maybeFindChild } = render(_jsx(_Fragment, { children: _jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }) }));
+        const { render, maybeFindChild } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }) }));
         const text = maybeFindChild(Text);
         expect(text).toBeNull();
     });
     it('should only find direct children, not nested descendants', () => {
-        const { maybeFindChild } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const { render, maybeFindChild } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }), _jsx(Alert, { title: "My Alert" })] }));
         const button = maybeFindChild(Button);
         expect(button).toBeNull();
     });
     it('should return first direct child when multiple children match', () => {
-        const { maybeFindChild } = render(_jsxs(_Fragment, { children: [_jsx(Alert, { title: "First Alert" }), _jsx(Alert, { title: "Second Alert" }), _jsx(Alert, { title: "Third Alert" })] }));
+        const { render, maybeFindChild } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(Alert, { title: "First Alert" }), _jsx(Alert, { title: "Second Alert" }), _jsx(Alert, { title: "Third Alert" })] }));
         const alert = maybeFindChild(Alert);
         expect(alert).toBeDefined();
         expect(alert?.props).toMatchObject({ title: 'First Alert' });
     });
     it('should support matcher function', () => {
-        const { maybeFindChild } = render(_jsxs(_Fragment, { children: [_jsx(Alert, { title: "First Alert" }), _jsx(Alert, { title: "Second Alert" })] }));
+        const { render, maybeFindChild } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(Alert, { title: "First Alert" }), _jsx(Alert, { title: "Second Alert" })] }));
         const secondAlert = maybeFindChild(Alert, (node) => node.props.title === 'Second Alert');
         expect(secondAlert).toBeDefined();
         expect(secondAlert?.props).toMatchObject({ title: 'Second Alert' });
     });
     it('should return null when matcher function does not match any children', () => {
-        const { maybeFindChild } = render(_jsxs(_Fragment, { children: [_jsx(Alert, { title: "First Alert" }), _jsx(Alert, { title: "Second Alert" })] }));
+        const { render, maybeFindChild } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(Alert, { title: "First Alert" }), _jsx(Alert, { title: "Second Alert" })] }));
         const thirdAlert = maybeFindChild(Alert, (node) => node.props.title === 'Third Alert');
         expect(thirdAlert).toBeNull();
     });
     it('should support matcher object', () => {
-        const { maybeFindChild } = render(_jsxs(_Fragment, { children: [_jsx(Alert, { title: "First Alert" }), _jsx(Alert, { title: "Second Alert" })] }));
+        const { render, maybeFindChild } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(Alert, { title: "First Alert" }), _jsx(Alert, { title: "Second Alert" })] }));
         const secondAlert = maybeFindChild(Alert, { title: 'Second Alert' });
         expect(secondAlert).toBeDefined();
         expect(secondAlert?.props).toMatchObject({ title: 'Second Alert' });
     });
     it('should return null when matcher object does not match any children', () => {
-        const { maybeFindChild } = render(_jsxs(_Fragment, { children: [_jsx(Alert, { title: "First Alert" }), _jsx(Alert, { title: "Second Alert" })] }));
+        const { render, maybeFindChild } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(Alert, { title: "First Alert" }), _jsx(Alert, { title: "Second Alert" })] }));
         const thirdAlert = maybeFindChild(Alert, { title: 'Third Alert' });
         expect(thirdAlert).toBeNull();
     });
     it('should work on nested element nodes', () => {
-        const { find } = render(_jsx(_Fragment, { children: _jsxs(ButtonRow, { children: [_jsx(Button, { variant: "primary", children: "Button 1" }), _jsx(Button, { variant: "secondary", children: "Button 2" })] }) }));
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsxs(ButtonRow, { children: [_jsx(Button, { variant: "primary", children: "Button 1" }), _jsx(Button, { variant: "secondary", children: "Button 2" })] }) }));
         const buttonRow = find(ButtonRow);
         const primaryButton = buttonRow.maybeFindChild(Button, {
             variant: 'primary',
@@ -57,7 +66,8 @@ describe('maybeFindChild()', () => {
         expect(primaryButton?.props).toMatchObject({ variant: 'primary' });
     });
     it('should return null on nested element when child not found', () => {
-        const { find } = render(_jsx(_Fragment, { children: _jsx(ButtonRow, { children: _jsx(Button, { variant: "secondary", children: "Button 1" }) }) }));
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(ButtonRow, { children: _jsx(Button, { variant: "secondary", children: "Button 1" }) }) }));
         const buttonRow = find(ButtonRow);
         const text = buttonRow.maybeFindChild(Text);
         expect(text).toBeNull();