test: update Rating tests to use Testing Library and improve structure

Author: samuelreichert

packages/pluggableWidgets/rating-web/package.json

@@ -38,7 +38,7 @@
         "publish-marketplace": "rui-publish-marketplace",
         "release": "cross-env MPKOUTPUT=StarRating.mpk pluggable-widgets-tools release:web",
         "start": "cross-env MPKOUTPUT=StarRating.mpk pluggable-widgets-tools start:server",
-        "test": "pluggable-widgets-tools test:unit:web",
+        "test": "pluggable-widgets-tools test:unit:web:enzyme-free",
         "update-changelog": "rui-update-changelog-widget",
         "verify": "rui-verify-package-format"
     },

packages/pluggableWidgets/rating-web/src/components/__tests__/Rating.spec.tsx

@@ -1,101 +1,103 @@
 import { createElement } from "react";
-import { mount, shallow } from "enzyme";
+import { render, screen, fireEvent } from "@testing-library/react";
 import { Rating, RatingProps } from "../Rating";
+import "@testing-library/jest-dom";
 
-describe("Rating", () => {
-    const defaultProps: RatingProps = {
-        className: "",
-        animated: true,
-        disabled: false,
-        emptyIcon: <div className="empty" />,
-        fullIcon: <div className="full" />,
-        value: 0,
-        onChange: undefined,
-        maximumValue: 5,
-        style: undefined
-    };
+const defaultProps: RatingProps = {
+    className: "",
+    animated: true,
+    disabled: false,
+    emptyIcon: <div className="empty" />,
+    fullIcon: <div className="full" />,
+    value: 0,
+    onChange: undefined,
+    maximumValue: 5,
+    style: undefined
+};
 
+function renderRating(props?: Partial<RatingProps>) {
+    return render(<Rating {...defaultProps} {...props} />);
+}
+
+describe("Rating rendering", () => {
     it("renders correctly the structure", () => {
-        const rating = shallow(<Rating {...defaultProps} />);
-        expect(rating).toMatchSnapshot();
+        const { asFragment } = renderRating();
+        expect(asFragment()).toMatchSnapshot();
     });
 
     it("renders correctly the structure when disabled", () => {
-        const rating = shallow(<Rating {...defaultProps} disabled />);
-        expect(rating).toMatchSnapshot();
+        const { asFragment } = renderRating({ disabled: true });
+        expect(asFragment()).toMatchSnapshot();
     });
 
     it("renders correctly the structure without animations", () => {
-        const rating = shallow(<Rating {...defaultProps} animated={false} />);
-        expect(rating).toMatchSnapshot();
+        const { asFragment } = renderRating({ animated: false });
+        expect(asFragment()).toMatchSnapshot();
     });
 
     it("renders correctly the structure with custom class", () => {
-        const rating = shallow(<Rating {...defaultProps} className="my-custom-class" />);
-        expect(rating).toMatchSnapshot();
+        const { asFragment } = renderRating({ className: "my-custom-class" });
+        expect(asFragment()).toMatchSnapshot();
     });
 
     it("renders the correct amount of items", () => {
-        const rating = mount(<Rating {...defaultProps} maximumValue={2} />);
-        expect(rating.find(".rating-item")).toHaveLength(2);
+        renderRating({ maximumValue: 2 });
+        expect(screen.getAllByRole("radio")).toHaveLength(2);
     });
 
     it("renders the correct amount of items when value is superior to maximumValue", () => {
-        const rating = mount(<Rating {...defaultProps} maximumValue={2} value={5} />);
-        expect(rating.find(".rating-item")).toHaveLength(2);
-        expect(rating.find("div.full")).toHaveLength(2);
+        const { container } = renderRating({ maximumValue: 2, value: 5 });
+        expect(screen.getAllByRole("radio")).toHaveLength(2);
+        expect(container.querySelectorAll(".full")).toHaveLength(2);
     });
+});
 
-    describe("with events", () => {
-        it("triggers the event with correct value on click", () => {
-            const onChange = jest.fn();
-            const rating = mount(<Rating {...defaultProps} onChange={onChange} />);
-            const options = rating.find(".rating-item");
-            options.at(0).simulate("click");
-            expect(onChange).toHaveBeenCalled();
-            expect(onChange).toHaveBeenCalledWith(1);
-        });
+describe("Rating events", () => {
+    it("triggers the event with correct value on click", () => {
+        const onChange = jest.fn();
+        renderRating({ onChange });
+        const radios = screen.getAllByRole("radio");
+        fireEvent.click(radios[0]);
+        expect(onChange).toHaveBeenCalledWith(1);
+    });
 
-        it("cleans the value when clicking twice at same value", () => {
-            const onChange = jest.fn();
-            const rating = mount(<Rating {...defaultProps} onChange={onChange} />);
-            const options = rating.find(".rating-item");
-            options.at(1).simulate("click");
-            expect(onChange).toHaveBeenCalledWith(2);
-            // As the property is being managed from the outer component, we need to force the property to update to the new value
-            rating.setProps({ value: 2 });
-            options.at(1).simulate("click");
-            expect(onChange).toHaveBeenCalledWith(0);
+    it("cleans the value when clicking twice at same value", () => {
+        let value = 0;
+        const onChange = jest.fn(v => {
+            value = v;
         });
+        const { rerender } = renderRating({ onChange, value });
+        const radios = screen.getAllByRole("radio");
+        fireEvent.click(radios[1]);
+        expect(onChange).toHaveBeenCalledWith(2);
+        rerender(<Rating {...defaultProps} onChange={onChange} value={2} />);
+        fireEvent.click(radios[1]);
+        expect(onChange).toHaveBeenCalledWith(0);
+    });
 
-        it("triggers the event with correct value on space key down", () => {
-            const onChange = jest.fn();
-            const rating = mount(<Rating {...defaultProps} onChange={onChange} />);
-            const options = rating.find(".rating-item");
-            options.at(0).simulate("keydown", { key: " " });
-            expect(onChange).toHaveBeenCalled();
-            expect(onChange).toHaveBeenCalledWith(1);
-        });
+    it("triggers the event with correct value on space key down", () => {
+        const onChange = jest.fn();
+        renderRating({ onChange });
+        const radios = screen.getAllByRole("radio");
+        fireEvent.keyDown(radios[0], { key: " " });
+        expect(onChange).toHaveBeenCalledWith(1);
+    });
 
-        it("triggers the event with correct value on enter key down", () => {
-            const onChange = jest.fn();
-            const rating = mount(<Rating {...defaultProps} onChange={onChange} />);
-            const options = rating.find(".rating-item");
-            options.at(2).simulate("keydown", { key: "Enter" });
-            expect(onChange).toHaveBeenCalled();
-            expect(onChange).toHaveBeenCalledWith(3);
-        });
+    it("triggers the event with correct value on enter key down", () => {
+        const onChange = jest.fn();
+        renderRating({ onChange });
+        const radios = screen.getAllByRole("radio");
+        fireEvent.keyDown(radios[2], { key: "Enter" });
+        expect(onChange).toHaveBeenCalledWith(3);
+    });
 
-        it("doesn't trigger any event when disabled", () => {
-            const onChange = jest.fn();
-            const rating = mount(<Rating {...defaultProps} disabled onChange={onChange} />);
-            const options = rating.find(".rating-item");
-            options.at(1).simulate("keydown", { key: "Enter" });
-            expect(onChange).toHaveBeenCalledTimes(0);
-            options.at(2).simulate("keydown", { key: " " });
-            expect(onChange).toHaveBeenCalledTimes(0);
-            options.at(3).simulate("click");
-            expect(onChange).toHaveBeenCalledTimes(0);
-        });
+    it("doesn't trigger any event when disabled", () => {
+        const onChange = jest.fn();
+        renderRating({ disabled: true, onChange });
+        const radios = screen.getAllByRole("radio");
+        fireEvent.keyDown(radios[1], { key: "Enter" });
+        fireEvent.keyDown(radios[2], { key: " " });
+        fireEvent.click(radios[3]);
+        expect(onChange).not.toHaveBeenCalled();
     });
 });

packages/pluggableWidgets/rating-web/src/components/__tests__/StarRating.spec.tsx

@@ -2,85 +2,75 @@ import { createElement } from "react";
 import { actionValue, EditableValueBuilder } from "@mendix/widget-plugin-test-utils";
 import { StarRatingContainerProps } from "../../../typings/StarRatingProps";
 import { Big } from "big.js";
-import { mount, shallow } from "enzyme";
+import { render, screen, fireEvent } from "@testing-library/react";
 import { StarRating } from "../../StarRating";
-import { Rating } from "../Rating";
+import "@testing-library/jest-dom";
 
-describe("Rating Container", () => {
-    const defaultProps: StarRatingContainerProps = {
-        class: "",
-        name: "rating",
-        tabIndex: 0,
-        rateAttribute: new EditableValueBuilder<Big>().withValue(new Big(5)).build(),
-        animation: true,
-        maximumStars: 5
-    };
+const defaultProps: StarRatingContainerProps = {
+    class: "",
+    name: "rating",
+    tabIndex: 0,
+    rateAttribute: new EditableValueBuilder<Big>().withValue(new Big(5)).build(),
+    animation: true,
+    maximumStars: 5
+};
 
+function renderStarRating(props?: Partial<StarRatingContainerProps>): ReturnType<typeof render> {
+    return render(<StarRating {...defaultProps} {...props} />);
+}
+
+describe("StarRating rendering", () => {
     it("renders correctly the structure", () => {
-        const rating = shallow(<StarRating {...defaultProps} />);
-        expect(rating).toMatchSnapshot();
+        const { asFragment } = renderStarRating();
+        expect(asFragment()).toMatchSnapshot();
     });
 
     it("renders correctly the structure without animation", () => {
-        const rating = shallow(<StarRating {...defaultProps} animation={false} />);
-        expect(rating).toMatchSnapshot();
+        const { asFragment } = renderStarRating({ animation: false });
+        expect(asFragment()).toMatchSnapshot();
     });
 
     it("renders correctly the structure when disabled", () => {
-        const rating = shallow(
-            <StarRating
-                {...defaultProps}
-                rateAttribute={new EditableValueBuilder<Big>().withValue(new Big(1)).isReadOnly().build()}
-            />
-        );
-        expect(rating).toMatchSnapshot();
-    });
-
-    describe("with events", () => {
-        it("triggers correctly on change action", () => {
-            const onChange = actionValue();
-            const ratingWrapper = mount(<StarRating {...defaultProps} onChange={onChange} />);
-            const rating = ratingWrapper.find(Rating);
-            const options = rating.find("div.rating-item");
-            options.at(0).simulate("click");
-
-            expect(onChange.execute).toHaveBeenCalled();
-        });
-
-        it("defines correct values to attribute on change action", () => {
-            const ratingAttribute = new EditableValueBuilder<Big>().withValue(new Big(0)).build();
-            const ratingWrapper = mount(<StarRating {...defaultProps} rateAttribute={ratingAttribute} />);
-            const rating = ratingWrapper.find(Rating);
-            const options = rating.find("div.rating-item");
-            options.at(0).simulate("click");
-
-            expect(ratingAttribute.setValue).toHaveBeenCalled();
-            expect(ratingAttribute.setValue).toHaveBeenCalledWith(new Big(1));
+        const { asFragment } = renderStarRating({
+            rateAttribute: new EditableValueBuilder<Big>().withValue(new Big(1)).isReadOnly().build()
         });
+        expect(asFragment()).toMatchSnapshot();
+    });
+});
 
-        it("doesnt call setValue when value is read only", () => {
-            const ratingAttribute = new EditableValueBuilder<Big>().withValue(new Big(1)).isReadOnly().build();
-            const ratingWrapper = mount(<StarRating {...defaultProps} rateAttribute={ratingAttribute} />);
-            const rating = ratingWrapper.find(Rating);
-            const options = rating.find("div.rating-item");
-            options.at(0).simulate("click");
+describe("StarRating events", () => {
+    it("triggers correctly on change action", () => {
+        const onChange = actionValue();
+        renderStarRating({ onChange });
+        const radios = screen.getAllByRole("radio");
+        fireEvent.click(radios[0]);
+        expect(onChange.execute).toHaveBeenCalled();
+    });
 
-            expect(ratingAttribute.setValue).toHaveBeenCalledTimes(0);
-        });
+    it("defines correct values to attribute on change action", () => {
+        const ratingAttribute = new EditableValueBuilder<Big>().withValue(new Big(0)).build();
+        renderStarRating({ rateAttribute: ratingAttribute });
+        const radios = screen.getAllByRole("radio");
+        fireEvent.click(radios[0]);
+        expect(ratingAttribute.setValue).toHaveBeenCalledWith(new Big(1));
+    });
 
-        it("doesnt trigger on change action when attribute is read only", () => {
-            const onChange = actionValue();
-            const ratingWrapper = mount(
-                <StarRating
-                    {...defaultProps}
-                    rateAttribute={new EditableValueBuilder<Big>().withValue(new Big(1)).isReadOnly().build()}
-                />
-            );
-            const rating = ratingWrapper.find(Rating);
-            const options = rating.find("div.rating-item");
-            options.at(0).simulate("click");
+    it("doesnt call setValue when value is read only", () => {
+        const ratingAttribute = new EditableValueBuilder<Big>().withValue(new Big(1)).isReadOnly().build();
+        renderStarRating({ rateAttribute: ratingAttribute });
+        const radios = screen.getAllByRole("radio");
+        fireEvent.click(radios[0]);
+        expect(ratingAttribute.setValue).not.toHaveBeenCalled();
+    });
 
-            expect(onChange.execute).toHaveBeenCalledTimes(0);
+    it("doesnt trigger on change action when attribute is read only", () => {
+        const onChange = actionValue();
+        renderStarRating({
+            rateAttribute: new EditableValueBuilder<Big>().withValue(new Big(1)).isReadOnly().build(),
+            onChange
         });
+        const radios = screen.getAllByRole("radio");
+        fireEvent.click(radios[0]);
+        expect(onChange.execute).not.toHaveBeenCalled();
     });
 });