Added tests to verify the new functionality.

src/components/Button.jsx

@@ -22,7 +22,7 @@ const BUTTON_STYLES = {
 const SIZES = { small: "small", medium: "medium", large: "large" };
 const ICON_POSITIONS = { left: "left", right: "right" };
 const BUTTON_TYPES = { button: "button", reset: "reset", submit: "submit" };
-const STATUS = { SUCCESS: "success", ERROR: "error" };
+const STATUS = { SUCCESS: "success", ERROR: "error", NONE: "" };
 
 const Button = React.forwardRef(
   (
@@ -150,12 +150,18 @@ const Button = React.forwardRef(
             />
           )}
           {loading && (
-            <span className="neeto-ui-btn__feedback-icon">
+            <span
+              className="neeto-ui-btn__feedback-icon"
+              data-testid="loading-icon"
+            >
               <Spinner aria-hidden="true" size="small" />
             </span>
           )}
-          {j && (
-            <span className="neeto-ui-btn__feedback-icon">
+          {isFeedbackIconVisible && status && (
+            <span
+              className="neeto-ui-btn__feedback-icon"
+              data-testid="user-feedback-icon"
+            >
               <FeedbackIcon aria-hidden="true" size="20" />
             </span>
           )}

tests/Button.test.jsx

@@ -1,11 +1,32 @@
-import React from "react";
+import React, { useState } from "react";
 
-import { render } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { BrowserRouter } from "react-router-dom";
 
 import { Button } from "components";
 
+const ButtonWithStatus = ({ status: testingStatus }) => {
+  const [loading, setLoading] = useState(false);
+  const [status, setStatus] = useState("");
+
+  const handleButtonClick = () => {
+    setLoading(true);
+    setTimeout(() => {
+      setStatus(testingStatus);
+      setLoading(false);
+    }, 500);
+  };
+
+  return (
+    <Button
+      {...{ loading, status }}
+      label="Save changes"
+      onClick={handleButtonClick}
+    />
+  );
+};
+
 describe("Button", () => {
   it("should render without error", () => {
     const { getByText } = render(<Button label="Button" />);
@@ -14,15 +35,15 @@ describe("Button", () => {
 
   it("should call onClick on button click", async () => {
     const onClick = jest.fn();
-    const { getByText } = render(<Button label="Button" onClick={onClick} />);
+    const { getByText } = render(<Button {...{ onClick }} label="Button" />);
     await userEvent.click(getByText("Button"));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
   it("should not call onClick on button click when disabled", async () => {
     const onClick = jest.fn();
     const { getByText } = render(
-      <Button disabled label="Button" onClick={onClick} />
+      <Button {...{ onClick }} disabled label="Button" />
     );
     await userEvent.click(getByText("Button"));
     expect(onClick).toHaveBeenCalledTimes(0);
@@ -31,7 +52,7 @@ describe("Button", () => {
   it("should not call onClick on button click when loading", async () => {
     const onClick = jest.fn();
     const { getByText } = render(
-      <Button loading label="Button" onClick={onClick} />
+      <Button {...{ onClick }} loading label="Button" />
     );
     await userEvent.click(getByText("Button"));
     expect(onClick).toHaveBeenCalledTimes(0);
@@ -72,4 +93,47 @@ describe("Button", () => {
     );
     expect(getByRole("link")).toHaveAttribute("href", "/some-path");
   });
+
+  it("should show a thumbs up  icon after loading is set false when the status is `success`", async () => {
+    render(<ButtonWithStatus status="success" />);
+
+    await userEvent.click(screen.getByText("Save changes"));
+    await expect(screen.getByTestId("loading-icon")).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByTestId("user-feedback-icon")).toBeInTheDocument();
+    });
+    expect(screen.getByText("👍")).toBeInTheDocument();
+
+    waitFor(() => {
+      expect(screen.getByTestId("user-feedback-icon")).not.toBeInTheDocument();
+    });
+  }, 6000);
+
+  it("should show a cross  icon after loading is set false when the status is `error`", async () => {
+    render(<ButtonWithStatus status="error" />);
+
+    await userEvent.click(screen.getByText("Save changes"));
+    await expect(screen.getByTestId("loading-icon")).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByTestId("user-feedback-icon")).toBeInTheDocument();
+    });
+    expect(screen.queryByText("👍")).not.toBeInTheDocument();
+
+    waitFor(() => {
+      expect(screen.getByTestId("user-feedback-icon")).not.toBeInTheDocument();
+    });
+  }, 6000);
+
+  it("should not show any feedback if status is not set.", async () => {
+    render(<ButtonWithStatus />);
+
+    await userEvent.click(screen.getByText("Save changes"));
+    await expect(screen.getByTestId("loading-icon")).toBeInTheDocument();
+
+    await expect(
+      screen.queryByTestId("user-feedback-icon")
+    ).not.toBeInTheDocument();
+  });
 });