fix: Update Test Selector types and improve functionality (#2333)

OKTA-794668 fix: selecting controlled elements
feat: adds ability to have type-safe roles in queries
fix: updates Callout test selectors
test
test 2
test 3
test 4
test 5
fix: reconfigured querySelector with correct types
fix: improved test selectors API
fix: adds typing for getAccessibleText
fix: cleanup test selectors code
fix: removes rxjs
fix: prettify code
fix: fixed test error in Callout stories
fix: removes explicit odysseyTestSelectors file
fix: updates ElementError logging with message denoting ElementError
fix: defaults `ChildQueryMethod` as `"get"` to match other instances
fix: minor fix to change Options key to never where it wouldn't exist anyway
fix: adds comment around `interpolateString` to make it clear how dangerous it could be
fix: marks interpolateString as @deprecated as it will probably be removed in a future PR
fix: removes unused type in querySelector
fix: massively renamed TestSelector types to be easily understood
fix: moves element selection outside of querySelector
fix: adds missing accessibleText to Select
fix: renames testSelectors to testSelector in all supported components
Merge branch 'main' into OKTA-794668-test-selectors-functionality
fix: fixes small type issues and Autocomplete merge issue
fix: fixes broken Select interaction test

packages/odyssey-react-mui/package.json

@@ -81,6 +81,7 @@
     "@okta/odyssey-design-tokens": "workspace:^",
     "@types/luxon": "^3.4.2",
     "date-fns": "^2.30.0",
+    "dom-accessibility-api": "^0.7.0",
     "i18next": "^23.8.2",
     "luxon": "^3.4.4",
     "material-react-table": "^2.11.3",

packages/odyssey-react-mui/scripts/generateTestSelectorsJson.ts

@@ -16,7 +16,7 @@ import { join } from "node:path";
 const distDirectory = join(__dirname, "../dist/test-selectors");
 
 import("../src/test-selectors/index").then(
-  ({ odysseyTestSelectors: testSelector }) =>
+  ({ odysseyTestSelector: testSelector }) =>
     mkdir(distDirectory)
       .catch(() => null)
       .then(() =>

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

@@ -43,6 +43,38 @@ import {
   useInputValues,
   getControlState,
 } from "./inputUtils";
+import { TestSelector } from "./test-selectors";
+
+export const AutocompleteTestSelector = {
+  accessibleText: {
+    errorMessage: "errorMessage",
+    hint: "description",
+    label: "label",
+  },
+  children: {
+    list: {
+      children: {
+        listItem: {
+          elementSelector: {
+            method: "ByRole",
+            options: {
+              label: "name",
+            },
+            role: "option",
+          },
+        },
+      },
+      isControlledElement: true,
+    },
+  },
+  elementSelector: {
+    method: "ByRole",
+    options: {
+      label: "name",
+    },
+    role: "combobox",
+  },
+} as const satisfies TestSelector;
 
 type SetItemSize = (size: number) => void;
 

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

@@ -20,46 +20,34 @@ import {
   DesignTokens,
   useOdysseyDesignTokens,
 } from "./OdysseyDesignTokensContext";
-import { type FeatureTestSelector } from "./test-selectors";
+import { type TestSelector } from "./test-selectors";
 import { Paragraph } from "./Typography";
 import { useUniqueId } from "./useUniqueId";
 
-export const CalloutTestSelectors = {
-  feature: {
+export const CalloutTestSelector = {
+  accessibleText: {
+    text: "description",
+    title: "label",
+  },
+  children: {
     link: {
-      selector: {
+      elementSelector: {
         method: "ByRole",
         options: {
-          name: "${linkText}",
+          linkText: "name",
         },
         role: "link",
-        templateVariableNames: ["linkText"],
-      },
-    },
-    text: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["text"],
-        text: "${text}",
-      },
-    },
-    title: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["title"],
-        text: "${title}",
       },
     },
   },
-  selector: {
+  elementSelector: {
     method: "ByRole",
     options: {
-      name: "${title}",
+      title: "name",
     },
-    role: "${role}",
-    templateVariableNames: ["role", "title"],
+    role: ["alert", "status"],
   },
-} as const satisfies FeatureTestSelector;
+} as const satisfies TestSelector;
 
 export const calloutRoleValues = ["status", "alert"] as const;
 export const calloutSeverityValues = [

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

@@ -49,6 +49,44 @@ import {
   useOdysseyDesignTokens,
   DesignTokens,
 } from "./OdysseyDesignTokensContext";
+import { TestSelector } from "./test-selectors";
+
+export const SelectTestSelector = {
+  accessibleText: {
+    errorMessage: "errorMessage",
+    hint: "description",
+    label: "label",
+  },
+  children: {
+    list: {
+      accessibleText: {
+        label: "label",
+      },
+      children: {
+        listItem: {
+          accessibleText: {
+            label: "label",
+          },
+          elementSelector: {
+            method: "ByRole",
+            options: {
+              label: "name",
+            },
+            role: "option",
+          },
+        },
+      },
+      isControlledElement: true,
+    },
+  },
+  elementSelector: {
+    method: "ByRole",
+    options: {
+      label: "name",
+    },
+    role: "combobox",
+  },
+} as const satisfies TestSelector;
 
 export type SelectOption = {
   text: string;

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

@@ -30,30 +30,28 @@ import { Badge, BadgeProps } from "./Badge";
 import { Box } from "./Box";
 import { HtmlProps } from "./HtmlProps";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
-import { type FeatureTestSelector } from "./test-selectors";
+import { type TestSelector } from "./test-selectors";
 
-export const TabsTestSelectors = {
-  feature: {
+export const TabsTestSelector = {
+  children: {
     tabItem: {
-      selector: {
+      elementSelector: {
         method: "ByRole",
         options: {
-          name: "${label}",
+          label: "name",
         },
-        templateVariableNames: ["label"],
         role: "tab",
       },
     },
   },
-  selector: {
+  elementSelector: {
     method: "ByRole",
     options: {
-      name: "${ariaLabel}",
+      label: "name",
     },
     role: "tablist",
-    templateVariableNames: ["ariaLabel"],
   },
-} as const satisfies FeatureTestSelector;
+} as const satisfies TestSelector;
 
 export type TabItemProps = {
   /**

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

@@ -30,56 +30,33 @@ import {
 import { Field } from "./Field";
 import { HtmlProps } from "./HtmlProps";
 import { FocusHandle, useInputValues, getControlState } from "./inputUtils";
-import { type FeatureTestSelector } from "./test-selectors";
+import { type TestSelector } from "./test-selectors";
 
-export const TextFieldTestSelectors = {
-  feature: {
-    description: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["hint"],
-        text: "${hint}",
-      },
-    },
-    errorMessage: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["errorMessage"],
-        text: "${errorMessage}",
-      },
-    },
-    input: {
-      selector: {
-        method: "ByRole",
-        options: {
-          name: "${label}",
-        },
-        role: "textbox",
-        templateVariableNames: ["label"],
-      },
-    },
-    label: {
-      selector: {
-        method: "ByRole",
-        options: {
-          name: "${label}",
-        },
-        role: "LabelText",
-        templateVariableNames: ["label"],
-      },
-    },
+export const TextFieldTestSelector = {
+  accessibleText: {
+    errorMessage: "errorMessage",
+    hint: "description",
+    label: "label",
+  },
+  children: {
     link: {
-      selector: {
+      elementSelector: {
         method: "ByRole",
         options: {
-          name: "${label}",
+          label: "name",
         },
-        templateVariableNames: ["label"],
         role: "link",
       },
     },
   },
-} as const satisfies FeatureTestSelector;
+  elementSelector: {
+    method: "ByRole",
+    options: {
+      label: "name",
+    },
+    role: "textbox",
+  },
+} as const satisfies TestSelector;
 
 export const textFieldTypeValues = [
   "email",