@hubspot/ui-extensions 0.11.2 → 0.11.4

package/dist/__tests__/crm/hooks/useAssociations.spec.js

@@ -1,7 +1,7 @@
 import { renderHook, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
-import { useAssociations } from '../../../crm/hooks/useAssociations';
-import { fetchAssociations } from '../../../crm/utils/fetchAssociations';
+import { useAssociations } from "../../../crm/hooks/useAssociations.js";
+import { fetchAssociations } from "../../../crm/utils/fetchAssociations.js";
 // Mock the logger module
 vi.mock('../../../logger', () => ({
     logger: {
@@ -12,7 +12,7 @@ vi.mock('../../../logger', () => ({
     },
 }));
 // Mock the fetchAssociations function, keep utility functions
-vi.mock('../../../crm/utils/fetchAssociations', async (importOriginal) => {
+vi.mock('../../../crm/utils/fetchAssociations.ts', async (importOriginal) => {
     const actual = (await importOriginal());
     return {
         ...actual,
@@ -278,7 +278,7 @@ describe('useAssociations with Pagination', () => {
             mockFetchAssociations.mockResolvedValue({
                 data: {
                     results: [],
-                    hasMore: false,
+                    hasMore: false, // No more pages
                     nextOffset: 10,
                 },
                 cleanup: vi.fn(),

package/dist/__tests__/crm/hooks/useCrmProperties.spec.js

@@ -1,7 +1,7 @@
 import { renderHook, waitFor } from '@testing-library/react';
 import { vi } from 'vitest';
-import { useCrmProperties } from '../../../crm/hooks/useCrmProperties';
-import * as fetchCrmPropertiesModule from '../../../crm/utils/fetchCrmProperties';
+import { useCrmProperties } from "../../../crm/hooks/useCrmProperties.js";
+import * as fetchCrmPropertiesModule from "../../../crm/utils/fetchCrmProperties.js";
 // Mock the logger module
 vi.mock('../../../logger', () => ({
     logger: {

package/dist/__tests__/crm/utils/fetchAssociations.spec.js

@@ -9,7 +9,7 @@ Object.defineProperty(global, 'self', {
     value: mockSelf,
     writable: true,
 });
-import { fetchAssociations, calculatePaginationFlags, } from '../../../crm/utils/fetchAssociations';
+import { fetchAssociations, calculatePaginationFlags, } from "../../../crm/utils/fetchAssociations.js";
 describe('fetchAssociations', () => {
     // Helper functions
     const createMockResponse = (data, overrides = {}) => ({
@@ -62,7 +62,7 @@ describe('fetchAssociations', () => {
             ];
             const mockData = {
                 results: mockResults,
-                hasMore: offset < 200,
+                hasMore: offset < 200, // Has more until offset 200
                 nextOffset: offset + pageLength,
             };
             return Promise.resolve(createMockResponse(mockData));
@@ -211,7 +211,7 @@ describe('fetchAssociations', () => {
         });
         it('should handle different object types', async () => {
             const request = createBasicRequest({
-                toObjectType: '0-2',
+                toObjectType: '0-2', // Company
                 properties: ['name'],
             });
             const result = await fetchAssociations(request);
@@ -251,7 +251,7 @@ describe('fetchAssociations', () => {
         });
         it('should throw error for invalid association result structure', async () => {
             const invalidData = {
-                results: [{ invalidStructure: true }],
+                results: [{ invalidStructure: true }], // missing required fields
                 hasMore: false,
                 nextOffset: 0,
             };
@@ -264,7 +264,7 @@ describe('fetchAssociations', () => {
                 results: [
                     {
                         toObjectId: 1000,
-                        associationTypes: 'not an array',
+                        associationTypes: 'not an array', // should be array
                         properties: {},
                     },
                 ],

package/dist/__tests__/crm/utils/fetchCrmProperties.spec.js

@@ -9,7 +9,7 @@ Object.defineProperty(global, 'self', {
     value: mockSelf,
     writable: true,
 });
-import { fetchCrmProperties } from '../../../crm/utils/fetchCrmProperties';
+import { fetchCrmProperties } from "../../../crm/utils/fetchCrmProperties.js";
 const DEFAULT_OPTIONS = {};
 describe('fetchCrmProperties', () => {
     beforeEach(() => {
@@ -84,7 +84,7 @@ describe('fetchCrmProperties', () => {
     });
     it('throws an error if the response is not an object', async () => {
         const mockApiResponse = {
-            data: 'Invalid response',
+            data: 'Invalid response', // data should be an object
             cleanup: vi.fn(),
         };
         const mockResponse = {
@@ -99,7 +99,7 @@ describe('fetchCrmProperties', () => {
         const mockApiResponse = {
             data: {
                 firstname: 'John',
-                lastname: 123,
+                lastname: 123, // Invalid: should be string or null
                 email: 'john@example.com',
             },
             cleanup: vi.fn(),
@@ -212,7 +212,7 @@ describe('fetchCrmProperties', () => {
     });
     it('preserves response validation with formatting options', async () => {
         const mockApiResponse = {
-            data: 'Invalid response',
+            data: 'Invalid response', // data should be an object
             cleanup: vi.fn(),
         };
         const mockResponse = {

package/dist/clientTypes.d.ts

@@ -38,3 +38,4 @@ declare module '*?inline' {
     const src: string;
     export default src;
 }
+export {};

package/dist/clientTypes.js

@@ -1 +1 @@
-"use strict";
+export {};

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__/remoteComponents.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__/remoteComponents.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__/remoteComponents.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__/remoteComponents.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

@@ -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 { 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 { getRootNode } = render(_jsx(MyComponent, {}));
+            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 { find } = render(_jsx(MyComponent, {}));
+            const { render, find } = createRenderer('crm.record.tab');
+            render(_jsx(MyComponent, {}));
             expect(find(Button).toString()).toMatchSnapshot();
         });
     });
@@ -25,19 +27,31 @@ describe('debugging', () => {
             consoleLogSpy.mockRestore();
         });
         it('should allow debug logging the root node', () => {
-            const { debugLog } = render(_jsx(MyComponent, {}));
+            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 { find } = render(_jsx(MyComponent, {}));
+            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 { find } = render(_jsx(MyComponent, {}));
+            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

@@ -1,33 +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';
-import { render } from '../index';
-import { ComponentNotFoundError, FindInvalidComponentError, } from '../internal/errors';
+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 { 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);
         expect(button.props).toEqual({ variant: 'primary' });
         expect(button.text).toEqual(buttonLabel);
     });
     it('should allow finding a matching component based on props object', () => {
-        const { find } = 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 { 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 { find } = 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 { 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 { find } = render(_jsx(Alert, { title: "My Alert" }));
+        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 { find } = render(_jsx(Alert, { title: "My Alert" }));
+        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

@@ -1,10 +1,11 @@
 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';
-import { render } from '../index';
+import { Alert, Button, ButtonRow } from "../../../index.js";
+import { createRenderer } from "../index.js";
 describe('findAll()', () => {
     it('should allow finding all matching components', () => {
-        const { findAll } = 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 { 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

@@ -1,22 +1,25 @@
 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';
-import { render } from '../index';
+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 { findAllChildren } = 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 { 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 { findAllChildren } = 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 { 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 { find } = 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 { 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);
@@ -24,12 +27,14 @@ describe('findAllChildren()', () => {
         expect(buttons[1]?.props).toMatchObject({ variant: 'primary' });
     });
     it('should return empty array when no direct children match', () => {
-        const { findAllChildren } = render(_jsx(_Fragment, { children: _jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }) }));
+        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 { find } = 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 { 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);
@@ -37,7 +42,8 @@ describe('findAllChildren()', () => {
         expect(secondaryButtons[1]?.props).toMatchObject({ variant: 'secondary' });
     });
     it('should support matcher object', () => {
-        const { find } = 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 { 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',

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');
+    });
+});