@hubspot/ui-extensions 0.11.1 → 0.11.3

package/dist/crm/hooks/useAssociations.d.ts

@@ -1,5 +1,5 @@
-import { type FetchAssociationsRequest, type AssociationResult } from '../utils/fetchAssociations';
-import { type FetchCrmPropertiesOptions } from '../utils/fetchCrmProperties';
+import { type FetchAssociationsRequest, type AssociationResult } from '../utils/fetchAssociations.ts';
+import { type FetchCrmPropertiesOptions } from '../utils/fetchCrmProperties.ts';
 export interface UseAssociationsOptions {
     propertiesToFormat?: 'all' | string[];
     formattingOptions?: FetchCrmPropertiesOptions['formattingOptions'];
@@ -22,4 +22,6 @@ export interface UseAssociationsResult {
 /**
  * A hook to fetch and manage associations between CRM objects with pagination support.
  */
-export declare function useAssociations(config: Omit<FetchAssociationsRequest, 'offset'>, options?: UseAssociationsOptions): UseAssociationsResult;
+declare function useAssociationsInternal(config: Omit<FetchAssociationsRequest, 'offset'>, options?: UseAssociationsOptions): UseAssociationsResult;
+export declare const useAssociations: typeof useAssociationsInternal;
+export {};

package/dist/crm/hooks/useAssociations.js

@@ -1,5 +1,6 @@
 import { useEffect, useReducer, useMemo, useRef, useCallback } from 'react';
-import { fetchAssociations, DEFAULT_PAGE_SIZE, calculatePaginationFlags, } from '../utils/fetchAssociations';
+import { fetchAssociations, DEFAULT_PAGE_SIZE, calculatePaginationFlags, } from "../utils/fetchAssociations.js";
+import { createMockAwareHook } from "../../internal/hook-utils.js";
 function createInitialState(pageSize) {
     return {
         results: [],
@@ -82,7 +83,7 @@ const DEFAULT_OPTIONS = {};
 /**
  * A hook to fetch and manage associations between CRM objects with pagination support.
  */
-export function useAssociations(config, options = DEFAULT_OPTIONS) {
+function useAssociationsInternal(config, options = DEFAULT_OPTIONS) {
     const pageSize = config?.pageLength ?? DEFAULT_PAGE_SIZE;
     const [state, dispatch] = useReducer(associationsReducer, useMemo(() => createInitialState(pageSize), [pageSize]));
     /**
@@ -202,3 +203,4 @@ export function useAssociations(config, options = DEFAULT_OPTIONS) {
         },
     };
 }
+export const useAssociations = createMockAwareHook('useAssociations', useAssociationsInternal);

package/dist/crm/hooks/useCrmProperties.d.ts

@@ -1,4 +1,4 @@
-import { type FetchCrmPropertiesOptions } from '../utils/fetchCrmProperties';
+import { type FetchCrmPropertiesOptions } from '../utils/fetchCrmProperties.ts';
 export interface CrmPropertiesState {
     properties: Record<string, string | null>;
     error: Error | null;
@@ -7,4 +7,6 @@ export interface CrmPropertiesState {
 /**
  * A hook for using and managing CRM properties.
  */
-export declare function useCrmProperties(propertyNames: string[], options?: FetchCrmPropertiesOptions): CrmPropertiesState;
+declare function useCrmPropertiesInternal(propertyNames: string[], options?: FetchCrmPropertiesOptions): CrmPropertiesState;
+export declare const useCrmProperties: typeof useCrmPropertiesInternal;
+export {};

package/dist/crm/hooks/useCrmProperties.js

@@ -1,5 +1,6 @@
 import { useEffect, useReducer, useMemo, useRef } from 'react';
-import { fetchCrmProperties, } from '../utils/fetchCrmProperties';
+import { fetchCrmProperties, } from "../utils/fetchCrmProperties.js";
+import { createMockAwareHook } from "../../internal/hook-utils.js";
 const initialState = {
     properties: {},
     error: null,
@@ -35,7 +36,7 @@ const DEFAULT_OPTIONS = {};
 /**
  * A hook for using and managing CRM properties.
  */
-export function useCrmProperties(propertyNames, options = DEFAULT_OPTIONS) {
+function useCrmPropertiesInternal(propertyNames, options = DEFAULT_OPTIONS) {
     const [state, dispatch] = useReducer(crmPropertiesReducer, initialState);
     /**
      * HOOK OPTIMIZATION:
@@ -107,3 +108,4 @@ export function useCrmProperties(propertyNames, options = DEFAULT_OPTIONS) {
     }, [stablePropertyNames, stableOptions]);
     return state;
 }
+export const useCrmProperties = createMockAwareHook('useCrmProperties', useCrmPropertiesInternal);

package/dist/crm/index.d.ts

@@ -1,4 +1,4 @@
-export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmSimpleDeadline, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, } from '../__synced__/crmRemoteComponents.synced';
-export { useCrmProperties } from './hooks/useCrmProperties';
-export { useAssociations } from './hooks/useAssociations';
-export type * from '../__synced__/types/crm.synced';
+export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmSimpleDeadline, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, } from '../shared/remoteComponents.tsx';
+export { useCrmProperties } from './hooks/useCrmProperties.ts';
+export { useAssociations } from './hooks/useAssociations.ts';
+export type * from '../shared/types/crm.ts';

package/dist/crm/index.js

@@ -1,3 +1,3 @@
-export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmSimpleDeadline, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, } from '../__synced__/crmRemoteComponents.synced';
-export { useCrmProperties } from './hooks/useCrmProperties';
-export { useAssociations } from './hooks/useAssociations';
+export { CrmPropertyList, CrmAssociationTable, CrmDataHighlight, CrmReport, CrmAssociationPivot, CrmAssociationPropertyList, CrmAssociationStageTracker, CrmSimpleDeadline, CrmStageTracker, CrmStatistics, CrmActionButton, CrmActionLink, CrmCardActions, } from "../shared/remoteComponents.js";
+export { useCrmProperties } from "./hooks/useCrmProperties.js";
+export { useAssociations } from "./hooks/useAssociations.js";

package/dist/crm/utils/fetchAssociations.d.ts

@@ -1,4 +1,4 @@
-import { FetchCrmPropertiesOptions } from './fetchCrmProperties';
+import { FetchCrmPropertiesOptions } from './fetchCrmProperties.ts';
 export declare const DEFAULT_PAGE_SIZE = 10;
 /**
  * Calculate pagination flags based on current page and API hasMore flag

package/dist/experimental/index.d.ts

@@ -1,4 +1,4 @@
-export { useCrmProperties } from '../crm/hooks/useCrmProperties';
-export { useAssociations } from '../crm/hooks/useAssociations';
-export { Iframe, MediaObject, Stack2, Center, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, } from '../__synced__/experimentalRemoteComponents.synced';
-export type * from '../__synced__/experimental/types.synced';
+export { useCrmProperties } from '../crm/hooks/useCrmProperties.ts';
+export { useAssociations } from '../crm/hooks/useAssociations.ts';
+export { Iframe, MediaObject, Stack2, Center, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, } from '../shared/remoteComponents.tsx';
+export type * from '../shared/types/experimental.ts';

package/dist/experimental/index.js

@@ -1,3 +1,3 @@
-export { useCrmProperties } from '../crm/hooks/useCrmProperties';
-export { useAssociations } from '../crm/hooks/useAssociations';
-export { Iframe, MediaObject, Stack2, Center, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, } from '../__synced__/experimentalRemoteComponents.synced';
+export { useCrmProperties } from "../crm/hooks/useCrmProperties.js";
+export { useAssociations } from "../crm/hooks/useAssociations.js";
+export { Iframe, MediaObject, Stack2, Center, GridItem, Grid, SettingsView, ExpandableText, Popover, FileInput, } from "../shared/remoteComponents.js";

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

@@ -0,0 +1,23 @@
+import { InvalidExtensionPointLocationError } from "../internal/errors.js";
+import { createRenderer } from "../render.js";
+describe('createRenderer', () => {
+    it('should create a renderer object', () => {
+        const renderer = createRenderer('crm.record.tab');
+        expect(renderer.render).toBeTypeOf('function');
+    });
+    it('should throw an error for an invalid extension point location', () => {
+        expect(() => {
+            createRenderer('INVALID_LOCATION');
+        }).toThrow(new InvalidExtensionPointLocationError('INVALID_LOCATION'));
+    });
+    it('should throw an error for an invalid extension point location with a helpful error message', () => {
+        let errorMessage;
+        try {
+            createRenderer('INVALID_LOCATION');
+        }
+        catch (error) {
+            errorMessage = String(error);
+        }
+        expect(errorMessage).toBe(`InvalidExtensionPointLocationError: Invalid extension point location of "INVALID_LOCATION". Allowed locations are: "crm.preview", "crm.record.sidebar", "crm.record.tab", "helpdesk.sidebar", "uie.playground.middle", "settings", "home"`);
+    });
+});

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

@@ -0,0 +1,57 @@
+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.js";
+import { createRenderer, isRenderedTextNode } from "../index.js";
+function MyComponent() {
+    return (_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", overlay: _jsx(List, { children: _jsx(Text, { children: "Item 1" }) }), children: "Click me!" }) }), _jsx(Alert, { title: "My Alert" })] }));
+}
+describe('debugging', () => {
+    describe('toString', () => {
+        it('should allow the root node to be converted to a string', () => {
+            const { render, getRootNode } = createRenderer('crm.record.tab');
+            render(_jsx(MyComponent, {}));
+            expect(getRootNode().toString()).toMatchSnapshot();
+        });
+        it('should allow a component node to be converted to a string', () => {
+            const { render, find } = createRenderer('crm.record.tab');
+            render(_jsx(MyComponent, {}));
+            expect(find(Button).toString()).toMatchSnapshot();
+        });
+    });
+    describe('debugLog()', () => {
+        let consoleLogSpy;
+        beforeEach(() => {
+            consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => { });
+        });
+        afterEach(() => {
+            consoleLogSpy.mockRestore();
+        });
+        it('should allow debug logging the root node', () => {
+            const { render, debugLog } = createRenderer('crm.record.tab');
+            render(_jsx(MyComponent, {}));
+            debugLog('MY COMPONENT TREE');
+            expect(consoleLogSpy.mock.calls).toMatchSnapshot();
+        });
+        it('should allow debug logging a component element node', () => {
+            const { render, find } = createRenderer('crm.record.tab');
+            render(_jsx(MyComponent, {}));
+            find(Button).debugLog('MY BUTTON');
+            expect(consoleLogSpy.mock.calls).toMatchSnapshot();
+        });
+        it('should allow debug logging a component element node without a label', () => {
+            const { render, find } = createRenderer('crm.record.tab');
+            render(_jsx(MyComponent, {}));
+            find(Button).debugLog();
+            expect(consoleLogSpy.mock.calls).toMatchSnapshot();
+        });
+        it('should allow debug logging a text node', () => {
+            const { render, find } = createRenderer('crm.record.tab');
+            render(_jsx(MyComponent, {}));
+            const buttonNode = find(Button);
+            const textNode = buttonNode.childNodes[0];
+            expect(isRenderedTextNode(textNode)).toBe(true);
+            textNode.debugLog('MY TEXT LABEL');
+            expect(consoleLogSpy.mock.calls).toMatchSnapshot();
+        });
+    });
+});

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

@@ -0,0 +1,48 @@
+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";
+import { ComponentNotFoundError, FindInvalidComponentError, } from "../internal/errors.js";
+describe('find()', () => {
+    it('should allow assertions against initial rendered output', () => {
+        const buttonLabel = 'Click me!';
+        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);
+        expect(button.props).toEqual({ variant: 'primary' });
+        expect(button.text).toEqual(buttonLabel);
+    });
+    it('should allow finding a matching component based on props object', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" })] }), _jsx(Alert, { title: "My Alert" })] }));
+        const primaryButton = find(Button, { variant: 'primary' });
+        expect(primaryButton.props).toMatchObject({ variant: 'primary' });
+    });
+    it('should allow finding a matching component based on a predicate function', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" })] }), _jsx(Alert, { title: "My Alert" })] }));
+        const primaryButton = find(Button, (node) => node.props.variant === 'primary');
+        expect(primaryButton.props).toMatchObject({ variant: 'primary' });
+    });
+    it('should throw an error when no match is found', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(Alert, { title: "My Alert" }));
+        expect(() => find(Text)).toThrow(ComponentNotFoundError);
+    });
+    it('should throw an error when target component is invalid', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(Alert, { title: "My Alert" }));
+        const MyFakeComponent = () => { };
+        expect(() => find(MyFakeComponent)).toThrow(FindInvalidComponentError);
+    });
+    it('should allow re-rendering and finding a matching component', () => {
+        const { render, find, maybeFind } = createRenderer('crm.record.tab');
+        render(_jsx(Alert, { title: "My Alert" }));
+        const alert = find(Alert);
+        expect(alert.props).toEqual({ title: 'My Alert' });
+        render(_jsx(Button, { variant: "primary", children: "Click me!" }));
+        const button = find(Button);
+        expect(button.props).toEqual({ variant: 'primary' });
+        expect(maybeFind(Alert)).toBeNull(); // The Alert should be gone now since we re-rendered.
+    });
+});

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { describe, expect, it } from 'vitest';
+import { Alert, Button, ButtonRow } from "../../../index.js";
+import { createRenderer } from "../index.js";
+describe('findAll()', () => {
+    it('should allow finding all matching components', () => {
+        const { render, findAll } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" })] }), _jsx(Alert, { title: "My Alert" })] }));
+        const buttons = findAll(Button);
+        expect(buttons[0]?.props).toMatchObject({ variant: 'secondary' });
+        expect(buttons[1]?.props).toMatchObject({ variant: 'primary' });
+    });
+});

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { describe, expect, it } from 'vitest';
+import { Alert, Button, ButtonRow, Text } from "../../../index.js";
+import { createRenderer } from "../index.js";
+describe('findAllChildren()', () => {
+    it('should allow finding all direct children from the root node', () => {
+        const { render, findAllChildren } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" })] }), _jsx(Alert, { title: "My Alert" }), _jsx(Alert, { title: "Another Alert" })] }));
+        const alerts = findAllChildren(Alert);
+        expect(alerts).toHaveLength(2);
+        expect(alerts[0]?.props).toMatchObject({ title: 'My Alert' });
+        expect(alerts[1]?.props).toMatchObject({ title: 'Another Alert' });
+    });
+    it('should only find direct children, not nested descendants', () => {
+        const { render, findAllChildren } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" })] }), _jsx(Alert, { title: "My Alert" })] }));
+        const buttons = findAllChildren(Button);
+        expect(buttons).toHaveLength(0);
+    });
+    it('should allow finding all direct children from a nested component', () => {
+        const { render, find } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" })] }), _jsx(Alert, { title: "My Alert" })] }));
+        const buttonRow = find(ButtonRow);
+        const buttons = buttonRow.findAllChildren(Button);
+        expect(buttons).toHaveLength(2);
+        expect(buttons[0]?.props).toMatchObject({ variant: 'secondary' });
+        expect(buttons[1]?.props).toMatchObject({ variant: 'primary' });
+    });
+    it('should return empty array when no direct children match', () => {
+        const { render, findAllChildren } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }) }));
+        const texts = findAllChildren(Text);
+        expect(texts).toHaveLength(0);
+    });
+    it('should support matcher function', () => {
+        const { render, find } = 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" }), _jsx(Button, { variant: "secondary", children: "Button 3" })] }) }));
+        const buttonRow = find(ButtonRow);
+        const secondaryButtons = buttonRow.findAllChildren(Button, (node) => node.props.variant === 'secondary');
+        expect(secondaryButtons).toHaveLength(2);
+        expect(secondaryButtons[0]?.props).toMatchObject({ variant: 'secondary' });
+        expect(secondaryButtons[1]?.props).toMatchObject({ variant: 'secondary' });
+    });
+    it('should support matcher object', () => {
+        const { render, find } = 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" }), _jsx(Button, { variant: "secondary", children: "Button 3" })] }) }));
+        const buttonRow = find(ButtonRow);
+        const primaryButtons = buttonRow.findAllChildren(Button, {
+            variant: 'primary',
+        });
+        expect(primaryButtons).toHaveLength(1);
+        expect(primaryButtons[0]?.props).toMatchObject({ variant: 'primary' });
+    });
+});

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

@@ -0,0 +1,126 @@
+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";
+import { ComponentMismatchedByTestIdError, ComponentNotFoundByTestIdError, FindInvalidComponentError, } from "../internal/errors.js";
+describe('findByTestId()', () => {
+    it('should find a component by testId', () => {
+        const { render, findByTestId } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(Button, { variant: "primary", testId: "primary-button", children: "Click me" }) }));
+        const button = findByTestId(Button, 'primary-button');
+        expect(button.props).toMatchObject({
+            variant: 'primary',
+            testId: 'primary-button',
+        });
+        expect(button.text).toEqual('Click me');
+    });
+    it('should find a component by testId among multiple components', () => {
+        const { render, findByTestId } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(Button, { variant: "secondary", testId: "button-1", children: "Button 1" }), _jsx(Button, { variant: "primary", testId: "button-2", children: "Button 2" }), _jsx(Button, { variant: "destructive", testId: "button-3", children: "Button 3" })] }));
+        const button = findByTestId(Button, 'button-2');
+        expect(button.props).toMatchObject({
+            variant: 'primary',
+            testId: 'button-2',
+        });
+        expect(button.text).toEqual('Button 2');
+    });
+    it('should find a nested component by testId', () => {
+        const { render, findByTestId } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", testId: "nested-button", children: "Nested Button" }) }) }));
+        const button = findByTestId(Button, 'nested-button');
+        expect(button.props).toMatchObject({
+            variant: 'primary',
+            testId: 'nested-button',
+        });
+        expect(button.text).toEqual('Nested Button');
+    });
+    it('should find different component types by their testIds', () => {
+        const { render, findByTestId } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", testId: "my-button", children: "Click me" }), _jsx(Alert, { title: "My Alert", testId: "my-alert" })] }));
+        const button = findByTestId(Button, 'my-button');
+        expect(button.props).toMatchObject({
+            variant: 'primary',
+            testId: 'my-button',
+        });
+        const alert = findByTestId(Alert, 'my-alert');
+        expect(alert.props).toMatchObject({
+            title: 'My Alert',
+            testId: 'my-alert',
+        });
+    });
+    it('should throw ComponentNotFoundByTestIdError when testId is not found', () => {
+        const { render, findByTestId } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(Button, { variant: "primary", testId: "existing-button", children: "Click me" }) }));
+        expect(() => findByTestId(Button, 'non-existent-testid')).toThrow(ComponentNotFoundByTestIdError);
+    });
+    it('should throw ComponentNotFoundByTestIdError when component has no testId', () => {
+        const { render, findByTestId } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(Button, { variant: "primary", children: "Click me" }) }));
+        expect(() => findByTestId(Button, 'some-testid')).toThrow(ComponentNotFoundByTestIdError);
+    });
+    it('should throw ComponentNotFoundByTestIdError with a helpful message when component has no testId', () => {
+        const { render, findByTestId } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(Button, { variant: "primary", children: "Click me" }) }));
+        let error = null;
+        try {
+            findByTestId(Button, 'some-testid');
+        }
+        catch (_error) {
+            error = _error;
+        }
+        expect(error).toBeInstanceOf(ComponentNotFoundByTestIdError);
+        expect(error?.message).toMatchSnapshot();
+    });
+    it('should throw ComponentMismatchedByTestIdError when testId exists but component type does not match', () => {
+        const { render, findByTestId } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", testId: "my-element", children: "Click me" }), _jsx(Alert, { title: "My Alert", testId: "my-alert" })] }));
+        expect(() => findByTestId(Alert, 'my-element')).toThrow(ComponentMismatchedByTestIdError);
+    });
+    it('should throw FindInvalidComponentError when target component is invalid', () => {
+        const { render, findByTestId } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(Button, { variant: "primary", testId: "my-button", children: "Click me" }) }));
+        const MyFakeComponent = () => { };
+        expect(() => findByTestId(MyFakeComponent, 'my-button')).toThrow(FindInvalidComponentError);
+    });
+    it('should work after re-rendering with new components', () => {
+        const { render, findByTestId } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(Button, { variant: "primary", testId: "button-1", children: "Button 1" }) }));
+        let button = findByTestId(Button, 'button-1');
+        expect(button.text).toEqual('Button 1');
+        render(_jsx(_Fragment, { children: _jsx(Button, { variant: "secondary", testId: "button-2", children: "Button 2" }) }));
+        button = findByTestId(Button, 'button-2');
+        expect(button.text).toEqual('Button 2');
+        expect(() => findByTestId(Button, 'button-1')).toThrow(ComponentNotFoundByTestIdError);
+    });
+    it('should handle testIds with special characters', () => {
+        const { render, findByTestId } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", testId: "button-with-dashes-123", children: "Button 1" }), _jsx(Button, { variant: "secondary", testId: "button_with_underscores", children: "Button 2" }), _jsx(Button, { variant: "destructive", testId: "button.with.dots", children: "Button 3" })] }));
+        const button1 = findByTestId(Button, 'button-with-dashes-123');
+        expect(button1.props.variant).toEqual('primary');
+        const button2 = findByTestId(Button, 'button_with_underscores');
+        expect(button2.props.variant).toEqual('secondary');
+        const button3 = findByTestId(Button, 'button.with.dots');
+        expect(button3.props.variant).toEqual('destructive');
+    });
+    it('should work with deeply nested components', () => {
+        const { render, findByTestId } = createRenderer('crm.record.tab');
+        render(_jsx(_Fragment, { children: _jsx(ButtonRow, { children: _jsx(ButtonRow, { children: _jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", testId: "deeply-nested", children: "Deep Button" }) }) }) }) }));
+        const button = findByTestId(Button, 'deeply-nested');
+        expect(button.props).toMatchObject({
+            variant: 'primary',
+            testId: 'deeply-nested',
+        });
+    });
+    it('should find component by testId regardless of rendering order', () => {
+        const { render, findByTestId } = createRenderer('crm.record.tab');
+        render(_jsxs(_Fragment, { children: [_jsx(Text, { testId: "text-1", children: "First" }), _jsx(Button, { variant: "primary", testId: "button-1", children: "Button" }), _jsx(Alert, { title: "Alert", testId: "alert-1" }), _jsx(Text, { testId: "text-2", children: "Second" })] }));
+        const button = findByTestId(Button, 'button-1');
+        expect(button.props.variant).toEqual('primary');
+        const text1 = findByTestId(Text, 'text-1');
+        expect(text1.text).toEqual('First');
+        const text2 = findByTestId(Text, 'text-2');
+        expect(text2.text).toEqual('Second');
+        const alert = findByTestId(Alert, 'alert-1');
+        expect(alert.props.title).toEqual('Alert');
+    });
+});

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

@@ -0,0 +1,33 @@
+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 { ComponentNotFoundError, FindInvalidComponentError, } from "../internal/errors.js";
+describe('findChild()', () => {
+    it('should allow finding a child from the root node', () => {
+        const buttonLabel = '';
+        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 { 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 { 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 { 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

@@ -0,0 +1,66 @@
+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.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 { 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 { 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();
+        expect(find(Alert).props).toEqual({ title: 'My Alert' });
+    });
+    it('should handle null fragment props', () => {
+        const buttonLabel = 'Click me!';
+        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?.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 { 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 { 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' });
+    });
+    it('should allow assertions against fragments rendered by a custom component', () => {
+        const buttonLabel = 'Click me!';
+        function MyOverlay() {
+            return (_jsx(List, { children: _jsx(Text, { children: "Item 1" }) }));
+        }
+        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);
+    });
+});