Test(e2e): Modal Visual Tests #DS-1247

packages/web-react/src/components/Modal/demo/ModalDefault.tsx

@@ -25,7 +25,7 @@ const ModalDefault = () => {
   const [footerAlign, setFooterAlign] = useState<AlignmentXDictionaryType>(AlignmentX.RIGHT);
   const [isDockedOnMobile, setIsDockedOnMobile] = useState(false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [isExpandedOnMobile, setIsExpandedOnMobile] = useState(false);
+  const [isExpandedOnMobile, setIsExpandedOnMobile] = useState(true);
   const [isScrollable, setIsScrollable] = useState(false);
 
   const toggleModalBasic = () => setModalBasicOpen(!isModalBasicOpen);
@@ -53,7 +53,9 @@ const ModalDefault = () => {
 
   return (
     <>
-      <Button onClick={toggleModalBasic}>Open Modal</Button>
+      <Button onClick={toggleModalBasic} data-test-id="modal-basic">
+        Open Modal
+      </Button>
 
       <Modal alignmentY={modalAlign} id="example-basic" isOpen={isModalBasicOpen} onClose={handleModalBasicClose}>
         <ModalDialog
@@ -171,7 +173,9 @@ const ModalDefault = () => {
         </ModalDialog>
       </Modal>
 
-      <Button onClick={toggleModalForm}>Open Modal with Form</Button>
+      <Button onClick={toggleModalForm} data-test-id="modal-with-form">
+        Open Modal with Form
+      </Button>
 
       <Modal id="example-form" isOpen={isModalFormOpen} onClose={handleModalFormClose}>
         <ModalDialog elementType="form" method="dialog">
@@ -192,7 +196,9 @@ const ModalDefault = () => {
         </ModalDialog>
       </Modal>
 
-      <Button onClick={toggleModalWithDropdown}>Open Modal with Dropdown</Button>
+      <Button onClick={toggleModalWithDropdown} data-test-id="modal-with-dropdown">
+        Open Modal with Dropdown
+      </Button>
 
       <Modal id="example-dropdown" isOpen={isModalWithDropdownOpen} onClose={handleModalWithDropdownClose}>
         <ModalDialog>

packages/web-react/src/components/Modal/demo/ModalDisabledBackdropClick.tsx

@@ -8,7 +8,9 @@ const ModalDisabledBackdropClick = () => {
 
   return (
     <>
-      <Button onClick={toggleModal}>Open Modal</Button>
+      <Button onClick={toggleModal} data-test-id="modal-with-disabled-backdrop-click">
+        Open Modal
+      </Button>
 
       <Modal id="example-disabled-backdrop-click" isOpen={isOpen} onClose={handleClose} closeOnBackdropClick={false}>
         <ModalDialog>

packages/web-react/src/components/Modal/demo/ModalHiddenCloseButton.tsx

@@ -13,7 +13,9 @@ const ModalHiddenCloseButton = () => {
 
   return (
     <>
-      <Button onClick={isOpenToggle}>Open Modal</Button>
+      <Button onClick={isOpenToggle} data-test-id="modal-with-hidden-close-button">
+        Open Modal
+      </Button>
 
       <Modal
         id="example-hidden-close-button"

packages/web-react/src/components/Modal/demo/ModalScrollingLongContent.tsx

@@ -94,7 +94,9 @@ const ModalScrollingLongContent = () => {
 
   return (
     <>
-      <Button onClick={toggleModalLongContent}>Open Modal with Long Content</Button>
+      <Button onClick={toggleModalLongContent} data-test-id="modal-with-long-content">
+        Open Modal with Long Content
+      </Button>
 
       <Modal id="example-long-content" isOpen={isModalLongContentOpen} onClose={handleModalLongContentClose}>
         <ModalDialog>
@@ -126,7 +128,9 @@ const ModalScrollingLongContent = () => {
         </ModalDialog>
       </Modal>
 
-      <Button onClick={toggleModalScrollingInside}>Open Modal with Scrolling Inside</Button>
+      <Button onClick={toggleModalScrollingInside} data-test-id="modal-with-scrolling-inside">
+        Open Modal with Scrolling Inside
+      </Button>
 
       <Modal id="example-scrolling-modal" isOpen={isModalScrollingInsideOpen} onClose={handleModalScrollingInsideClose}>
         <ModalDialog isScrollable>
@@ -165,7 +169,9 @@ const ModalScrollingLongContent = () => {
         </ModalDialog>
       </Modal>
 
-      <Button onClick={toggleModalScrollView}>Open Modal with ScrollView</Button>
+      <Button onClick={toggleModalScrollView} data-test-id="modal-with-scrollview">
+        Open Modal with ScrollView
+      </Button>
 
       <Modal id="example-scroll-view" isOpen={isModalScrollViewOpen} onClose={handleModalScrollViewClose}>
         <ModalDialog isScrollable>
@@ -194,7 +200,9 @@ const ModalScrollingLongContent = () => {
         </ModalDialog>
       </Modal>
 
-      <Button onClick={toggleModalCustomHeight}>Open Modal with Custom Height</Button>
+      <Button onClick={toggleModalCustomHeight} data-test-id="modal-with-custom-height">
+        Open Modal with Custom Height
+      </Button>
 
       <Modal id="example-custom-height" isOpen={isModalCustomHeightOpen} onClose={handleModalCustomHeightClose}>
         <ModalDialog

packages/web-react/src/components/Modal/demo/ModalStacking.tsx

@@ -13,7 +13,9 @@ const ModalStacking = () => {
 
   return (
     <>
-      <Button onClick={toggleFirstModal}>Open Modal</Button>
+      <Button onClick={toggleFirstModal} data-test-id="modal-stacking">
+        Open Modal
+      </Button>
 
       <Modal id="example-stacking-parent" isOpen={isFirstOpen} onClose={handleFirstClose}>
         <ModalDialog>

packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig

@@ -1,4 +1,4 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example-basic">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-basic" data-test-id="modal-basic">
     Open Modal
 </Button>
 
@@ -63,7 +63,7 @@
     </ModalDialog>
 </Modal>
 
-<Button data-spirit-toggle="modal" data-spirit-target="#example-form">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-form" data-test-id="modal-with-form">
     Open Modal with Form
 </Button>
 
@@ -97,7 +97,7 @@
     </ModalDialog>
 </Modal>
 
-<Button data-spirit-toggle="modal" data-spirit-target="#example-dropdown">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-dropdown" data-test-id="modal-with-dropdown">
     Open Modal with Dropdown
 </Button>
 

packages/web-twig/src/Resources/components/Modal/stories/ModalDisabledBackdropClick.twig

@@ -1,4 +1,4 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example-disabled-backdrop-click">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-disabled-backdrop-click" data-test-id="modal-with-disabled-backdrop-click">
     Open Modal
 </Button>
 

packages/web-twig/src/Resources/components/Modal/stories/ModalHiddenCloseButton.twig

@@ -1,4 +1,4 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example-hidden-close-button">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-hidden-close-button" data-test-id="modal-with-hidden-close-button">
     Open Modal
 </Button>
 

packages/web-twig/src/Resources/components/Modal/stories/ModalScrollingLongContent.twig

@@ -1,4 +1,4 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example-long-content">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-long-content" data-test-id="modal-with-long-content">
     Open Modal with Long Content
 </Button>
 
@@ -38,7 +38,7 @@
     </ModalDialog>
 </Modal>
 
-<Button data-spirit-toggle="modal" data-spirit-target="#example-scrolling-modal">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-scrolling-modal" data-test-id="modal-with-scrolling-inside">
     Open Modal with Scrolling Inside
 </Button>
 
@@ -92,7 +92,7 @@
     </ModalDialog>
 </Modal>
 
-<Button data-spirit-toggle="modal" data-spirit-target="#example-scroll-view">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-scroll-view" data-test-id="modal-with-scrollview">
     Open Modal with ScrollView
 </Button>
 
@@ -167,7 +167,7 @@
     </ModalDialog>
 </Modal>
 
-<Button data-spirit-toggle="modal" data-spirit-target="#example-custom-height">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-custom-height" data-test-id="modal-with-custom-height">
     Open Modal with Custom Height
 </Button>
 

packages/web-twig/src/Resources/components/Modal/stories/ModalStacking.twig

@@ -1,4 +1,4 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example-stacking-parent">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-stacking-parent" data-test-id="modal-stacking">
     Open Modal
 </Button>
 

packages/web/src/scss/components/Modal/index.html

@@ -55,6 +55,7 @@ <h2 class="docs-Heading">Modal</h2>
       data-spirit-target="#example-basic"
       aria-controls="example-basic"
       aria-expanded="false"
+      data-test-id="modal-basic"
     >
       Open Modal
     </button>
@@ -191,6 +192,7 @@ <h2 id="example-basic-title" class="ModalHeader__title">Modal Title</h2>
       data-spirit-target="#example-form"
       aria-controls="example-form"
       aria-expanded="false"
+      data-test-id="modal-with-form"
     >
       Open Modal with Form
     </button>
@@ -265,6 +267,7 @@ <h2 id="example-form-title" class="ModalHeader__title">Modal with a Form</h2>
       data-spirit-target="#example-dropdown"
       aria-controls="example-dropdown"
       aria-expanded="false"
+      data-test-id="modal-with-dropdown"
     >
       Open Modal with Dropdown
     </button>
@@ -302,7 +305,7 @@ <h2 id="example-dropdown-title" class="ModalHeader__title">Modal Title</h2>
             perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
             provident unde. Eveniet, iste, molestiae?
           </p>
-          <div class="DropdownWrapper">
+          <div class="Dropdown">
             <button
               type="button"
               data-spirit-toggle="dropdown"
@@ -313,7 +316,7 @@ <h2 id="example-dropdown-title" class="ModalHeader__title">Modal Title</h2>
             >
               Dropdown
             </button>
-            <div class="Dropdown" data-spirit-placement="bottom-start" id="dropdown-in-modal">
+            <div class="DropdownPopover" data-spirit-placement="bottom-start" id="dropdown-in-modal">
               <a href="#" class="Item">
                 <span class="Item__label">Action</span>
               </a>
@@ -377,6 +380,7 @@ <h2 class="docs-Heading">Scrolling Long Content</h2>
       data-spirit-target="#example-long-content"
       aria-controls="example-long-content"
       aria-expanded="false"
+      data-test-id="modal-with-long-content"
     >
       Open Modal with Long Content
     </button>
@@ -461,6 +465,7 @@ <h2 id="example-long-content-title" class="ModalHeader__title">
       data-spirit-target="#example-scrolling-modal"
       aria-controls="example-scrolling-modal"
       aria-expanded="false"
+      data-test-id="modal-with-scrolling-inside"
     >
       Open Modal with Scrolling Inside
     </button>
@@ -555,6 +560,7 @@ <h2 id="example-scrolling-modal-title" class="ModalHeader__title">
       data-spirit-target="#example-scroll-view"
       aria-controls="example-scroll-view"
       aria-expanded="false"
+      data-test-id="modal-with-scrollview"
     >
       Open Modal with ScrollView
     </button>
@@ -680,6 +686,7 @@ <h2 id="example-scroll-view-title" class="ModalHeader__title">
       data-spirit-target="#example-custom-height"
       aria-controls="example-custom-height"
       aria-expanded="false"
+      data-test-id="modal-with-custom-height"
     >
       Open Modal with Custom Height
     </button>
@@ -986,6 +993,7 @@ <h2 class="docs-Heading">Stacking Modals</h2>
       data-spirit-target="#example-stacking-parent"
       aria-controls="example-stacking-parent"
       aria-expanded="false"
+      data-test-id="modal-stacking"
     >
       Open Modal
     </button>
@@ -1135,6 +1143,7 @@ <h2 class="docs-Heading">Disabled Backdrop Click</h2>
       data-spirit-target="#example-disabled-backdrop-click"
       aria-controls="example-disabled-backdrop-click"
       aria-expanded="false"
+      data-test-id="modal-with-disabled-backdrop-click"
     >
       Open Modal
     </button>
@@ -1209,6 +1218,7 @@ <h2 class="docs-Heading">Hidden Close Button and Disabled Escape Key</h2>
       data-spirit-target="#example-hide-close-button"
       aria-controls="example-hide-close-button"
       aria-expanded="false"
+      data-test-id="modal-with-hidden-close-button"
     >
       Open Modal
     </button>