@hubspot/ui-extensions 0.11.2 → 0.11.4

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

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

@@ -1,5 +1,5 @@
-import { RenderedParentNode } from '../types';
-import { RenderedRootNodeInternal } from './types-internal';
+import { RenderedElementNode, RenderedParentNode } from '../types.ts';
+import { RenderedRootNodeInternal } from './types-internal.ts';
 /**
  * Thrown when trying to trigger an event that has a handler prop that is not a function.
  */
@@ -54,3 +54,46 @@ export declare class InvalidFragmentPropArrayError extends Error {
 export declare class WaitForTimeoutError extends Error {
     constructor(timeout: number);
 }
+/**
+ * Thrown when an invalid extension point location is provided.
+ */
+export declare class InvalidExtensionPointLocationError extends Error {
+    constructor(extensionPointLocation: string);
+}
+/**
+ * Thrown when a component is not found in the rendered output when queryingby test ID.
+ */
+export declare class ComponentNotFoundByTestIdError extends Error {
+    constructor({ findMethodName, componentName, testId, rootNode, }: {
+        findMethodName: string;
+        componentName: string;
+        testId: string;
+        rootNode: RenderedRootNodeInternal;
+    });
+}
+/**
+ * Thrown when a component is found in the rendered output when querying by test ID, but does not match the expected component.
+ */
+export declare class ComponentMismatchedByTestIdError extends Error {
+    constructor({ findMethodName, actualComponentName, expectedComponentName, testId, rootNode, }: {
+        findMethodName: string;
+        actualComponentName: string;
+        expectedComponentName: string;
+        testId: string;
+        rootNode: RenderedRootNodeInternal;
+    });
+}
+/**
+ * Thrown when a test ID is already in use.
+ *
+ * @param testId The test ID that is already in use.
+ * @param previousElement The element that was already using the test ID.
+ * @param newElement The element that is trying to use the same test ID.
+ */
+export declare class DuplicateTestIdError extends Error {
+    constructor({ testId, previousElement, newElement, }: {
+        testId: string;
+        previousElement: RenderedElementNode;
+        newElement: RenderedElementNode;
+    });
+}

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

@@ -1,4 +1,6 @@
-import { printNode } from './print';
+import { EXTENSION_POINT_LOCATIONS } from "../../../shared/types/extension-points.js";
+import { printNode } from "./print.js";
+import { asRenderedNode } from "./type-utils-internal.js";
 /**
  * Thrown when trying to trigger an event that has a handler prop that is not a function.
  */
@@ -34,7 +36,7 @@ export class InvalidComponentsError extends Error {
         super(`Invalid rendered output. Found invalid components (${rootNode.document
             .getInvalidComponentNames()
             .map((name) => `"${name}"`)
-            .join(', ')}) in rendered output: ${printNode(rootNode, {
+            .join(', ')}) in rendered output: ${printNode(asRenderedNode(rootNode), {
             markInvalidComponents: true,
             listInvalidComponents: true,
         })}`);
@@ -68,3 +70,43 @@ export class WaitForTimeoutError extends Error {
         this.name = 'WaitForTimeoutError';
     }
 }
+/**
+ * Thrown when an invalid extension point location is provided.
+ */
+export class InvalidExtensionPointLocationError extends Error {
+    constructor(extensionPointLocation) {
+        super(`Invalid extension point location of "${extensionPointLocation}". Allowed locations are: ${EXTENSION_POINT_LOCATIONS.map((location) => `"${location}"`).join(', ')}`);
+        this.name = 'InvalidExtensionPointLocationError';
+    }
+}
+/**
+ * Thrown when a component is not found in the rendered output when queryingby test ID.
+ */
+export class ComponentNotFoundByTestIdError extends Error {
+    constructor({ findMethodName, componentName, testId, rootNode, }) {
+        super(`${findMethodName}() failed. <${componentName}> with test ID "${testId}" not found in rendered output: ${rootNode.toString()}`);
+        this.name = 'ComponentNotFoundByTestIdError';
+    }
+}
+/**
+ * Thrown when a component is found in the rendered output when querying by test ID, but does not match the expected component.
+ */
+export class ComponentMismatchedByTestIdError extends Error {
+    constructor({ findMethodName, actualComponentName, expectedComponentName, testId, rootNode, }) {
+        super(`${findMethodName}() failed. <${actualComponentName}> with test ID "${testId}" does not match expected component <${expectedComponentName}> in rendered output: ${rootNode.toString()}`);
+        this.name = 'ComponentMismatchedByTestIdError';
+    }
+}
+/**
+ * Thrown when a test ID is already in use.
+ *
+ * @param testId The test ID that is already in use.
+ * @param previousElement The element that was already using the test ID.
+ * @param newElement The element that is trying to use the same test ID.
+ */
+export class DuplicateTestIdError extends Error {
+    constructor({ testId, previousElement, newElement, }) {
+        super(`Test ID "${testId}" is already in use.\n\nPrevious component: ${previousElement.toString()}\n\nNew component: ${newElement.toString()}`);
+        this.name = 'DuplicateTestIdError';
+    }
+}

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

@@ -1,8 +1,9 @@
-import type { RenderedDocumentInternal, RenderedFragmentNodeInternal } from './types-internal';
+import { RenderedFragmentNode } from '../types.ts';
+import type { RenderedDocumentInternal } from './types-internal.ts';
 /**
  * Creates a rendered fragment node.
  *
  * @param document The document that the fragment belongs to.
  * @returns A rendered fragment node.
  */
-export declare const createFragmentNode: (document: RenderedDocumentInternal) => RenderedFragmentNodeInternal;
+export declare const createFragmentNode: (document: RenderedDocumentInternal) => RenderedFragmentNode;

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

@@ -1,8 +1,9 @@
-import { RenderedNodeType } from '../types';
-import { EMPTY_CHILDREN } from './constants';
-import { debugLog } from './debug';
-import { printNode } from './print';
-import { find, findAll, findAllChildren, findChild, maybeFind, maybeFindChild, } from './query';
+import { RenderedNodeType } from "../types.js";
+import { EMPTY_RENDERED_CHILD_NODES } from "./constants.js";
+import { debugLog } from "./debug.js";
+import { printNode } from "./print.js";
+import { find, findAll, findAllChildren, findChild, maybeFind, maybeFindChild, } from "./query.js";
+import { asRenderedFragmentNode, asRenderedNode, } from "./type-utils-internal.js";
 /**
  * Creates a rendered fragment node.
  *
@@ -13,10 +14,10 @@ export const createFragmentNode = (document) => {
     const fragmentNode = {
         nodeType: RenderedNodeType.Fragment,
         text: null,
-        children: EMPTY_CHILDREN,
+        childNodes: EMPTY_RENDERED_CHILD_NODES,
         document,
         debugLog: (label) => {
-            debugLog(fragmentNode, label);
+            debugLog(asRenderedNode(fragmentNode), label);
         },
         find: (targetComponent, matcher) => {
             return find(fragmentNode, targetComponent, matcher);
@@ -37,8 +38,11 @@ export const createFragmentNode = (document) => {
             return maybeFindChild(fragmentNode, targetComponent, matcher);
         },
         toString: () => {
-            return printNode(fragmentNode);
+            return printNode(asRenderedFragmentNode(fragmentNode));
+        },
+        isMatch(__component, __matcher) {
+            return false;
         },
     };
-    return fragmentNode;
+    return asRenderedFragmentNode(fragmentNode);
 };

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

@@ -1,5 +1,5 @@
-import { HubSpotReactComponent, UnknownComponentProps } from '../../../__synced__/types/shared.synced';
-import { ElementMatcher, RenderedElementNode, RenderedNode } from '../types';
+import { UnknownComponentProps } from '../../../shared/types/shared.ts';
+import { ElementMatcher, RenderedElementNode } from '../types.ts';
 /**
  * Checks if the element matches the matcher.
  *
@@ -7,13 +7,4 @@ import { ElementMatcher, RenderedElementNode, RenderedNode } from '../types';
  * @param matcher An optional matcher to filter the elements.
  * @returns `true` if the element matches the matcher, `false` otherwise.
  */
-export declare const checkElementMatches: <TProps extends UnknownComponentProps>(element: RenderedElementNode<TProps>, matcher?: ElementMatcher<TProps> | undefined) => boolean;
-/**
- * Checks if the node matches the component and matcher.
- *
- * @param node The node to check.
- * @param component The component to check.
- * @param matcher An optional matcher to filter the elements.
- * @returns Whether the node matches the component and matcher.
- */
-export declare const isMatch: <TComponentProps extends UnknownComponentProps>(node: RenderedNode | null | undefined, component: HubSpotReactComponent<TComponentProps>, matcher?: ElementMatcher<TComponentProps> | undefined) => node is RenderedElementNode<TComponentProps>;
+export declare const checkElementMatches: <TProps extends UnknownComponentProps>(element: RenderedElementNode<TProps>, matcher?: ElementMatcher<TProps>) => boolean;

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

@@ -1,5 +1,3 @@
-import { RenderedNodeType, } from '../types';
-import { __hubSpotComponentRegistry } from '../../../__synced__/remoteComponents.synced';
 /**
  * Checks if the element matches the matcher.
  *
@@ -19,24 +17,3 @@ export const checkElementMatches = (element, matcher) => {
     // Check if all the props in the matcher match the props in the element
     return Object.keys(matcher).every((key) => element.props[key] === matcher[key]);
 };
-/**
- * Checks if the node matches the component and matcher.
- *
- * @param node The node to check.
- * @param component The component to check.
- * @param matcher An optional matcher to filter the elements.
- * @returns Whether the node matches the component and matcher.
- */
-export const isMatch = (node, component, matcher) => {
-    if (node == null) {
-        return false;
-    }
-    if (node.nodeType !== RenderedNodeType.Element) {
-        return false;
-    }
-    const targetComponentName = __hubSpotComponentRegistry.getComponentName(component);
-    if (node.name !== targetComponentName) {
-        return false;
-    }
-    return checkElementMatches(node, matcher);
-};

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

@@ -0,0 +1,17 @@
+import { RendererSpies } from '../../types.ts';
+import { RendererMocksInternal } from '../types-internal.ts';
+import { ExtensionPointLocation } from '../../../../shared/types/extension-points.ts';
+/**
+ * An object containing the mocks and spies.
+ */
+export interface MocksWithSpies<TExtensionPointLocation extends ExtensionPointLocation> {
+    mocks: RendererMocksInternal<TExtensionPointLocation>;
+    spies: RendererSpies<TExtensionPointLocation>;
+}
+/**
+ * Creates a set of mocks and spies for the various functions such as the `useCrmProperties` and `useAssociations`
+ * hook functions.
+ *
+ * @returns An object containing the mocks and spies.
+ */
+export declare const createMocksWithSpies: <TExtensionPointLocation extends ExtensionPointLocation>(extensionPointLocation: TExtensionPointLocation) => MocksWithSpies<TExtensionPointLocation>;

package/dist/experimental/testing/internal/mocks/index.js

@@ -0,0 +1,46 @@
+import { spyOn } from 'tinyspy';
+import { createMockHooks } from "./mock-hooks.js";
+import { createMockExtensionPointApi } from "./mock-extension-point-api.js";
+/**
+ * This function replaces all methods with a spy using the `spyOn` function from the `tinyspy` library.
+ * The object tree is walked recursively to replace all methods with spies. The original object is not modified.
+ *
+ * @param object The object to spy on.
+ * @returns A new object with all of the methods replaced with spies.
+ */
+const spyOnAllFunctionsRecursive = (object) => {
+    if (!object || typeof object !== 'object' || Array.isArray(object)) {
+        return object;
+    }
+    const objectWithSpies = Object.create(null);
+    for (const [key, value] of Object.entries(object)) {
+        if (typeof value === 'function') {
+            objectWithSpies[key] = spyOn(object, key);
+        }
+        else {
+            objectWithSpies[key] = spyOnAllFunctionsRecursive(value);
+        }
+    }
+    return objectWithSpies;
+};
+/**
+ * Creates a set of mocks and spies for the various functions such as the `useCrmProperties` and `useAssociations`
+ * hook functions.
+ *
+ * @returns An object containing the mocks and spies.
+ */
+export const createMocksWithSpies = (extensionPointLocation) => {
+    const mockExtensionPointApi = createMockExtensionPointApi(extensionPointLocation);
+    // Build a mocks object with the default mock functions.
+    // NOTE: The mock implementations can be overridden by tests using the spies that are provided in the returned `spies` object.
+    const mocks = {
+        ...createMockHooks(),
+        ...mockExtensionPointApi,
+    };
+    // Spy on each of the mocks and build the object with all of the spies.
+    const spies = spyOnAllFunctionsRecursive(mocks);
+    return {
+        mocks,
+        spies: spies,
+    };
+};

package/dist/experimental/testing/internal/mocks/mock-extension-point-api.d.ts

@@ -0,0 +1,2 @@
+import { ExtensionPointApi, type ExtensionPointLocation } from '../../../../shared/types/extension-points.ts';
+export declare const createMockExtensionPointApi: (extensionPointLocation: ExtensionPointLocation) => ExtensionPointApi<ExtensionPointLocation>;

package/dist/experimental/testing/internal/mocks/mock-extension-point-api.js

@@ -0,0 +1,166 @@
+import { ServerlessExecutionStatus, } from "../../../../shared/types/http-requests.js";
+const fakePrefix = 'fake_';
+const createMockServerlessFuncRunner = () => {
+    return () => Promise.resolve({
+        status: ServerlessExecutionStatus.Success,
+        response: {
+            fakeData: 'hello',
+        },
+    });
+};
+const createMockCrmHostActions = () => {
+    return {
+        addAlert: () => { },
+        reloadPage: () => { },
+        fetchCrmObjectProperties: () => Promise.resolve({}),
+        openIframeModal: () => { },
+        refreshObjectProperties: () => { },
+        onCrmPropertiesUpdate: () => { },
+    };
+};
+const createMockUiePlatformActions = () => {
+    return {
+        copyTextToClipboard: async () => { },
+        closeOverlay: () => { },
+        reloadPage: () => { },
+        openIframeModal: () => { },
+    };
+};
+const createMockSettingsActions = () => {
+    return {
+        addAlert: () => { },
+    };
+};
+const createMockAppHomeActions = () => {
+    return {
+        addAlert: () => { },
+    };
+};
+const createFakeEmail = () => `${fakePrefix}email@example.com`;
+const createFakeFirstName = () => `${fakePrefix}firstName`;
+const createFakeLastName = () => `${fakePrefix}lastName`;
+const createFakeUser = () => {
+    return {
+        id: 1,
+        emails: [createFakeEmail()],
+        email: createFakeEmail(),
+        firstName: createFakeFirstName(),
+        lastName: createFakeLastName(),
+        roles: [],
+        teams: [],
+        permissions: [],
+    };
+};
+const createFakePortalContext = () => {
+    return {
+        id: 123,
+        timezone: 'America/New_York',
+    };
+};
+const createFakeCrmRecordContext = () => {
+    return {
+        objectId: 123,
+        objectTypeId: '0-1',
+    };
+};
+const createFakeCrmContext = (extensionPointLocationName) => {
+    return {
+        location: extensionPointLocationName,
+        user: createFakeUser(),
+        portal: createFakePortalContext(),
+        crm: createFakeCrmRecordContext(),
+        variables: {
+            fake_variable: 'fake_value',
+        },
+    };
+};
+const mockCreators = {
+    'crm.record.tab': () => {
+        return {
+            runServerlessFunction: createMockServerlessFuncRunner(),
+            actions: {
+                ...createMockCrmHostActions(),
+                ...createMockUiePlatformActions(),
+            },
+            context: createFakeCrmContext('crm.record.tab'),
+        };
+    },
+    'crm.preview': () => {
+        return {
+            runServerlessFunction: createMockServerlessFuncRunner(),
+            actions: {
+                ...createMockCrmHostActions(),
+                ...createMockUiePlatformActions(),
+            },
+            context: createFakeCrmContext('crm.preview'),
+        };
+    },
+    'crm.record.sidebar': () => {
+        return {
+            runServerlessFunction: createMockServerlessFuncRunner(),
+            actions: {
+                ...createMockCrmHostActions(),
+                ...createMockUiePlatformActions(),
+            },
+            context: createFakeCrmContext('crm.record.sidebar'),
+        };
+    },
+    'helpdesk.sidebar': () => {
+        return {
+            runServerlessFunction: createMockServerlessFuncRunner(),
+            actions: {
+                ...createMockCrmHostActions(),
+                ...createMockUiePlatformActions(),
+            },
+            context: createFakeCrmContext('helpdesk.sidebar'),
+        };
+    },
+    'uie.playground.middle': () => {
+        return {
+            runServerlessFunction: createMockServerlessFuncRunner(),
+            actions: {
+                warn: () => { },
+            },
+            context: {
+                location: 'uie.playground.middle',
+                user: createFakeUser(),
+                portal: createFakePortalContext(),
+            },
+        };
+    },
+    settings: () => {
+        return {
+            runServerlessFunction: createMockServerlessFuncRunner(),
+            actions: {
+                ...createMockSettingsActions(),
+                ...createMockUiePlatformActions(),
+            },
+            context: {
+                location: 'settings',
+                user: createFakeUser(),
+                portal: createFakePortalContext(),
+            },
+        };
+    },
+    home: () => {
+        return {
+            runServerlessFunction: createMockServerlessFuncRunner(),
+            actions: {
+                ...createMockAppHomeActions(),
+                ...createMockUiePlatformActions(),
+            },
+            context: {
+                location: 'home',
+                user: createFakeUser(),
+                portal: createFakePortalContext(),
+            },
+        };
+    },
+};
+export const createMockExtensionPointApi = (extensionPointLocation) => {
+    const mockCreator = mockCreators[extensionPointLocation];
+    if (!mockCreator) {
+        throw new Error(`No mock creator found for extension point location: ${extensionPointLocation}`);
+    }
+    return mockCreator();
+};

package/dist/experimental/testing/internal/mocks/mock-hooks.d.ts

@@ -0,0 +1,2 @@
+import { RendererMockHooksInternal } from '../types-internal.ts';
+export declare const createMockHooks: () => RendererMockHooksInternal;

package/dist/experimental/testing/internal/mocks/mock-hooks.js

@@ -0,0 +1,59 @@
+/**
+ * Creates a record of property names and their fake values.
+ *
+ * @param propertyNames The names of the properties to create to create fake properties.
+ * @returns A record of property names and their fake values.
+ */
+const createFakeProperties = (propertyNames) => {
+    if (!propertyNames || propertyNames.length === 0) {
+        return {};
+    }
+    return propertyNames.reduce((acc, propertyName) => {
+        acc[propertyName] = `fake_${propertyName}`;
+        return acc;
+    }, {});
+};
+export const createMockHooks = () => {
+    // Build a mocks object with the default mock functions.
+    // NOTE: The mock implementations can be overridden by tests using the spies that are provided in the returned `spies` object.
+    return {
+        useCrmProperties: (propertyNames) => {
+            const properties = createFakeProperties(propertyNames);
+            return {
+                properties,
+                error: null,
+                isLoading: false,
+            };
+        },
+        useAssociations: (config) => {
+            const { properties: propertyNames } = config;
+            const properties = createFakeProperties(propertyNames);
+            return {
+                results: [
+                    {
+                        toObjectId: 123,
+                        associationTypes: [
+                            {
+                                category: 'HUBSPOT_DEFINED',
+                                typeId: 1,
+                                label: 'Primary',
+                            },
+                        ],
+                        properties,
+                    },
+                ],
+                error: null,
+                isLoading: false,
+                pagination: {
+                    hasNextPage: false,
+                    hasPreviousPage: false,
+                    currentPage: 1,
+                    pageSize: 10,
+                    nextPage: () => { },
+                    previousPage: () => { },
+                    reset: () => { },
+                },
+            };
+        },
+    };
+};

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

@@ -1,6 +1,6 @@
-import type { RenderedParentNode } from '../types';
+import type { RenderedNode } from '../types.ts';
 export interface PrintOptions {
     markInvalidComponents: boolean;
     listInvalidComponents: boolean;
 }
-export declare const printNode: (rootNode: RenderedParentNode, options?: PrintOptions) => string;
+export declare const printNode: (rootNode: RenderedNode, options?: PrintOptions) => string;

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

@@ -1,5 +1,5 @@
-import { __hubSpotComponentRegistry } from '../../../__synced__/remoteComponents.synced';
-import { isRenderedElementNode, isRenderedFragmentNode, isRenderedRootNode, isRenderedTextNode, } from '../type-utils';
+import { __hubSpotComponentRegistry } from "../../../shared/remoteComponents.js";
+import { isRenderedElementNode, isRenderedFragmentNode, isRenderedRootNode, isRenderedTextNode, } from "../type-utils.js";
 const INDENT_STRING = '  ';
 const printTextNode = (node, indent, printContext) => {
     printContext.append(`${indent}${JSON.stringify(node.text)}\n`);
@@ -43,7 +43,7 @@ const printElementStart = (node, indent, printContext) => {
     }
 };
 const printElementNode = (node, indent, printContext) => {
-    const hasChildren = node.children.length > 0;
+    const hasChildren = node.childNodes.length > 0;
     const { name, props } = node;
     if (hasChildren) {
         printElementStart(node, indent, printContext);
@@ -59,16 +59,16 @@ const printElementNode = (node, indent, printContext) => {
     }
 };
 const printChildren = (node, indent, printContext) => {
-    const { children } = node;
-    for (const child of children) {
-        if (isRenderedTextNode(child)) {
-            printTextNode(child, indent, printContext);
+    const { childNodes } = node;
+    for (const childNode of childNodes) {
+        if (isRenderedTextNode(childNode)) {
+            printTextNode(childNode, indent, printContext);
         }
-        else if (isRenderedElementNode(child)) {
-            printElementNode(child, indent, printContext);
+        else if (isRenderedElementNode(childNode)) {
+            printElementNode(childNode, indent, printContext);
         }
         else {
-            throw new Error(`Illegal State. Invalid rendered node type: ${child.nodeType}`);
+            throw new Error(`Illegal State. Invalid rendered node type: ${childNode.nodeType}`);
         }
     }
 };
@@ -99,9 +99,15 @@ export const printNode = (rootNode, options = DEFAULT_PRINT_OPTIONS) => {
     else if (isRenderedFragmentNode(rootNode)) {
         printFragmentNode(rootNode, '', printContext);
     }
-    else {
+    else if (isRenderedElementNode(rootNode)) {
         printElementNode(rootNode, '', printContext);
     }
+    else if (isRenderedTextNode(rootNode)) {
+        printTextNode(rootNode, '', printContext);
+    }
+    else {
+        throw new Error(`Illegal State. Invalid rendered node type: ${rootNode.nodeType}`);
+    }
     if (listInvalidComponents && printContext.foundInvalidComponents.size > 0) {
         printContext.append(`\n⚠️  Invalid components:\n`);
         const foundInvalidComponents = [...printContext.foundInvalidComponents];