feat: add test selector for checkbox

okta · Jul 25, 2024 · 0a5db23 · 0a5db23
1 parent 451388d
commit 0a5db23
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 0 deletions.
diff --git a/packages/odyssey-react-mui/src/Checkbox.tsx b/packages/odyssey-react-mui/src/Checkbox.tsx
@@ -28,8 +28,29 @@ import {
   getControlState,
 } from "./inputUtils";
 import { FieldComponentProps } from "./FieldComponentProps";
+import { type FeatureTestSelector } from "./test-selectors";
 import { Typography } from "./Typography";
 
+export const CheckboxTestSelectors = {
+  // feature: {
+  //   hint: {
+  //     selector: {
+  //       method: "ByText",
+  //       templateVariableNames: ["hint"],
+  //       text: "${hint}",
+  //     },
+  //   }
+  // },
+  selector: {
+    method: "ByRole",
+    options: {
+      name: "${label}",
+    },
+    role: "checkbox",
+    templateVariableNames: ["label"],
+  },
+} as const satisfies FeatureTestSelector;
+
 export const checkboxValidityValues = ["valid", "invalid", "inherit"] as const;
 
 export type CheckboxProps = {

diff --git a/packages/odyssey-react-mui/src/test-selectors/odysseyTestSelectors.ts b/packages/odyssey-react-mui/src/test-selectors/odysseyTestSelectors.ts
@@ -12,11 +12,13 @@
 
 import { type FeatureTestSelector } from "./featureTestSelector";
 import { CalloutTestSelectors } from "../Callout";
+import { CheckboxTestSelectors } from "../Checkbox";
 import { TabsTestSelectors } from "../Tabs";
 import { TextFieldTestSelectors } from "../TextField";
 
 export const odysseyTestSelectors = {
   Callout: CalloutTestSelectors,
+  Checkbox: CheckboxTestSelectors,
   Tabs: TabsTestSelectors,
   TextField: TextFieldTestSelectors,
 } as const satisfies Record<string, FeatureTestSelector>;
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Checkbox/Checkbox.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Checkbox/Checkbox.stories.tsx
@@ -18,6 +18,7 @@ import {
 import { Meta, StoryObj } from "@storybook/react";
 import { userEvent, within } from "@storybook/testing-library";
 import { expect } from "@storybook/jest";
+// import { queryOdysseySelector } from "@okta/odyssey-react-mui/test-selectors";
 
 import { fieldComponentPropsMetaData } from "../../../fieldComponentPropsMetaData";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
@@ -261,6 +262,17 @@ export const Hint: StoryObj<typeof Checkbox> = {
   },
   play: async ({ canvasElement, step }) => {
     await checkTheBox({ canvasElement, step })("Checkbox Hint");
+    // await step("has visible hint", async () => {
+    //   const element = queryOdysseySelector({
+    //     canvas: within(canvasElement),
+    //     componentName: "Checkbox",
+    //     templateArgs: {
+    //       label:"I agree to the terms and conditions",
+    //     }
+    //   }).element;
+
+    //   expect(element).toHaveAccessibleDescription(/Really helpful hint/);
+    // });
   },
 };