From cf7b15fcaef5d54fa7d68e252e8fed38d2e3be46 Mon Sep 17 00:00:00 2001 From: "tom.davies" Date: Tue, 15 Oct 2024 16:53:47 +0100 Subject: [PATCH] chore: make further improvements to pw components and tests --- .../dialog-full-screen/components.test-pw.tsx | 56 +--------- .../dialog-full-screen.pw.tsx | 14 ++- src/components/dialog/components.test-pw.tsx | 8 +- src/components/dialog/dialog.pw.tsx | 2 +- src/components/menu/component.test-pw.tsx | 101 ++++-------------- src/components/menu/menu.pw.tsx | 16 +-- src/components/sidebar/sidebar.pw.tsx | 2 +- 7 files changed, 47 insertions(+), 152 deletions(-) diff --git a/src/components/dialog-full-screen/components.test-pw.tsx b/src/components/dialog-full-screen/components.test-pw.tsx index 0884f18b7d..c2c99b2970 100644 --- a/src/components/dialog-full-screen/components.test-pw.tsx +++ b/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) => { - const [isOpen, setIsOpen] = useState(true); + const [isOpen, setIsOpen] = useState(open); const ref = useRef(null); return ( <> + { - const [isDialogFullScreenOpen, setIsDialogFullScreenOpen] = useState(open); - return ( - <> - - setIsDialogFullScreenOpen(false)} - > - This is an example - - - ); -}; - -export const DefaultNestedStory = () => { - const [isFirstDialogOpen, setIsFirstDialogOpen] = useState(false); - const [isNestedDialogOpen, setIsNestedDialogOpen] = useState(false); - return ( - <> - - setIsFirstDialogOpen(false)} - > - - setIsNestedDialogOpen(false)} - > - - - - - ); -}; - export const NestedDialog = () => { const [mainDialogOpen, setMainDialogOpen] = React.useState(false); const [nestedDialogOpen, setNestedDialogOpen] = React.useState(false); diff --git a/src/components/dialog-full-screen/dialog-full-screen.pw.tsx b/src/components/dialog-full-screen/dialog-full-screen.pw.tsx index 0fb2d49af2..c690eb341e 100644 --- a/src/components/dialog-full-screen/dialog-full-screen.pw.tsx +++ b/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(); + await mount(); const button = page .getByRole("button") @@ -330,7 +328,7 @@ test.describe("render DialogFullScreen component and check properties", () => { mount, page, }) => { - await mount(); + await mount(); 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(); + await mount(); 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(); diff --git a/src/components/dialog/components.test-pw.tsx b/src/components/dialog/components.test-pw.tsx index 702a1a0053..efe2edf7ca 100644 --- a/src/components/dialog/components.test-pw.tsx +++ b/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 ( <> diff --git a/src/components/dialog/dialog.pw.tsx b/src/components/dialog/dialog.pw.tsx index 1fbfc2303f..fb02cde2b6 100644 --- a/src/components/dialog/dialog.pw.tsx +++ b/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, }) => { diff --git a/src/components/menu/component.test-pw.tsx b/src/components/menu/component.test-pw.tsx index 15f27577e9..3ce43cef42 100644 --- a/src/components/menu/component.test-pw.tsx +++ b/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 [ - setMenuOpen((state) => ({ ...state, [menu]: true }))} - > - Menu - , - setMenuOpen((state) => ({ ...state, [menu]: false }))} - > - Menu Item One - {}} submenu="Menu Item Two"> - Submenu Item One - Submenu Item Two - - Menu Item Three - Menu Item Four - - Submenu Item One - Submenu Item Two - - Menu Item Six - , - ]; - } - return [ - - Menu Item One - , - - Submenu Item One - Submenu Item Two - , - - Menu Item Three - , - - Menu Item Four - , - - Submenu Item One - Submenu Item Two - , - - Menu Item Six - , - ]; - }; +export const MenuComponentFullScreenSimple = ({ + open = true, +}: { + open?: boolean; +}) => { + const [menuOpen, setMenuOpen] = useState(open); + return ( - - {menuTypes.map((menuType) => ( -
- - {menuType} - - - {React.Children.map( - responsiveMenuItems("left", menuType), - (items) => items - )} - -
- ))} - + + setMenuOpen(true)}> + Menu + + , + setMenuOpen(false)} + > + Menu Item One + Menu Item Two + + , + ); }; diff --git a/src/components/menu/menu.pw.tsx b/src/components/menu/menu.pw.tsx index d74fb35cd9..34f418c617 100644 --- a/src/components/menu/menu.pw.tsx +++ b/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(); + await mount(); 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(); + await mount(); 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(); diff --git a/src/components/sidebar/sidebar.pw.tsx b/src/components/sidebar/sidebar.pw.tsx index b514af4267..75a0ad4da6 100644 --- a/src/components/sidebar/sidebar.pw.tsx +++ b/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, }) => {