@hubspot/ui-extensions 0.11.1 → 0.11.3

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

@@ -0,0 +1,96 @@
+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.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!" }) }) }));
+        }
+        expect(() => render(_jsx(MyComponent, {}))).toThrow(InvalidComponentsError);
+        let errorMessage;
+        try {
+            render(_jsx(MyComponent, {}));
+        }
+        catch (error) {
+            errorMessage = String(error);
+        }
+        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 = () => {
+                setCount(count + 1);
+            };
+            return (_jsx(Button, { variant: "primary", onClick: handleClick, children: count === 0 ? 'Click me!' : _jsxs("div", { children: ["Clicked ", count, " times"] }) }));
+        }
+        const { find } = render(_jsx(Counter, {}));
+        expect(find(Button).text).toEqual('Click me!');
+        // Should throw an error because the component is invalid
+        expect(() => {
+            find(Button).trigger('onClick');
+        }).toThrow(InvalidComponentsError);
+    });
+    it('should throw an error if the component is invalid after an asynchronous update', async () => {
+        function AsyncCounter() {
+            const [count, setCount] = useState(0);
+            useEffect(() => {
+                setTimeout(() => {
+                    setCount((currentCount) => currentCount + 1);
+                }, 10);
+            }, []);
+            return (_jsx(Button, { children: count === 0 ? 'Click me!' : _jsxs("div", { children: ["Clicked ", count, " times"] }) }));
+        }
+        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');
+        })).rejects.toThrow(InvalidComponentsError);
+    });
+    it('should throw an error if the component is invalid after an asynchronous update when not using waitFor', async () => {
+        const usePromise = (promise) => {
+            const [isPending, setIsPending] = useState(true);
+            useEffect(() => {
+                setIsPending(true);
+                promise
+                    .then(() => setIsPending(false))
+                    .catch(() => setIsPending(false));
+            }, [promise]);
+            return { isPending };
+        };
+        function AsyncCounter({ promise }) {
+            const { isPending } = usePromise(promise);
+            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 { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(AsyncCounter, { promise: loadingDeferred.promise }));
+        expect(find(Text).text).toEqual('Loading...');
+        loadingDeferred.resolve();
+        await loadingDeferred.promise;
+        // Wait another 5ms to be extra sure that the component has rerendered
+        await setTimeoutPromise(5);
+        expect(() => {
+            find(Text);
+        }).toThrow(InvalidComponentsError);
+    });
+});

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

@@ -0,0 +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.js";
+import { createRenderer, isMatch, isRenderedFragmentNode, } from "../index.js";
+describe('isMatch()', () => {
+    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);
+        });
+    });
+    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);
+        });
+    });
+    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

