@hubspot/ui-extensions 0.11.1 → 0.11.2

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

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

package/dist/experimental/testing/__tests__/maybeFind.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,58 @@
+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';
+describe('maybeFind()', () => {
+    it('should return the element when found', () => {
+        const { maybeFind } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const button = maybeFind(Button);
+        expect(button).toBeDefined();
+        expect(button?.props).toEqual({ variant: 'primary' });
+    });
+    it('should return null when element is not found', () => {
+        const { maybeFind } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const text = maybeFind(Text);
+        expect(text).toBeNull();
+    });
+    it('should return the first matching element when multiple elements match', () => {
+        const { maybeFind } = render(_jsxs(_Fragment, { children: [_jsx(Alert, { title: "First Alert" }), _jsx(Alert, { title: "Second Alert" }), _jsx(Alert, { title: "Third Alert" })] }));
+        const alert = maybeFind(Alert);
+        expect(alert).toBeDefined();
+        expect(alert?.props).toMatchObject({ title: 'First Alert' });
+    });
+    it('should support matcher function', () => {
+        const { maybeFind } = render(_jsx(_Fragment, { children: _jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" })] }) }));
+        const primaryButton = maybeFind(Button, (node) => node.props.variant === 'primary');
+        expect(primaryButton).toBeDefined();
+        expect(primaryButton?.props).toMatchObject({ variant: 'primary' });
+    });
+    it('should return null when matcher function does not match any elements', () => {
+        const { maybeFind } = render(_jsx(_Fragment, { children: _jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "secondary", children: "Button 2" })] }) }));
+        const primaryButton = maybeFind(Button, (node) => node.props.variant === 'primary');
+        expect(primaryButton).toBeNull();
+    });
+    it('should support matcher object', () => {
+        const { maybeFind } = render(_jsx(_Fragment, { children: _jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "primary", children: "Button 2" })] }) }));
+        const primaryButton = maybeFind(Button, { variant: 'primary' });
+        expect(primaryButton).toBeDefined();
+        expect(primaryButton?.props).toMatchObject({ variant: 'primary' });
+    });
+    it('should return null when matcher object does not match any elements', () => {
+        const { maybeFind } = render(_jsx(_Fragment, { children: _jsxs(ButtonRow, { children: [_jsx(Button, { variant: "secondary", children: "Button 1" }), _jsx(Button, { variant: "secondary", children: "Button 2" })] }) }));
+        const primaryButton = maybeFind(Button, { variant: 'primary' });
+        expect(primaryButton).toBeNull();
+    });
+    it('should work on nested element nodes', () => {
+        const { find } = render(_jsx(_Fragment, { children: _jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }) }));
+        const buttonRow = find(ButtonRow);
+        const nestedButton = buttonRow.maybeFind(Button);
+        expect(nestedButton).toBeDefined();
+        expect(nestedButton?.props).toMatchObject({ variant: 'primary' });
+    });
+    it('should return null on nested element when not found', () => {
+        const { find } = render(_jsx(_Fragment, { children: _jsx(ButtonRow, { children: _jsx(Button, { variant: "secondary", children: "Button 1" }) }) }));
+        const buttonRow = find(ButtonRow);
+        const text = buttonRow.maybeFind(Text);
+        expect(text).toBeNull();
+    });
+});

