test(react): update Form components' tests to RTL (#11691)

* test(react): add tests for form item and form label * test(react): update tests of form and formgroup to react testing library * chore(react): run format * Update packages/react/src/components/FormLabel/FormLabel-test.js Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jul 5, 2022 · c095635 · c095635
1 parent 8e18724
commit c095635
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 126 deletions.
diff --git a/packages/react/src/components/Form/Form-test.js b/packages/react/src/components/Form/Form-test.js
@@ -7,59 +7,16 @@
 
 import React from 'react';
 import Form from '../Form';
-import { shallow, mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
-const prefix = 'cds';
-
-describe('Form', () => {
-  describe('Renders as expected', () => {
-    const wrapper = shallow(<Form className="extra-class" />);
-
-    it('renders children as expected', () => {
-      expect(wrapper.find('.child').length).toBe(0);
-    });
-    it('renders wrapper as expected', () => {
-      expect(wrapper.length).toBe(1);
-    });
-    it('has the expected classes', () => {
-      expect(wrapper.hasClass(`${prefix}--form`)).toEqual(true);
-    });
-
-    it('renders extra classes passed in via className', () => {
-      expect(wrapper.hasClass('extra-class')).toEqual(true);
-    });
-
-    it('should render wrapper as expected', () => {
-      const form = shallow(
-        <Form>
-          <div className="test-child1" />
-          <div className="test-child2" />
-        </Form>
-      );
-      expect(form.length).toEqual(1);
-    });
-    it('should render children as expected', () => {
-      const form1 = shallow(
-        <Form>
-          <div className="test-child" />
-          <div className="test-child" />
-        </Form>
-      );
-      expect(form1.find('.test-child').length).toBe(2);
-    });
+describe('Form - RTL', () => {
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(<Form className="test" />);
+    expect(container.firstChild).toHaveClass('test');
+  });
 
-    it('should handle submit events', () => {
-      const onSubmit = jest.fn();
-      const form1 = mount(
-        <Form>
-          <button className="button" type="submit" onSubmit={onSubmit}>
-            Submit
-          </button>
-        </Form>
-      );
-      const btn = form1.find('button');
-      btn.simulate('submit');
-      expect(onSubmit).toHaveBeenCalled();
-    });
+  it('should spread extra props on the outermost element', () => {
+    const { container } = render(<Form data-testid="test" />);
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
   });
 });
diff --git a/packages/react/src/components/Form/Form.js b/packages/react/src/components/Form/Form.js
@@ -15,8 +15,7 @@ const Form = ({ className, children, ...other }) => {
   const classNames = classnames(`${prefix}--form`, className);
   return (
     <form className={classNames} {...other}>
-      {' '}
-      {children}{' '}
+      {children}
     </form>
   );
 };

diff --git a/packages/react/src/components/FormGroup/FormGroup-test.js b/packages/react/src/components/FormGroup/FormGroup-test.js
@@ -7,52 +7,74 @@
 
 import React from 'react';
 import FormGroup from '../FormGroup';
-import { shallow } from 'enzyme';
-
-const prefix = 'cds';
+import { render, screen } from '@testing-library/react';
 
 describe('FormGroup', () => {
-  describe('Renders as expected', () => {
-    const wrapper = shallow(
-      <FormGroup className="extra-class" legendText="legendtest" />
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(
+      <FormGroup className="test" legendText="legendtest" />
+    );
+    expect(container.firstChild).toHaveClass('test');
+  });
+
+  it('should be set data-invalid when invalid prop is true', () => {
+    const { container } = render(
+      <FormGroup invalid={true} legendText="legendtest">
+        FormGroup Test
+      </FormGroup>
+    );
+
+    expect(container.firstChild).toHaveAttribute('data-invalid', '');
+  });
+
+  it('should render legendText', () => {
+    render(
+      <FormGroup legendId="legend-testid" legendText="legendtest">
+        FormGroup Test
+      </FormGroup>
+    );
+
+    expect(screen.queryByText('legendtest')).toBeDefined();
+  });
+
+  it('should set the id for legend based on legendId', () => {
+    render(
+      <FormGroup legendId="legend-testid" legendText="legendtest">
+        FormGroup Test
+      </FormGroup>
+    );
+
+    expect(screen.getByText('legendtest')).toHaveAttribute(
+      'id',
+      'legend-testid'
+    );
+  });
+
+  it('should display messageText if message is true', () => {
+    render(
+      <FormGroup
+        legendId="legend-testid"
+        legendText="legendtest"
+        message={true}
+        messageText="Message text">
+        FormGroup Test
+      </FormGroup>
+    );
+
+    expect(screen.queryByText('Message text')).toBeDefined();
+  });
+
+  it('should not display the messageText if message is false', () => {
+    render(
+      <FormGroup
+        legendId="legend-testid"
+        legendText="legendtest"
+        message={false}
+        messageText="Message text">
+        FormGroup Test
+      </FormGroup>
     );
 
-    it('renders children as expected', () => {
-      expect(wrapper.find('.child').length).toBe(0);
-    });
-    it('renders wrapper as expected', () => {
-      expect(wrapper.length).toBe(1);
-    });
-    it('has the expected classes', () => {
-      expect(wrapper.hasClass(`${prefix}--fieldset`)).toEqual(true);
-    });
-    it('renders extra classes passed in via className', () => {
-      expect(wrapper.hasClass('extra-class')).toEqual(true);
-    });
-    it('should not render the data-invalid property by default', () => {
-      expect(wrapper.props()['data-invalid']).toBe(undefined);
-    });
-    it('should render the data-invalid attribute when invalid is set', () => {
-      const formgroup = shallow(<FormGroup legendText="legendtest" invalid />);
-      expect(formgroup.props()['data-invalid']).toBe('');
-    });
-    it('should render wrapper as expected', () => {
-      const formGroup = shallow(
-        <FormGroup legendText="legendtest">
-          <div className="test-child1" />
-          <div className="test-child2" />
-        </FormGroup>
-      );
-      expect(formGroup.length).toEqual(1);
-    });
-    it('should render children as expected', () => {
-      const formGroup1 = shallow(
-        <FormGroup legendText="legendtest">
-          <div className="test-child" />
-          <div className="test-child" />
-        </FormGroup>
-      );
-      expect(formGroup1.find('.test-child').length).toBe(2);
-    });
+    expect(screen.queryByText('Message text')).toBeNull();
   });
 });
diff --git a/packages/react/src/components/FormGroup/FormGroup.js b/packages/react/src/components/FormGroup/FormGroup.js
@@ -18,7 +18,7 @@ const FormGroup = ({
   className,
   message,
   messageText,
-  ...other
+  ...rest
 }) => {
   const prefix = usePrefix();
 
@@ -28,11 +28,11 @@ const FormGroup = ({
     <fieldset
       {...(invalid && { 'data-invalid': '' })}
       className={classNamesFieldset}
-      {...other}
-      aria-labelledby={other['aria-labelledby'] || legendId}>
+      {...rest}
+      aria-labelledby={rest['aria-labelledby'] || legendId}>
       <legend
         className={`${prefix}--label`}
-        id={legendId || other['aria-labelledby']}>
+        id={legendId || rest['aria-labelledby']}>
         {legendText}
       </legend>
       {children}

diff --git a/packages/react/src/components/FormItem/FormItem-test.js b/packages/react/src/components/FormItem/FormItem-test.js
@@ -6,12 +6,19 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import FormItem from '../FormItem';
 
 describe('FormItem', () => {
-  it('should render', () => {
-    const wrapper = shallow(<FormItem />);
-    expect(wrapper).toMatchSnapshot();
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(<FormItem className="test" />);
+    expect(container.firstChild).toHaveClass('test');
+  });
+
+  it('should spread extra props on the outermost element', () => {
+    const { container } = render(
+      <FormItem aria-label="test" data-testid="test" />
+    );
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
   });
 });
diff --git a/packages/react/src/components/FormItem/FormItem.js b/packages/react/src/components/FormItem/FormItem.js
@@ -10,16 +10,16 @@ import React from 'react';
 import classnames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 
-const FormItem = ({ className, children, ...other }) => {
+function FormItem({ className, children, ...rest }) {
   const prefix = usePrefix();
   const classNames = classnames(`${prefix}--form-item`, className);
 
   return (
-    <div className={classNames} {...other}>
+    <div className={classNames} {...rest}>
       {children}
     </div>
   );
-};
+}
 
 FormItem.propTypes = {
   /**

diff --git a/packages/react/src/components/FormItem/__snapshots__/FormItem-test.js.snap b/packages/react/src/components/FormItem/__snapshots__/FormItem-test.js.snap
diff --git a/packages/react/src/components/FormLabel/FormLabel-test.js b/packages/react/src/components/FormLabel/FormLabel-test.js
@@ -6,12 +6,24 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import FormLabel from '../FormLabel';
 
 describe('FormLabel', () => {
-  it('should render', () => {
-    const wrapper = shallow(<FormLabel />);
-    expect(wrapper).toMatchSnapshot();
+  it('should support a custom `className` prop on the outermost element', () => {
+    const { container } = render(<FormLabel className="test" />);
+    expect(container.firstChild).toHaveClass('test');
+  });
+
+  it('should spread extra props on the outermost element', () => {
+    const { container } = render(
+      <FormLabel aria-label="test" data-testid="test" />
+    );
+    expect(container.firstChild).toHaveAttribute('data-testid', 'test');
+  });
+
+  it('should support a unique id prop on the outermost element', () => {
+    const { container } = render(<FormLabel id="test-1" />);
+    expect(container.firstChild).toHaveProperty('htmlFor', 'test-1');
   });
 });
diff --git a/packages/react/src/components/FormLabel/__snapshots__/FormLabel-test.js.snap b/packages/react/src/components/FormLabel/__snapshots__/FormLabel-test.js.snap