From a3c64e7321cc237e4a939cc427b2ad4b20dbe13c Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Thu, 8 Feb 2024 08:58:20 +0200
Subject: [PATCH] test(Button): align Button tests to better standard, add
 tests for aria-hidden a11y

---
 .../Button/__tests__/button.jest.js           | 78 +++++++++++--------
 1 file changed, 45 insertions(+), 33 deletions(-)

diff --git a/src/components/Button/__tests__/button.jest.js b/src/components/Button/__tests__/button.jest.js
index b855657734..536b24a120 100644
--- a/src/components/Button/__tests__/button.jest.js
+++ b/src/components/Button/__tests__/button.jest.js
@@ -1,33 +1,30 @@
 import React from "react";
 import { render, fireEvent, cleanup, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
 import Button from "../Button";
 
 const text = "Click Me!";
-const className = "test-class";
-
-function renderComponent(props) {
-  return render(<Button {...props}>{text}</Button>);
-}
-
-describe("<Buttoon />", () => {
-  let clickActionStub;
-  let onMouseDownStub;
-  let buttonComponent;
-
-  beforeEach(() => {
-    clickActionStub = jest.fn();
-    onMouseDownStub = jest.fn();
-    buttonComponent = render(
-      <Button className={className} onClick={clickActionStub} onMouseDown={onMouseDownStub}>
-        {text}
-      </Button>
-    );
-  });
 
+describe("<Button />", () => {
   afterEach(() => {
     cleanup();
   });
+
   describe("click", () => {
+    let clickActionStub;
+    let onMouseDownStub;
+    let buttonComponent;
+
+    beforeEach(() => {
+      clickActionStub = jest.fn();
+      onMouseDownStub = jest.fn();
+      buttonComponent = render(
+        <Button onClick={clickActionStub} onMouseDown={onMouseDownStub}>
+          {text}
+        </Button>
+      );
+    });
+
     it("should call the click callback when clicked", () => {
       const { getByText } = buttonComponent;
       fireEvent.click(getByText(text));
@@ -99,8 +96,7 @@ describe("<Buttoon />", () => {
 
   it("should call on blur", () => {
     const onBlur = jest.fn();
-    cleanup();
-    const { getByText } = renderComponent({ onBlur });
+    const { getByText } = render(<Button onBlur={onBlur}>{text}</Button>);
     const button = getByText(text);
     fireEvent.blur(button);
     expect(onBlur.mock.calls.length).toEqual(1);
@@ -108,8 +104,11 @@ describe("<Buttoon />", () => {
 
   it("should call do blur on mouseup", () => {
     const onBlur = jest.fn();
-    cleanup();
-    const { getByText } = renderComponent({ onBlur, blurOnMouseUp: false });
+    const { getByText } = render(
+      <Button onBlur={onBlur} blurOnMouseUp={false}>
+        {text}
+      </Button>
+    );
     const button = getByText(text);
     fireEvent.focus(button);
     fireEvent.mouseUp(button);
@@ -118,25 +117,24 @@ describe("<Buttoon />", () => {
 
   it("should call on focus", () => {
     const onFocus = jest.fn();
-    cleanup();
-    const { getByText } = renderComponent({ onFocus });
+    const { getByText } = render(<Button onFocus={onFocus}>{text}</Button>);
     const button = getByText(text);
     fireEvent.focus(button);
     expect(onFocus.mock.calls.length).toEqual(1);
   });
 
   describe("mouse down", () => {
+    const onClick = jest.fn();
     it("should call the click callback when clicked", () => {
-      const { getByText } = buttonComponent;
+      const { getByText } = render(<Button onClick={onClick}>{text}</Button>);
       fireEvent.mouseDown(getByText(text));
-      expect(clickActionStub.mock.calls.length).toEqual(0);
+      expect(onClick.mock.calls.length).toEqual(0);
     });
 
     it("should call mouse down callback", () => {
-      const { getByText, rerender } = buttonComponent;
       const onMouseDown = jest.fn();
-      rerender(
-        <Button onClick={clickActionStub} onMouseDown={onMouseDown}>
+      const { getByText } = render(
+        <Button onClick={onClick} onMouseDown={onMouseDown}>
           {text}
         </Button>
       );
@@ -144,17 +142,31 @@ describe("<Buttoon />", () => {
       expect(onMouseDown.mock.calls.length).toEqual(1);
     });
   });
+
   describe("a11y", () => {
     it("Aria label should be connected to the button", () => {
       const ariaLabel = "Icon Name";
+      const onClick = jest.fn();
       const { getByLabelText } = render(
-        <Button ariaLabel={ariaLabel} className={className} onClick={clickActionStub} onMouseDown={onMouseDownStub}>
+        <Button ariaLabel={ariaLabel} onClick={onClick}>
           {text}
         </Button>
       );
       const buttonElement = getByLabelText(ariaLabel);
       fireEvent.click(buttonElement);
-      expect(clickActionStub.mock.calls.length).toEqual(1);
+      expect(onClick.mock.calls.length).toEqual(1);
+    });
+
+    it("should apply aria-hidden attribute to button", () => {
+      const { getByRole } = render(<Button aria-hidden>{text}</Button>);
+      const buttonElement = getByRole("button", { hidden: true });
+      expect(buttonElement).toHaveAttribute("aria-hidden", "true");
+    });
+
+    it("should not apply aria-hidden attribute to button", () => {
+      const { getByRole } = render(<Button>{text}</Button>);
+      const buttonElement = getByRole("button");
+      expect(buttonElement).not.toHaveAttribute("aria-hidden");
     });
   });
 });