Add cypress test for modalOverlayOpeningElement

Also added getOpeningProperties function to modal class to easily verify in testing
shipshapecode · Jun 28, 2022 · 3b1f4d5 · 3b1f4d5
1 parent 1840400
commit 3b1f4d5
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/src/js/components/shepherd-modal.svelte b/src/js/components/shepherd-modal.svelte
@@ -13,6 +13,7 @@
   closeModalOpening();
 
   export const getElement = () => element;
+  export const getOpeningProperties = () => openingProperties;
 
   export function closeModalOpening() {
     openingProperties = {

diff --git a/test/cypress/integration/modal.cy.js b/test/cypress/integration/modal.cy.js
@@ -118,4 +118,31 @@ describe('Modal mode', () => {
       cy.get('.shepherd-modal-is-visible').should('have.length', 1);
     });
   });
+
+  describe('Modal with separate selector', function() {
+    const steps = () => {
+      return [
+        {
+          attachTo: {
+            element: '.hero-welcome',
+            on: 'bottom'
+          },
+          modalOverlayOpeningElement: '.hero-welcome h1',
+        }
+      ];
+    };
+
+    beforeEach(() => {
+      tour = setupTour(Shepherd, {}, steps, {
+        useModalOverlay: true
+      });
+    });
+
+    it('has the modal target the separate selector element', function() {
+      tour.start();
+      cy.get('.shepherd-modal-is-visible').should('have.length', 1);
+      const openingPropertyHeight = tour.modal.getOpeningProperties().height;
+      cy.get('.hero-welcome h1').invoke('outerHeight').should('eq', openingPropertyHeight);
+    });
+  });
 });