test(ui): Convert onboarding tests to RTL (#36929)

static/app/views/onboarding/onboarding.tsx

@@ -124,7 +124,11 @@ class Onboarding extends Component<Props, State> {
   renderProgressBar() {
     const activeStepIndex = this.activeStepIndex;
     return (
-      <ProgressBar>
+      <ProgressBar
+        role="progressbar"
+        aria-valuenow={activeStepIndex + 1}
+        aria-valuemax={this.props.steps.length}
+      >
         {this.props.steps.map((step, index) => (
           <ProgressStep active={activeStepIndex === index} key={step.id} />
         ))}

tests/js/spec/views/onboarding/components/firstEventIndicator.spec.jsx

@@ -1,4 +1,4 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
+import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import {Indicator} from 'sentry/views/onboarding/components/firstEventIndicator';
 
@@ -6,32 +6,29 @@ describe('FirstEventIndicator', function () {
   it('renders waiting status', function () {
     const org = TestStubs.Organization();
 
-    const wrapper = mountWithTheme(<Indicator organization={org} firstIssue={null} />);
-
-    expect(wrapper.find('WaitingIndicator').exists()).toBe(true);
+    render(<Indicator organization={org} firstIssue={null} />);
+    expect(
+      screen.getByText('Waiting to receive first event to continue')
+    ).toBeInTheDocument();
   });
 
   describe('received first event', function () {
     it('renders', function () {
       const org = TestStubs.Organization();
 
-      const wrapper = mountWithTheme(
-        <Indicator organization={org} firstIssue={{id: 1}} />
-      );
+      render(<Indicator organization={org} firstIssue={{id: 1}} />);
 
-      expect(wrapper.find('ReceivedIndicator').exists()).toBe(true);
+      expect(screen.getByText('Event was received!')).toBeInTheDocument();
     });
 
     it('renders without a known issue ID', function () {
       const org = TestStubs.Organization();
       const project = TestStubs.ProjectDetails({});
 
-      const wrapper = mountWithTheme(
-        <Indicator organization={org} project={project} firstIssue />
-      );
+      render(<Indicator organization={org} project={project} firstIssue />);
 
       // No button when there is no known issue ID
-      expect(wrapper.find('ReceivedIndicator').exists()).toBe(true);
+      expect(screen.getByText('Event was received!')).toBeInTheDocument();
     });
   });
 });

tests/js/spec/views/onboarding/onboarding.spec.jsx

@@ -1,19 +1,18 @@
 import {browserHistory} from 'react-router';
 
-import {mountWithTheme} from 'sentry-test/enzyme';
 import {initializeOrg} from 'sentry-test/initializeOrg';
-import {act} from 'sentry-test/reactTestingLibrary';
+import {act, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import ProjectsStore from 'sentry/stores/projectsStore';
 import Onboarding from 'sentry/views/onboarding/onboarding';
 
 const MockStep = ({name, data, active, project, onComplete, onUpadte}) => (
   <div>
-    {active && <div id="is_active" />}
-    <div id="step_name">{name}</div>
-    <div id="project_slug">{project && project.slug}</div>
-    <a id="complete" href="#" onClick={() => onComplete(data)} />
-    <a id="update" href="#" onClick={() => onUpadte(data)} />
+    {active && <div data-test-id="is_active" />}
+    <div data-test-id="step_name">{name}</div>
+    <div data-test-id="project_slug">{project && project.slug}</div>
+    <a data-test-id="complete" href="#" onClick={() => onComplete(data)} />
+    <a data-test-id="update" href="#" onClick={() => onUpadte(data)} />
   </div>
 );
 
@@ -46,7 +45,7 @@ describe('Onboarding', function () {
       orgId: 'org-bar',
     };
 
-    mountWithTheme(<Onboarding steps={MOCKED_STEPS} params={params} />);
+    render(<Onboarding steps={MOCKED_STEPS} params={params} />, {});
 
     expect(browserHistory.replace).toHaveBeenCalledWith('/onboarding/org-bar/step1/');
   });
@@ -57,13 +56,13 @@ describe('Onboarding', function () {
       orgId: 'org-bar',
     };
 
-    const wrapper = mountWithTheme(<Onboarding steps={MOCKED_STEPS} params={params} />);
+    render(<Onboarding steps={MOCKED_STEPS} params={params} />);
 
     // Validate that the first step is shown
-    expect(wrapper.find('#step_name').text()).toEqual('step_1');
+    expect(screen.getByTestId('step_name')).toHaveTextContent('step_1');
 
     // Validate that the progress bar is displayed and active
-    expect(wrapper.find('ProgressStep').first().props().active).toBe(true);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '1');
   });
 
   it('moves to next step on complete', function () {
@@ -74,9 +73,9 @@ describe('Onboarding', function () {
       orgId: 'org-bar',
     };
 
-    const wrapper = mountWithTheme(<Onboarding steps={MOCKED_STEPS} params={params} />);
+    render(<Onboarding steps={MOCKED_STEPS} params={params} />);
 
-    wrapper.find('#complete').simulate('click');
+    userEvent.click(screen.getByTestId('complete'));
     expect(browserHistory.push).toHaveBeenCalledWith('/onboarding/org-bar/step2/');
   });
 
@@ -86,11 +85,11 @@ describe('Onboarding', function () {
       orgId: 'org-bar',
     };
 
-    const wrapper = mountWithTheme(<Onboarding steps={MOCKED_STEPS} params={params} />);
+    render(<Onboarding steps={MOCKED_STEPS} params={params} />);
 
     // Validate that second step is visible
-    expect(wrapper.find('#step_name').text()).toEqual('step_2');
-    expect(wrapper.find('MockStep').find('#active').exists()).toBe(false);
+    expect(screen.getByTestId('step_name')).toHaveTextContent('step_2');
+    expect(screen.getByTestId('is_active')).toBeInTheDocument();
   });
 
   it('goes back when back button clicked', function () {
@@ -101,9 +100,9 @@ describe('Onboarding', function () {
       orgId: 'org-bar',
     };
 
-    const wrapper = mountWithTheme(<Onboarding steps={MOCKED_STEPS} params={params} />);
+    render(<Onboarding steps={MOCKED_STEPS} params={params} />);
 
-    wrapper.find('Back Button').simulate('click');
+    userEvent.click(screen.getByRole('button', {name: 'Go back'}));
     expect(browserHistory.replace).toHaveBeenCalledWith('/onboarding/org-bar/step1/');
   });
 
@@ -124,11 +123,8 @@ describe('Onboarding', function () {
       orgId: organization.slug,
     };
 
-    const wrapper = mountWithTheme(
-      <Onboarding steps={MOCKED_STEPS} params={params} />,
-      routerContext
-    );
+    render(<Onboarding steps={MOCKED_STEPS} params={params} />, {context: routerContext});
 
-    expect(wrapper.find('#project_slug').text()).toBe('first');
+    expect(screen.getByTestId('project_slug')).toHaveTextContent('first');
   });
 });

