@hubspot/ui-extensions 0.11.1 → 0.11.3

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../../index.js";
+import { createRenderer } from "../index.js";
+import { DuplicateTestIdError } from "../internal/errors.js";
+describe('testId', () => {
+    it('should throw DuplicateTestIdError when testId is already in use', () => {
+        const { render } = createRenderer('crm.record.tab');
+        let error = null;
+        try {
+            render(_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", testId: "my-button", children: "Click me" }), _jsx(Button, { variant: "secondary", testId: "my-button", children: "Click me" })] }));
+        }
+        catch (_error) {
+            error = _error;
+        }
+        expect(error).toBeInstanceOf(DuplicateTestIdError);
+        expect(error?.message).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,43 @@
+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.js";
+import { createRenderer } from "../index.js";
+import { InvalidEventFunctionError, MissingEventFunctionError, } from "../internal/errors.js";
+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 { render, find } = createRenderer('crm.record.tab');
+        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 { render, find } = createRenderer('crm.record.tab');
+        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 { render, find } = createRenderer('crm.record.tab');
+        render(_jsx(Counter, {}));
+        expect(() => {
+            find(Button).trigger('onClick');
+        }).toThrow(InvalidEventFunctionError);
+    });
+});

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

@@ -0,0 +1,165 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from 'vitest';
+import { Button, ButtonRow, Text } from "../../../index.js";
+import { createRenderer } from "../index.js";
+import { isRenderedElementNode, isRenderedFragmentNode, isRenderedRootNode, isRenderedTextNode, } from "../type-utils.js";
+import { RenderedNodeType } from "../types.js";
+const TestComponent = () => (_jsx(Button, { overlay: _jsx(Text, { children: "Hello" }), children: "Text content" }));
+const setupTestNodes = () => {
+    const { render, find, getRootNode } = createRenderer('crm.record.tab');
+    render(_jsx(TestComponent, {}));
+    const elementNode = find(Button);
+    const rootNode = getRootNode();
+    const textNode = find(Button).childNodes[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 { render, find } = createRenderer('crm.record.tab');
+            render(_jsx(ButtonRow, { children: _jsx(Button, { variant: "primary", children: "Click me" }) }));
+            const buttonRow = find(ButtonRow);
+            const firstChild = buttonRow.childNodes[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.childNodes.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.childNodes.length).toBe(1);
+            }
+            else {
+                throw new Error('Expected fragment node');
+            }
+        });
+    });
+});

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

@@ -0,0 +1,57 @@
+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.js";
+import { createRenderer } from "../index.js";
+import { WaitForTimeoutError } from "../internal/errors.js";
+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 { render, find, waitFor } = createRenderer('crm.record.tab');
+        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 { render, find, waitFor } = createRenderer('crm.record.tab');
+        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,4 @@
+export * from './type-utils.ts';
+export * from './render.tsx';
+export * from './types.ts';
+export * from './utils.ts';

package/dist/experimental/testing/index.js

@@ -0,0 +1,4 @@
+export * from "./type-utils.js";
+export * from "./render.js";
+export * from "./types.js";
+export * from "./utils.js";

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

@@ -1,2 +1,2 @@
-import { type RenderedChildNode } from '../types';
-export declare const EMPTY_CHILDREN: RenderedChildNode[];
+import { type RenderedChildNode } from '../types.ts';
+export declare const EMPTY_RENDERED_CHILD_NODES: RenderedChildNode[];

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

