test(ui): Convert button tests to RTL (#28469)

tests/js/spec/components/button.spec.jsx

@@ -1,52 +0,0 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
-
-import Button from 'app/components/button';
-
-describe('Button', function () {
-  const routerContext = TestStubs.routerContext();
-
-  it('renders', function () {
-    const component = mountWithTheme(<Button priority="primary">Button</Button>);
-    expect(component).toSnapshot();
-  });
-
-  it('renders react-router link', function () {
-    const component = mountWithTheme(
-      <Button to="/some/route">Router Link</Button>,
-      routerContext
-    );
-    expect(component).toSnapshot();
-  });
-
-  it('renders normal link', function () {
-    const component = mountWithTheme(
-      <Button href="/some/relative/url">Normal Link</Button>,
-      routerContext
-    );
-    expect(component).toSnapshot();
-  });
-
-  it('renders disabled normal link', function () {
-    const component = mountWithTheme(
-      <Button href="/some/relative/url">Normal Link</Button>,
-      routerContext
-    );
-    expect(component).toSnapshot();
-  });
-
-  it('calls `onClick` callback', function () {
-    const spy = jest.fn();
-    const component = mountWithTheme(<Button onClick={spy} />, routerContext);
-    component.simulate('click');
-
-    expect(spy).toHaveBeenCalled();
-  });
-
-  it('does not call `onClick` on disabled buttons', function () {
-    const spy = jest.fn();
-    const component = mountWithTheme(<Button onClick={spy} disabled />, routerContext);
-    component.simulate('click');
-
-    expect(spy).not.toHaveBeenCalled();
-  });
-});

tests/js/spec/components/button.spec.tsx

@@ -0,0 +1,59 @@
+import {fireEvent, mountWithTheme} from 'sentry-test/reactTestingLibrary';
+
+import Button from 'app/components/button';
+
+describe('Button', function () {
+  // @ts-expect-error
+  const routerContext = TestStubs.routerContext();
+
+  it('renders', function () {
+    const {container} = mountWithTheme(<Button priority="primary">Button</Button>);
+    expect(container).toSnapshot();
+  });
+
+  it('renders react-router link', function () {
+    const {container} = mountWithTheme(<Button to="/some/route">Router Link</Button>, {
+      context: routerContext,
+    });
+    expect(container).toSnapshot();
+  });
+
+  it('renders normal link', function () {
+    const {container} = mountWithTheme(
+      <Button href="/some/relative/url">Normal Link</Button>,
+      {context: routerContext}
+    );
+    expect(container).toSnapshot();
+  });
+
+  it('renders disabled normal link', function () {
+    const {container} = mountWithTheme(
+      <Button href="/some/relative/url">Normal Link</Button>,
+      {context: routerContext}
+    );
+    expect(container).toSnapshot();
+  });
+
+  it('calls `onClick` callback', function () {
+    const spy = jest.fn();
+    const {getByText} = mountWithTheme(<Button onClick={spy}>Click me</Button>, {
+      context: routerContext,
+    });
+    fireEvent.click(getByText('Click me'));
+
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('does not call `onClick` on disabled buttons', function () {
+    const spy = jest.fn();
+    const {getByText} = mountWithTheme(
+      <Button onClick={spy} disabled>
+        Click me
+      </Button>,
+      {context: routerContext}
+    );
+    fireEvent.click(getByText('Click me'));
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+});

tests/js/spec/components/buttonBar.spec.jsx → tests/js/spec/components/buttonBar.spec.tsx

@@ -1,4 +1,4 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
+import {mountWithTheme} from 'sentry-test/reactTestingLibrary';
 
 import Button from 'app/components/button';
 import ButtonBar from 'app/components/buttonBar';
@@ -15,12 +15,8 @@ describe('ButtonBar', function () {
     );
 
   it('has "Second Button" as the active button in the bar', function () {
-    const wrapper = createWrapper();
-    expect(wrapper.find('Button').at(1).prop('priority')).toBe('primary');
-  });
-
-  it('does not pass `barId` down to the button', function () {
-    const wrapper = createWrapper();
-    expect(wrapper.find('Button').at(1).prop('barId')).toBeUndefined();
+    const {getByLabelText} = createWrapper();
+    expect(getByLabelText('First Button')).not.toHaveClass('active');
+    expect(getByLabelText('Second Button')).toHaveClass('active');
   });
 });