@@ -0,0 +1,67 @@
+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.js";
+import { createRenderer } from "../index.js";
+describe('maybeFind()', () => {
+    it('should return the element when found', () => {
+        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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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

@@ -0,0 +1,75 @@
+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.js";
+import { createRenderer } from "../index.js";
+describe('maybeFindChild()', () => {
+    it('should return direct child from the root node', () => {
+        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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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',
+        });
+        expect(primaryButton).toBeDefined();
+        expect(primaryButton?.props).toMatchObject({ variant: 'primary' });
+    });
+    it('should return null on nested element when child not found', () => {
+        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();
+    });
+});

package/dist/experimental/testing/__tests__/mocks.actions.spec.js

@@ -0,0 +1,19 @@
+import { describe, it } from 'vitest';
+import { createRenderer } from "../index.js";
+describe('mock actions', () => {
+    it('should provide the ability to spy on the actions for the "crm.record.tab" extension point', () => {
+        const { mocks } = createRenderer('crm.record.tab');
+        const { actions } = mocks;
+        actions.reloadPage();
+        expect(actions.reloadPage.callCount).toBe(1);
+        actions.onCrmPropertiesUpdate(['firstname', 'lastname'], () => { });
+        expect(actions.onCrmPropertiesUpdate.callCount).toBe(1);
+    });
+    it('should provide the ability to spy on the actions for the "settings" extension point', () => {
+        const { mocks } = createRenderer('settings');
+        const { actions } = mocks;
+        actions.addAlert({
+            message: 'Test Alert',
+        });
+    });
+});

package/dist/experimental/testing/__tests__/mocks.context.spec.js

@@ -0,0 +1,24 @@
+import { describe, it } from 'vitest';
+import { createRenderer } from "../index.js";
+describe('mock context', () => {
+    it('should provide reasonable mock data for the "crm.record.tab" extension point', () => {
+        const { mocks } = createRenderer('crm.record.tab');
+        const { context } = mocks;
+        expect(context.location).toBe('crm.record.tab');
+        expect(context.user.email).toBe('fake_email@example.com');
+        expect(context.user.firstName).toBe('fake_firstName');
+        expect(context.user.lastName).toBe('fake_lastName');
+        expect(context.portal.id).toBe(123);
+        expect(context.portal.timezone).toBe('America/New_York');
+        expect(context.crm.objectId).toBe(123);
+        expect(context.crm.objectTypeId).toBe('0-1');
+        expect(context.variables).toEqual({ fake_variable: 'fake_value' });
+    });
+    it('should provide reasonable mock data for the "settings" extension point', () => {
+        const { mocks } = createRenderer('settings');
+        const { context } = mocks;
+        expect(context.location).toBe('settings');
+        expect(context.portal.id).toBe(123);
+        expect(context.portal.timezone).toBe('America/New_York');
+    });
+});

package/dist/experimental/testing/__tests__/mocks.runServerlessFunction.spec.js

@@ -0,0 +1,35 @@
+import { describe, it } from 'vitest';
+import { createRenderer } from "../index.js";
+import { ServerlessExecutionStatus, } from "../../../shared/types/http-requests.js";
+describe('mock runServerlessFunction', () => {
+    it('should provide the ability to spy on the runServerlessFunction function', async () => {
+        const { mocks } = createRenderer('crm.record.tab');
+        const { runServerlessFunction } = mocks;
+        const serverlessExecutionResult = {
+            status: ServerlessExecutionStatus.Success,
+            response: {
+                myFakeData: 'hello',
+                anotherFakeData: 'bye',
+            },
+        };
+        runServerlessFunction.nextResult(Promise.resolve(serverlessExecutionResult));
+        const result = await runServerlessFunction({
+            name: 'fake_function',
+            parameters: {
+                param1: 'value1',
+            },
+            propertiesToSend: ['prop1', 'prop2'],
+        });
+        expect(result).toEqual(serverlessExecutionResult);
+        expect(runServerlessFunction.callCount).toBe(1);
+        expect(runServerlessFunction.calls[0]).toEqual([
+            {
+                name: 'fake_function',
+                parameters: {
+                    param1: 'value1',
+                },
+                propertiesToSend: ['prop1', 'prop2'],
+            },
+        ]);
+    });
+});

package/dist/experimental/testing/__tests__/mocks.useAssociations.spec.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { describe, expect, it } from 'vitest';
+import { Text } from "../../../index.js";
+import { createRenderer } from "../index.js";
+import { useAssociations } from "../../../crm/index.js";
+function MyComponent() {
+    const { results, isLoading, error } = useAssociations({
+        toObjectType: '0-1',
+        properties: ['firstname', 'lastname'],
+        pageLength: 10,
+    });
+    if (isLoading) {
+        return _jsx(Text, { children: "Loading..." });
+    }
+    if (error) {
+        return _jsx(Text, { children: "Something went wrong!" });
+    }
+    return (_jsx(_Fragment, { children: results.map((result) => (_jsxs(Text, { children: [result.properties.firstname, " ", result.properties.lastname] }, result.toObjectId))) }));
+}
+describe('mock useAssociations', () => {
+    it('should provide a default mock implementation', () => {
+        const { render } = createRenderer('crm.record.tab');
+        const { findAll } = render(_jsx(MyComponent, {}));
+        const textNodes = findAll(Text);
+        expect(textNodes.length).toEqual(1);
+        expect(textNodes[0].text).toEqual('fake_firstname fake_lastname');
+    });
+    it('should allow mocking the next function result', () => {
+        const { render, mocks } = createRenderer('crm.record.tab');
+        mocks.useAssociations.nextResult({
+            results: [],
+            error: new Error('Something went wrong!'),
+            isLoading: false,
+            pagination: {
+                hasNextPage: false,
+                hasPreviousPage: false,
+                currentPage: 1,
+                pageSize: 10,
+                nextPage: () => { },
+                previousPage: () => { },
+                reset: () => { },
+            },
+        });
+        const { find } = render(_jsx(MyComponent, {}));
+        expect(find(Text).text).toEqual('Something went wrong!');
+    });
+});

package/dist/experimental/testing/__tests__/mocks.useCrmProperties.spec.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { describe, expect, it } from 'vitest';
+import { Text } from "../../../index.js";
+import { createRenderer } from "../index.js";
+import { useCrmProperties } from "../../../crm/index.js";
+function MyComponent() {
+    const { properties, isLoading, error } = useCrmProperties([
+        'firstname',
+        'lastname',
+    ]);
+    if (isLoading) {
+        return _jsx(Text, { children: "Loading..." });
+    }
+    if (error) {
+        return _jsx(Text, { children: "Something went wrong!" });
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(Text, { children: ["First name: ", properties.firstname] }), _jsxs(Text, { children: ["Last name: ", properties.lastname] })] }));
+}
+describe('mock useCrmProperties', () => {
+    it('should provide a default mock implementation', () => {
+        const { render } = createRenderer('crm.record.tab');
+        const { findAll } = render(_jsx(MyComponent, {}));
+        const textNodes = findAll(Text);
+        expect(textNodes.length).toEqual(2);
+        expect(textNodes[0].text).toEqual('First name: fake_firstname');
+        expect(textNodes[1].text).toEqual('Last name: fake_lastname');
+    });
+    it('should allow mocking the next function result', () => {
+        const { render, mocks } = createRenderer('crm.record.tab');
+        mocks.useCrmProperties.nextResult({
+            properties: {},
+            error: new Error('Something went wrong!'),
+            isLoading: false,
+        });
+        const { find } = render(_jsx(MyComponent, {}));
+        expect(find(Text).text).toEqual('Something went wrong!');
+    });
+    it('should allow providing a custom mock function', () => {
+        const { render, mocks, findAll } = createRenderer('crm.record.tab');
+        mocks.useCrmProperties.willCall((propertyNames) => {
+            const properties = propertyNames.reduce((acc, propertyName) => {
+                acc[propertyName] = propertyName.toUpperCase();
+                return acc;
+            }, {});
+            return {
+                properties,
+                error: null,
+                isLoading: false,
+            };
+        });
+        render(_jsx(MyComponent, {}));
+        const textNodes = findAll(Text);
+        const firstNameText = textNodes[0];
+        const lastNameText = textNodes[1];
+        expect(firstNameText.isMatch(Text) && firstNameText.text).toEqual('First name: FIRSTNAME');
+        expect(lastNameText.isMatch(Text) && lastNameText.text).toEqual('Last name: LASTNAME');
+    });
+});

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { describe, expect, it } from 'vitest';
+import { Button, ButtonRow } from "../../../index.js";
+import { createRenderer } from "../index.js";
+describe('props', () => {
+    it('should remove the children prop from the props object', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Click me!" }) }) }));
+        const buttonRow = find(ButtonRow);
+        // @ts-expect-error - children should not be exposed in props
+        expect(buttonRow.props.children).toBeUndefined();
+    });
+});