@@ -1 +1 @@
-export const EMPTY_CHILDREN = [];
+export const EMPTY_RENDERED_CHILD_NODES = [];

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.ts';
+/**
+ * Converts a remote root node to a rendered root node. After conversion, the rendered root node will
+ * have its `childNodes` property set to the converted child nodes.
+ *
+ * @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,149 @@
+import { KIND_COMPONENT, KIND_FRAGMENT, KIND_TEXT, } from '@remote-ui/core';
+import { createElementNode } from "./element.js";
+import { DuplicateTestIdError, InvalidFragmentPropArrayError, } from "./errors.js";
+import { createFragmentNode } from "./fragment.js";
+import { createTextNode } from "./text.js";
+import { __hubSpotComponentRegistry } from "../../../shared/remoteComponents.js";
+import { isRenderedTextNode } from "../type-utils.js";
+import { EMPTY_RENDERED_CHILD_NODES } from "./constants.js";
+import { asRenderedParentNode } from "./type-utils-internal.js";
+/* 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.childNodes = EMPTY_RENDERED_CHILD_NODES;
+            }
+            else if (typeof remotePropValue === 'string') {
+                const text = remotePropValue;
+                fragmentNode.text = text;
+                fragmentNode.childNodes = [createTextNode(document, text)];
+            }
+            else if (remotePropValue.kind === KIND_FRAGMENT) {
+                convertRemoteChildren(document, 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(document, 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);
+        }
+        const { testId } = props;
+        if (testId) {
+            // If the element has a test ID we will put the element in a lookup map for
+            // efficient queries using `findByTestId()`/`maybeFindByTestId()`.
+            // First, we need to check if it is already in use and throw an error if it is.
+            const existingElement = document.testIdToElementMap.get(testId);
+            if (existingElement) {
+                throw new DuplicateTestIdError({
+                    testId,
+                    previousElement: existingElement,
+                    newElement: elementNode,
+                });
+            }
+            // If the test ID is not already in use, we can add the element to the lookup map.
+            document.testIdToElementMap.set(testId, elementNode);
+        }
+        convertRemoteChildren(document, elementNode, remoteChild);
+        return elementNode;
+    }
+    else {
+        throw new Error(`Illegal State. Unknown remote child. (${JSON.stringify(remoteChild)})`);
+    }
+};
+/**
+ * Converts the children of a remote parent node to our rendered child nodes.
+ * After conversion, the rendered parent node will have its `childNodes` property set
+ * to the converted child nodes.
+ *
+ * @param parentNode The rendered parent node to convert.
+ * @param remoteParentNode The remote parent node to convert.
+ */
+const convertRemoteChildren = (document, parentNode, remoteParentNode) => {
+    const remoteChildren = remoteParentNode.children;
+    if (remoteChildren == null) {
+        return;
+    }
+    if (typeof remoteChildren === 'string') {
+        const text = remoteChildren;
+        parentNode.text = text;
+        parentNode.childNodes = [createTextNode(document, text)];
+        return;
+    }
+    let text = null;
+    const convertedChildNodes = [];
+    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 renderedChildNode = convertChildNode(document, remoteChild);
+        convertedChildNodes.push(renderedChildNode);
+        lastRenderedChild = renderedChildNode;
+    }
+    parentNode.text = text;
+    parentNode.childNodes = convertedChildNodes;
+};
+/**
+ * Converts a remote root node to a rendered root node. After conversion, the rendered root node will
+ * have its `childNodes` property set to the converted child nodes.
+ *
+ * @param rootNode The rendered root node to convert.
+ * @param remoteRoot The remote root node to convert.
+ */
+export const convertRemoteRoot = (rootNode, remoteRoot) => {
+    const { document } = rootNode;
+    convertRemoteChildren(document, asRenderedParentNode(rootNode), remoteRoot);
+};

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

@@ -1,8 +1,8 @@
-import type { RenderedParentNode } from '../types';
+import { RenderedNode } from '../types.ts';
 /**
  * Logs a rendered node tree to the console for debugging purposes.
  *
- * @param parentNode The node to log.
+ * @param node 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: (node: RenderedNode, label?: string) => void;

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

@@ -1,10 +1,18 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+import { printNode } from "./print.js";
 /**
  * Logs a rendered node tree to the console for debugging purposes.
  *
- * @param parentNode The node to log.
+ * @param node The node to log.
  * @param label Optional label to display before the node tree.
  */
