diff --git a/packages/react/src/component-tests/IcToggleButton/IcToggleButton.cy.tsx b/packages/react/src/component-tests/IcToggleButton/IcToggleButton.cy.tsx index c8611755ed..0ab056ae20 100644 --- a/packages/react/src/component-tests/IcToggleButton/IcToggleButton.cy.tsx +++ b/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(); + 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", () => { diff --git a/packages/react/src/component-tests/IcToggleButton/IcToggleButtonTestData.tsx b/packages/react/src/component-tests/IcToggleButton/IcToggleButtonTestData.tsx index 03a43817f5..ee330d9d77 100644 --- a/packages/react/src/component-tests/IcToggleButton/IcToggleButtonTestData.tsx +++ b/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 => { ); }; + +export const ConditionalBadge = (): ReactElement => { + const [count, setCount] = useState(0); + const incrementCount = () => setCount((previous) => previous + 1); + + return ( +
+ + Button with badge + {count > 0 && ( + + )} + + +
+ ); +};