test: migrate Editor tests to RTL

electron · Aug 3, 2024 · f3baf06 · f3baf06
1 parent 1437e6b
commit f3baf06
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 40 deletions.
diff --git 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 initializeMosaicEditor(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;
+    initializeMosaicEditor(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) => {
+      initializeMosaicEditor(filename);
+
       const { instance } = createEditor(filename);
+
       expect(instance.language).toBe(language);
     });
   });
 
   it('denies updates', () => {
-    const { instance } = createEditor(MAIN_JS);
+    const id = MAIN_JS;
+    initializeMosaicEditor(id);
+
+    const { instance } = createEditor(id);
+
     expect(instance.shouldComponentUpdate()).toBe(false);
   });
 
@@ -61,48 +69,45 @@ 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());
     });
 
     it('sets up a listener on focused text editor', async () => {
       const id = MAIN_JS;
-      store.editorMosaic.set({ [id]: '// content' });
-      const { instance } = createEditor(id);
+      initializeMosaicEditor(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);
+    initializeMosaicEditor(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);
+    initializeMosaicEditor(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
@@ -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}
+      />
+    );
   }
 }