refactor: rewrite test using react testing library 2part

openedx · Sep 7, 2023 · 8236a5e · 8236a5e
1 parent 52c0990
commit 8236a5e
Show file tree

Hide file tree

Showing 28 changed files with 1,777 additions and 1,608 deletions.
diff --git a/src/Form/tests/FormCheckbox.test.jsx b/src/Form/tests/FormCheckbox.test.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
 import FormCheckbox from '../FormCheckbox';
 import FormGroup from '../FormGroup';
 import FormLabel from '../FormLabel';
@@ -8,51 +10,92 @@ describe('FormCheckbox', () => {
   const handleChange = jest.fn();
   const handleFocus = jest.fn();
   const handleBlur = jest.fn();
-  const wrapper = mount((
-    <FormCheckbox
-      value="green"
-      name="color"
-      onChange={handleChange}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      description="Describe green"
-    >
-      Green
-    </FormCheckbox>
-  ));
-  const inputNode = wrapper.find('input[value="green"]').first();
 
   it('renders an input with a name and value', () => {
-    wrapper.exists('input[value="green"]');
-    expect(inputNode.props().name).toBe('color');
-  });
+    const { getByLabelText } = render(
+      <FormCheckbox
+        value="green"
+        name="color"
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        description="Describe green"
+      >
+        Green
+      </FormCheckbox>,
+    );
+
+    const inputNode = getByLabelText('Green');
 
-  it('has an associated label', () => {
-    const inputNodeId = inputNode.props().id;
-    wrapper.exists({ htmlFor: inputNodeId });
-    const labelNode = wrapper.find({ htmlFor: inputNodeId }).hostNodes().first();
-    expect(labelNode.text()).toBe('Green');
+    expect(inputNode).toBeInTheDocument();
+    expect(inputNode.getAttribute('name')).toBe('color');
   });
 
-  it('has an associated description', () => {
-    const describerIds = inputNode.props()['aria-describedby'];
-    const describerNode = wrapper.find({ id: describerIds }).hostNodes().first();
-    wrapper.exists({ id: describerIds });
-    expect(describerNode.text()).toBe('Describe green');
+  it('has an associated label and description', () => {
+    const { getByLabelText, getByText } = render(
+      <FormCheckbox
+        value="green"
+        name="color"
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        description="Describe green"
+      >
+        Green
+      </FormCheckbox>,
+    );
+
+    const inputNode = getByLabelText('Green');
+    const describerNode = getByText('Describe green');
+
+    expect(inputNode).toBeInTheDocument();
+    expect(describerNode).toBeInTheDocument();
   });
 
   it('calls the change handler', () => {
-    inputNode.simulate('change');
-    expect(handleChange).toHaveBeenCalledWith(
-      expect.objectContaining({
-        target: expect.objectContaining({ value: 'green' }),
-        type: 'change',
-      }),
+    const { getByLabelText } = render(
+      <FormCheckbox
+        value="green"
+        name="color"
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        description="Describe green"
+      >
+        Green
+      </FormCheckbox>,
     );
+
+    const inputNode = getByLabelText('Green');
+    fireEvent.change(inputNode, { target: { value: 'green' } });
+
+    waitFor(() => {
+      expect(handleChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          target: expect.objectContaining({ value: 'green' }),
+          type: 'change',
+        }),
+      );
+    });
   });
 
   it('calls the focus handler', () => {
-    inputNode.simulate('focus');
+    const { getByLabelText } = render(
+      <FormCheckbox
+        value="green"
+        name="color"
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        description="Describe green"
+      >
+        Green
+      </FormCheckbox>,
+    );
+
+    const inputNode = getByLabelText('Green');
+    fireEvent.focus(inputNode);
+
     expect(handleFocus).toHaveBeenCalledWith(
       expect.objectContaining({
         target: expect.objectContaining({ value: 'green' }),
@@ -62,7 +105,22 @@ describe('FormCheckbox', () => {
   });
 
   it('calls the blur handler', () => {
-    inputNode.simulate('blur');
+    const { getByLabelText } = render(
+      <FormCheckbox
+        value="green"
+        name="color"
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        description="Describe green"
+      >
+        Green
+      </FormCheckbox>,
+    );
+
+    const inputNode = getByLabelText('Green');
+    fireEvent.blur(inputNode);
+
     expect(handleBlur).toHaveBeenCalledWith(
       expect.objectContaining({
         target: expect.objectContaining({ value: 'green' }),
@@ -76,29 +134,25 @@ describe('FormCheckbox with FormGroup', () => {
   const handleChange = jest.fn();
   const handleFocus = jest.fn();
   const handleBlur = jest.fn();
-  const wrapper = mount((
-    <FormGroup controlId="group-id">
-      <FormLabel>Group Label</FormLabel>
-      <FormCheckbox
-        value="green"
-        name="color"
-        onChange={handleChange}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        description="Describe green"
-      >
-        Green
-      </FormCheckbox>
-    </FormGroup>
-  ));
-
-  it('renders an a group with a label', () => {
-    expect(wrapper.exists('#group-id')).toBe(true);
-    const groupNode = wrapper.find('#group-id').first();
-    const labelledById = groupNode.props()['aria-labelledby'];
-    expect(labelledById).toBeTruthy();
-    expect(wrapper.exists(`#${labelledById}`)).toBe(true);
-    const labelNode = wrapper.find(`#${labelledById}`).first();
-    expect(labelNode.text()).toBe('Group Label');
+
+  it('renders a group with a label', () => {
+    const { getByText } = render(
+      <FormGroup controlId="group-id">
+        <FormLabel>Group Label</FormLabel>
+        <FormCheckbox
+          value="green"
+          name="color"
+          onChange={handleChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          description="Describe green"
+        >
+          Green
+        </FormCheckbox>
+      </FormGroup>,
+    );
+
+    const groupNode = getByText('Group Label');
+    expect(groupNode).toBeInTheDocument();
   });
 });