Merge pull request #384 from eccenca/bugfix/numberZeroBadge-CMEM-7353

Display number zero badge correctly on icon button (CMEM-7353)

Author: fiorsaoirse

CHANGELOG.md

@@ -62,6 +62,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<MultiSuggestField />`
     -   `onSelection` now sets `newlySelected` only for add actions and no longer sets it to the last element
     -   border of the BlueprintJS `Tag` elements were fixed
+-   `<Button />`
+    -   badge is correctly displayed when `badge={0}`
 -   Focus outlines
     -   we use again bold focus outlines for input elements
     -   they are also used for clickable elements that are focused via keyboard (tab navigation)

src/components/Badge/Badge.test.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { Badge } from "../../../index";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+describe("Badge", () => {
+    it("should shorten a number badge exceeding maxLength to a 9+ notation", () => {
+        const { container } = render(<Badge maxLength={2}>{42}</Badge>);
+        const badge = container.querySelector(`.${eccgui}-badge__tag`);
+        expect(badge).not.toBeNull();
+        expect(badge).toHaveTextContent("9+");
+    });
+    it("should apply maxWidth style to a string badge when maxLength is set", () => {
+        const { container } = render(<Badge maxLength={4}>forty two</Badge>);
+        const tag = container.querySelector(`.${eccgui}-badge__tag`);
+        expect(tag).not.toBeNull();
+        expect((tag as HTMLElement).style.maxWidth).toBe("calc((3em + 3ch)/2)");
+    });
+});

src/components/Button/Button.test.tsx

@@ -3,6 +3,7 @@ import { render, screen } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
 
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Icon from "../Icon/Icon";
 
 import Button from "./Button";
@@ -21,7 +22,7 @@ describe("Button", () => {
             </Button>
         );
         expect(screen.getByRole("button").lastChild).toEqual(screen.getByText(/left icon/i));
-        expect(container.getElementsByClassName("eccgui-icon").length).toBe(1);
+        expect(container.getElementsByClassName(`${eccgui}-icon`).length).toBe(1);
     });
 
     it("should have icon at the right after the text", () => {
@@ -31,6 +32,19 @@ describe("Button", () => {
             </Button>
         );
         expect(screen.getByRole("button").firstChild).toEqual(screen.getByText(/right icon/i));
-        expect(container.getElementsByClassName("eccgui-icon").length).toBe(1);
+        expect(container.getElementsByClassName(`${eccgui}-icon`).length).toBe(1);
+    });
+
+    it("should render badge markup with correct content when used on an icon button", () => {
+        const { container } = render(<Button name="item-info" badge={"badge content"} text={"Cation label"} />);
+        const badge = container.querySelector(`.${eccgui}-badge`);
+        expect(badge).not.toBeNull();
+        expect(badge).toHaveTextContent("badge content");
+    });
+    it("should render badge markup with correct content when batch displays a 0 (zero) number on an icon button", () => {
+        const { container } = render(<Button name="item-info" badge={0} text={"Cation label"} />);
+        const badge = container.querySelector(`.${eccgui}-badge`);
+        expect(badge).not.toBeNull();
+        expect(badge).toHaveTextContent("0");
     });
 });

src/components/Button/Button.tsx

@@ -113,7 +113,7 @@ export const Button = ({
             rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} /> : rightIcon}
         >
             {children}
-            {badge && (
+            {typeof badge !== "undefined" && (
                 <Badge
                     children={badge}
                     {...constructBadgeProperties({