Merge pull request #6987 from Sage/FE-6575

fix(badge): investigate failing RTL test
Sage · Oct 4, 2024 · 581f988 · 581f988
2 parents 1fa77a5 + 5118c10
commit 581f988
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 21 deletions.
diff --git a/src/components/badge/badge.component.tsx b/src/components/badge/badge.component.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   StyledBadgeWrapper,
   StyledCrossIcon,
@@ -28,6 +28,8 @@ export const Badge = ({
 }: BadgeProps) => {
   const shouldDisplayCounter = +counter > 0;
   const counterToDisplay = +counter > 99 ? 99 : counter;
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
 
   const renderCorrectBadge = () => {
     const props = onClick
@@ -46,6 +48,20 @@ export const Badge = ({
           data-component="badge"
           color={color}
           {...props}
+          onFocus={() => {
+            setIsFocused(true);
+          }}
+          onBlur={() => {
+            setIsFocused(false);
+          }}
+          onMouseEnter={() => {
+            setIsHovered(true);
+          }}
+          onMouseLeave={() => {
+            setIsHovered(false);
+          }}
+          isFocused={isFocused}
+          isHovered={isHovered}
         >
           {onClick && (
             <StyledCrossIcon data-element="badge-cross-icon" type="cross" />

diff --git a/src/components/badge/badge.style.ts b/src/components/badge/badge.style.ts
@@ -29,6 +29,8 @@ const StyledCounter = styled.div`
 
 interface StyledBadgeProps {
   color: string;
+  isFocused?: boolean;
+  isHovered?: boolean;
 }
 
 const StyledBadge = styled.span.attrs(({ onClick }) => ({
@@ -52,7 +54,7 @@ const StyledBadge = styled.span.attrs(({ onClick }) => ({
     border: none;
   }
 
-  ${({ onClick, color, theme }) => css`
+  ${({ onClick, color, theme, isFocused, isHovered }) => css`
     ${onClick &&
     `
       ${commonStyles}
@@ -65,27 +67,32 @@ const StyledBadge = styled.span.attrs(({ onClick }) => ({
       }
 
       border-color: ${toColor(theme, color)};
-      color: ${toColor(theme, color)};      
-
-      &:hover,
-      &:focus {
-        background: ${toColor(theme, color)};
-        border: none;
-        ${StyledCounter} {
-          display: none;
-        }
+      color: ${toColor(theme, color)};
+
+      ${
+        (isFocused || isHovered) &&
+        `
+        && {
+          background: ${toColor(theme, color)};
+          border: none;
+          ${StyledCounter} {
+            display: none;
+          }
 
-        ${StyledIcon} {
-          display: block;
-          width: auto;
-          height: auto;
-          margin-right: 0;
+          ${StyledIcon} {
+            display: block;
+            width: auto;
+            height: auto;
+            margin-right: 0;
 
-          :before {
-            font-size: 20px;
-            color: var(--colorsActionMajorYang100);
+            :before {
+              font-size: 20px;
+              color: var(--colorsActionMajorYang100);
+            }
           }
         }
+      `
+      }
       }
     `}
   `}

diff --git a/src/components/badge/badge.test.tsx b/src/components/badge/badge.test.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import Badge from "./badge.component";
 
 const renderComponent = (props = {}) => render(<Badge {...props}>Foo</Badge>);
@@ -32,11 +33,42 @@ describe("Badge", () => {
   it("should render as a button element when onClick is set", () => {
     renderComponent({ counter: 9, onClick: () => {} });
 
-    // FIXME: FE-6575 investigate why toBeVisible() fails to find "9"
-    expect(screen.getByText("9")).toBeInTheDocument();
+    expect(screen.getByText("9")).toBeVisible();
     expect(screen.getByRole("button")).toBeVisible();
   });
 
+  it("should hide the counter text when the badge is focused and it shows it when it is not focused", () => {
+    renderComponent({ counter: 9, onClick: () => {} });
+
+    const badgeButton = screen.getByRole("button");
+    const badgeText = screen.getByText("9");
+
+    badgeButton.focus();
+
+    expect(badgeText).not.toBeVisible();
+
+    badgeButton.blur();
+
+    expect(badgeText).toBeVisible();
+  });
+
+  it("should hide the counter text when the badge is hovered and it shows it when it is unhovered", async () => {
+    const user = userEvent.setup();
+
+    renderComponent({ counter: 9, onClick: () => {} });
+
+    const badgeButton = screen.getByRole("button");
+    const badgeText = screen.getByText("9");
+
+    await user.hover(badgeButton);
+
+    expect(badgeText).not.toBeVisible();
+
+    await user.unhover(badgeButton);
+
+    expect(badgeText).toBeVisible();
+  });
+
   it("should not render as a button if onClick is not set", () => {
     renderComponent({ counter: 9 });