feat: add test selector for banner component

packages/odyssey-react-mui/src/Banner.tsx

@@ -14,6 +14,7 @@ import { memo } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert, AlertColor, AlertTitle, AlertProps } from "@mui/material";
 
+import { type FeatureTestSelector } from "./test-selectors";
 import type { HtmlProps } from "./HtmlProps";
 import { Link } from "./Link";
 import { ScreenReaderText } from "./ScreenReaderText";
@@ -26,6 +27,33 @@ export const bannerSeverityValues: AlertColor[] = [
   "error",
 ];
 
+export const BannerTestSelectors = {
+  feature: {
+    link: {
+      selector: {
+        method: "ByRole",
+        options: {
+          name: "${linkText}",
+        },
+        role: "link",
+        templateVariableNames: ["linkText"],
+      },
+    },
+    close: {
+      selector: {
+        method: "ByLabelText",
+        text: "${labelText}",
+        templateVariableNames: ["labelText"],
+      },
+    },
+  },
+  selector: {
+    method: "ByRole",
+    role: "${role}",
+    templateVariableNames: ["role"],
+  },
+} as const satisfies FeatureTestSelector;
+
 export type BannerProps = {
   /**
    * If linkUrl is not undefined, this is the text of the link.

packages/odyssey-react-mui/src/test-selectors/odysseyTestSelectors.ts

@@ -11,11 +11,13 @@
  */
 
 import { type FeatureTestSelector } from "./featureTestSelector";
+import { BannerTestSelectors } from "../Banner";
 import { CalloutTestSelectors } from "../Callout";
 import { TabsTestSelectors } from "../Tabs";
 import { TextFieldTestSelectors } from "../TextField";
 
 export const odysseyTestSelectors = {
+  Banner: BannerTestSelectors,
   Callout: CalloutTestSelectors,
   Tabs: TabsTestSelectors,
   TextField: TextFieldTestSelectors,

packages/odyssey-storybook/src/components/odyssey-mui/Banner/Banner.stories.tsx

@@ -18,6 +18,7 @@ import {
 } from "@okta/odyssey-react-mui";
 import { Meta, StoryObj } from "@storybook/react";
 
+import { queryOdysseySelector } from "@okta/odyssey-react-mui/test-selectors";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 import { userEvent, within } from "@storybook/testing-library";
 import { expect, jest } from "@storybook/jest";
@@ -145,6 +146,20 @@ export const Linked: StoryObj<BannerProps> = {
       await expect(link?.tagName).toBe("A");
       await expect(link?.href).toBe(`${link?.baseURI}#anchor`);
     });
+
+    await step("has visible link", async () => {
+      const element = queryOdysseySelector({
+        canvas: within(canvasElement),
+        componentName: "Banner",
+        templateArgs: {
+          role: "status",
+        },
+      }).select?.("link", {
+        linkText: "View report",
+      }).element;
+
+      expect(element).toBeVisible();
+    });
   },
 };
 
@@ -161,5 +176,19 @@ export const Dismissible: StoryObj<BannerProps> = {
       await expect(args.onClose).toHaveBeenCalled();
       await axeRun("Dismissible Banner");
     });
+
+    await step("has visible close button", async () => {
+      const element = queryOdysseySelector({
+        canvas: within(canvasElement),
+        componentName: "Banner",
+        templateArgs: {
+          role: "alert",
+        },
+      }).select?.("close", {
+        labelText: "Close",
+      }).element;
+
+      expect(element).toBeVisible();
+    });
   },
 };