refactor(react): update listbox tests to testing-library (#11628)

Co-authored-by: TJ Egan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jun 21, 2022 · 4c2af80 · 4c2af80
1 parent ca74e88
commit 4c2af80
Show file tree

Hide file tree

Showing 14 changed files with 239 additions and 551 deletions.
diff --git a/packages/react/src/components/ListBox/ListBoxPropTypes.js b/packages/react/src/components/ListBox/ListBoxPropTypes.js
@@ -6,9 +6,6 @@
  */
 
 import PropTypes from 'prop-types';
-import * as FeatureFlags from '@carbon/feature-flags';
 
 export const ListBoxType = PropTypes.oneOf(['default', 'inline']);
-export const ListBoxSize = FeatureFlags.enabled('enable-v11-release')
-  ? PropTypes.oneOf(['sm', 'md', 'lg'])
-  : PropTypes.oneOf(['sm', 'md', 'lg', 'xl']);
+export const ListBoxSize = PropTypes.oneOf(['sm', 'md', 'lg']);
diff --git a/packages/react/src/components/ListBox/ListBoxSelection.js b/packages/react/src/components/ListBox/ListBoxSelection.js
@@ -17,13 +17,13 @@ import { usePrefix } from '../../internal/usePrefix';
  * addition to conditionally rendering a badge if the control has more than one
  * selection.
  */
-const ListBoxSelection = ({
+function ListBoxSelection({
   clearSelection,
   selectionCount,
   translateWithId: t,
   disabled,
   onClearSelection,
-}) => {
+}) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--list-box__selection`, {
     [`${prefix}--tag--filter`]: selectionCount,
@@ -92,7 +92,7 @@ const ListBoxSelection = ({
       <Close />
     </div>
   );
-};
+}
 
 export const translationIds = {
   'clear.all': 'clear.all',

diff --git a/packages/react/src/components/ListBox/__tests__/ListBox-test.js b/packages/react/src/components/ListBox/__tests__/ListBox-test.js
@@ -5,44 +5,66 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import ListBox from '../';
 
-const prefix = 'cds';
-
 describe('ListBox', () => {
-  let mockProps;
+  it('should set the inline class when type="inline"', () => {
+    const { container } = render(<ListBox type="inline" />);
+    expect(container.firstChild).toHaveClass('cds--list-box--inline');
+  });
+
+  it('should set the disabled class when `disabled` is true', () => {
+    const { container } = render(<ListBox disabled />);
+    expect(container.firstChild).toHaveClass('cds--list-box--disabled');
+  });
+
+  it('should set the light class when `light` is true', () => {
+    const { container } = render(<ListBox light />);
+    expect(container.firstChild).toHaveClass('cds--list-box--light');
+  });
+
+  it('should set the expanded class when `isOpen` is true', () => {
+    const { container } = render(<ListBox isOpen />);
+    expect(container.firstChild).toHaveClass('cds--list-box--expanded');
+  });
+
+  it('should set the warning class when `warn` is true and invalid is false', () => {
+    const { container } = render(<ListBox warn />);
+    expect(container.firstChild).toHaveClass('cds--list-box--warning');
+  });
+
+  it('should render `invalidText` when `invalid` is true', () => {
+    render(<ListBox invalid invalidText="test" />);
+    expect(screen.getByText('test')).toBeInTheDocument();
+  });
 
-  beforeEach(() => {
-    mockProps = {
-      type: 'default',
-      id: 'test-listbox',
-      children: <ListBox.Field id="test-listbox" />,
-      className: `${prefix}--list-box__container`,
-      disabled: false,
-    };
+  it('should render `warnText` when `warn` is true', () => {
+    render(<ListBox warn warnText="test" />);
+    expect(screen.getByText('test')).toBeInTheDocument();
   });
 
-  it('should render', () => {
-    const wrapper = mount(<ListBox {...mockProps} />);
-    expect(wrapper).toMatchSnapshot();
+  describe('sizes', () => {
+    it.each(['sm', 'md', 'lg'])('should set the %s class', (size) => {
+      const { container } = render(<ListBox size={size} />);
+      expect(container.firstChild).toHaveClass(`cds--list-box--${size}`);
+    });
   });
 
-  it('should render an inline class if the type=`inline`', () => {
-    const wrapper = mount(<ListBox {...mockProps} type="inline" />);
-    expect(wrapper.find(`.${prefix}--list-box--inline`).length).toBe(1);
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(<ListBox className="test" />);
+    expect(container.firstChild).toHaveClass('test');
   });
 
-  it('should render a disabled class if disabled is true', () => {
-    const wrapper = mount(<ListBox {...mockProps} disabled />);
-    expect(wrapper.find(`.${prefix}--list-box--disabled`).length).toBe(1);
+  it('should spread extra props on the outermost element', () => {
+    const { container } = render(<ListBox data-testid="test" />);
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
   });
 
-  it('should add the provided `className` to the root node', () => {
-    const wrapper = mount(<ListBox {...mockProps} />);
-    expect(
-      wrapper.children().prop('className').includes(mockProps.className)
-    ).toBe(true);
+  it('should support a `ref` on the outermost element', () => {
+    const ref = jest.fn();
+    const { container } = render(<ListBox ref={ref} />);
+    expect(ref).toHaveBeenCalledWith(container.firstChild);
   });
 });
diff --git a/packages/react/src/components/ListBox/__tests__/ListBoxField-test.js b/packages/react/src/components/ListBox/__tests__/ListBoxField-test.js
@@ -5,31 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import ListBox from '../';
 
 describe('ListBoxField', () => {
-  it('should render', () => {
-    const wrapper = mount(
-      <ListBox.Field id="test-listbox">
-        <ListBox.Selection clearSelection={jest.fn()} />
-      </ListBox.Field>
-    );
-    expect(wrapper).toMatchSnapshot();
+  it('should set tabIndex to -1 when disabled', () => {
+    const { container } = render(<ListBox.Field disabled />);
+    expect(container.firstChild).toHaveAttribute('tabindex', '-1');
   });
 
-  it('should be focusable via custom tabindex value', () => {
-    const wrapper = mount(
-      <ListBox.Field tabIndex="0" id="test-listbox">
-        <ListBox.Selection clearSelection={jest.fn()} />
-      </ListBox.Field>
-    );
-    expect(wrapper.children().prop('tabIndex')).toBe('0');
+  it('should set tabIndex to the `tabIndex` prop', () => {
+    const { container } = render(<ListBox.Field tabIndex="0" />);
+    expect(container.firstChild).toHaveAttribute('tabindex', '0');
   });
 
-  it('should not be focusable when ListBox is `disabled`', () => {
-    const wrapper = mount(<ListBox.Field id="test-listbox" disabled />);
-    expect(wrapper.children().prop('tabIndex')).toBe(-1);
+  it('should spread extra props on the outermost element', () => {
+    const { container } = render(<ListBox.Field data-testid="test" />);
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
   });
 });
diff --git a/packages/react/src/components/ListBox/__tests__/ListBoxMenu-test.js b/packages/react/src/components/ListBox/__tests__/ListBoxMenu-test.js
@@ -5,17 +5,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import ListBox from '../';
 
 describe('ListBoxMenu', () => {
-  it('should render', () => {
-    const wrapper = mount(
-      <ListBox.Menu id="test-listbox">
-        <ListBox.MenuItem>Hello</ListBox.MenuItem>
-      </ListBox.Menu>
-    );
-    expect(wrapper).toMatchSnapshot();
+  it('should render an element with role="listbox"', () => {
+    render(<ListBox.Menu id="test" />);
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+  });
+
+  it('should spread extra props on the outermost element', () => {
+    const { container } = render(<ListBox.Menu id="test" data-testid="test" />);
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
+  });
+
+  it('should support a `ref` on the element with role="listbox"', () => {
+    const ref = jest.fn();
+    render(<ListBox.Menu id="test" ref={ref} />);
+    expect(ref).toHaveBeenCalledWith(screen.getByRole('listbox'));
   });
 });
diff --git a/packages/react/src/components/ListBox/__tests__/ListBoxMenuIcon-test.js b/packages/react/src/components/ListBox/__tests__/ListBoxMenuIcon-test.js
@@ -5,28 +5,36 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import ListBox from '../';
 
 describe('ListBoxMenuIcon', () => {
-  it('should render', () => {
-    const openWrapper = mount(<ListBox.MenuIcon isOpen={true} />);
-    const closedWrapper = mount(<ListBox.MenuIcon isOpen={false} />);
-    expect(openWrapper).toMatchSnapshot();
-    expect(closedWrapper).toMatchSnapshot();
-  });
+  it('should support translating the close menu message', () => {
+    const translateWithId = jest.fn((id) => {
+      if (id === 'close.menu') {
+        return 'test';
+      }
+      throw new Error(`Unsupported id: ${id}`);
+    });
+
+    render(<ListBox.MenuIcon isOpen translateWithId={translateWithId} />);
 
-  it('should call `translateWithId` to determine the description', () => {
-    const translateWithId = jest.fn(() => 'message');
-    mount(<ListBox.MenuIcon isOpen={true} translateWithId={translateWithId} />);
-    expect(translateWithId).toHaveBeenCalledWith('close.menu');
+    expect(screen.getByLabelText('test')).toBeInTheDocument();
+  });
 
-    translateWithId.mockClear();
+  it('should support translating the open menu message', () => {
+    const translateWithId = jest.fn((id) => {
+      if (id === 'open.menu') {
+        return 'test';
+      }
+      throw new Error(`Unsupported id: ${id}`);
+    });
 
-    mount(
+    render(
       <ListBox.MenuIcon isOpen={false} translateWithId={translateWithId} />
     );
-    expect(translateWithId).toHaveBeenCalledWith('open.menu');
+
+    expect(screen.getByLabelText('test')).toBeInTheDocument();
   });
 });
diff --git a/packages/react/src/components/ListBox/__tests__/ListBoxMenuItem-test.js b/packages/react/src/components/ListBox/__tests__/ListBoxMenuItem-test.js
@@ -5,31 +5,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import ListBox from '../';
 
 describe('ListBoxMenuItem', () => {
-  let mockProps;
-
-  beforeEach(() => {
-    mockProps = {
-      isActive: false,
-      isHighlighted: false,
-      children: <span>ListBox.MenuItem</span>,
-    };
+  it('should set the active class when `isActive` is true', () => {
+    const { container } = render(<ListBox.MenuItem isActive />);
+    expect(container.firstChild).toHaveClass(
+      'cds--list-box__menu-item--active'
+    );
   });
 
-  it('should render', () => {
-    const wrapper = mount(<ListBox.MenuItem {...mockProps} />);
-    const activeWrapper = mount(
-      <ListBox.MenuItem {...mockProps} isActive={true} />
-    );
-    const highlightedWrapper = mount(
-      <ListBox.MenuItem {...mockProps} isHighlighted={true} />
+  it('should set the highlighted class when `isHighlighted` is true', () => {
+    const { container } = render(<ListBox.MenuItem isHighlighted />);
+    expect(container.firstChild).toHaveClass(
+      'cds--list-box__menu-item--highlighted'
     );
-    expect(wrapper).toMatchSnapshot();
-    expect(activeWrapper).toMatchSnapshot();
-    expect(highlightedWrapper).toMatchSnapshot();
+  });
+
+  it('should spread extra props on the outermost element', () => {
+    const { container } = render(<ListBox.MenuItem data-testid="test" />);
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
   });
 });