From fe03089d28b3ce08fb22545a7718ba04833ff934 Mon Sep 17 00:00:00 2001
From: Erik Moura <erikian@electronjs.org>
Date: Sun, 4 Aug 2024 23:42:16 -0300
Subject: [PATCH 1/2] test: move `editors-toolbar-button` test to `rtl-spec`

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

diff --git a/tests/renderer/components/editors-toolbar-button-spec.tsx b/rtl-spec/components/editors-toolbar-button.spec.tsx
similarity index 93%
rename from tests/renderer/components/editors-toolbar-button-spec.tsx
rename to rtl-spec/components/editors-toolbar-button.spec.tsx
index 4d829de91f..fa27b12d0c 100644
--- a/tests/renderer/components/editors-toolbar-button-spec.tsx
+++ b/rtl-spec/components/editors-toolbar-button.spec.tsx
@@ -2,12 +2,12 @@ import * as React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EditorId, MAIN_JS } from '../../../src/interfaces';
+import { EditorId, MAIN_JS } from '../../src/interfaces';
 import {
   MaximizeButton,
   RemoveButton,
-} from '../../../src/renderer/components/editors-toolbar-button';
-import { AppState } from '../../../src/renderer/state';
+} from '../../src/renderer/components/editors-toolbar-button';
+import { AppState } from '../../src/renderer/state';
 
 let mockContext: any = {};
 

From 0ed70d530a9bec318601183a71496a2e9f72d324 Mon Sep 17 00:00:00 2001
From: Erik Moura <erikian@electronjs.org>
Date: Sun, 4 Aug 2024 23:49:44 -0300
Subject: [PATCH 2/2] test: migrate `editors-toolbar-button` test to RTL

---
 .../editors-toolbar-button.spec.tsx           | 43 +++++++++----------
 .../editors-toolbar-button-spec.tsx.snap      | 13 ------
 2 files changed, 21 insertions(+), 35 deletions(-)
 delete mode 100644 tests/renderer/components/__snapshots__/editors-toolbar-button-spec.tsx.snap

diff --git a/rtl-spec/components/editors-toolbar-button.spec.tsx b/rtl-spec/components/editors-toolbar-button.spec.tsx
index fa27b12d0c..9fb4bbbcef 100644
--- a/rtl-spec/components/editors-toolbar-button.spec.tsx
+++ b/rtl-spec/components/editors-toolbar-button.spec.tsx
@@ -1,6 +1,5 @@
-import * as React from 'react';
-
-import { shallow } from 'enzyme';
+import userEvent from '@testing-library/user-event';
+import { MosaicContext, MosaicWindowContext } from 'react-mosaic-component';
 
 import { EditorId, MAIN_JS } from '../../src/interfaces';
 import {
@@ -8,8 +7,9 @@ import {
   RemoveButton,
 } from '../../src/renderer/components/editors-toolbar-button';
 import { AppState } from '../../src/renderer/state';
+import { renderClassComponentWithInstanceRef } from '../test-utils/renderClassComponentWithInstanceRef';
 
-let mockContext: any = {};
+let mockContext = {} as MosaicWindowContext & MosaicContext<string>;
 
 jest.mock('react-mosaic-component', () => {
   const { MosaicContext, MosaicRootActions, MosaicWindowContext } =
@@ -52,44 +52,43 @@ describe('Editor toolbar button component', () => {
 
   describe('MaximizeButton', () => {
     function createMaximizeButton(id: EditorId) {
-      const wrapper = shallow(<MaximizeButton id={id} appState={store} />, {
-        context: mockContext,
+      return renderClassComponentWithInstanceRef(MaximizeButton, {
+        id,
+        appState: store,
       });
-      const instance = wrapper.instance();
-      return { instance, wrapper };
     }
 
     it('renders', () => {
-      const { wrapper } = createMaximizeButton(MAIN_JS);
-      expect(wrapper).toMatchSnapshot();
+      const { renderResult } = createMaximizeButton(MAIN_JS);
+      expect(renderResult.getByRole('button')).toBeInTheDocument();
     });
 
-    it('handles a click', () => {
-      const { instance, wrapper } = createMaximizeButton(MAIN_JS);
-      instance.context = mockContext as unknown;
-      wrapper.dive().dive().find('button').simulate('click');
+    it('handles a click', async () => {
+      const { instance, renderResult } = createMaximizeButton(MAIN_JS);
+      instance.context = mockContext;
+      await userEvent.click(renderResult.getByRole('button'));
       expect(mockContext.mosaicActions.expand).toHaveBeenCalledTimes(1);
     });
   });
 
   describe('RemoveButton', () => {
     function createRemoveButton(id: EditorId) {
-      const wrapper = shallow(<RemoveButton id={id} appState={store} />, {
-        context: mockContext,
+      return renderClassComponentWithInstanceRef(RemoveButton, {
+        id,
+        appState: store,
       });
-      return { wrapper };
     }
 
     it('renders', () => {
-      const { wrapper } = createRemoveButton(MAIN_JS);
-      expect(wrapper).toMatchSnapshot();
+      const { renderResult } = createRemoveButton(MAIN_JS);
+      expect(renderResult.getByRole('button')).toBeInTheDocument();
     });
 
-    it('handles a click', () => {
+    it('handles a click', async () => {
       const { editorMosaic } = store;
       const hideSpy = jest.spyOn(editorMosaic, 'hide');
-      const { wrapper } = createRemoveButton(MAIN_JS);
-      wrapper.dive().dive().find('button').simulate('click');
+      const { renderResult } = createRemoveButton(MAIN_JS);
+      await userEvent.click(renderResult.getByRole('button'));
       expect(hideSpy).toHaveBeenCalledTimes(1);
     });
   });
diff --git a/tests/renderer/components/__snapshots__/editors-toolbar-button-spec.tsx.snap b/tests/renderer/components/__snapshots__/editors-toolbar-button-spec.tsx.snap
deleted file mode 100644
index 176ae8d790..0000000000
--- a/tests/renderer/components/__snapshots__/editors-toolbar-button-spec.tsx.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Editor toolbar button component MaximizeButton renders 1`] = `
-<Component>
-  <Component />
-</Component>
-`;
-
-exports[`Editor toolbar button component RemoveButton renders 1`] = `
-<Component>
-  <Component />
-</Component>
-`;