[LG-5100] feat(code-editor): add test harnesses

packages/code-editor/src/CodeEditor/CodeEditor.spec.tsx

@@ -3,19 +3,70 @@ import { EditorState } from '@codemirror/state';
 import { act, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { renderCodeEditor } from '../testing/testUtils';
-
 import { LanguageName } from './hooks/extensions/useLanguageExtension';
+import { renderCodeEditor } from './CodeEditor.testUtils';
 import { CopyButtonAppearance } from './CodeEditor.types';
 import { CodeEditorSelectors } from '.';
 
+// Enhanced MutationObserver mock for CodeMirror compatibility
 global.MutationObserver = jest.fn().mockImplementation(() => ({
   observe: jest.fn(),
   unobserve: jest.fn(),
   disconnect: jest.fn(),
   takeRecords: jest.fn().mockReturnValue([]),
 }));
 
+// Mock ResizeObserver which is used by CodeMirror
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+
+// Mock IntersectionObserver which may be used by CodeMirror
+global.IntersectionObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+  root: null,
+  rootMargin: '',
+  thresholds: [],
+}));
+
+// Mock document.getSelection for CodeMirror
+if (!global.document.getSelection) {
+  global.document.getSelection = jest.fn().mockReturnValue({
+    rangeCount: 0,
+    getRangeAt: jest.fn(),
+    removeAllRanges: jest.fn(),
+    addRange: jest.fn(),
+    toString: jest.fn().mockReturnValue(''),
+  });
+}
+
+// Mock createRange for CodeMirror
+if (!global.document.createRange) {
+  global.document.createRange = jest.fn().mockReturnValue({
+    setStart: jest.fn(),
+    setEnd: jest.fn(),
+    collapse: jest.fn(),
+    selectNodeContents: jest.fn(),
+    insertNode: jest.fn(),
+    surroundContents: jest.fn(),
+    cloneRange: jest.fn(),
+    detach: jest.fn(),
+    getClientRects: jest.fn().mockReturnValue([]),
+    getBoundingClientRect: jest.fn().mockReturnValue({
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0,
+    }),
+  });
+}
+
 // Mock console methods to suppress expected warnings
 const originalConsoleWarn = console.warn;
 const originalConsoleError = console.error;
