test(react): add test for updating badge slot on toggle button

add test for conditionally rendering badge in badge slot of toggle button

test #1880

packages/react/src/component-tests/IcToggleButton/IcToggleButton.cy.tsx

@@ -13,6 +13,7 @@ import {
 } from "../utils/constants";
 import { setThresholdBasedOnEnv } from "../../../cypress/utils/helpers";
 import {
+  ConditionalBadge,
   Dark,
   IconPlacementRight,
   IconPlacementTop,
@@ -94,6 +95,14 @@ describe("IcToggleButton end-to-end tests", () => {
     cy.clickOnButton(IC_TOGGLE_BUTTON_SELECTOR);
     cy.get(WIN_CONSOLE_SPY).should(NOT_BE_CALLED_ONCE);
   });
+
+  it("should render elements passed into slots after initial render", () => {
+    mount(<ConditionalBadge />);
+    cy.checkHydrated(IC_TOGGLE_BUTTON_SELECTOR);
+    cy.get("ic-badge").should("not.exist");
+    cy.get("button").click();
+    cy.get("ic-badge").should("be.visible");
+  });
 });
 
 describe("IcToggleButton visual regression and a11y tests", () => {

packages/react/src/component-tests/IcToggleButton/IcToggleButtonTestData.tsx

@@ -1,5 +1,5 @@
-import React, { ReactElement } from "react";
-import { IcToggleButton } from "../../components";
+import React, { ReactElement, useState } from "react";
+import { IcBadge, IcToggleButton } from "../../components";
 import { SlottedSVG } from "../../react-component-lib/slottedSVG";
 
 const ReusableSlottedIcon = (): ReactElement => (
@@ -165,3 +165,29 @@ export const Light = (): ReactElement => {
     </div>
   );
 };
+
+export const ConditionalBadge = (): ReactElement => {
+  const [count, setCount] = useState(0);
+  const incrementCount = () => setCount((previous) => previous + 1);
+
+  return (
+    <div
+      style={{
+        padding: "var(--ic-space-sm)",
+      }}
+    >
+      <IcToggleButton>
+        Button with badge
+        {count > 0 && (
+          <IcBadge
+            slot="badge"
+            variant="info"
+            textLabel={`${count}`}
+            maxNumber={99}
+          />
+        )}
+      </IcToggleButton>
+      <button onClick={incrementCount}>Increment count</button>
+    </div>
+  );
+};