From 43facffb5a475cad4a6d8bf24370ea71dd842b55 Mon Sep 17 00:00:00 2001 From: johglove Date: Mon, 8 Jul 2024 11:50:13 -0400 Subject: [PATCH] fix: Rendered provided id for dismissed alerts --- src/components/Alert/Alert.jsx | 6 +++ src/components/Alert/Alert.test.jsx | 10 +++++ src/components/Alert/DismissibleAlert.jsx | 20 ++------- .../Alert/DismissibleAlert.test.jsx | 44 +++++++++++++++++-- src/components/util/TestUtils.js | 34 +++++++------- 5 files changed, 80 insertions(+), 34 deletions(-) diff --git a/src/components/Alert/Alert.jsx b/src/components/Alert/Alert.jsx index 630c6938..04425d46 100644 --- a/src/components/Alert/Alert.jsx +++ b/src/components/Alert/Alert.jsx @@ -7,6 +7,7 @@ import * as React from "react"; import * as PropTypes from "prop-types"; import * as Rivet from "../util/Rivet"; +import { TestUtils } from "../util/TestUtils.js"; /** * Use the alert component to show brief important messages to the user like errors, action confirmations, or system status. @@ -19,6 +20,7 @@ const Alert = ({ id = Rivet.shortuid(), className, children, + testMode = false, ...attrs }) => { const alertId = id; @@ -36,6 +38,7 @@ const Alert = ({ className="rvt-alert__dismiss" data-rvt-alert-close onClick={onDismiss} + {...(testMode && { "data-testid": TestUtils.Alert.dismiss })} > Dismiss this alert @@ -82,6 +86,8 @@ Alert.propTypes = { isOpen: PropTypes.bool, /** A function that can be called to have side-effects when the alert dismissal button is selected */ onDismiss: PropTypes.func, + /** [Developer] Adds data-testId attributes for component testing */ + testMode: PropTypes.bool, /** An extremely brief title for the alert */ title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired, /** The variant type which determines how the alert is styled */ diff --git a/src/components/Alert/Alert.test.jsx b/src/components/Alert/Alert.test.jsx index 9e6d9d50..b63d8546 100644 --- a/src/components/Alert/Alert.test.jsx +++ b/src/components/Alert/Alert.test.jsx @@ -8,6 +8,9 @@ import user from "@testing-library/user-event"; import React from "react"; import Alert from "./Alert"; +import { TestUtils } from "../util/TestUtils.js"; + +const testIds = TestUtils.Alert; describe("", () => { const titleText = "A Test Component"; @@ -116,4 +119,11 @@ describe("", () => { expect(screen.getByRole("alert")).toBeVisible(); }); }); + describe("Options", () => { + it("default is test mode off", () => { + render(); + const element = screen.queryByTestId(testIds.container); + expect(element).not.toBeInTheDocument(); + }); + }); }); diff --git a/src/components/Alert/DismissibleAlert.jsx b/src/components/Alert/DismissibleAlert.jsx index 91e3e240..f3aaed02 100644 --- a/src/components/Alert/DismissibleAlert.jsx +++ b/src/components/Alert/DismissibleAlert.jsx @@ -9,13 +9,7 @@ import * as Rivet from "../util/Rivet"; import Alert from "./Alert"; /** The `DismissibleAlert` allows the user to remove the alert from view. This component provides a close button and implements visibility state management for a standard `Alert`. */ -const DismissibleAlert = ({ - id = Rivet.shortuid(), - onDismiss = () => {}, - title, - variant, - ...other -}) => { +const DismissibleAlert = ({ onDismiss = () => {}, ...other }) => { const [isOpen, setOpen] = useState(true); const handleDismiss = () => { @@ -23,15 +17,7 @@ const DismissibleAlert = ({ onDismiss && onDismiss(); }; - return ( - - ); + return ; }; DismissibleAlert.displayName = "DismissableAlert"; @@ -40,6 +26,8 @@ DismissibleAlert.propTypes = { id: PropTypes.string, /** A function that can be called to have side-effects when the alert is dismissed */ onDismiss: PropTypes.func, + /** [Developer] Adds data-testId attributes for component testing */ + testMode: PropTypes.bool, /** An extremely brief title for the alert */ title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired, /** The variant type which determines how the alert is styled */ diff --git a/src/components/Alert/DismissibleAlert.test.jsx b/src/components/Alert/DismissibleAlert.test.jsx index 214a02f9..10701650 100644 --- a/src/components/Alert/DismissibleAlert.test.jsx +++ b/src/components/Alert/DismissibleAlert.test.jsx @@ -8,18 +8,20 @@ import user from "@testing-library/user-event"; import React from "react"; import DismissableAlert from "./DismissibleAlert"; +import { TestUtils } from "../util/TestUtils.js"; + +const testIds = TestUtils.Alert; describe("", () => { const titleText = "A Test Component"; - + const testDismissBehavior = jest.fn(); describe("Dismiss behavior", () => { it("should include dismiss button", () => { - const customDismissBehavior = jest.fn(); render( ); expect(screen.getByRole("button")).toBeVisible(); @@ -52,4 +54,40 @@ describe("", () => { expect(screen.queryByRole("alert")).toBeNull; }); }); + describe("Options", () => { + it("if an Id is set it is rendered on alert", () => { + const testId = "alert-test"; + render( + + ); + const element = screen.queryByTestId(testIds.container); + expect(element).toHaveAttribute("id", testId); + }); + it("if no on dismiss event is given, alert closes on dismiss", async () => { + render(); + const element = screen.queryByTestId(testIds.container); + expect(element).toBeVisible(); + const dismissElement = screen.queryByTestId(testIds.dismiss); + await user.click(dismissElement); + + expect(element).not.toBeVisible(); + }); + it("default is test mode off", () => { + render( + + ); + const element = screen.queryByTestId(testIds.container); + expect(element).not.toBeInTheDocument(); + }); + }); }); diff --git a/src/components/util/TestUtils.js b/src/components/util/TestUtils.js index 16b9a905..464dcf61 100644 --- a/src/components/util/TestUtils.js +++ b/src/components/util/TestUtils.js @@ -6,10 +6,14 @@ export const TestUtils = { Accordion: { container: "accordion-container", header: "accordion-header", - panel: "accordion-panel" + panel: "accordion-panel", + }, + Alert: { + container: "Alert-container", + dismiss: "Alert-dismiss", }, CallToAction: { - link: "cta-link" + link: "cta-link", }, ButtonGroup: { testId: "buttonGroup_testId" }, SegmentedButton: { testId: "segmentedButton_testId" }, @@ -43,7 +47,7 @@ export const TestUtils = { avatarUsernameTestId: "avatar-username__testid", headerWidthDivTestId: "header-width__testid", headerMenuItemContainer: "header-menuitem__container", - headerMenuItemAnchor: "header-menuitem__anchor" + headerMenuItemAnchor: "header-menuitem__anchor", }, Hero: { container: "hero-container", @@ -65,13 +69,13 @@ export const TestUtils = { container: "billboard-container", content: "billboard-content", image: "billboard-image", - title: "billboard-title" + title: "billboard-title", }, CalendarTile: { container: "calendartile-container", day: "calendartile-day", month: "calendartile-month", - year: "calendartile-year" + year: "calendartile-year", }, Card: { container: "card-container", @@ -79,24 +83,24 @@ export const TestUtils = { eyebrow: "card-eyebrow", image: "card-image", meta: "card-meta", - title: "card-title" + title: "card-title", }, Quote: { container: "quote-container", content: "quote-content", avatar: "quote-avatar", - citation: "quote-citation" + citation: "quote-citation", }, Stat: { container: "stat-container", description: "stat-description", group: "stat-group", image: "stat-image", - number: "stat-number" + number: "stat-number", }, StepIndicator: { container: "stepIndicator-container", - step: "stepIndicator-step" + step: "stepIndicator-step", }, Timeline: { testId: "timeline__testId" }, SeriesNav: { @@ -104,7 +108,7 @@ export const TestUtils = { controlLabel: "seriesNav-label", controlText: "seriesNav-text", previous: "seriesNav-previous", - next: "seriesNav-next" + next: "seriesNav-next", }, Sidenav: { container: "sidenav-container", @@ -112,12 +116,12 @@ export const TestUtils = { menu: "sidenav-menu", menuButton: "sidenav-menu-button", menuContent: "sidenav-menu-content", - menuLabel: "sidenav-menu-label" + menuLabel: "sidenav-menu-label", }, Subnav: { container: "subnav-container", itemContainer: "subnav-item", - itemLink: "subnav-item-link" + itemLink: "subnav-item-link", }, Switch: { container: "switch-container", @@ -125,12 +129,12 @@ export const TestUtils = { Tabs: { container: "tabs-container", controls: "tabs-controls", - panel: "tabs-panel" + panel: "tabs-panel", }, LinkHub: { container: "linkhub-container", itemContainer: "linkhub-description", - itemLink: "linkhub-group" - } + itemLink: "linkhub-group", + }, };