From 3cbbe8795cf6a36c7baf80c2f4b471dd3848f472 Mon Sep 17 00:00:00 2001
From: Shuo Wu <shuo.wu@okta.com>
Date: Wed, 29 Nov 2023 17:19:36 -0500
Subject: [PATCH] test: add test to valid onBlur has been called

---
 .../src/components/odyssey-mui/Checkbox/Checkbox.stories.tsx  | 4 +++-
 .../src/components/odyssey-mui/Radio/Radio.stories.tsx        | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

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
index 20fc536a2f..655d62fc29 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Checkbox/Checkbox.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Checkbox/Checkbox.stories.tsx
@@ -155,7 +155,7 @@ export default storybookMeta;
 const checkTheBox =
   ({ canvasElement, step }: PlaywrightProps<CheckboxProps>) =>
   async (actionName: string) => {
-    await step("check the box", async () => {
+    await step("check the box", async ({ args }) => {
       const canvas = within(canvasElement);
       const checkBox = canvas.getByRole("checkbox") as HTMLInputElement;
       if (checkBox) {
@@ -163,6 +163,8 @@ const checkTheBox =
       }
       userEvent.tab();
       expect(checkBox).toBeChecked();
+      userEvent.click(canvasElement);
+      expect(args.onBlur).toHaveBeenCalled();
       axeRun(actionName);
     });
   };
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Radio/Radio.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Radio/Radio.stories.tsx
index 65935ba119..f8b5bb0e49 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/Radio/Radio.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/Radio/Radio.stories.tsx
@@ -100,13 +100,15 @@ export default storybookMeta;
 
 export const Default: StoryObj<typeof Radio> = {
   play: async ({ canvasElement, step }) => {
-    await step("select the radio button", async () => {
+    await step("select the radio button", async ({ args }) => {
       const canvas = within(canvasElement);
       const radio = canvas.getByRole("radio") as HTMLInputElement;
       if (radio) {
         userEvent.click(radio);
       }
       expect(radio).toBeChecked();
+      userEvent.click(canvasElement);
+      expect(args.onBlur).toHaveBeenCalled();
       axeRun("Radio Default");
     });
   },