Migrate LabelledCheckbox-test to react-testing-library (#10115)

test/components/views/elements/LabelledCheckbox-test.tsx

@@ -14,10 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount } from "enzyme";
-import { act } from "react-dom/test-utils";
 
 import LabelledCheckbox from "../../../../src/components/views/elements/LabelledCheckbox";
 
@@ -30,32 +28,18 @@ jest.mock("matrix-js-sdk/src/randomstring", () => {
 
 describe("<LabelledCheckbox />", () => {
     type CompProps = React.ComponentProps<typeof LabelledCheckbox>;
-    const getComponent = (props: CompProps) => mount(<LabelledCheckbox {...props} />);
+    const getComponent = (props: CompProps) => <LabelledCheckbox {...props} />;
-    type CompClass = ReturnType<typeof getComponent>;
+    const getCheckbox = (): HTMLInputElement => screen.getByRole("checkbox");
 
-    const getCheckbox = (component: CompClass) => component.find(`input[type="checkbox"]`);
+    it.each([undefined, "this is a byline"])("should render with byline of %p", (byline) => {
-    const getLabel = (component: CompClass) => component.find(`.mx_LabelledCheckbox_label`);
-    const getByline = (component: CompClass) => component.find(`.mx_LabelledCheckbox_byline`);
-
-    const isChecked = (checkbox: ReturnType<typeof getCheckbox>) => checkbox.is(`[checked=true]`);
-    const isDisabled = (checkbox: ReturnType<typeof getCheckbox>) => checkbox.is(`[disabled=true]`);
-    const getText = (span: ReturnType<typeof getLabel>) => (span.length > 0 ? span.at(0).text() : null);
-
-    test.each([null, "this is a byline"])("should render with byline of %p", (byline) => {
         const props: CompProps = {
             label: "Hello world",
             value: true,
             byline: byline,
             onChange: jest.fn(),
         };
-        const component = getComponent(props);
+        const renderResult = render(getComponent(props));
-        const checkbox = getCheckbox(component);
+        expect(renderResult.asFragment()).toMatchSnapshot();
-
-        expect(component).toMatchSnapshot();
-        expect(isChecked(checkbox)).toBe(true);
-        expect(isDisabled(checkbox)).toBe(false);
-        expect(getText(getLabel(component))).toBe(props.label);
-        expect(getText(getByline(component))).toBe(byline);
     });
 
     it("should support unchecked by default", () => {
@@ -64,9 +48,8 @@ describe("<LabelledCheckbox />", () => {
             value: false,
             onChange: jest.fn(),
         };
-        const component = getComponent(props);
+        render(getComponent(props));
-
+        expect(getCheckbox()).not.toBeChecked();
-        expect(isChecked(getCheckbox(component))).toBe(false);
     });
 
     it("should be possible to disable the checkbox", () => {
@@ -76,9 +59,8 @@ describe("<LabelledCheckbox />", () => {
             disabled: true,
             onChange: jest.fn(),
         };
-        const component = getComponent(props);
+        render(getComponent(props));
-
+        expect(getCheckbox()).toBeDisabled();
-        expect(isDisabled(getCheckbox(component))).toBe(true);
     });
 
     it("should emit onChange calls", () => {
@@ -87,15 +69,11 @@ describe("<LabelledCheckbox />", () => {
             value: false,
             onChange: jest.fn(),
         };
-        const component = getComponent(props);
+        render(getComponent(props));
 
         expect(props.onChange).not.toHaveBeenCalled();
-
+        fireEvent.click(getCheckbox());
-        act(() => {
+        expect(props.onChange).toHaveBeenCalledWith(true);
-            getCheckbox(component).simulate("change");
-        });
-
-        expect(props.onChange).toHaveBeenCalledTimes(1);
     });
 
     it("should react to value and disabled prop changes", () => {
@@ -104,16 +82,18 @@ describe("<LabelledCheckbox />", () => {
             value: false,
             onChange: jest.fn(),
         };
-        const component = getComponent(props);
+        const { rerender } = render(getComponent(props));
-        let checkbox = getCheckbox(component);
 
-        expect(isChecked(checkbox)).toBe(false);
+        let checkbox = getCheckbox();
-        expect(isDisabled(checkbox)).toBe(false);
+        expect(checkbox).not.toBeChecked();
+        expect(checkbox).not.toBeDisabled();
 
-        component.setProps({ value: true, disabled: true });
+        props.disabled = true;
-        checkbox = getCheckbox(component); // refresh reference to checkbox
+        props.value = true;
+        rerender(getComponent(props));
 
-        expect(isChecked(checkbox)).toBe(true);
+        checkbox = getCheckbox();
-        expect(isDisabled(checkbox)).toBe(true);
+        expect(checkbox).toBeChecked();
+        expect(checkbox).toBeDisabled();
     });
 });

test/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap

@@ -1,106 +1,82 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<LabelledCheckbox /> should render with byline of "this is a byline" 1`] = `
-<LabelledCheckbox
+<DocumentFragment>
-  byline="this is a byline"
-  label="Hello world"
-  onChange={[MockFunction]}
-  value={true}
->
   <label
-    className="mx_LabelledCheckbox"
+    class="mx_LabelledCheckbox"
   >
-    <StyledCheckbox
+    <span
-      checked={true}
+      class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
-      className=""
-      onChange={[Function]}
     >
-      <span
+      <input
-        className="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+        checked=""
+        id="checkbox_abdefghi"
+        type="checkbox"
+      />
+      <label
+        for="checkbox_abdefghi"
       >
-        <input
+        <div
-          checked={true}
+          class="mx_Checkbox_background"
-          id="checkbox_abdefghi"
-          onChange={[Function]}
-          type="checkbox"
-        />
-        <label
-          htmlFor="checkbox_abdefghi"
         >
           <div
-            className="mx_Checkbox_background"
+            class="mx_Checkbox_checkmark"
-          >
+          />
-            <div
+        </div>
-              className="mx_Checkbox_checkmark"
+      </label>
-            />
+    </span>
-          </div>
-        </label>
-      </span>
-    </StyledCheckbox>
     <div
-      className="mx_LabelledCheckbox_labels"
+      class="mx_LabelledCheckbox_labels"
     >
       <span
-        className="mx_LabelledCheckbox_label"
+        class="mx_LabelledCheckbox_label"
       >
         Hello world
       </span>
       <span
-        className="mx_LabelledCheckbox_byline"
+        class="mx_LabelledCheckbox_byline"
       >
         this is a byline
       </span>
     </div>
   </label>
-</LabelledCheckbox>
+</DocumentFragment>
 `;
 
-exports[`<LabelledCheckbox /> should render with byline of null 1`] = `
+exports[`<LabelledCheckbox /> should render with byline of undefined 1`] = `
-<LabelledCheckbox
+<DocumentFragment>
-  byline={null}
-  label="Hello world"
-  onChange={[MockFunction]}
-  value={true}
->
   <label
-    className="mx_LabelledCheckbox"
+    class="mx_LabelledCheckbox"
   >
-    <StyledCheckbox
+    <span
-      checked={true}
+      class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
-      className=""
-      onChange={[Function]}
     >
-      <span
+      <input
-        className="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
+        checked=""
+        id="checkbox_abdefghi"
+        type="checkbox"
+      />
+      <label
+        for="checkbox_abdefghi"
       >
-        <input
+        <div
-          checked={true}
+          class="mx_Checkbox_background"
-          id="checkbox_abdefghi"
-          onChange={[Function]}
-          type="checkbox"
-        />
-        <label
-          htmlFor="checkbox_abdefghi"
         >
           <div
-            className="mx_Checkbox_background"
+            class="mx_Checkbox_checkmark"
-          >
+          />
-            <div
+        </div>
-              className="mx_Checkbox_checkmark"
+      </label>
-            />
+    </span>
-          </div>
-        </label>
-      </span>
-    </StyledCheckbox>
     <div
-      className="mx_LabelledCheckbox_labels"
+      class="mx_LabelledCheckbox_labels"
     >
       <span
-        className="mx_LabelledCheckbox_label"
+        class="mx_LabelledCheckbox_label"
       >
         Hello world
       </span>
     </div>
   </label>
-</LabelledCheckbox>
+</DocumentFragment>
 `;