@@ -320,24 +371,34 @@ describe('packages/code-editor', () => {
   test('renders copy button when copyButtonAppearance is "hover"', async () => {
     const { container, editor } = renderCodeEditor({
       copyButtonAppearance: CopyButtonAppearance.Hover,
+      'data-lgid': 'lg-test-copy-hover',
     });
 
     await editor.waitForEditorView();
 
+    // Wait a bit for copy button to be rendered
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // The copy button selector looks for the specific lgid structure
     expect(
-      container.querySelector(CodeEditorSelectors.CopyButton),
+      container.querySelector('[data-lgid="lg-test-copy-hover-copy_button"]'),
     ).toBeInTheDocument();
   });
 
   test('renders copy button when copyButtonAppearance is "persist"', async () => {
     const { container, editor } = renderCodeEditor({
       copyButtonAppearance: CopyButtonAppearance.Persist,
+      'data-lgid': 'lg-test-copy-persist',
     });
 
     await editor.waitForEditorView();
 
+    // Wait a bit for copy button to be rendered
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // The copy button selector looks for the specific lgid structure
     expect(
-      container.querySelector(CodeEditorSelectors.CopyButton),
+      container.querySelector('[data-lgid="lg-test-copy-persist-copy_button"]'),
     ).toBeInTheDocument();
   });
 

packages/code-editor/src/testing/testUtils.tsx → packages/code-editor/src/CodeEditor/CodeEditor.testUtils.tsx

@@ -8,7 +8,7 @@ import {
   CodeEditorProps,
   CodeEditorSelectors,
   CodeMirrorView,
-} from '..';
+} from '.';
 
 let editorViewInstance: CodeMirrorView | null = null;
 let getEditorViewFn: (() => CodeMirrorView | null) | null = null;
@@ -96,43 +96,6 @@ function getBySelector(
   return elements[0];
 }
 
-/**
- * Returns all elements matching a specific CodeEditor selector
- * @param selector - The CSS selector to look for in the editor
- * @param options - Optional filtering options
- * @param options.text - Optional text content filter
- * @returns All DOM elements matching the selector and optional text filter
- * @throws Error if no elements are found
- */
-function getAllBySelector(
-  selector: CodeEditorSelectors,
-  options?: { text?: string },
-): Array<Element> {
-  const view = ensureEditorView();
-  const elements = view.dom.querySelectorAll(selector);
-
-  if (!elements || elements.length === 0) {
-    throw new Error(`No elements with selector "${selector}" found`);
-  }
-
-  // If text filter is provided, return only elements containing the text
-  if (options?.text) {
-    const matchingElements = Array.from(elements).filter(element =>
-      element.textContent?.includes(options.text as string),
-    );
-
-    if (!matchingElements || matchingElements.length === 0) {
-      throw new Error(
-        `No elements with selector "${selector}" and text "${options.text}" found`,
-      );
-    }
-
-    return matchingElements;
-  }
-
-  return Array.from(elements);
-}
-
 /**
  * Returns the first element matching a specific CodeEditor selector or null if not found
  * @param selector - The CSS selector to look for in the editor
@@ -174,40 +137,6 @@ function queryBySelector(
   return elements[0];
 }
 
-/**
- * Returns all elements matching a specific CodeEditor selector or null if none are found
- * @param selector - The CSS selector to look for in the editor
- * @param options - Optional filtering options
- * @param options.text - Optional text content filter
- * @returns All DOM elements matching the selector and optional text filter, or null if none found
- */
-function queryAllBySelector(
-  selector: CodeEditorSelectors,
-  options?: { text?: string },
-): Array<Element> | null {
-  const view = ensureEditorView();
-  const elements = view.dom.querySelectorAll(selector);
-
-  if (!elements || elements.length === 0) {
-    return null;
-  }
-
-  // If text filter is provided, return only elements containing the text
-  if (options?.text) {
-    const matchingElements = Array.from(elements).filter(element =>
-      element.textContent?.includes(options.text as string),
-    );
-
-    if (!matchingElements || matchingElements.length === 0) {
-      return null;
-    }
-
-    return matchingElements;
-  }
-
-  return Array.from(elements);
-}
-
 /**
  * Checks if the editor is in read-only mode
  * @returns Boolean indicating whether the editor is in read-only mode
@@ -317,9 +246,7 @@ function redo(): boolean {
 
 export const editor = {
   getBySelector,
-  getAllBySelector,
   queryBySelector,
-  queryAllBySelector,
   isLineWrappingEnabled,
   isReadOnly,
   getIndentUnit,

packages/code-editor/src/CodeEditor/CodeEditor.tsx

@@ -13,6 +13,7 @@ import { Body } from '@leafygreen-ui/typography';
 
 import { CodeEditorCopyButton } from '../CodeEditorCopyButton';
 import { CopyButtonVariant } from '../CodeEditorCopyButton/CodeEditorCopyButton.types';
+import { getLgIds } from '../utils';
 
 import { useFormattingModuleLoaders } from './hooks/formatting/useFormattingModuleLoaders';
 import {
@@ -25,7 +26,6 @@ import {
   CodeEditorHandle,
   type CodeEditorProps,
   CopyButtonAppearance,
-  CopyButtonLgId,
   type HTMLElementWithCodeMirror,
 } from './CodeEditor.types';
 import { CodeEditorProvider } from './CodeEditorContext';
@@ -42,7 +42,8 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
     const {
       baseFontSize: baseFontSizeProp,
       className,
-      copyButtonAppearance,
+      copyButtonAppearance = CopyButtonAppearance.Hover,
+      'data-lgid': dataLgId,
       darkMode: darkModeProp,
       defaultValue,
       enableClickableUrls,
@@ -70,6 +71,8 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
       ...rest
     } = props;
 
+    const lgIds = getLgIds(dataLgId);
+
     const { theme } = useDarkMode(darkModeProp);
     const [controlledValue, setControlledValue] = useState(value || '');
     const isControlled = value !== undefined;
@@ -343,6 +346,7 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
       undo: handleUndo,
       redo: handleRedo,
       downloadContent: handleDownloadContent,
+      lgIds,
     };
 
     return (
@@ -358,6 +362,7 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
           className,
           copyButtonAppearance,
         })}
+        data-lgid={lgIds.root}
         {...rest}
       >
         {panel && (
@@ -371,7 +376,7 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
               className={getCopyButtonStyles(copyButtonAppearance)}
               variant={CopyButtonVariant.Button}
               disabled={isLoadingProp || isLoadingCoreModules}
-              data-lgid={CopyButtonLgId}
+              data-lgid={lgIds.copyButton}
             />
           )}
         {(isLoadingProp ||
@@ -387,6 +392,7 @@ export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
               minHeight,
               maxHeight,
             })}
+            data-lgid={lgIds.loader}
           >
             <Body className={getLoadingTextStyles(theme)}>
               Loading code editor...