package/dist/experimental/testing/__tests__/maybeFindChild.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/experimental/testing/__tests__/maybeFindChild.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, Text } from '../../../index';
+import { render } from '../index';
+describe('maybeFindChild()', () => {
+    it('should return direct child from the root node', () => {
+        const { maybeFindChild } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const alert = maybeFindChild(Alert);
+        expect(alert).toBeDefined();
+        expect(alert?.props).toEqual({ title: 'My Alert' });
+    });
+    it('should return null when direct child is not found', () => {
+        const { maybeFindChild } = render(_jsx(_Fragment, { children: _jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }) }));
+        const text = maybeFindChild(Text);
+        expect(text).toBeNull();
+    });
+    it('should only find direct children, not nested descendants', () => {
+        const { maybeFindChild } = render(_jsxs(_Fragment, { children: [_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Button 1" }) }), _jsx(Alert, { title: "My Alert" })] }));
+        const button = maybeFindChild(Button);
+        expect(button).toBeNull();
+    });
+    it('should return first direct child when multiple children match', () => {
+        const { maybeFindChild } = render(_jsxs(_Fragment, { children: [_jsx(Alert, { title: "First Alert" }), _jsx(Alert, { title: "Second Alert" }), _jsx(Alert, { title: "Third Alert" })] }));
+        const alert = maybeFindChild(Alert);
+        expect(alert).toBeDefined();
+        expect(alert?.props).toMatchObject({ title: 'First Alert' });
+    });
+    it('should support matcher function', () => {
+        const { maybeFindChild } = render(_jsxs(_Fragment, { children: [_jsx(Alert, { title: "First Alert" }), _jsx(Alert, { title: "Second Alert" })] }));
+        const secondAlert = maybeFindChild(Alert, (node) => node.props.title === 'Second Alert');
+        expect(secondAlert).toBeDefined();
+        expect(secondAlert?.props).toMatchObject({ title: 'Second Alert' });
+    });
+    it('should return null when matcher function does not match any children', () => {
+        const { maybeFindChild } = render(_jsxs(_Fragment, { children: [_jsx(Alert, { title: "First Alert" }), _jsx(Alert, { title: "Second Alert" })] }));
+        const thirdAlert = maybeFindChild(Alert, (node) => node.props.title === 'Third Alert');
+        expect(thirdAlert).toBeNull();
+    });
+    it('should support matcher object', () => {
+        const { maybeFindChild } = render(_jsxs(_Fragment, { children: [_jsx(Alert, { title: "First Alert" }), _jsx(Alert, { title: "Second Alert" })] }));
+        const secondAlert = maybeFindChild(Alert, { title: 'Second Alert' });
+        expect(secondAlert).toBeDefined();
+        expect(secondAlert?.props).toMatchObject({ title: 'Second Alert' });
+    });
+    it('should return null when matcher object does not match any children', () => {
+        const { maybeFindChild } = render(_jsxs(_Fragment, { children: [_jsx(Alert, { title: "First Alert" }), _jsx(Alert, { title: "Second Alert" })] }));
+        const thirdAlert = maybeFindChild(Alert, { title: 'Third Alert' });
+        expect(thirdAlert).toBeNull();
+    });
+    it('should work on nested element nodes', () => {
+        const { find } = render(_jsx(_Fragment, { children: _jsxs(ButtonRow, { children: [_jsx(Button, { variant: "primary", children: "Button 1" }), _jsx(Button, { variant: "secondary", children: "Button 2" })] }) }));
+        const 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 { find } = 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__/trigger.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,40 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { describe, expect, it } from 'vitest';
+import { Button } from '../../../index';
+import { render } from '../index';
+import { InvalidEventFunctionError, MissingEventFunctionError, } from '../internal/errors';
+describe('trigger()', () => {
+    it('should allow events to be triggered', () => {
+        function Counter() {
+            const [count, setCount] = useState(0);
+            const handleClick = () => {
+                setCount(count + 1);
+            };
+            return (_jsxs(Button, { variant: "primary", onClick: handleClick, children: ["Clicked ", count, " times"] }));
+        }
+        const { find } = render(_jsx(Counter, {}));
+        expect(find(Button).text).toEqual('Clicked 0 times');
+        find(Button).trigger('onClick');
+        expect(find(Button).text).toEqual('Clicked 1 times');
+    });
+    it('should throw the correct error when a triggered event function is null', () => {
+        function Counter() {
+            return _jsx(Button, { variant: "primary", children: "Click me!" });
+        }
+        const { find } = render(_jsx(Counter, {}));
+        expect(() => {
+            find(Button).trigger('onClick');
+        }).toThrow(MissingEventFunctionError);
+    });
+    it('should throw the correct error when a triggered event function is not a function but also not null', () => {
+        function Counter() {
+            const handleClick = {};
+            return (_jsx(Button, { variant: "primary", onClick: handleClick, children: "Click me!" }));
+        }
+        const { find } = render(_jsx(Counter, {}));
+        expect(() => {
+            find(Button).trigger('onClick');
+        }).toThrow(InvalidEventFunctionError);
+    });
+});

package/dist/experimental/testing/__tests__/type-utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/experimental/testing/__tests__/type-utils.spec.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from 'vitest';
+import { Button, ButtonRow, Text } from '../../../index';
+import { render } from '../index';
+import { isRenderedElementNode, isRenderedFragmentNode, isRenderedRootNode, isRenderedTextNode, } from '../type-utils';
+import { RenderedNodeType } from '../types';
+const TestComponent = () => (_jsx(Button, { overlay: _jsx(Text, { children: "Hello" }), children: "Text content" }));
+const setupTestNodes = () => {
+    const { find, getRootNode } = render(_jsx(TestComponent, {}));
+    const elementNode = find(Button);
+    const rootNode = getRootNode();
+    const textNode = find(Button).children[0];
+    const fragmentNode = find(Button).props.overlay;
+    return {
+        elementNode,
+        textNode,
+        rootNode,
+        fragmentNode,
+    };
+};
+describe('type guard functions', () => {
+    describe('isRenderedElementNode()', () => {
+        it('should return true for an element node', () => {
+            const { elementNode } = setupTestNodes();
+            expect(isRenderedElementNode(elementNode)).toBe(true);
+            expect(elementNode.nodeType).toBe(RenderedNodeType.Element);
+        });
+        it('should return false for a text node', () => {
+            const { textNode } = setupTestNodes();
+            expect(isRenderedElementNode(textNode)).toBe(false);
+        });
+        it('should return false for a root node', () => {
+            const { rootNode } = setupTestNodes();
+            expect(isRenderedElementNode(rootNode)).toBe(false);
+        });
+        it('should return false for a fragment node', () => {
+            const { fragmentNode } = setupTestNodes();
+            expect(isRenderedElementNode(fragmentNode)).toBe(false);
+        });
+        it('should return false for null', () => {
+            expect(isRenderedElementNode(null)).toBe(false);
+        });
+        it('should return false for undefined', () => {
+            expect(isRenderedElementNode(undefined)).toBe(false);
+        });
+    });
+    describe('isRenderedTextNode()', () => {
+        it('should return true for a text node', () => {
+            const { textNode } = setupTestNodes();
+            expect(isRenderedTextNode(textNode)).toBe(true);
+            expect(textNode.nodeType).toBe(RenderedNodeType.Text);
+        });
+        it('should return false for an element node', () => {
+            const { elementNode } = setupTestNodes();
+            expect(isRenderedTextNode(elementNode)).toBe(false);
+        });
+        it('should return false for a root node', () => {
+            const { rootNode } = setupTestNodes();
+            expect(isRenderedTextNode(rootNode)).toBe(false);
+        });
+        it('should return false for a fragment node', () => {
+            const { fragmentNode } = setupTestNodes();
+            expect(isRenderedTextNode(fragmentNode)).toBe(false);
+        });
+        it('should return false for null', () => {
+            expect(isRenderedTextNode(null)).toBe(false);
+        });
+        it('should return false for undefined', () => {
+            expect(isRenderedTextNode(undefined)).toBe(false);
+        });
+    });
+    describe('isRenderedRootNode()', () => {
+        it('should return true for a root node', () => {
+            const { rootNode } = setupTestNodes();
+            expect(isRenderedRootNode(rootNode)).toBe(true);
+            expect(rootNode.nodeType).toBe(RenderedNodeType.Root);
+        });
+        it('should return false for an element node', () => {
+            const { elementNode } = setupTestNodes();
+            expect(isRenderedRootNode(elementNode)).toBe(false);
+        });
+        it('should return false for a text node', () => {
+            const { textNode } = setupTestNodes();
+            expect(isRenderedRootNode(textNode)).toBe(false);
+        });
+        it('should return false for a fragment node', () => {
+            const { fragmentNode } = setupTestNodes();
+            expect(isRenderedRootNode(fragmentNode)).toBe(false);
+        });
+        it('should return false for null', () => {
+            expect(isRenderedRootNode(null)).toBe(false);
+        });
+        it('should return false for undefined', () => {
+            expect(isRenderedRootNode(undefined)).toBe(false);
+        });
+    });
+    describe('isRenderedFragmentNode()', () => {
+        it('should return true for a fragment node', () => {
+            const { fragmentNode } = setupTestNodes();
+            expect(isRenderedFragmentNode(fragmentNode)).toBe(true);
+            expect(fragmentNode.nodeType).toBe(RenderedNodeType.Fragment);
+        });
+        it('should return false for an element node', () => {
+            const { elementNode } = setupTestNodes();
+            expect(isRenderedFragmentNode(elementNode)).toBe(false);
+        });
+        it('should return false for a text node', () => {
+            const { textNode } = setupTestNodes();
+            expect(isRenderedFragmentNode(textNode)).toBe(false);
+        });
+        it('should return false for a root node', () => {
+            const { rootNode } = setupTestNodes();
+            expect(isRenderedFragmentNode(rootNode)).toBe(false);
+        });
+        it('should return false for null', () => {
+            expect(isRenderedFragmentNode(null)).toBe(false);
+        });
+        it('should return false for undefined', () => {
+            expect(isRenderedFragmentNode(undefined)).toBe(false);
+        });
+    });
+    describe('type narrowing', () => {
+        it('should correctly narrow types for element nodes', () => {
+            const { find } = render(_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Click me" }) }));
+            const buttonRow = find(ButtonRow);
+            const firstChild = buttonRow.children[0];
+            if (isRenderedElementNode(firstChild)) {
+                expect(firstChild.name).toBe('Button');
+                expect(firstChild.props.variant).toBe('primary');
+            }
+            else {
+                throw new Error('Expected element node');
+            }
+        });
+        it('should correctly narrow types for text nodes', () => {
+            const { textNode } = setupTestNodes();
+            if (isRenderedTextNode(textNode)) {
+                expect(textNode.text).toBe('Text content');
+            }
+            else {
+                throw new Error('Expected text node');
+            }
+        });
+        it('should correctly narrow types for root nodes', () => {
+            const { rootNode } = setupTestNodes();
+            if (isRenderedRootNode(rootNode)) {
+                expect(rootNode.children.length).toBeGreaterThan(0);
+            }
+            else {
+                throw new Error('Expected root node');
+            }
+        });
+        it('should correctly narrow types for fragment nodes', () => {
+            const { fragmentNode } = setupTestNodes();
+            if (isRenderedFragmentNode(fragmentNode)) {
+                expect(fragmentNode.children.length).toBe(1);
+            }
+            else {
+                throw new Error('Expected fragment node');
+            }
+        });
+    });
+});

package/dist/experimental/testing/__tests__/waitFor.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,55 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Button } from '../../../index';
+import { render } from '../index';
+import { WaitForTimeoutError } from '../internal/errors';
+describe('waitFor()', () => {
+    beforeEach(() => {
+        // tell vitest we use mocked time
+        vi.useFakeTimers();
+    });
+    afterEach(() => {
+        // restoring date after each test run
+        vi.useRealTimers();
+    });
+    it('should allow for waiting for asynchronous updates', async () => {
+        function AsyncCounter() {
+            const [count, setCount] = useState(0);
+            useEffect(() => {
+                setTimeout(() => {
+                    setCount((currentCount) => currentCount + 1);
+                }, 10);
+            }, []);
+            return _jsxs(Button, { variant: "primary", children: ["Count: ", count] });
+        }
+        const { find, waitFor } = render(_jsx(AsyncCounter, {}));
+        expect(find(Button).text).toEqual('Count: 0');
+        const waitForPromise = waitFor(() => {
+            expect(find(Button).text).toEqual('Count: 1');
+        });
+        vi.advanceTimersByTimeAsync(100);
+        await waitForPromise;
+    });
+    it('should allow for waiting for asynchronous updates with a timeout', async () => {
+        vi.useFakeTimers();
+        function AsyncCounter() {
+            const [count, setCount] = useState(0);
+            useEffect(() => {
+                setTimeout(() => {
+                    setCount((currentCount) => currentCount + 1);
+                }, 5000);
+            }, []);
+            return _jsxs(Button, { variant: "primary", children: ["Count: ", count] });
+        }
+        const { find, waitFor } = render(_jsx(AsyncCounter, {}));
+        expect(find(Button).text).toEqual('Count: 0');
+        const waitForPromise = waitFor(() => {
+            expect(find(Button).text).toEqual('Count: 1');
+        });
+        // The default timeout is 1000ms, so we advance the timers by 5000ms to ensure the timeout is triggered.
+        vi.advanceTimersByTimeAsync(5000);
+        await expect(waitForPromise).rejects.toThrow(WaitForTimeoutError);
+    });
+    // TODO: Add a test for waiting for asynchronous updates with a custom timeout
+});

package/dist/experimental/testing/index.d.ts

@@ -0,0 +1,3 @@
+export * from './type-utils';
+export * from './render';
+export * from './types';

package/dist/experimental/testing/index.js

@@ -0,0 +1,3 @@
+export * from './type-utils';
+export * from './render';
+export * from './types';

package/dist/experimental/testing/internal/convert.d.ts

@@ -0,0 +1,10 @@
+import { type RemoteRoot } from '@remote-ui/core';
+import type { RenderedRootNodeInternal } from './types-internal';
+/**
+ * Converts a remote root node to a rendered root node. After conversion, the rendered root node will
+ * have its children set to the converted children.
+ *
+ * @param rootNode The rendered root node to convert.
+ * @param remoteRoot The remote root node to convert.
+ */
+export declare const convertRemoteRoot: (rootNode: RenderedRootNodeInternal, remoteRoot: RemoteRoot) => void;

package/dist/experimental/testing/internal/convert.js

@@ -0,0 +1,131 @@
+import { KIND_COMPONENT, KIND_FRAGMENT, KIND_TEXT, } from '@remote-ui/core';
+import { createElementNode } from './element';
+import { InvalidFragmentPropArrayError } from './errors';
+import { createFragmentNode } from './fragment';
+import { createTextNode } from './text';
+import { isRenderedTextNode } from '../type-utils';
+import { __hubSpotComponentRegistry } from '../../../__synced__/remoteComponents.synced';
+import { EMPTY_CHILDREN } from './constants';
+/* eslint-disable @typescript-eslint/no-use-before-define */
+/**
+ * Converts a remote props object to a props object that can be attached to a rendered element node.
+ *
+ * @param document The document to use for creating new nodes.
+ * @param componentName The name of the component to convert the props for.
+ * @param remoteProps The remote props object to convert.
+ * @returns The rendered props object.
+ */
+const convertRemoteProps = (document, componentName, remoteProps) => {
+    if (typeof remoteProps !== 'object' || remoteProps == null) {
+        return {};
+    }
+    const convertedProps = {};
+    for (const [propName, remotePropValue] of Object.entries(remoteProps)) {
+        if (propName === 'children') {
+            // Skip over `children` props since we created nested nodes in our tree for children
+            continue;
+        }
+        if (__hubSpotComponentRegistry.isComponentFragmentProp(componentName, propName)) {
+            if (Array.isArray(remotePropValue)) {
+                throw new InvalidFragmentPropArrayError(componentName, propName);
+            }
+            const fragmentNode = createFragmentNode(document);
+            if (remotePropValue == null) {
+                fragmentNode.children = EMPTY_CHILDREN;
+            }
+            else if (typeof remotePropValue === 'string') {
+                const text = remotePropValue;
+                fragmentNode.text = text;
+                fragmentNode.children = [createTextNode(text)];
+            }
+            else if (remotePropValue.kind === KIND_FRAGMENT) {
+                convertRemoteChildren(fragmentNode, remotePropValue);
+            }
+            convertedProps[propName] = fragmentNode;
+        }
+        else {
+            convertedProps[propName] = remotePropValue;
+        }
+    }
+    return convertedProps;
+};
+/**
+ * Converts a remote child node to a rendered child node.
+ *
+ * @param document The document to use for creating new nodes.
+ * @param remoteChild The remote child node to convert.
+ *
+ * @returns The rendered child node.
+ */
+const convertChildNode = (document, remoteChild) => {
+    if (remoteChild.kind === KIND_TEXT) {
+        return createTextNode(remoteChild);
+    }
+    else if (remoteChild.kind === KIND_COMPONENT) {
+        const name = remoteChild.type;
+        const props = convertRemoteProps(document, name, remoteChild.props);
+        const elementNode = createElementNode(document, name, props);
+        if (!__hubSpotComponentRegistry.isAllowedComponentName(name)) {
+            document.addInvalidComponentName(name);
+        }
+        convertRemoteChildren(elementNode, remoteChild);
+        return elementNode;
+    }
+    else {
+        throw new Error(`Illegal State. Unknown remote child. (${JSON.stringify(remoteChild)})`);
+    }
+};
+/**
+ * Converts the children a remote parent node to a rendered parent node. After conversion, the rendered parent node will
+ * have its children set to the converted children.
+ *
+ * @param parentNode The rendered parent node to convert.
+ * @param remoteParentNode The remote parent node to convert.
+ */
+const convertRemoteChildren = (parentNode, remoteParentNode) => {
+    const { document } = parentNode;
+    const remoteChildren = remoteParentNode.children;
+    if (remoteChildren == null) {
+        return;
+    }
+    if (typeof remoteChildren === 'string') {
+        const text = remoteChildren;
+        parentNode.text = text;
+        parentNode.children = [createTextNode(text)];
+        return;
+    }
+    let text = null;
+    const children = [];
+    let lastRenderedChild;
+    for (const remoteChild of remoteChildren) {
+        if (remoteChild.kind === KIND_TEXT) {
+            const currentChildText = remoteChild.text;
+            if (text == null) {
+                text = currentChildText;
+            }
+            else {
+                text += currentChildText;
+            }
+            if (lastRenderedChild && isRenderedTextNode(lastRenderedChild)) {
+                // We normalize text nodes by combining consecutive text nodes into a single text node.
+                lastRenderedChild.text += remoteChild.text;
+                continue;
+            }
+        }
+        const renderedChild = convertChildNode(document, remoteChild);
+        children.push(renderedChild);
+        lastRenderedChild = renderedChild;
+    }
+    parentNode.text = text;
+    parentNode.children = children;
+};
+/**
+ * Converts a remote root node to a rendered root node. After conversion, the rendered root node will
+ * have its children set to the converted children.
+ *
+ * @param rootNode The rendered root node to convert.
+ * @param remoteRoot The remote root node to convert.
+ */
+export const convertRemoteRoot = (rootNode, remoteRoot) => {
+    convertRemoteChildren(rootNode, remoteRoot);
+};

package/dist/experimental/testing/internal/debug.d.ts

@@ -5,4 +5,4 @@ import type { RenderedParentNode } from '../types';
  * @param parentNode The node to log.
  * @param label Optional label to display before the node tree.
  */
-export declare const debugLog: (parentNode: RenderedParentNode, label?: string) => never;
+export declare const debugLog: (parentNode: RenderedParentNode, label?: string) => void;

package/dist/experimental/testing/internal/debug.js

@@ -1,3 +1,4 @@
+import { printNode } from './print';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * Logs a rendered node tree to the console for debugging purposes.
@@ -6,5 +7,13 @@
  * @param label Optional label to display before the node tree.
  */
 export const debugLog = (parentNode, label) => {
-    throw new Error('Not implemented');
+    const componentTreeString = printNode(parentNode);
+    const separator = ''.padEnd(label?.length ?? 20, '=');
+    const logLines = [separator];
+    if (label) {
+        logLines.push(label);
+    }
+    logLines.push(componentTreeString);
+    logLines.push(separator);
+    console.log(logLines.join('\n'));
 };

package/dist/experimental/testing/internal/document.d.ts

@@ -0,0 +1,14 @@
+import type { RenderedDocumentInternal, RenderedRootNodeInternal } from './types-internal';
+export interface CreateDocumentOptions {
+    /**
+     * A function that can be called to get the latest rendered root node.
+     */
+    getLatestRootNode: () => RenderedRootNodeInternal;
+}
+/**
+ * Creates a rendered document.
+ *
+ * @param options Options for creating the document.
+ * @returns A rendered document.
+ */
+export declare const createDocument: (options: CreateDocumentOptions) => RenderedDocumentInternal;