-export const debugLog = (parentNode, label) => {
-    throw new Error('Not implemented');
+export const debugLog = (node, label) => {
+    const componentTreeString = printNode(node);
+    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.ts';
+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;

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

@@ -0,0 +1,40 @@
+import { act as reactAct } from 'react';
+import { InvalidComponentsError } from "./errors.js";
+/**
+ * Creates a rendered document.
+ *
+ * @param options Options for creating the document.
+ * @returns A rendered document.
+ */
+export const createDocument = (options) => {
+    const { getLatestRootNode } = options;
+    const invalidComponentNames = new Set();
+    // A lookup map of test IDs to elements.
+    const testIdToElementMap = new Map();
+    const document = {
+        rootNode: null,
+        testIdToElementMap,
+        batchUpdate: (run) => {
+            reactAct(run);
+            const latestRootNode = getLatestRootNode();
+            if (latestRootNode.document.hasInvalidComponentNames()) {
+                throw new InvalidComponentsError(latestRootNode);
+            }
+        },
+        addInvalidComponentName: (name) => {
+            invalidComponentNames.add(name);
+        },
+        getInvalidComponentNames: () => {
+            if (invalidComponentNames.size === 0) {
+                return [];
+            }
+            const invalidComponentNamesArray = [...invalidComponentNames];
+            invalidComponentNamesArray.sort();
+            return invalidComponentNamesArray;
+        },
+        hasInvalidComponentNames: () => {
+            return invalidComponentNames.size > 0;
+        },
+    };
+    return document;
+};

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

@@ -1,5 +1,6 @@
-import type { UnknownComponentProps } from '../../../__synced__/types/shared.synced';
-import type { RenderedDocumentInternal, RenderedElementNodeInternal } from './types-internal';
+import type { UnknownComponentProps } from '../../../shared/types/shared.ts';
+import { RenderedElementNode } from '../types.ts';
+import type { RenderedDocumentInternal } from './types-internal.ts';
 /**
  * Creates a rendered element node.
  *
@@ -8,4 +9,4 @@ import type { RenderedDocumentInternal, RenderedElementNodeInternal } from './ty
  * @param props The props of the element.
  * @returns A rendered element node.
  */
-export declare const createElementNode: (document: RenderedDocumentInternal, name: string, props: UnknownComponentProps) => RenderedElementNodeInternal;
+export declare const createElementNode: (document: RenderedDocumentInternal, name: string, props: UnknownComponentProps) => RenderedElementNode;

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

@@ -1,9 +1,11 @@
-import { RenderedNodeType } from '../types';
-import { EMPTY_CHILDREN } from './constants';
-import { debugLog } from './debug';
-import { InvalidEventFunctionError, MissingEventFunctionError } from './errors';
-import { printNode } from './print';
-import { find, findAll, findAllChildren, findChild, maybeFind, maybeFindChild, } from './query';
+import { RenderedNodeType } from "../types.js";
+import { isMatch } from "../utils.js";
+import { EMPTY_RENDERED_CHILD_NODES } from "./constants.js";
+import { debugLog } from "./debug.js";
+import { InvalidEventFunctionError, MissingEventFunctionError, } from "./errors.js";
+import { printNode } from "./print.js";
+import { find, findAll, findAllChildren, findChild, maybeFind, maybeFindChild, } from "./query.js";
+import { asRenderedElementNode, asRenderedNode, } from "./type-utils-internal.js";
 /**
  * Creates a rendered element node.
  *
@@ -18,10 +20,10 @@ export const createElementNode = (document, name, props) => {
         name,
         props,
         text: null,
-        children: EMPTY_CHILDREN,
+        childNodes: EMPTY_RENDERED_CHILD_NODES,
         document,
         debugLog: (label) => {
-            debugLog(elementNode, label);
+            debugLog(asRenderedNode(elementNode), label);
         },
         find: (targetComponent, matcher) => {
             return find(elementNode, targetComponent, matcher);
@@ -42,7 +44,7 @@ export const createElementNode = (document, name, props) => {
             return maybeFindChild(elementNode, targetComponent, matcher);
         },
         toString: () => {
-            return printNode(elementNode);
+            return printNode(asRenderedNode(elementNode));
         },
         trigger: (eventPropName, eventArg) => {
             const eventFunction = elementNode.props[eventPropName];
@@ -62,6 +64,9 @@ export const createElementNode = (document, name, props) => {
                 eventFunction(eventArg);
             });
         },
+        isMatch(__component, __matcher) {
+            return isMatch(asRenderedNode(elementNode), __component, __matcher);
+        },
     };
-    return elementNode;
+    return asRenderedElementNode(elementNode);
 };