test: use RTL in the welcome tour tests

rtl-spec/components/tour-welcome.spec.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import {
+  WelcomeTour,
+  getWelcomeTour,
+} from '../../src/renderer/components/tour-welcome';
+import { AppState } from '../../src/renderer/state';
+
+describe('Header component', () => {
+  let appState: AppState;
+
+  function renderWelcomeTour(appState: AppState) {
+    return render(<WelcomeTour appState={appState} />);
+  }
+
+  beforeEach(() => {
+    ({ state: appState } = window.app);
+    appState.isTourShowing = true;
+  });
+
+  it('renders', () => {
+    const { getByTestId } = renderWelcomeTour(appState);
+    expect(getByTestId('welcome-tour-dialog')).toBeInTheDocument();
+  });
+
+  it('does not render if the tour is not showing', () => {
+    appState.isTourShowing = false;
+
+    const { queryByTestId } = renderWelcomeTour(appState);
+    expect(queryByTestId('welcome-tour-dialog')).not.toBeInTheDocument();
+  });
+
+  it('renders the tour once started', async () => {
+    const { getByText, getByTestId } = renderWelcomeTour(appState);
+
+    await userEvent.click(getByText(/show me around/i));
+
+    expect(getByTestId('tour')).toBeInTheDocument();
+  });
+
+  it('stops the tour on stopTour()', async () => {
+    (appState.disableTour as jest.Mock).mockImplementation(
+      () => (appState.isTourShowing = false),
+    );
+
+    const { getByText, queryByTestId } = renderWelcomeTour(appState);
+
+    await userEvent.click(getByText(/show me around/i));
+    await userEvent.click(getByText(/stop tour/i));
+
+    expect(appState.isTourShowing).toBe(false);
+
+    expect(queryByTestId('tour')).not.toBeInTheDocument();
+
+    expect(appState.disableTour).toHaveBeenCalled();
+  });
+
+  describe('getWelcomeTour()', () => {
+    it('offers custom buttons for the Electron step', async () => {
+      const tourSteps = [...getWelcomeTour()];
+      const electronStep = tourSteps.find(
+        ({ name }) => name === 'first-time-electron',
+      );
+      const mockParam = { stop: jest.fn(), advance: jest.fn() };
+      const buttons = electronStep!.getButtons!(mockParam);
+
+      const renderResultFirstButton = render(buttons[0]);
+      await userEvent.click(renderResultFirstButton.getByText(/i'm good!/i));
+
+      expect(mockParam.stop).toHaveBeenCalled();
+
+      const renderResultSecondButton = render(buttons[1]);
+      await userEvent.click(
+        renderResultSecondButton.getByText(/electron basics/i),
+      );
+
+      expect(mockParam.advance).toHaveBeenCalled();
+    });
+  });
+});

rtl-spec/components/tour.spec.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react';
+
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { mocked } from 'jest-mock';
+
+import { Tour, TourScriptStep } from '../../src/renderer/components/tour';
+import { overrideRendererPlatform } from '../../tests/utils';
+
+describe('VersionChooser component', () => {
+  const oldQuerySelector = document.querySelector;
+
+  /**
+   * This is a function to ensure different object references are returned every
+   * time. The test for the `getButtons` method mutates the mock tour and that
+   * would interfere with other tests if the same object were reused.
+   */
+  const getMockTour = () =>
+    new Set<TourScriptStep>([
+      {
+        name: 'mock-step-1',
+        selector: 'div.mock-1',
+        title: 'Step 1',
+        content: <span key="1">mock-step-1</span>,
+      },
+      {
+        name: 'mock-step-2',
+        selector: 'div.mock-2',
+        title: 'Step 2',
+        content: <span key="2">mock-step-2</span>,
+      },
+    ]);
+
+  const mockStop = jest.fn();
+
+  function renderTour(mockTour = getMockTour()) {
+    return render(<Tour tour={mockTour} onStop={mockStop} />);
+  }
+
+  beforeEach(() => {
+    overrideRendererPlatform('darwin');
+
+    document.querySelector = jest.fn(() => ({
+      getBoundingClientRect: jest.fn(() => ({
+        top: 20,
+        left: 25,
+        height: 120,
+        width: 130,
+      })),
+    }));
+  });
+
+  afterEach(() => {
+    document.querySelector = oldQuerySelector;
+  });
+
+  it('renders', () => {
+    const { getByTestId } = renderTour();
+
+    expect(getByTestId('tour')).toBeInTheDocument();
+  });
+
+  it('renders supplied buttons', () => {
+    const mockTour = getMockTour();
+
+    mockTour.forEach((item) => {
+      (item as any).getButtons = () => [<button key="hello">Hello</button>];
+    });
+
+    const { getByText } = renderTour(mockTour);
+
+    expect(getByText(/hello/i)).toBeInTheDocument();
+  });
+
+  it(`renders the "Finish Tour" button at the end and closes the tour when it's clicked`, async () => {
+    const singleItemTour = new Set([
+      {
+        name: 'mock-step-1',
+        selector: 'div.mock-1',
+        title: 'Step 1',
+        content: <span key="1">mock-step-1</span>,
+      },
+    ]);
+
+    const { getByText } = renderTour(singleItemTour);
+    const finishTourButton = getByText(/finish tour/i);
+
+    expect(finishTourButton).toBeInTheDocument();
+
+    await userEvent.click(finishTourButton);
+
+    expect(mockStop).toHaveBeenCalled();
+  });
+
+  it('handles a missing target', () => {
+    mocked(document.querySelector).mockReturnValueOnce(null);
+
+    const { container } = renderTour();
+
+    expect(container.querySelectorAll('svg')).toHaveLength(1);
+  });
+
+  it('stops on stop()', async () => {
+    const { getByText } = renderTour();
+
+    await userEvent.click(getByText(/stop tour/i));
+
+    expect(mockStop).toHaveBeenCalled();
+  });
+
+  it('advances on advance()', async () => {
+    const { getByText } = renderTour();
+
+    await userEvent.click(getByText(/continue/i));
+
+    const mockTour = [...getMockTour()];
+
+    expect(getByText(mockTour[1].title)).toBeInTheDocument();
+  });
+});

src/renderer/components/tour-welcome.tsx

@@ -238,22 +238,27 @@ export const WelcomeTour = observer(
       if (!isTourStarted) {
         return (
           <Dialog key="welcome-tour-dialog" isOpen={true}>
-            <div className={Classes.DIALOG_HEADER}>
-              <h4 className={Classes.HEADING}>🙋‍ Hey There!</h4>
-            </div>
-            <div className={Classes.DIALOG_BODY}>
-              <p>
-                Welcome to Electron Fiddle! If you&apos;re new to the app,
-                we&apos;d like to give you a brief tour of its features.
-              </p>
-              <p>
-                We won&apos;t show this dialog again, but you can always find
-                the tour in the Help menu.
-              </p>
-            </div>
-            <div className={Classes.DIALOG_FOOTER}>
-              <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-                {this.buttons}
+            <div
+              data-testid="welcome-tour-dialog"
+              style={{ display: 'contents' }}
+            >
+              <div className={Classes.DIALOG_HEADER}>
+                <h4 className={Classes.HEADING}>🙋‍ Hey There!</h4>
+              </div>
+              <div className={Classes.DIALOG_BODY}>
+                <p>
+                  Welcome to Electron Fiddle! If you&apos;re new to the app,
+                  we&apos;d like to give you a brief tour of its features.
+                </p>
+                <p>
+                  We won&apos;t show this dialog again, but you can always find
+                  the tour in the Help menu.
+                </p>
+              </div>
+              <div className={Classes.DIALOG_FOOTER}>
+                <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+                  {this.buttons}
+                </div>
               </div>
             </div>
           </Dialog>

src/renderer/components/tour.tsx

@@ -93,7 +93,11 @@ export class Tour extends React.Component<TourProps, TourState> {
 
     if (!step) return null;
 
-    return <div className="tour">{this.getStep(step)}</div>;
+    return (
+      <div className="tour" data-testid="tour">
+        {this.getStep(step)}
+      </div>
+    );
   }
 
   /**