fix: Rendered provided id for dismissed alerts

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 })}
       >
         <span className="rvt-sr-only">Dismiss this alert</span>
         <svg
@@ -64,6 +67,7 @@ const Alert = ({
       role="alert"
       aria-labelledby={titleId}
       data-rvt-alert={variant}
+      {...(testMode && { "data-testid": TestUtils.Alert.container })}
       {...ariaProps}
       {...attrs}
     >
@@ -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 */

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("<Alert />", () => {
   const titleText = "A Test Component";
@@ -116,4 +119,11 @@ describe("<Alert />", () => {
       expect(screen.getByRole("alert")).toBeVisible();
     });
   });
+  describe("Options", () => {
+    it("default is test mode off", () => {
+      render(<Alert title={titleText} variant="info" />);
+      const element = screen.queryByTestId(testIds.container);
+      expect(element).not.toBeInTheDocument();
+    });
+  });
 });

src/components/Alert/DismissibleAlert.jsx

@@ -9,29 +9,15 @@ 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 = () => {
     setOpen(false);
     onDismiss && onDismiss();
   };
 
-  return (
-    <Alert
-      title={title}
-      variant={variant}
-      onDismiss={handleDismiss}
-      isOpen={isOpen}
-      {...other}
-    />
-  );
+  return <Alert onDismiss={handleDismiss} isOpen={isOpen} {...other} />;
 };
 
 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 */

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("<DismissableAlert />", () => {
   const titleText = "A Test Component";
-
+  const testDismissBehavior = jest.fn();
   describe("Dismiss behavior", () => {
     it("should include dismiss button", () => {
-      const customDismissBehavior = jest.fn();
       render(
         <DismissableAlert
           title={titleText}
           variant="info"
-          onDismiss={customDismissBehavior}
+          onDismiss={testDismissBehavior}
         />
       );
       expect(screen.getByRole("button")).toBeVisible();
@@ -52,4 +54,40 @@ describe("<DismissableAlert />", () => {
       expect(screen.queryByRole("alert")).toBeNull;
     });
   });
+  describe("Options", () => {
+    it("if an Id is set it is rendered on alert", () => {
+      const testId = "alert-test";
+      render(
+        <DismissableAlert
+          id={testId}
+          onDismiss={testDismissBehavior}
+          testMode
+          title={titleText}
+          variant="info"
+        />
+      );
+      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(<DismissableAlert testMode title={titleText} variant="info" />);
+      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(
+        <DismissableAlert
+          onDismiss={testDismissBehavior}
+          title={titleText}
+          variant="info"
+        />
+      );
+      const element = screen.queryByTestId(testIds.container);
+      expect(element).not.toBeInTheDocument();
+    });
+  });
 });

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,72 +69,72 @@ 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",
     content: "card-content",
     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: {
     container: "seriesNav-container",
     controlLabel: "seriesNav-label",
     controlText: "seriesNav-text",
     previous: "seriesNav-previous",
-    next: "seriesNav-next"
+    next: "seriesNav-next",
   },
   Sidenav: {
     container: "sidenav-container",
     item: "sidenav-item",
     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",
   },
   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",
+  },
 };