updating Overlay tests to account for header changes

jpmorganchase · Sep 19, 2024 · ba95ab9 · ba95ab9
1 parent cccf4b9
commit ba95ab9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/packages/core/src/__tests__/__e2e__/overlay/Overlay.cy.tsx b/packages/core/src/__tests__/__e2e__/overlay/Overlay.cy.tsx
@@ -36,7 +36,9 @@ describe("GIVEN an Overlay", () => {
       cy.realPress("Enter");
       cy.findByRole("dialog").should("be.visible");
       //focus into overlay
-      cy.findByRole("button", { name: /Close Overlay/i }).should("be.focused");
+      cy.findAllByRole("button", { name: "Close overlay" }).should(
+        "be.focused",
+      );
       cy.realPress("Tab");
     });
 
@@ -45,11 +47,11 @@ describe("GIVEN an Overlay", () => {
 
       cy.findByRole("button", { name: /Show Overlay/i }).realClick();
       cy.findByRole("dialog").should("be.visible");
-      cy.findByRole("button", { name: /Close Overlay/i }).should("be.focused");
+      cy.findByRole("button", { name: /Close overlay/i }).should("be.focused");
       cy.realPress("Tab");
       cy.findByRole("button", { name: /Hover me/i }).should("be.focused");
       cy.realPress("Tab");
-      cy.findByRole("button", { name: /Close Overlay/i }).should("be.focused");
+      cy.findByRole("button", { name: /Close overlay/i }).should("be.focused");
     });
   });
 
@@ -119,7 +121,8 @@ describe("GIVEN an Overlay", () => {
       cy.findByRole("dialog").should("be.visible");
       cy.get("@onOpenChangeSpy").should("have.callCount", 1);
 
-      cy.findByRole("button", { name: /Close Overlay/i }).realClick();
+      cy.findByRole("button", { name: /Close overlay/i }).realClick();
+
       cy.findByRole("dialog").should("not.exist");
 
       cy.findByRole("button", { name: /Show Overlay/i }).realClick();

diff --git a/packages/core/stories/overlay/overlay.stories.tsx b/packages/core/stories/overlay/overlay.stories.tsx
@@ -61,7 +61,7 @@ Right.args = {
 };
 
 export const Header = ({ onOpenChange }: OverlayProps) => {
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
   const id = useId();
 
   const onChange = (newOpen: boolean) => {
@@ -103,7 +103,7 @@ export const Header = ({ onOpenChange }: OverlayProps) => {
 };
 
 export const HeaderWithCloseButton = ({ onOpenChange }: OverlayProps) => {
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
   const id = useId();
 
   const onChange = (newOpen: boolean) => {
@@ -113,6 +113,16 @@ export const HeaderWithCloseButton = ({ onOpenChange }: OverlayProps) => {
 
   const handleClose = () => setOpen(false);
 
+  const CloseButton = () => (
+    <Button
+      aria-label="Close overlay"
+      variant="secondary"
+      onClick={handleClose}
+    >
+      <CloseIcon aria-hidden />
+    </Button>
+  );
+
   return (
     <Overlay open={open} onOpenChange={onChange}>
       <OverlayTrigger>
@@ -127,15 +137,7 @@ export const HeaderWithCloseButton = ({ onOpenChange }: OverlayProps) => {
         <OverlayHeader
           id={id}
           header="Header block"
-          endAdornment={
-            <Button
-              aria-label="Close dialog"
-              variant="secondary"
-              onClick={handleClose}
-            >
-              <CloseIcon aria-hidden />
-            </Button>
-          }
+          endAdornment={<CloseButton />}
         />
         <OverlayPanelContent>
           <StackLayout gap={1}>