[LG-5464] chore(code-editor): remove unused dependencies and standardize test syntax (#3065)

tsck · tsck · commit 0d63ad4ac0fc · 2025-09-15T13:47:15.000-04:00
* refactor(tests): update test cases to use 'test' instead of 'it'

- Replaced all instances of 'it' with 'test' in the test files for consistency across the codebase.
- This change improves readability and aligns with the preferred testing syntax in the project.

* chore: remove unused Codemirror dependencies and clean up imports

- Removed '@uiw/react-codemirror' from package.json and pnpm-lock.yaml as it is no longer needed.
- Cleaned up imports in useThemeExtension.ts to eliminate references to the removed dependency.
- Updated testUtils.tsx to use ChangeSpec from '@codemirror/state' instead of the removed '@uiw/react-codemirror'.
diff --git a/packages/code-editor/README.md b/packages/code-editor/README.md
@@ -895,7 +895,7 @@ describe('useThemeExtension', () => {
   const fakeStateModule = createMockStateModule();
   const fakeViewModule = createMockViewModule();
 
-  it('should apply theme correctly', () => {
+  test('should apply theme correctly', () => {
     const { result } = renderHook(() =>
       useThemeExtension({
         editorViewInstance: null,
@@ -922,7 +922,7 @@ import { useExtensions } from '@leafygreen-ui/code-editor/hooks/extensions';
 describe('useExtensions', () => {
   const fakeModules = createComprehensiveFakeModules();
 
-  it('should aggregate all extensions', () => {
+  test('should aggregate all extensions', () => {
     const { result } = renderHook(() =>
       useExtensions({
         editorViewInstance: null,
diff --git a/packages/code-editor/package.json b/packages/code-editor/package.json
@@ -60,7 +60,6 @@
     "@lezer/highlight": "^1.2.1",
     "@replit/codemirror-lang-csharp": "^6.2.0",
     "@uiw/codemirror-extensions-hyper-link": "^4.23.12",
-    "@uiw/react-codemirror": "^4.23.10",
     "@wasm-fmt/clang-format": "^20.1.7",
     "@wasm-fmt/gofmt": "^0.4.9",
     "@wasm-fmt/ruff_fmt": "^0.10.0",
diff --git a/packages/code-editor/src/CodeEditor/hooks/extensions/useAutoCompleteExtension.spec.ts b/packages/code-editor/src/CodeEditor/hooks/extensions/useAutoCompleteExtension.spec.ts
@@ -11,7 +11,7 @@ describe('useAutoCompleteExtension', () => {
   const fakeStateModule = createMockStateModule();
   const fakeAutoModule = createMockAutoCompleteModule();
 
-  it('returns empty when language not set', () => {
+  test('returns empty when language not set', () => {
     const { result } = renderHook(() =>
       useAutoCompleteExtension({
         editorViewInstance: null,
@@ -22,7 +22,7 @@ describe('useAutoCompleteExtension', () => {
     expect(result.current).toEqual([]);
   });
 
-  it('returns autocompletion extension when language set', () => {
+  test('returns autocompletion extension when language set', () => {
     const { result } = renderHook(() =>
       useAutoCompleteExtension({
         editorViewInstance: null,
diff --git a/packages/code-editor/src/CodeEditor/hooks/extensions/useCodeFoldingExtension.spec.tsx b/packages/code-editor/src/CodeEditor/hooks/extensions/useCodeFoldingExtension.spec.tsx
@@ -8,7 +8,7 @@ describe('useCodeFoldingExtension', () => {
   const fakeStateModule = createMockStateModule();
   const fakeLanguageModule = createMockLanguageModule();
 
-  it('returns empty when disabled or module missing', () => {
+  test('returns empty when disabled or module missing', () => {
     const { result } = renderHook(() =>
       useCodeFoldingExtension({
         editorViewInstance: null,
@@ -19,7 +19,7 @@ describe('useCodeFoldingExtension', () => {
     expect(result.current).toEqual([]);
   });
 
-  it('returns fold gutter extension when enabled', () => {
+  test('returns fold gutter extension when enabled', () => {
     const { result } = renderHook(() =>
       useCodeFoldingExtension({
         editorViewInstance: null,
diff --git a/packages/code-editor/src/CodeEditor/hooks/extensions/useExtensions.spec.ts b/packages/code-editor/src/CodeEditor/hooks/extensions/useExtensions.spec.ts
@@ -7,7 +7,7 @@ import { useExtensions } from './useExtensions';
 describe('useExtensions (aggregator)', () => {
   const fakeModules = createComprehensiveFakeModules();
 
-  it('returns an array of extensions in expected order/length', () => {
+  test('returns an array of extensions in expected order/length', () => {
     const { result } = renderHook(() =>
       useExtensions({
         editorViewInstance: null,
diff --git a/packages/code-editor/src/CodeEditor/hooks/extensions/useHighlightExtension.spec.ts b/packages/code-editor/src/CodeEditor/hooks/extensions/useHighlightExtension.spec.ts
@@ -13,7 +13,7 @@ describe('useHighlightExtension', () => {
   const fakeLanguageModule = createMockLanguageModule();
   const fakeLezerHighlight = createMockLezerHighlightModule();
 
-  it('returns empty when missing modules or language', () => {
+  test('returns empty when missing modules or language', () => {
     const { result } = renderHook(() =>
       useHighlightExtension({
         editorViewInstance: null,
@@ -24,7 +24,7 @@ describe('useHighlightExtension', () => {
     expect(result.current).toEqual([]);
   });
 
-  it('returns syntax highlighting extension when modules present', () => {
+  test('returns syntax highlighting extension when modules present', () => {
     const { result } = renderHook(() =>
       useHighlightExtension({
         editorViewInstance: null,
diff --git a/packages/code-editor/src/CodeEditor/hooks/extensions/useHyperLinkExtension.spec.ts b/packages/code-editor/src/CodeEditor/hooks/extensions/useHyperLinkExtension.spec.ts
@@ -11,7 +11,7 @@ describe('useHyperLinkExtension', () => {
   const fakeStateModule = createMockStateModule();
   const fakeHyperLinkModule = createMockHyperLinkModule();
 
-  it('returns empty when disabled', () => {
+  test('returns empty when disabled', () => {
     const { result } = renderHook(() =>
       useHyperLinkExtension({
         editorViewInstance: null,
@@ -22,7 +22,7 @@ describe('useHyperLinkExtension', () => {
     expect(result.current).toEqual([]);
   });
 
-  it('returns hyperlink extension when enabled', () => {
+  test('returns hyperlink extension when enabled', () => {
     const { result } = renderHook(() =>
       useHyperLinkExtension({
         editorViewInstance: null,
diff --git a/packages/code-editor/src/CodeEditor/hooks/extensions/useIndentExtension.spec.ts b/packages/code-editor/src/CodeEditor/hooks/extensions/useIndentExtension.spec.ts
@@ -9,7 +9,7 @@ describe('useIndentExtension', () => {
   const fakeStateModule = createMockStateModule();
   const fakeLanguageModule = createMockLanguageModule();
 
-  it('returns empty when required modules missing', () => {
+  test('returns empty when required modules missing', () => {
     const { result } = renderHook(() =>
       useIndentExtension({
         editorViewInstance: null,
@@ -20,7 +20,7 @@ describe('useIndentExtension', () => {
     expect(result.current).toEqual([]);
   });
 
-  it('returns space-based indent configuration', () => {
+  test('returns space-based indent configuration', () => {
     const { result } = renderHook(() =>
       useIndentExtension({
         editorViewInstance: null,
@@ -34,7 +34,7 @@ describe('useIndentExtension', () => {
     expect(result.current).toEqual(['INDENT_"    "', 'TABSIZE_4']);
   });
 
-  it('returns tab-based indent configuration', () => {
+  test('returns tab-based indent configuration', () => {
     const { result } = renderHook(() =>
       useIndentExtension({
         editorViewInstance: null,
diff --git a/packages/code-editor/src/CodeEditor/hooks/extensions/useLanguageExtension.spec.ts b/packages/code-editor/src/CodeEditor/hooks/extensions/useLanguageExtension.spec.ts
@@ -8,7 +8,7 @@ describe('useLanguageExtension', () => {
   const fakeStateModule = createMockStateModule();
   const modulesBase = { '@codemirror/state': fakeStateModule } as any;
 
-  it('returns empty when language not provided', () => {
+  test('returns empty when language not provided', () => {
     const { result } = renderHook(() =>
       useLanguageExtension({
         editorViewInstance: null,
@@ -19,7 +19,7 @@ describe('useLanguageExtension', () => {
     expect(result.current).toEqual([]);
   });
 
-  it('returns javascript extension with correct options', () => {
+  test('returns javascript extension with correct options', () => {
     const jsMock = jest.fn(() => 'JS_EXT');
     const { result } = renderHook(() =>
       useLanguageExtension({
@@ -35,7 +35,7 @@ describe('useLanguageExtension', () => {
     expect(result.current).toBe('JS_EXT');
   });
 
-  it('returns jsx extension with correct options', () => {
+  test('returns jsx extension with correct options', () => {
     const jsMock = jest.fn(() => 'JSX_EXT');
     const { result } = renderHook(() =>
       useLanguageExtension({
@@ -51,7 +51,7 @@ describe('useLanguageExtension', () => {
     expect(result.current).toBe('JSX_EXT');
   });
 
-  it('returns tsx extension with correct options', () => {
+  test('returns tsx extension with correct options', () => {
     const jsMock = jest.fn(() => 'TSX_EXT');
     const { result } = renderHook(() =>
       useLanguageExtension({
@@ -67,7 +67,7 @@ describe('useLanguageExtension', () => {
     expect(result.current).toBe('TSX_EXT');
   });
 
-  it('returns typescript extension with correct options', () => {
+  test('returns typescript extension with correct options', () => {
     const jsMock = jest.fn(() => 'TS_EXT');
     const { result } = renderHook(() =>
       useLanguageExtension({
@@ -83,7 +83,7 @@ describe('useLanguageExtension', () => {
     expect(result.current).toBe('TS_EXT');
   });
 
-  it('returns kotlin and ruby via StreamLanguage.define', () => {
+  test('returns kotlin and ruby via StreamLanguage.define', () => {
     const defineMock = jest.fn((lang: any) => `STREAM_${lang.name || 'LANG'}`);
     const modules = {
       ...modulesBase,
@@ -111,7 +111,7 @@ describe('useLanguageExtension', () => {
     expect(rubyRes.current).toBe('STREAM_ruby');
   });
 
-  it('returns direct language factory results for simple languages', () => {
+  test('returns direct language factory results for simple languages', () => {
     const mk = (name: string) => ({
       [name]: jest.fn(() => `${name.toUpperCase()}_EXT`),
     });
diff --git a/packages/code-editor/src/CodeEditor/hooks/extensions/useLineNumbersExtension.spec.ts b/packages/code-editor/src/CodeEditor/hooks/extensions/useLineNumbersExtension.spec.ts
@@ -8,7 +8,7 @@ describe('useLineNumbersExtension', () => {
   const fakeStateModule = createMockStateModule();
   const fakeViewModule = createMockViewModule();
 
-  it('returns empty when disabled', () => {
+  test('returns empty when disabled', () => {
     const { result } = renderHook(() =>
       useLineNumbersExtension({
         editorViewInstance: null,
@@ -19,7 +19,7 @@ describe('useLineNumbersExtension', () => {
     expect(result.current).toEqual([]);
   });
 
-  it('returns line numbers extension when enabled', () => {
+  test('returns line numbers extension when enabled', () => {
     const { result } = renderHook(() =>
       useLineNumbersExtension({
         editorViewInstance: null,
diff --git a/packages/code-editor/src/CodeEditor/hooks/extensions/useLineWrapExtension.spec.ts b/packages/code-editor/src/CodeEditor/hooks/extensions/useLineWrapExtension.spec.ts
@@ -8,7 +8,7 @@ describe('useLineWrapExtension', () => {
   const fakeStateModule = createMockStateModule();
   const fakeViewModule = createMockViewModule();
 
-  it('returns empty when disabled', () => {
+  test('returns empty when disabled', () => {
     const { result } = renderHook(() =>
       useLineWrapExtension({
         editorViewInstance: null,
@@ -19,7 +19,7 @@ describe('useLineWrapExtension', () => {
     expect(result.current).toEqual([]);
   });
 
-  it('returns wrapping extension when enabled and module present', () => {
+  test('returns wrapping extension when enabled and module present', () => {
     const { result } = renderHook(() =>
       useLineWrapExtension({
         editorViewInstance: null,
diff --git a/packages/code-editor/src/CodeEditor/hooks/extensions/usePlaceholderExtension.spec.ts b/packages/code-editor/src/CodeEditor/hooks/extensions/usePlaceholderExtension.spec.ts
@@ -8,7 +8,7 @@ describe('usePlaceholderExtension', () => {
   const fakeStateModule = createMockStateModule();
   const fakeViewModule = createMockViewModule();
 
-  it('returns empty when no placeholder', () => {
+  test('returns empty when no placeholder', () => {
     const { result } = renderHook(() =>
       usePlaceholderExtension({
         editorViewInstance: null,
@@ -19,7 +19,7 @@ describe('usePlaceholderExtension', () => {
     expect(result.current).toEqual([]);
   });
 
-  it('returns placeholder extension when provided', () => {
+  test('returns placeholder extension when provided', () => {
     const { result } = renderHook(() =>
       usePlaceholderExtension({
         editorViewInstance: null,
diff --git a/packages/code-editor/src/CodeEditor/hooks/extensions/useReadOnlyExtension.spec.ts b/packages/code-editor/src/CodeEditor/hooks/extensions/useReadOnlyExtension.spec.ts
@@ -7,7 +7,7 @@ import { useReadOnlyExtension } from './useReadOnlyExtension';
 describe('useReadOnlyExtension', () => {
   const fakeStateModule = createMockStateModule();
 
-  it('returns empty when readOnly is false', () => {
+  test('returns empty when readOnly is false', () => {
     const { result } = renderHook(() =>
       useReadOnlyExtension({
         editorViewInstance: null,
@@ -18,7 +18,7 @@ describe('useReadOnlyExtension', () => {
     expect(result.current).toEqual([]);
   });
 
-  it('returns readonly extension when enabled', () => {
+  test('returns readonly extension when enabled', () => {
     const { result } = renderHook(() =>
       useReadOnlyExtension({
         editorViewInstance: null,
diff --git a/packages/code-editor/src/CodeEditor/hooks/extensions/useThemeExtension.spec.ts b/packages/code-editor/src/CodeEditor/hooks/extensions/useThemeExtension.spec.ts
@@ -8,7 +8,7 @@ describe('useThemeExtension', () => {
   const fakeStateModule = createMockStateModule();
   const fakeEditorViewModule = createMockViewModule();
 
-  it('returns empty extension when view module not provided', () => {
+  test('returns empty extension when view module not provided', () => {
     const { result } = renderHook(() =>
       useThemeExtension({
         editorViewInstance: null,
@@ -20,7 +20,7 @@ describe('useThemeExtension', () => {
     expect(result.current).toEqual([]);
   });
 
-  it('returns theme extension when view module provided', () => {
+  test('returns theme extension when view module provided', () => {
     const { result } = renderHook(() =>
       useThemeExtension({
         editorViewInstance: null,
diff --git a/packages/code-editor/src/CodeEditor/hooks/extensions/useThemeExtension.ts b/packages/code-editor/src/CodeEditor/hooks/extensions/useThemeExtension.ts
@@ -1,4 +1,3 @@
-// import { EditorView } from '@uiw/react-codemirror';
 import { type EditorView } from '@codemirror/view';
 
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
diff --git a/packages/code-editor/src/CodeEditor/hooks/extensions/useTooltipExtension.spec.ts b/packages/code-editor/src/CodeEditor/hooks/extensions/useTooltipExtension.spec.ts
@@ -8,7 +8,7 @@ describe('useTooltipExtension', () => {
   const fakeStateModule = createMockStateModule();
   const fakeLintModule = createMockLintModule();
 
-  it('returns empty when no tooltips provided or module missing', () => {
+  test('returns empty when no tooltips provided or module missing', () => {
     const { result } = renderHook(() =>
       useTooltipExtension({
         editorViewInstance: null,
@@ -19,7 +19,7 @@ describe('useTooltipExtension', () => {
     expect(result.current).toEqual([]);
   });
 
-  it('returns linter extension when tooltips provided', () => {
+  test('returns linter extension when tooltips provided', () => {
     const { result } = renderHook(() =>
       useTooltipExtension({
         editorViewInstance: null,
diff --git a/packages/code-editor/src/CodeEditor/hooks/formatting/useFormattingModuleLoaders.spec.ts b/packages/code-editor/src/CodeEditor/hooks/formatting/useFormattingModuleLoaders.spec.ts
@@ -14,13 +14,13 @@ afterEach(() => {
 });
 
 describe('useFormattingModuleLoaders', () => {
-  it('returns empty loaders object when language is undefined', () => {
+  test('returns empty loaders object when language is undefined', () => {
     const { result } = renderHook(() => useFormattingModuleLoaders(undefined));
 
     expect(result.current).toEqual({});
   });
 
-  it('returns empty object for languages without formatters', () => {
+  test('returns empty object for languages without formatters', () => {
     // Test with a language that's not handled by the formatter
     const { result } = renderHook(() =>
       useFormattingModuleLoaders('xml' as LanguageName),
@@ -102,7 +102,7 @@ describe('useFormattingModuleLoaders', () => {
   });
 
   describe('memoization behavior', () => {
-    it('returns the same object reference when language does not change', () => {
+    test('returns the same object reference when language does not change', () => {
       const { result, rerender } = renderHook(
         ({ language }: { language: LanguageName | undefined }) =>
           useFormattingModuleLoaders(language),
@@ -118,7 +118,7 @@ describe('useFormattingModuleLoaders', () => {
       expect(firstResult).toBe(secondResult);
     });
 
-    it('returns different object reference when language changes', () => {
+    test('returns different object reference when language changes', () => {
       const { result, rerender } = renderHook(
         ({ language }: { language: LanguageName | undefined }) =>
           useFormattingModuleLoaders(language),
@@ -136,7 +136,7 @@ describe('useFormattingModuleLoaders', () => {
       expect(firstResult).not.toBe(secondResult);
     });
 
-    it('returns the same object reference when re-rendering with undefined language', () => {
+    test('returns the same object reference when re-rendering with undefined language', () => {
       const { result, rerender } = renderHook(
         ({ language }: { language: LanguageName | undefined }) =>
           useFormattingModuleLoaders(language),
diff --git a/packages/code-editor/src/CodeEditor/hooks/useLazyModules.spec.ts b/packages/code-editor/src/CodeEditor/hooks/useLazyModules.spec.ts
@@ -24,7 +24,7 @@ describe('useLazyModules', () => {
     moduleC: { valueC: boolean };
   }
 
-  it('returns empty modules and not loading when no loaders provided', () => {
+  test('returns empty modules and not loading when no loaders provided', () => {
     const { result } = renderHook(() => {
       const loaders = useMemo(() => ({}), []);
       return useLazyModules<TestModules>(loaders);
@@ -34,7 +34,7 @@ describe('useLazyModules', () => {
     expect(result.current.isLoading).toBe(false);
   });
 
-  it('loads single module successfully', async () => {
+  test('loads single module successfully', async () => {
     const mockModuleA = { valueA: 'test' };
 
     const { result } = renderHook(() => {
@@ -62,7 +62,7 @@ describe('useLazyModules', () => {
     expect(result.current.modules).toEqual({ moduleA: mockModuleA });
   });
 
-  it('loads multiple modules concurrently', async () => {
+  test('loads multiple modules concurrently', async () => {
     const mockModuleA = { valueA: 'test' };
     const mockModuleB = { valueB: 42 };
 
@@ -94,7 +94,7 @@ describe('useLazyModules', () => {
     });
   });
 
-  it('handles module loading errors gracefully', async () => {
+  test('handles module loading errors gracefully', async () => {
     const mockModuleA = { valueA: 'test' };
 
     const { result } = renderHook(() => {
@@ -124,7 +124,7 @@ describe('useLazyModules', () => {
     );
   });
 
-  it('handles loader functions that return undefined', async () => {
+  test('handles loader functions that return undefined', async () => {
     const mockModuleA = { valueA: 'test' };
 
     const { result } = renderHook(() => {
diff --git a/packages/code-editor/src/CodeEditor/hooks/useModuleLoaders.spec.ts b/packages/code-editor/src/CodeEditor/hooks/useModuleLoaders.spec.ts
diff --git a/packages/code-editor/src/CodeEditor/testing/testUtils.tsx b/packages/code-editor/src/CodeEditor/testing/testUtils.tsx
diff --git a/packages/code-editor/src/Panel/Panel.spec.tsx b/packages/code-editor/src/Panel/Panel.spec.tsx
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
