fix(odyssey-react-mui): fixing tests to use getByRole and canvas

okta · Sep 27, 2023 · cd7feed · cd7feed
1 parent aa85df0
commit cd7feed
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/packages/odyssey-react-mui/src/PasswordField.tsx b/packages/odyssey-react-mui/src/PasswordField.tsx
@@ -151,6 +151,7 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
             )
           }
           id={id}
+          inputProps={{ role: "textbox" }}
           name={nameOverride ?? id}
           onChange={onChange}
           onFocus={onFocus}

diff --git a/...ages/odyssey-storybook/src/components/odyssey-mui/PasswordField/PasswordField.stories.tsx b/...ages/odyssey-storybook/src/components/odyssey-mui/PasswordField/PasswordField.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
-import { screen } from "@storybook/testing-library";
+import { within } from "@storybook/testing-library";
 import {
   PasswordField,
   PasswordFieldProps,
@@ -86,29 +86,30 @@ const storybookMeta: Meta<PasswordFieldProps> = {
 export default storybookMeta;
 
 export const Default: StoryObj<PasswordFieldProps> = {
-  play: async ({ args, canvasElement, step }) => {
+  play: async ({ canvasElement, step }) => {
     await step("toggle password", async () => {
-      const fieldElement = canvasElement.querySelector(
-        `#${args.id}`
-      ) as HTMLInputElement;
-      expect(fieldElement.type).toBe("password");
+      const canvas = within(canvasElement);
+      const fieldElement = canvas.getByRole("textbox", {
+        name: "Password",
+      });
+      expect(fieldElement).toHaveAttribute("type", "password");
 
-      const buttonElement = screen.getByRole("button", {
+      const buttonElement = canvas.getByRole("button", {
         name: odysseyTranslate("passwordfield.icon.label.show"),
       });
       if (buttonElement) {
         userEvent.type(fieldElement, "qwerty");
         userEvent.click(buttonElement);
         userEvent.tab();
         await waitFor(() => {
-          expect(fieldElement.type).toBe("text");
+          expect(fieldElement).toHaveAttribute("type", "text");
           expect(buttonElement.ariaLabel).toBe(
             odysseyTranslate("passwordfield.icon.label.hide")
           );
         });
         userEvent.click(buttonElement);
         await waitFor(() => {
-          expect(fieldElement.type).toBe("password");
+          expect(fieldElement).toHaveAttribute("type", "password");
           expect(buttonElement.ariaLabel).toBe(
             odysseyTranslate("passwordfield.icon.label.show")
           );
@@ -125,14 +126,15 @@ export const NoShowPassword: StoryObj<PasswordFieldProps> = {
   args: {
     hasShowPassword: false,
   },
-  play: async ({ args, canvasElement, step }) => {
+  play: async ({ canvasElement, step }) => {
     await step("toggle password", async () => {
-      const fieldElement = canvasElement.querySelector(
-        `#${args.id}`
-      ) as HTMLInputElement;
-      expect(fieldElement.type).toBe("password");
+      const canvas = within(canvasElement);
+      const fieldElement = canvas.getByRole("textbox", {
+        name: "Password",
+      });
+      expect(fieldElement).toHaveAttribute("type", "password");
 
-      const buttonElement = screen.queryByRole("button", {
+      const buttonElement = canvas.queryByRole("button", {
         name: odysseyTranslate("passwordfield.icon.label.show"),
       });
       expect(buttonElement).toBe(null);