chore: make further improvements to pw components and tests

src/components/dialog-full-screen/components.test-pw.tsx

@@ -25,12 +25,14 @@ const nestedDialogTitle = "Nested Dialog";
 
 export const DialogFullScreenComponent = ({
   children = "This is an example",
+  open = true,
   ...props
 }: Partial<DialogFullScreenProps>) => {
-  const [isOpen, setIsOpen] = useState(true);
+  const [isOpen, setIsOpen] = useState(open);
   const ref = useRef<HTMLButtonElement | null>(null);
   return (
     <>
+      <Button onClick={() => setIsOpen(true)}>Open Dialog Full Screen</Button>
       <DialogFullScreen
         focusFirstElement={ref}
         open={isOpen}
@@ -54,58 +56,6 @@ export const DialogFullScreenComponent = ({
   );
 };
 
-export const DefaultStory = ({ open = false }: { open?: boolean }) => {
-  const [isDialogFullScreenOpen, setIsDialogFullScreenOpen] = useState(open);
-  return (
-    <>
-      <Button onClick={() => setIsDialogFullScreenOpen(true)}>
-        Open Dialog Full Screen
-      </Button>
-      <DialogFullScreen
-        open={isDialogFullScreenOpen}
-        showCloseIcon
-        title="First Dialog Full Screen"
-        aria-label="aria-label"
-        onCancel={() => setIsDialogFullScreenOpen(false)}
-      >
-        This is an example
-      </DialogFullScreen>
-    </>
-  );
-};
-
-export const DefaultNestedStory = () => {
-  const [isFirstDialogOpen, setIsFirstDialogOpen] = useState(false);
-  const [isNestedDialogOpen, setIsNestedDialogOpen] = useState(false);
-  return (
-    <>
-      <Button onClick={() => setIsFirstDialogOpen(true)}>
-        Open First Dialog Full Screen
-      </Button>
-      <DialogFullScreen
-        open={isFirstDialogOpen}
-        showCloseIcon
-        title="First Dialog Full Screen"
-        aria-label="aria-label"
-        onCancel={() => setIsFirstDialogOpen(false)}
-      >
-        <Button onClick={() => setIsNestedDialogOpen(true)}>
-          Open Nested Dialog Full Screen
-        </Button>
-        <DialogFullScreen
-          open={isNestedDialogOpen}
-          showCloseIcon
-          title="Nested Dialog Full Screen"
-          aria-label="aria-label"
-          onCancel={() => setIsNestedDialogOpen(false)}
-        >
-          <Textbox label="Nested Dialog Textbox" />
-        </DialogFullScreen>
-      </DialogFullScreen>
-    </>
-  );
-};
-
 export const NestedDialog = () => {
   const [mainDialogOpen, setMainDialogOpen] = React.useState(false);
   const [nestedDialogOpen, setNestedDialogOpen] = React.useState(false);

src/components/dialog-full-screen/dialog-full-screen.pw.tsx

@@ -3,8 +3,6 @@ import { expect, test } from "@playwright/experimental-ct-react17";
 import type { Page } from "@playwright/test";
 import {
   DialogFullScreenComponent,
-  DefaultStory,
-  DefaultNestedStory,
   NestedDialog,
   MultipleDialogsInDifferentProviders,
   DialogFullScreenWithHeaderChildren,
@@ -309,7 +307,7 @@ test.describe("render DialogFullScreen component and check properties", () => {
     mount,
     page,
   }) => {
-    await mount(<DefaultStory />);
+    await mount(<DialogFullScreenComponent open={false} />);
 
     const button = page
       .getByRole("button")
@@ -330,7 +328,7 @@ test.describe("render DialogFullScreen component and check properties", () => {
     mount,
     page,
   }) => {
-    await mount(<DefaultStory open />);
+    await mount(<DialogFullScreenComponent />);
 
     const dialogFullScreen = page.getByRole("dialog");
     await expect(dialogFullScreen).toBeVisible();
@@ -349,15 +347,15 @@ test.describe("render DialogFullScreen component and check properties", () => {
     await expect(button).toBeFocused();
   });
 
-  test("when nested Dialog's are open/closed their respective call to action elements should be focused correctly", async ({
+  test("when nested Dialog's are opened/closed their respective call to action elements should be focused correctly", async ({
     mount,
     page,
   }) => {
-    await mount(<DefaultNestedStory />);
+    await mount(<NestedDialog />);
 
     const firstButton = page
       .getByRole("button")
-      .filter({ hasText: "Open First Dialog Full Screen" });
+      .filter({ hasText: "Open Main Dialog" });
     const firstDialog = page.getByRole("dialog").first();
     await expect(firstButton).not.toBeFocused();
     await expect(firstDialog).not.toBeVisible();
@@ -366,7 +364,7 @@ test.describe("render DialogFullScreen component and check properties", () => {
     await expect(firstDialog).toBeVisible();
     const secondButton = page
       .getByRole("button")
-      .filter({ hasText: "Open Nested Dialog Full Screen" });
+      .filter({ hasText: "Open Nested Dialog" });
     await expect(secondButton).not.toBeFocused();
     await secondButton.click();
     const secondDialog = page.getByRole("dialog").last();

src/components/dialog/components.test-pw.tsx

@@ -210,8 +210,12 @@ export const DialogComponentFocusableSelectors = (
   );
 };
 
-export const DefaultStory = ({ open }: { open?: boolean }) => {
-  const [isOpen, setIsOpen] = useState(open || defaultOpenState);
+export const DefaultStory = ({
+  open = defaultOpenState,
+}: {
+  open?: boolean;
+}) => {
+  const [isOpen, setIsOpen] = useState(open);
   return (
     <>
       <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>

src/components/dialog/dialog.pw.tsx

@@ -290,7 +290,7 @@ test.describe("Testing Dialog component properties", () => {
     await expect(button).toBeFocused();
   });
 
-  test("when nested Dialog's are open/closed their respective call to action elements should be focused correctly", async ({
+  test("when nested Dialog's are opened/closed their respective call to action elements should be focused correctly", async ({
     mount,
     page,
   }) => {

src/components/menu/component.test-pw.tsx

@@ -304,86 +304,29 @@ export const MenuComponentFullScreen = (
   );
 };
 
-export const MenuComponentFullScreenOpen = () => {
-  const [menuOpen, setMenuOpen] = useState({
-    light: true,
-    dark: false,
-    white: false,
-    black: false,
-  });
-  const fullscreenViewBreakPoint = useMediaQuery("(max-width: 1200px)");
-  const responsiveMenuItems = (
-    startPosition: "left" | "right",
-    menu: MenuType
-  ) => {
-    if (fullscreenViewBreakPoint) {
-      return [
-        <MenuItem
-          key="fullscreen-menu-item-1"
-          onClick={() => setMenuOpen((state) => ({ ...state, [menu]: true }))}
-        >
-          Menu
-        </MenuItem>,
-        <MenuFullscreen
-          key="fullscreen-menu-1"
-          startPosition={startPosition}
-          isOpen={menuOpen[menu]}
-          onClose={() => setMenuOpen((state) => ({ ...state, [menu]: false }))}
-        >
-          <MenuItem href="#">Menu Item One</MenuItem>
-          <MenuItem onClick={() => {}} submenu="Menu Item Two">
-            <MenuItem href="#">Submenu Item One</MenuItem>
-            <MenuItem href="#">Submenu Item Two</MenuItem>
-          </MenuItem>
-          <MenuItem href="#">Menu Item Three</MenuItem>
-          <MenuItem href="#">Menu Item Four</MenuItem>
-          <MenuItem submenu="Menu Item Five">
-            <MenuItem href="#">Submenu Item One</MenuItem>
-            <MenuItem href="#">Submenu Item Two</MenuItem>
-          </MenuItem>
-          <MenuItem href="#">Menu Item Six</MenuItem>
-        </MenuFullscreen>,
-      ];
-    }
-    return [
-      <MenuItem key="default-menu-item-1" href="#">
-        Menu Item One
-      </MenuItem>,
-      <MenuItem key="default-menu-item-2" submenu="Menu Item Two">
-        <MenuItem href="#">Submenu Item One</MenuItem>
-        <MenuItem href="#">Submenu Item Two</MenuItem>
-      </MenuItem>,
-      <MenuItem key="default-menu-item-3" href="#">
-        Menu Item Three
-      </MenuItem>,
-      <MenuItem key="default-menu-item-4" href="#">
-        Menu Item Four
-      </MenuItem>,
-      <MenuItem key="default-menu-item-5" submenu="Menu Item Five">
-        <MenuItem href="#">Submenu Item One</MenuItem>
-        <MenuItem href="#">Submenu Item Two</MenuItem>
-      </MenuItem>,
-      <MenuItem key="default-menu-item-6" href="#">
-        Menu Item Six
-      </MenuItem>,
-    ];
-  };
+export const MenuComponentFullScreenSimple = ({
+  open = true,
+}: {
+  open?: boolean;
+}) => {
+  const [menuOpen, setMenuOpen] = useState(open);
+
   return (
-    <Box>
-      {menuTypes.map((menuType) => (
-        <div key={menuType}>
-          <Typography variant="h4" textTransform="capitalize" my={2}>
-            {menuType}
-          </Typography>
-          <Menu menuType={menuType}>
-            {React.Children.map(
-              responsiveMenuItems("left", menuType),
-              (items) => items
-            )}
-          </Menu>
-        </div>
-      ))}
-    </Box>
+    <Menu menuType="light">
+      <MenuItem key="menu-item" onClick={() => setMenuOpen(true)}>
+        Menu
+      </MenuItem>
+      ,
+      <MenuFullscreen
+        key="menu"
+        isOpen={menuOpen}
+        onClose={() => setMenuOpen(false)}
+      >
+        <MenuItem href="#">Menu Item One</MenuItem>
+        <MenuItem href="#">Menu Item Two</MenuItem>
+      </MenuFullscreen>
+      ,
+    </Menu>
   );
 };
 

src/components/menu/menu.pw.tsx

@@ -52,6 +52,7 @@ import {
   MenuComponentSearch,
   MenuWithChildrenUpdating,
   MenuComponentFullScreen,
+  MenuComponentFullScreenSimple,
   MenuFullScreenBackgroundScrollTest,
   MenuComponentItems,
   MenuFullScreenWithSearchButton,
@@ -69,7 +70,6 @@ import {
   MenuComponentFullScreenWithLongSubmenuText,
   MenuItemWithPopoverContainerChild,
   SubmenuMaxWidth,
-  MenuComponentFullScreenOpen,
 } from "./component.test-pw";
 import { NavigationBarWithSubmenuAndChangingHeight } from "../navigation-bar/navigation-bar-test.stories";
 import { HooksConfig } from "../../../playwright";
@@ -1159,12 +1159,12 @@ test.describe("Prop tests for Menu component", () => {
     mount,
     page,
   }) => {
-    await mount(<MenuComponentFullScreen />);
+    await mount(<MenuComponentFullScreenSimple open={false} />);
 
     await page.setViewportSize({ width: 1200, height: 800 });
-    const item = page.getByRole("button").filter({ hasText: "Menu" }).first();
+    const item = page.getByRole("button").filter({ hasText: "Menu" });
     await item.click();
-    const fullscreen = getComponent(page, "menu-fullscreen").first();
+    const fullscreen = getComponent(page, "menu-fullscreen");
     await waitForAnimationEnd(fullscreen);
     const closeButton = page.getByLabel("Close");
     await closeButton.click();
@@ -1175,16 +1175,16 @@ test.describe("Prop tests for Menu component", () => {
     mount,
     page,
   }) => {
-    await mount(<MenuComponentFullScreenOpen />);
+    await mount(<MenuComponentFullScreenSimple />);
 
     await page.setViewportSize({ width: 1200, height: 800 });
-    const fullscreen = getComponent(page, "menu-fullscreen").first();
+    const fullscreen = getComponent(page, "menu-fullscreen");
     await waitForAnimationEnd(fullscreen);
     await expect(fullscreen).toBeVisible();
-    const closeButton = page.getByLabel("Close").first();
+    const closeButton = page.getByLabel("Close");
     await closeButton.click();
 
-    const item = page.getByRole("button").filter({ hasText: "Menu" }).first();
+    const item = page.getByRole("button").filter({ hasText: "Menu" });
     await expect(item).not.toBeFocused();
     await expect(fullscreen).not.toBeVisible();
 

src/components/sidebar/sidebar.pw.tsx

@@ -312,7 +312,7 @@ test.describe("Prop tests for Sidebar component", () => {
     await expect(button).toBeFocused();
   });
 
-  test("when nested Sidebar's are open/closed their respective call to action elements should be focused correctly", async ({
+  test("when nested Sidebar's are opened/closed their respective call to action elements should be focused correctly", async ({
     mount,
     page,
   }) => {