chore: improve use of playwright test components

Sage · Oct 14, 2024 · d1c7aad · d1c7aad
1 parent a1656c2
commit d1c7aad
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 125 deletions.
diff --git a/src/components/dialog-full-screen/components.test-pw.tsx b/src/components/dialog-full-screen/components.test-pw.tsx
@@ -54,12 +54,8 @@ export const DialogFullScreenComponent = ({
   );
 };
 
-export const DefaultStory = ({
-  children = "This is an example",
-  ...props
-}: Partial<DialogFullScreenProps>) => {
-  const [isDialogFullScreenOpen, setIsDialogFullScreenOpen] = useState(false);
-
+export const DefaultStory = ({ open = false }: { open?: boolean }) => {
+  const [isDialogFullScreenOpen, setIsDialogFullScreenOpen] = useState(open);
   return (
     <>
       <Button onClick={() => setIsDialogFullScreenOpen(true)}>
@@ -71,43 +67,14 @@ export const DefaultStory = ({
         title="First Dialog Full Screen"
         aria-label="aria-label"
         onCancel={() => setIsDialogFullScreenOpen(false)}
-        {...props}
       >
-        {children}
+        This is an example
       </DialogFullScreen>
     </>
   );
 };
 
-export const DefaultOpenStory = ({
-  children = "This is an example",
-  ...props
-}: Partial<DialogFullScreenProps>) => {
-  const [isDialogFullScreenOpen, setIsDialogFullScreenOpen] = useState(true);
-
-  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)}
-        {...props}
-      >
-        {children}
-      </DialogFullScreen>
-    </>
-  );
-};
-
-export const DefaultNestedStory = ({
-  children = "This is an example",
-  ...props
-}: Partial<DialogFullScreenProps>) => {
+export const DefaultNestedStory = () => {
   const [isFirstDialogOpen, setIsFirstDialogOpen] = useState(false);
   const [isNestedDialogOpen, setIsNestedDialogOpen] = useState(false);
   return (
@@ -121,7 +88,6 @@ export const DefaultNestedStory = ({
         title="First Dialog Full Screen"
         aria-label="aria-label"
         onCancel={() => setIsFirstDialogOpen(false)}
-        {...props}
       >
         <Button onClick={() => setIsNestedDialogOpen(true)}>
           Open Nested Dialog Full Screen
@@ -132,7 +98,6 @@ export const DefaultNestedStory = ({
           title="Nested Dialog Full Screen"
           aria-label="aria-label"
           onCancel={() => setIsNestedDialogOpen(false)}
-          {...props}
         >
           <Textbox label="Nested Dialog Textbox" />
         </DialogFullScreen>

diff --git a/src/components/dialog-full-screen/dialog-full-screen.pw.tsx b/src/components/dialog-full-screen/dialog-full-screen.pw.tsx
@@ -4,7 +4,6 @@ import type { Page } from "@playwright/test";
 import {
   DialogFullScreenComponent,
   DefaultStory,
-  DefaultOpenStory,
   DefaultNestedStory,
   NestedDialog,
   MultipleDialogsInDifferentProviders,
@@ -331,7 +330,7 @@ test.describe("render DialogFullScreen component and check properties", () => {
     mount,
     page,
   }) => {
-    await mount(<DefaultOpenStory />);
+    await mount(<DefaultStory open />);
 
     const dialogFullScreen = page.getByRole("dialog");
     await expect(dialogFullScreen).toBeVisible();

diff --git a/src/components/dialog/components.test-pw.tsx b/src/components/dialog/components.test-pw.tsx
@@ -210,52 +210,8 @@ export const DialogComponentFocusableSelectors = (
   );
 };
 
-export const DefaultStory = () => {
-  const [isOpen, setIsOpen] = useState(defaultOpenState);
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
-      <Dialog
-        open={isOpen}
-        onCancel={() => setIsOpen(false)}
-        title="Title"
-        subtitle="Subtitle"
-      >
-        <Form
-          stickyFooter
-          height="500px"
-          leftSideButtons={
-            <Button onClick={() => setIsOpen(false)}>Cancel</Button>
-          }
-          saveButton={
-            <Button buttonType="primary" type="submit">
-              Save
-            </Button>
-          }
-        >
-          <Typography>
-            This is an example of a dialog with a Form as content
-          </Typography>
-          <Textbox label="First Name" />
-          <Textbox label="Middle Name" />
-          <Textbox label="Surname" />
-          <Textbox label="Birth Place" />
-          <Textbox label="Favourite Colour" />
-          <Textbox label="Address" />
-          <Textbox label="First Name" />
-          <Textbox label="Middle Name" />
-          <Textbox label="Surname" />
-          <Textbox label="Birth Place" />
-          <Textbox label="Favourite Colour" />
-          <Textbox label="Address" />
-        </Form>
-      </Dialog>
-    </>
-  );
-};
-
-export const DefaultOpenStory = () => {
-  const [isOpen, setIsOpen] = useState(true);
+export const DefaultStory = ({ open }: { open?: boolean }) => {
+  const [isOpen, setIsOpen] = useState(open || defaultOpenState);
   return (
     <>
       <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>

diff --git a/src/components/dialog/dialog.pw.tsx b/src/components/dialog/dialog.pw.tsx
@@ -11,7 +11,6 @@ import {
   DialogWithAutoFocusSelect,
   DialogComponentFocusableSelectors,
   DefaultStory,
-  DefaultOpenStory,
   DefaultNestedStory,
   Editable,
   WithHelp,
@@ -274,7 +273,7 @@ test.describe("Testing Dialog component properties", () => {
     mount,
     page,
   }) => {
-    await mount(<DefaultOpenStory />);
+    await mount(<DefaultStory open />);
 
     const dialog = page.getByRole("dialog");
     await expect(dialog).toBeVisible();

diff --git a/src/components/menu/component.test-pw.tsx b/src/components/menu/component.test-pw.tsx
@@ -304,9 +304,7 @@ export const MenuComponentFullScreen = (
   );
 };
 
-export const MenuComponentFullScreenOpen = (
-  props: Partial<MenuFullscreenProps>
-) => {
+export const MenuComponentFullScreenOpen = () => {
   const [menuOpen, setMenuOpen] = useState({
     light: true,
     dark: false,
@@ -331,7 +329,6 @@ export const MenuComponentFullScreenOpen = (
           startPosition={startPosition}
           isOpen={menuOpen[menu]}
           onClose={() => setMenuOpen((state) => ({ ...state, [menu]: false }))}
-          {...props}
         >
           <MenuItem href="#">Menu Item One</MenuItem>
           <MenuItem onClick={() => {}} submenu="Menu Item Two">

diff --git a/src/components/sidebar/components.test-pw.tsx b/src/components/sidebar/components.test-pw.tsx
@@ -8,36 +8,15 @@ import Toast from "../toast";
 import Textbox from "../textbox";
 import Dialog from "../dialog";
 
-export const Default = (args: Partial<SidebarProps>) => {
-  const [isOpen, setIsOpen] = useState(true);
-  const onCancel = () => {
-    setIsOpen(false);
-  };
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Open sidebar</Button>
-      <Sidebar {...args} aria-label="sidebar" open={isOpen} onCancel={onCancel}>
-        <Box mb={2}>
-          <Button buttonType="primary">Test</Button>
-          <Button buttonType="secondary" ml={2}>
-            Last
-          </Button>
-        </Box>
-        <Box mb="3000px">Main content</Box>
-      </Sidebar>
-    </>
-  );
-};
-
-export const DefaultClosed = (args: Partial<SidebarProps>) => {
-  const [isOpen, setIsOpen] = useState(false);
+export const Default = ({ open = true }: { open?: boolean }) => {
+  const [isOpen, setIsOpen] = useState(open);
   const onCancel = () => {
     setIsOpen(false);
   };
   return (
     <>
       <Button onClick={() => setIsOpen(true)}>Open sidebar</Button>
-      <Sidebar {...args} aria-label="sidebar" open={isOpen} onCancel={onCancel}>
+      <Sidebar aria-label="sidebar" open={isOpen} onCancel={onCancel}>
         <Box mb={2}>
           <Button buttonType="primary">Test</Button>
           <Button buttonType="secondary" ml={2}>
@@ -50,10 +29,7 @@ export const DefaultClosed = (args: Partial<SidebarProps>) => {
   );
 };
 
-export const DefaultNested = ({
-  children = "This is an example",
-  ...props
-}: Partial<SidebarProps>) => {
+export const DefaultNested = () => {
   const [isFirstSidebarOpen, setIsFirstSidebarOpen] = useState(false);
   const [isNestedSidebarOpen, setIsNestedSidebarOpen] = useState(false);
   return (
@@ -64,15 +40,13 @@ export const DefaultNested = ({
       <Sidebar
         open={isFirstSidebarOpen}
         onCancel={() => setIsFirstSidebarOpen(false)}
-        {...props}
       >
         <Button onClick={() => setIsNestedSidebarOpen(true)}>
           Open Nested Sidebar
         </Button>
         <Sidebar
           open={isNestedSidebarOpen}
           onCancel={() => setIsNestedSidebarOpen(false)}
-          {...props}
         >
           <Box mb={2}>
             <Button buttonType="primary">Test</Button>

diff --git a/src/components/sidebar/sidebar.pw.tsx b/src/components/sidebar/sidebar.pw.tsx
@@ -21,7 +21,6 @@ import {
 } from "../../../playwright/support/helper";
 import {
   Default,
-  DefaultClosed,
   DefaultNested,
   SidebarBackgroundScrollTestComponent,
   SidebarBackgroundScrollWithOtherFocusableContainers,
@@ -277,7 +276,7 @@ test.describe("Prop tests for Sidebar component", () => {
     mount,
     page,
   }) => {
-    await mount(<DefaultClosed />);
+    await mount(<Default open={false} />);
 
     const button = page.getByRole("button").filter({ hasText: "Open sidebar" });
     const sidebar = sidebarPreview(page);