fix: adds play interaction

okta · Jul 5, 2024 · d2319bc · d2319bc
1 parent c663df5
commit d2319bc
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/packages/odyssey-react-mui/src/labs/SideNav.tsx b/packages/odyssey-react-mui/src/labs/SideNav.tsx
@@ -146,7 +146,7 @@ const SideNavCollapsedContainer = styled("div", {
     width: isSideNavCollapsed ? "auto" : 0,
     opacity: isSideNavCollapsed ? 1 : 0,
     visibility: isSideNavCollapsed ? "visible" : "hidden",
-    transitionProperty: "opacity, visibility, width",
+    transitionProperty: "opacity",
     transitionDuration: odysseyDesignTokens.TransitionDurationMain,
     transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
   }),
@@ -169,7 +169,7 @@ const SideNavExpandContainer = styled("div", {
     opacity: isSideNavCollapsed ? 0 : 1,
     visibility: isSideNavCollapsed ? "hidden" : "visible",
     width: isSideNavCollapsed ? "0" : "100%",
-    transitionProperty: "opacity, visibility, width",
+    transitionProperty: "opacity, width",
     transitionDuration: odysseyDesignTokens.TransitionDurationMain,
     transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
   }),
@@ -598,12 +598,15 @@ const SideNav = ({
         isSideNavCollapsed={isSideNavCollapsed}
         onClick={sideNavExpandeClickHandler}
         onKeyDown={sideNavExpandeKeyHandler}
+        data-testid="collapsed-region"
+        data-aria-label="expand side navigation"
       >
         <ExpandLeftIcon sx={expandLeftIconStyles} />
       </SideNavCollapsedContainer>
       <SideNavExpandContainer
         odysseyDesignTokens={odysseyDesignTokens}
         isSideNavCollapsed={isSideNavCollapsed}
+        data-testid="expanded-region"
       >
         <Box sx={sideNavHeaderContainerStyles}>
           <SideNavHeader

diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/SideNav/SideNav.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/SideNav/SideNav.stories.tsx
@@ -40,6 +40,9 @@ import {
   ExpandLeftIcon,
   FolderIcon,
 } from "@okta/odyssey-react-mui/icons";
+import { expect } from "@storybook/jest";
+import { userEvent, waitFor, within } from "@storybook/testing-library";
+import { PlaywrightProps } from "../../odyssey-mui/storybookTypes";
 
 const storybookMeta: Meta<SideNavProps> = {
   title: "Labs Components/SideNav",
@@ -298,4 +301,26 @@ export const Default: StoryObj<SideNavProps> = {
       />
     );
   },
+  play: async ({ canvasElement, step }: PlaywrightProps<SideNavProps>) => {
+    const canvas = within(canvasElement);
+    const expandedRegion = canvas.getByTestId("expanded-region");
+    const collapsedRegion = canvas.getByTestId("collapsed-region");
+    await step("Side Nav Collapse", async ({}) => {
+      const collapseButton = within(expandedRegion).getByLabelText(
+        "collapse side navigation",
+      );
+      await userEvent.click(collapseButton);
+      await waitFor(() => {
+        expect(expandedRegion).not.toBeVisible();
+        expect(collapsedRegion).toBeVisible();
+      });
+    });
+    await step("Side Nav Expand", async ({}) => {
+      await userEvent.click(collapsedRegion);
+      await waitFor(() => {
+        expect(collapsedRegion).not.toBeVisible();
+        expect(expandedRegion).toBeVisible();
+      });
+    });
+  },
 };