feat(odyssey-react-mui): add new storyObj with hasShowPassowrd=false

okta · Sep 27, 2023 · 1e55998 · 1e55998
1 parent 6c3b8d2
commit 1e55998
Showing 1 changed file with 19 additions and 1 deletion.
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
@@ -77,7 +77,6 @@ const storybookMeta: Meta<PasswordFieldProps> = {
     autoCompleteType: "current-password",
     label: "Password",
     isOptional: false,
-    hasShowPassword: true,
     id: "password-input",
   },
   decorators: [MuiThemeDecorator],
@@ -120,3 +119,22 @@ export const Default: StoryObj<PasswordFieldProps> = {
     });
   },
 };
+
+export const NoShowPassword: StoryObj<PasswordFieldProps> = {
+  args: {
+    hasShowPassword: false,
+  },
+  play: async ({ args, canvasElement, step }) => {
+    await step("toggle password", async () => {
+      const fieldElement = canvasElement.querySelector(
+        `#${args.id}`
+      ) as HTMLInputElement;
+      expect(fieldElement.type).toBe("password");
+
+      const buttonElement = canvasElement.querySelector(
+        '[aria-label="toggle password visibility"]'
+      );
+      expect(buttonElement).toBe(null);
+    });
+  },
+};