From 6028a691b7be1df651b5fcedf4c865ef313648ff Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Mon, 1 Mar 2021 16:57:33 -0300
Subject: [PATCH] Improves ButtonGroup tests (#13273)

---
 .../ButtonGroup/ButtonGroup.test.tsx          | 57 ++++++++++---------
 .../src/components/ButtonGroup/index.tsx      |  3 +-
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/superset-frontend/src/components/ButtonGroup/ButtonGroup.test.tsx b/superset-frontend/src/components/ButtonGroup/ButtonGroup.test.tsx
index e305eba1221..20514b81f45 100644
--- a/superset-frontend/src/components/ButtonGroup/ButtonGroup.test.tsx
+++ b/superset-frontend/src/components/ButtonGroup/ButtonGroup.test.tsx
@@ -18,33 +18,38 @@
  */
 
 import React from 'react';
-import { ReactWrapper } from 'enzyme';
-import { styledMount as mount } from 'spec/helpers/theming';
+import { render, screen } from 'spec/helpers/testing-library';
 import Button from 'src/components/Button';
 import ButtonGroup from '.';
 
-describe('ButtonGroup', () => {
-  let wrapper: ReactWrapper;
-
-  it('renders 1 button', () => {
-    expect(
-      React.isValidElement(
-        <ButtonGroup>
-          <Button>Button</Button>
-        </ButtonGroup>,
-      ),
-    ).toBe(true);
-  });
-
-  it('renders 3 buttons', () => {
-    wrapper = mount(
-      <ButtonGroup>
-        <Button>Button</Button>
-        <Button>Button</Button>
-        <Button>Button</Button>
-      </ButtonGroup>,
-    );
-
-    expect(wrapper.find(Button).length).toEqual(3);
-  });
+test('renders 1 button', () => {
+  render(
+    <ButtonGroup>
+      <Button>Button</Button>
+    </ButtonGroup>,
+  );
+  expect(screen.getByRole('group')).toBeInTheDocument();
+});
+
+test('renders 3 buttons', () => {
+  render(
+    <ButtonGroup>
+      <Button>Button</Button>
+      <Button>Button</Button>
+      <Button>Button</Button>
+    </ButtonGroup>,
+  );
+
+  expect(screen.getByRole('group').children.length).toEqual(3);
+});
+
+test('renders with custom class', () => {
+  const customClass = 'custom-class';
+  render(
+    <ButtonGroup className={customClass}>
+      <Button>Button</Button>
+    </ButtonGroup>,
+  );
+
+  expect(screen.getByRole('group')).toHaveClass(customClass);
 });
diff --git a/superset-frontend/src/components/ButtonGroup/index.tsx b/superset-frontend/src/components/ButtonGroup/index.tsx
index a812207d02d..463a0420665 100644
--- a/superset-frontend/src/components/ButtonGroup/index.tsx
+++ b/superset-frontend/src/components/ButtonGroup/index.tsx
@@ -20,13 +20,14 @@ import React from 'react';
 
 export interface ButtonGroupProps {
   className?: string;
-  children?: React.ReactNode;
+  children: React.ReactNode;
 }
 
 export default function ButtonGroup(props: ButtonGroupProps) {
   const { className, children } = props;
   return (
     <div
+      role="group"
       className={className}
       css={{
         '& :nth-child(1):not(:nth-last-child(1))': {