LG-5136: render functional components to get node text content

.changeset/common-news-stay.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/lib': patch
+---
+
+Additional support for getting node text content from functional components.

packages/lib/src/getNodeTextContent/getNodeTextContent.spec.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import getNodeTextContent from '.';
+
+describe('packages/lib/src/getNodeTextContent', () => {
+  describe('getNodeTextContent', () => {
+    test('returns empty string for undefined node', () => {
+      const result = getNodeTextContent(undefined);
+      expect(result).toBe('');
+    });
+
+    test('returns correct text content for a string node', () => {
+      const result = getNodeTextContent('leafy green');
+      expect(result).toBe('leafy green');
+    });
+
+    test('returns correct text content for a number node', () => {
+      const result = getNodeTextContent(123);
+      expect(result).toBe('123');
+    });
+
+    test('returns concatenated text content for an array of nodes', () => {
+      const result = getNodeTextContent(['leafy', 'green', false]);
+      expect(result).toBe('leafy green');
+    });
+
+    test('returns text content for intrinsic elements', () => {
+      const element = React.createElement(
+        'div',
+        null,
+        'leafy',
+        React.createElement('span', null, 'green'),
+      );
+      const result = getNodeTextContent(element);
+      expect(result).toBe('leafy green');
+    });
+
+    test('returns text content for functional components', () => {
+      const FunctionalComponent = ({ title }: { title: string }) => {
+        return React.createElement('h1', null, 'title: ', title);
+      };
+
+      const element = React.createElement(FunctionalComponent, {
+        title: 'leafy green',
+      });
+
+      const result = getNodeTextContent(element);
+
+      expect(result).toBe('title: leafy green');
+    });
+
+    test('returns text content for nested functional components', () => {
+      const FunctionalComponent = ({ title }: { title: string }) => {
+        return React.createElement(
+          'div',
+          null,
+          'title: ',
+          React.createElement('span', null, title),
+        );
+      };
+
+      const element = React.createElement(FunctionalComponent, {
+        title: 'leafy green',
+      });
+
+      const result = getNodeTextContent(element);
+
+      expect(result).toBe('title: leafy green');
+    });
+  });
+});

packages/lib/src/getNodeTextContent/index.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, ReactText } from 'react';
+import { FunctionComponent, ReactElement, ReactNode, ReactText } from 'react';
 
 /**
  * Returns the text string of a React node
@@ -12,14 +12,23 @@ export default function getNodeTextContent(node?: ReactNode): string {
     return node.map(getNodeTextContent).join(' ').trim();
   }
 
-  if (hasChildren(node)) {
+  if (isReactElement(node)) {
+    if (isFunctionalComponent(node)) {
+      const Component = node.type as FunctionComponent<any>;
+      return getNodeTextContent(Component(node.props));
+    }
+
     return getNodeTextContent(node.props.children);
   }
 
   return '';
 }
 
-function hasChildren(item?: any): item is ReactElement {
+function isFunctionalComponent(item?: any): item is FunctionComponent<any> {
+  return isReactElement(item) && typeof item.type === 'function';
+}
+
+function isReactElement(item?: any): item is ReactElement {
   return item && typeof item === 'object' && item.props;
 }