tests/js/spec/views/onboarding/platform.spec.jsx

@@ -1,5 +1,4 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
-import {act} from 'sentry-test/reactTestingLibrary';
+import {act, render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import {createProject} from 'sentry/actionCreators/projects';
 import TeamStore from 'sentry/stores/teamStore';
@@ -8,12 +7,16 @@ import OnboardingPlatform from 'sentry/views/onboarding/platform';
 jest.mock('sentry/actionCreators/projects');
 
 describe('OnboardingWelcome', function () {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
   it('calls onUpdate when setting the platform', function () {
     const onUpdate = jest.fn();
 
-    const wrapper = mountWithTheme(<OnboardingPlatform active onUpdate={onUpdate} />);
+    render(<OnboardingPlatform active onUpdate={onUpdate} />);
 
-    wrapper.find('[data-test-id="platform-dotnet"]').first().simulate('click');
+    userEvent.click(screen.getByTestId('platform-dotnet'));
 
     expect(onUpdate).toHaveBeenCalled();
   });
@@ -21,17 +24,18 @@ describe('OnboardingWelcome', function () {
   it('creates a project when no project exists', async function () {
     const onComplete = jest.fn();
 
-    const wrapper = mountWithTheme(<OnboardingPlatform active onComplete={onComplete} />);
-
-    const getButton = () => wrapper.find('Button[priority="primary"]');
+    const wrapper = render(<OnboardingPlatform active onComplete={onComplete} />);
 
     // Select a platform to create
-    wrapper.setProps({platform: 'dotnet'});
+    wrapper.rerender(
+      <OnboardingPlatform active onComplete={onComplete} platform="dotnet" />
+    );
     act(() => {
       TeamStore.loadInitialData([{id: '1', slug: 'team-slug'}]);
     });
-    expect(getButton().text()).toEqual('Create Project');
-    expect(getButton().props().disabled).toBe(false);
+    const button = screen.getByRole('button', {name: 'Create Project'});
+    expect(button).toBeInTheDocument();
+    expect(button).toBeEnabled();
 
     let resolveProjectCreate;
     createProject.mockReturnValue(
@@ -39,24 +43,24 @@ describe('OnboardingWelcome', function () {
     );
 
     // Create the project
-    getButton().simulate('click');
+    userEvent.click(button);
 
-    expect(getButton().text()).toEqual('Creating Project...');
+    expect(button).toHaveTextContent('Creating Project...');
 
     // Project completed creation (tick for async completion)
     resolveProjectCreate({id: 1, slug: 'test-project'});
-    await tick();
 
-    wrapper.setProps({active: false});
-    expect(getButton().text()).toEqual('Project Created');
-    expect(onComplete).toHaveBeenCalled();
+    wrapper.rerender(
+      <OnboardingPlatform active={false} onComplete={onComplete} platform="dotnet" />
+    );
+    expect(button).toHaveTextContent('Project Created');
+    await waitFor(() => expect(onComplete).toHaveBeenCalled());
   });
 
   it('does not create a project if one already exists', async function () {
-    createProject.mockReset();
     const onComplete = jest.fn();
 
-    const wrapper = mountWithTheme(
+    render(
       <OnboardingPlatform
         active
         project={{id: '1', slug: 'test'}}
@@ -65,20 +69,18 @@ describe('OnboardingWelcome', function () {
       />
     );
 
-    const getButton = () => wrapper.find('Button[priority="primary"]');
-
     act(() => {
       TeamStore.loadInitialData([{id: '1', slug: 'team-slug'}]);
     });
-    expect(getButton().text()).toEqual('Set Up Your Project');
-    expect(getButton().props().disabled).toBe(false);
+    const button = screen.getByRole('button', {name: 'Set Up Your Project'});
+    expect(button).toBeInTheDocument();
+    expect(button).toBeEnabled();
 
     // Create the project
-    getButton().simulate('click');
-    await tick();
+    userEvent.click(button);
 
-    expect(getButton().props().disabled).toBe(true);
+    expect(button).toBeDisabled();
     expect(createProject).not.toHaveBeenCalled();
-    expect(onComplete).toHaveBeenCalled();
+    await waitFor(() => expect(onComplete).toHaveBeenCalled());
   });
 });

tests/js/spec/views/onboarding/welcome.spec.jsx

@@ -1,5 +1,5 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
 import {initializeOrg} from 'sentry-test/initializeOrg';
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import ConfigStore from 'sentry/stores/configStore';
 import OnboardingWelcome from 'sentry/views/onboarding/welcome';
@@ -10,16 +10,16 @@ describe('OnboardingWelcome', function () {
     const name = 'Rick Sanchez';
     ConfigStore.loadInitialData({user: {name, options: {}}});
 
-    mountWithTheme(<OnboardingWelcome organization={organization} />);
+    render(<OnboardingWelcome organization={organization} />);
   });
 
   it('calls onComplete when progressing', function () {
     const onComplete = jest.fn();
-    const wrapper = mountWithTheme(
+    render(
       <OnboardingWelcome active onComplete={onComplete} organization={organization} />
     );
 
-    wrapper.find('Button[priority="primary"]').first().simulate('click');
+    userEvent.click(screen.getByRole('button', {name: 'Start'}));
 
     expect(onComplete).toHaveBeenCalled();
   });