From d73cff94c98011db12048509d2547bc29516368c Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Wed, 8 Nov 2023 14:33:54 -0800 Subject: [PATCH] Add tests for buttons with icons --- .../custom-snapshot.test.tsx.snap | 96 +++--- .../__tests__/button-with-icon.test.tsx | 274 ++++++++++++++++++ .../src/components/__tests__/button.test.tsx | 94 +----- .../src/components/button-core.tsx | 6 +- 4 files changed, 333 insertions(+), 137 deletions(-) create mode 100644 packages/wonder-blocks-button/src/components/__tests__/button-with-icon.test.tsx diff --git a/packages/wonder-blocks-button/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap b/packages/wonder-blocks-button/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap index 943aa2151..84f8c927c 100644 --- a/packages/wonder-blocks-button/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap +++ b/packages/wonder-blocks-button/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap @@ -284,7 +284,7 @@ exports[`ButtonCore kind:primary color:default size:large light:false disabled 1 "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -360,7 +360,7 @@ exports[`ButtonCore kind:primary color:default size:large light:false focused 1` "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -436,7 +436,7 @@ exports[`ButtonCore kind:primary color:default size:large light:false hovered 1` "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -512,7 +512,7 @@ exports[`ButtonCore kind:primary color:default size:large light:false pressed 1` "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -587,7 +587,7 @@ exports[`ButtonCore kind:primary color:default size:large light:true disabled 1` "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -663,7 +663,7 @@ exports[`ButtonCore kind:primary color:default size:large light:true focused 1`] "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -739,7 +739,7 @@ exports[`ButtonCore kind:primary color:default size:large light:true hovered 1`] "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -815,7 +815,7 @@ exports[`ButtonCore kind:primary color:default size:large light:true pressed 1`] "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -2102,7 +2102,7 @@ exports[`ButtonCore kind:primary color:destructive size:large light:false disabl "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -2178,7 +2178,7 @@ exports[`ButtonCore kind:primary color:destructive size:large light:false focuse "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -2254,7 +2254,7 @@ exports[`ButtonCore kind:primary color:destructive size:large light:false hovere "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -2330,7 +2330,7 @@ exports[`ButtonCore kind:primary color:destructive size:large light:false presse "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -2405,7 +2405,7 @@ exports[`ButtonCore kind:primary color:destructive size:large light:true disable "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -2481,7 +2481,7 @@ exports[`ButtonCore kind:primary color:destructive size:large light:true focused "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -2557,7 +2557,7 @@ exports[`ButtonCore kind:primary color:destructive size:large light:true hovered "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -2633,7 +2633,7 @@ exports[`ButtonCore kind:primary color:destructive size:large light:true pressed "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -4186,7 +4186,7 @@ exports[`ButtonCore kind:secondary color:default size:large light:false disabled "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -4264,7 +4264,7 @@ exports[`ButtonCore kind:secondary color:default size:large light:false focused "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -4342,7 +4342,7 @@ exports[`ButtonCore kind:secondary color:default size:large light:false hovered "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -4420,7 +4420,7 @@ exports[`ButtonCore kind:secondary color:default size:large light:false pressed "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -4501,7 +4501,7 @@ exports[`ButtonCore kind:secondary color:default size:large light:true disabled "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -4579,7 +4579,7 @@ exports[`ButtonCore kind:secondary color:default size:large light:true focused 1 "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -4657,7 +4657,7 @@ exports[`ButtonCore kind:secondary color:default size:large light:true hovered 1 "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -4735,7 +4735,7 @@ exports[`ButtonCore kind:secondary color:default size:large light:true pressed 1 "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -6076,7 +6076,7 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:false disa "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -6154,7 +6154,7 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:false focu "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -6232,7 +6232,7 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:false hove "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -6310,7 +6310,7 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:false pres "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -6391,7 +6391,7 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:true disab "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -6469,7 +6469,7 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:true focus "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -6547,7 +6547,7 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:true hover "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -6625,7 +6625,7 @@ exports[`ButtonCore kind:secondary color:destructive size:large light:true press "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "textOverflow": "ellipsis", @@ -8232,7 +8232,7 @@ exports[`ButtonCore kind:tertiary color:default size:large light:false disabled "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "position": "relative", @@ -8318,7 +8318,7 @@ exports[`ButtonCore kind:tertiary color:default size:large light:false focused 1 "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "position": "relative", @@ -8404,7 +8404,7 @@ exports[`ButtonCore kind:tertiary color:default size:large light:false hovered 1 "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "position": "relative", @@ -8485,7 +8485,7 @@ exports[`ButtonCore kind:tertiary color:default size:large light:false pressed 1 "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "position": "relative", @@ -8561,7 +8561,7 @@ exports[`ButtonCore kind:tertiary color:default size:large light:true disabled 1 "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "position": "relative", @@ -8647,7 +8647,7 @@ exports[`ButtonCore kind:tertiary color:default size:large light:true focused 1` "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "position": "relative", @@ -8733,7 +8733,7 @@ exports[`ButtonCore kind:tertiary color:default size:large light:true hovered 1` "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "position": "relative", @@ -8814,7 +8814,7 @@ exports[`ButtonCore kind:tertiary color:default size:large light:true pressed 1` "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "position": "relative", @@ -10206,7 +10206,7 @@ exports[`ButtonCore kind:tertiary color:destructive size:large light:false disab "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "position": "relative", @@ -10292,7 +10292,7 @@ exports[`ButtonCore kind:tertiary color:destructive size:large light:false focus "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "position": "relative", @@ -10378,7 +10378,7 @@ exports[`ButtonCore kind:tertiary color:destructive size:large light:false hover "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "position": "relative", @@ -10459,7 +10459,7 @@ exports[`ButtonCore kind:tertiary color:destructive size:large light:false press "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "position": "relative", @@ -10535,7 +10535,7 @@ exports[`ButtonCore kind:tertiary color:destructive size:large light:true disabl "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "position": "relative", @@ -10621,7 +10621,7 @@ exports[`ButtonCore kind:tertiary color:destructive size:large light:true focuse "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "position": "relative", @@ -10707,7 +10707,7 @@ exports[`ButtonCore kind:tertiary color:destructive size:large light:true hovere "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "position": "relative", @@ -10788,7 +10788,7 @@ exports[`ButtonCore kind:tertiary color:destructive size:large light:true presse "fontFamily": "Lato, "Noto Sans", sans-serif", "fontSize": 18, "fontWeight": 700, - "lineHeight": 20, + "lineHeight": "20px", "overflow": "hidden", "pointerEvents": "none", "position": "relative", diff --git a/packages/wonder-blocks-button/src/components/__tests__/button-with-icon.test.tsx b/packages/wonder-blocks-button/src/components/__tests__/button-with-icon.test.tsx new file mode 100644 index 000000000..ba726672d --- /dev/null +++ b/packages/wonder-blocks-button/src/components/__tests__/button-with-icon.test.tsx @@ -0,0 +1,274 @@ +/** + * Tests for Wonder Blocks Button with icons. + * The rest of the button tests can be found in button.test.tsx. + */ + +import * as React from "react"; +import {render, screen} from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import plus from "@phosphor-icons/core/regular/plus.svg"; + +import {ThemeSwitcherContext, tokens} from "@khanacademy/wonder-blocks-theming"; + +import Button from "../button"; + +describe("button with icon", () => { + test("start icon should be hidden from Screen Readers", () => { + // Arrange + render( + , + ); + + // Act + const icon = screen.getByTestId("button-focus-test-start-icon"); + + // Assert + expect(icon).toHaveAttribute("aria-hidden", "true"); + }); + + test("end icon should be hidden from Screen Readers", () => { + // Arrange + render( + , + ); + + // Act + const icon = screen.getByTestId("button-focus-test-end-icon"); + + // Assert + expect(icon).toHaveAttribute("aria-hidden", "true"); + }); + + /** + * Primary button + */ + + test("icon is displayed when button contains startIcon", () => { + // Arrange + render( + , + ); + + // Act + const icon = screen.getByTestId("button-focus-test-start-icon"); + + // Assert + expect(icon).toBeInTheDocument(); + expect(icon).toHaveAttribute("aria-hidden", "true"); + }); + + test("icon is displayed when button contains endIcon", () => { + // Arrange + render( + , + ); + + // Act + const icon = screen.getByTestId("button-focus-test-end-icon"); + + // Assert + expect(icon).toBeInTheDocument(); + expect(icon).toHaveAttribute("aria-hidden", "true"); + }); + + test("both icons are displayed when button contains startIcon and endIcon", () => { + // Arrange + render( + , + ); + + // Act + const startIcon = screen.getByTestId("button-focus-test-start-icon"); + const endIcon = screen.getByTestId("button-focus-test-end-icon"); + + // Assert + expect(startIcon).toBeInTheDocument(); + expect(endIcon).toBeInTheDocument(); + }); + + /** + * Secondary button + */ + + test("icon is displayed when secondary button contains startIcon", () => { + // Arrange + render( + , + ); + + // Act + const icon = screen.getByTestId("button-icon-test-start-icon"); + + // Assert + expect(icon).toBeInTheDocument(); + expect(icon).toHaveAttribute("aria-hidden", "true"); + }); + + test("icon is displayed when secondary button contains endIcon", () => { + // Arrange + render( + , + ); + + // Act + const icon = screen.getByTestId("button-icon-test-end-icon"); + + // Assert + expect(icon).toBeInTheDocument(); + expect(icon).toHaveAttribute("aria-hidden", "true"); + }); + + test("default theme secondary button icon has no hover style", () => { + // Arrange + render( + , + ); + + // Act + const button = screen.getByTestId("button-icon-test"); + const iconWrapper = screen.getByTestId( + "button-icon-test-end-icon-wrapper", + ); + userEvent.hover(button); + + // Assert + expect(iconWrapper).toHaveStyle(`backgroundColor: transparent`); + }); + + test("Khanmigo secondary button icon has hover style", () => { + // Arrange + render( + + + , + ); + + // Act + const button = screen.getByTestId("button-icon-test"); + const iconWrapper = screen.getByTestId( + "button-icon-test-end-icon-wrapper", + ); + userEvent.hover(button); + + // Assert + expect(iconWrapper).toHaveStyle( + `backgroundColor: ${tokens.color.fadedBlue16}`, + ); + }); + + /** + * Tertiary button + */ + + test("icon is displayed when tertiary button contains startIcon", () => { + // Arrange + render( + , + ); + + // Act + const icon = screen.getByTestId("button-focus-test-start-icon"); + + // Assert + expect(icon).toBeInTheDocument(); + expect(icon).toHaveAttribute("aria-hidden", "true"); + }); + + test("icon is displayed when tertiary button contains endIcon", () => { + // Arrange + render( + , + ); + + // Act + const icon = screen.getByTestId("button-focus-test-end-icon"); + + // Assert + expect(icon).toBeInTheDocument(); + expect(icon).toHaveAttribute("aria-hidden", "true"); + }); + + test("default theme tertiary button icon has no hover style", () => { + // Arrange + render( + , + ); + + // Act + const button = screen.getByTestId("button-icon-test"); + const iconWrapper = screen.getByTestId( + "button-icon-test-end-icon-wrapper", + ); + userEvent.hover(button); + + // Assert + expect(iconWrapper).toHaveStyle(`backgroundColor: transparent`); + }); + + test("Khanmigo tertiary button icon has hover style", () => { + // Arrange + render( + + + , + ); + + // Act + const button = screen.getByTestId("button-icon-test"); + const iconWrapper = screen.getByTestId( + "button-icon-test-end-icon-wrapper", + ); + userEvent.hover(button); + + // Assert + expect(iconWrapper).toHaveStyle( + `backgroundColor: ${tokens.color.fadedBlue16}`, + ); + }); +}); diff --git a/packages/wonder-blocks-button/src/components/__tests__/button.test.tsx b/packages/wonder-blocks-button/src/components/__tests__/button.test.tsx index ed8bee5a9..d4d41d119 100644 --- a/packages/wonder-blocks-button/src/components/__tests__/button.test.tsx +++ b/packages/wonder-blocks-button/src/components/__tests__/button.test.tsx @@ -1,8 +1,13 @@ +/** + * Test for Wonder Blocks Button component. + * + * The test for buttons with icons are in a separate file + * (button-with-icon.test.tsx) since this one is already too long. + */ import * as React from "react"; import {MemoryRouter, Route, Switch} from "react-router-dom"; import {render, screen, waitFor} from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import plus from "@phosphor-icons/core/regular/plus.svg"; import Button from "../button"; @@ -828,91 +833,4 @@ describe("Button", () => { }).not.toThrow(); }); }); - - describe("button with icon", () => { - test("icon is displayed when button contains startIcon", () => { - // Arrange - render( - , - ); - - // Act - const icon = screen.getByTestId("button-focus-test-start-icon"); - - // Assert - expect(icon).toBeInTheDocument(); - expect(icon).toHaveAttribute("aria-hidden", "true"); - }); - - test("icon is displayed when button contains endIcon", () => { - // Arrange - render( - , - ); - - // Act - const icon = screen.getByTestId("button-focus-test-end-icon"); - - // Assert - expect(icon).toBeInTheDocument(); - expect(icon).toHaveAttribute("aria-hidden", "true"); - }); - - test("both icons are displayed when button contains startIcon and endIcon", () => { - // Arrange - render( - , - ); - - // Act - const startIcon = screen.getByTestId( - "button-focus-test-start-icon", - ); - const endIcon = screen.getByTestId("button-focus-test-end-icon"); - - // Assert - expect(startIcon).toBeInTheDocument(); - expect(endIcon).toBeInTheDocument(); - }); - - test("start icon should be hidden from Screen Readers", () => { - // Arrange - render( - , - ); - - // Act - const icon = screen.getByTestId("button-focus-test-start-icon"); - - // Assert - expect(icon).toHaveAttribute("aria-hidden", "true"); - }); - - test("end icon should be hidden from Screen Readers", () => { - // Arrange - render( - , - ); - - // Act - const icon = screen.getByTestId("button-focus-test-end-icon"); - - // Assert - expect(icon).toHaveAttribute("aria-hidden", "true"); - }); - }); }); diff --git a/packages/wonder-blocks-button/src/components/button-core.tsx b/packages/wonder-blocks-button/src/components/button-core.tsx index 6bdb7586b..4158d80d9 100644 --- a/packages/wonder-blocks-button/src/components/button-core.tsx +++ b/packages/wonder-blocks-button/src/components/button-core.tsx @@ -168,6 +168,9 @@ const ButtonCore: React.ForwardRefExoticComponent< )} {endIcon && ( = (theme) => ({ const styles: Record = {}; -const _generateStyles = ( +// export for testing only +export const _generateStyles = ( buttonColor = "default", kind: "primary" | "secondary" | "tertiary", light: boolean,