test: migrate editors-non-ideal-state test to RTL (#1627)

rtl-spec/components/editors-non-ideal-state.spec.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { RenderNonIdealState } from '../../src/renderer/components/editors-non-ideal-state';
+import { EditorMosaic } from '../../src/renderer/editor-mosaic';
+
+describe('RenderNonIdealState component', () => {
+  let editorMosaic: EditorMosaic;
+
+  beforeEach(() => {
+    ({ editorMosaic } = window.app.state);
+  });
+
+  it('renders a non-ideal state', () => {
+    const { getByText } = render(
+      <RenderNonIdealState editorMosaic={{} as EditorMosaic} />,
+    );
+
+    expect(getByText('Reset editors')).toBeInTheDocument();
+  });
+
+  it('handles a click', async () => {
+    const resetLayoutSpy = jest.spyOn(editorMosaic, 'resetLayout');
+    const { getByRole } = render(
+      <RenderNonIdealState editorMosaic={editorMosaic} />,
+    );
+    await userEvent.click(getByRole('button'));
+
+    expect(resetLayoutSpy).toHaveBeenCalledTimes(1);
+  });
+});

src/renderer/components/editors-non-ideal-state.tsx

@@ -4,7 +4,13 @@ import { Button, NonIdealState } from '@blueprintjs/core';
 
 import { EditorMosaic } from '../editor-mosaic';
 
-export function renderNonIdealState(editorMosaic: EditorMosaic) {
+type RenderNonIdealStateProps = {
+  editorMosaic: EditorMosaic;
+};
+
+export function RenderNonIdealState({
+  editorMosaic,
+}: RenderNonIdealStateProps) {
   const resolveButton = (
     <Button text="Reset editors" onClick={() => editorMosaic.resetLayout()} />
   );

src/renderer/components/editors.tsx

@@ -11,7 +11,7 @@ import {
 } from 'react-mosaic-component';
 
 import { Editor } from './editor';
-import { renderNonIdealState } from './editors-non-ideal-state';
+import { RenderNonIdealState } from './editors-non-ideal-state';
 import { MaximizeButton, RemoveButton } from './editors-toolbar-button';
 import { EditorId, SetFiddleOptions } from '../../interfaces';
 import { AppState } from '../state';
@@ -262,7 +262,7 @@ export const Editors = observer(
           className={`focused__${this.state.focused}`}
           onChange={this.onChange}
           value={editorMosaic.mosaic}
-          zeroStateView={renderNonIdealState(editorMosaic)}
+          zeroStateView={<RenderNonIdealState editorMosaic={editorMosaic} />}
           renderTile={this.renderTile}
         />
       );