From 1437e6be3a5c1d1092b02dd4ba39ebf0a79db91a Mon Sep 17 00:00:00 2001
From: Erik Moura <erikian@electronjs.org>
Date: Sat, 3 Aug 2024 13:49:43 -0300
Subject: [PATCH 1/2] test: move `Editor` test to `rtl-spec`

---
 .../editor-spec.tsx => rtl-spec/components/editor.spec.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)
 rename tests/renderer/components/editor-spec.tsx => rtl-spec/components/editor.spec.tsx (94%)

diff --git a/tests/renderer/components/editor-spec.tsx b/rtl-spec/components/editor.spec.tsx
similarity index 94%
rename from tests/renderer/components/editor-spec.tsx
rename to rtl-spec/components/editor.spec.tsx
index a0254699bb..a15e85ff1d 100644
--- a/tests/renderer/components/editor-spec.tsx
+++ b/rtl-spec/components/editor.spec.tsx
@@ -2,9 +2,9 @@ import * as React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EditorId, MAIN_JS } from '../../../src/interfaces';
-import { Editor } from '../../../src/renderer/components/editor';
-import { AppState } from '../../../src/renderer/state';
+import { EditorId, MAIN_JS } from '../../src/interfaces';
+import { Editor } from '../../src/renderer/components/editor';
+import { AppState } from '../../src/renderer/state';
 
 type DidMount = () => void;
 

From 6b06cdf7bbefa494a370ff25dc2c25692ffd2248 Mon Sep 17 00:00:00 2001
From: Erik Moura <erikian@electronjs.org>
Date: Sat, 3 Aug 2024 17:08:36 -0300
Subject: [PATCH 2/2] test: migrate `Editor` tests to RTL

---
 rtl-spec/components/editor.spec.tsx | 83 +++++++++++++++--------------
 src/renderer/components/editor.tsx  |  8 ++-
 2 files changed, 51 insertions(+), 40 deletions(-)

diff --git a/rtl-spec/components/editor.spec.tsx b/rtl-spec/components/editor.spec.tsx
index a15e85ff1d..90253f0049 100644
--- a/rtl-spec/components/editor.spec.tsx
+++ b/rtl-spec/components/editor.spec.tsx
@@ -1,10 +1,7 @@
-import * as React from 'react';
-
-import { shallow } from 'enzyme';
-
 import { EditorId, MAIN_JS } from '../../src/interfaces';
 import { Editor } from '../../src/renderer/components/editor';
 import { AppState } from '../../src/renderer/state';
+import { renderClassComponentWithInstanceRef } from '../test-utils/renderClassComponentWithInstanceRef';
 
 type DidMount = () => void;
 
@@ -18,23 +15,27 @@ describe('Editor component', () => {
   });
 
   function createEditor(id: EditorId, didMount: DidMount = jest.fn()) {
-    const wrapper = shallow(
-      <Editor
-        appState={store}
-        editorDidMount={didMount}
-        id={id}
-        monaco={monaco}
-        monacoOptions={{}}
-        setFocused={() => undefined}
-      />,
-    );
-    const instance: any = wrapper.instance();
-    return { wrapper, instance };
+    return renderClassComponentWithInstanceRef(Editor, {
+      appState: store,
+      editorDidMount: didMount,
+      id,
+      monaco,
+      monacoOptions: {},
+      setFocused: () => undefined,
+    });
+  }
+
+  function initializeEditorMosaic(id: EditorId) {
+    store.editorMosaic.set({ [id]: '// content' });
   }
 
   it('renders the editor container', () => {
-    const { wrapper } = createEditor(MAIN_JS);
-    expect(wrapper.html()).toBe('<div class="editorContainer"></div>');
+    const id = MAIN_JS;
+    initializeEditorMosaic(id);
+
+    const { renderResult } = createEditor(id);
+
+    expect(renderResult.getByTestId('editorContainer')).toBeInTheDocument();
   });
 
   describe('correctly sets the language', () => {
@@ -43,13 +44,20 @@ describe('Editor component', () => {
       ['for html', 'file.html', 'html'],
       ['for css', 'file.css', 'css'],
     ])('%s', (_: unknown, filename: EditorId, language: string) => {
+      initializeEditorMosaic(filename);
+
       const { instance } = createEditor(filename);
+
       expect(instance.language).toBe(language);
     });
   });
 
   it('denies updates', () => {
-    const { instance } = createEditor(MAIN_JS);
+    const id = MAIN_JS;
+    initializeEditorMosaic(id);
+
+    const { instance } = createEditor(id);
+
     expect(instance.shouldComponentUpdate()).toBe(false);
   });
 
@@ -61,10 +69,7 @@ describe('Editor component', () => {
       const addEditorSpy = jest.spyOn(editorMosaic, 'addEditor');
 
       const didMount = jest.fn();
-      const { instance } = createEditor(id, didMount);
-
-      instance.containerRef.current = 'ref';
-      await instance.initMonaco();
+      createEditor(id, didMount);
 
       expect(didMount).toHaveBeenCalled();
       expect(addEditorSpy).toHaveBeenCalledWith(id, expect.anything());
@@ -72,37 +77,37 @@ describe('Editor component', () => {
 
     it('sets up a listener on focused text editor', async () => {
       const id = MAIN_JS;
-      store.editorMosaic.set({ [id]: '// content' });
-      const { instance } = createEditor(id);
+      initializeEditorMosaic(id);
+      createEditor(id);
 
-      instance.containerRef.current = 'ref';
-      await instance.initMonaco();
       expect(monaco.latestEditor.onDidFocusEditorText).toHaveBeenCalled();
     });
   });
 
   it('componentWillUnmount() attempts to dispose the editor', async () => {
     const id = MAIN_JS;
-    store.editorMosaic.set({ [id]: '// content' });
-    const didMount = jest.fn();
-    const { instance } = createEditor(id, didMount);
+    initializeEditorMosaic(id);
+
+    const {
+      renderResult: { unmount },
+    } = createEditor(id);
 
-    instance.containerRef.current = 'ref';
-    await instance.initMonaco();
-    instance.componentWillUnmount();
+    unmount();
 
     expect(monaco.latestEditor.dispose).toHaveBeenCalled();
   });
 
   it('focus editor file', async () => {
     const id = MAIN_JS;
-    store.editorMosaic.set({ [id]: '// content' });
-    const didMount = jest.fn();
-    const { instance } = createEditor(id, didMount);
+    initializeEditorMosaic(id);
+
+    const {
+      instance,
+      renderResult: { unmount },
+    } = createEditor(id);
+
+    unmount();
 
-    instance.containerRef.current = 'ref';
-    await instance.initMonaco();
-    instance.componentWillUnmount();
     expect(instance.props.id).toBe(id);
   });
 });
diff --git a/src/renderer/components/editor.tsx b/src/renderer/components/editor.tsx
index 8e527c9eb7..6e2c22805d 100644
--- a/src/renderer/components/editor.tsx
+++ b/src/renderer/components/editor.tsx
@@ -142,6 +142,12 @@ export class Editor extends React.Component<EditorProps> {
   }
 
   public render() {
-    return <div className="editorContainer" ref={this.containerRef} />;
+    return (
+      <div
+        className="editorContainer"
+        data-testid="editorContainer"
+        ref={this.containerRef}
+      />
+    );
   }
 }