test(badge-button-web): migrate tests to use react-testing-library and remove enzyme

Author: samuelreichert

packages/pluggableWidgets/badge-button-web/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    ...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js")
+};

packages/pluggableWidgets/badge-button-web/package.json

@@ -37,7 +37,7 @@
         "publish-marketplace": "rui-publish-marketplace",
         "release": "cross-env MPKOUTPUT=BadgeButton.mpk pluggable-widgets-tools release:web",
         "start": "cross-env MPKOUTPUT=BadgeButton.mpk pluggable-widgets-tools start:server",
-        "test": "pluggable-widgets-tools test:unit:web",
+        "test": "jest --projects jest.config.js",
         "update-changelog": "rui-update-changelog-widget",
         "verify": "rui-verify-package-format"
     },

packages/pluggableWidgets/badge-button-web/src/components/__tests__/BadgeButton.spec.ts

@@ -0,0 +1,48 @@
+import "@testing-library/jest-dom";
+import { render, RenderResult } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { createElement } from "react";
+
+import { BadgeButton, BadgeButtonProps } from "../BadgeButton";
+
+describe("BadgeButton", () => {
+    function renderBadgeButton(props: Partial<BadgeButtonProps>): RenderResult {
+        return render(<BadgeButton {...props} />);
+    }
+
+    it("renders the structure correctly", () => {
+        const badgeProps: BadgeButtonProps = {
+            label: "Custom Label",
+            onClick: jest.fn(),
+            value: "0"
+        };
+
+        const badge = renderBadgeButton(badgeProps);
+
+        const button = badge.getByRole("button", { name: /custom label/i });
+        expect(button).toHaveClass("widget-badge-button btn btn-primary");
+
+        const label = badge.getByText("Custom Label");
+        expect(label).toHaveClass("widget-badge-button-text");
+
+        const badgeValue = badge.getByText("0");
+        expect(badgeValue).toHaveClass("badge");
+    });
+
+    it("responds to click events", async () => {
+        const user = userEvent.setup();
+        const onClickMock = jest.fn();
+        const badgeProps: BadgeButtonProps = { onClick: onClickMock };
+        const badge = renderBadgeButton(badgeProps);
+
+        await user.click(badge.getByRole("button"));
+
+        expect(onClickMock).toHaveBeenCalled();
+    });
+
+    it("renders correctly with custom classes", () => {
+        const badge = renderBadgeButton({ className: "btn-secondary" });
+
+        expect(badge.getByRole("button")).toHaveClass("btn btn-secondary");
+    });
+});