tests: use fixture for popover tests

Storybook stories are rendered inside some wrapper elements, one of which has overflow: hidden set. For this component, that's a problem because cypress then thinks the popover is not visible as it overlaps the containers bounds. Using a fixture creates the most simple environment possible and increases test stability. Also, see #2364.
swisspost · Dec 6, 2023 · 99aa577 · 99aa577
1 parent f784fef
commit 99aa577
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/packages/components/cypress/e2e/popover.cy.ts b/packages/components/cypress/e2e/popover.cy.ts
@@ -1,7 +1,7 @@
-describe('popover', () => {
+describe('popover', { baseUrl: null }, () => {
   describe('default', () => {
     beforeEach(() => {
-      cy.getComponent('popover');
+      cy.visit('./cypress/fixtures/post-popover.test.html');
       // Aria-expanded is set by the web component, therefore it's a good measure to indicate the component is ready
       cy.get('[data-popover-target="popover-one"][aria-expanded]').as('trigger');
       cy.get('#popover-one.hydrated').as('popover');
@@ -55,7 +55,7 @@ describe('popover', () => {
     it('should switch position', () => {
       cy.get('@popover').invoke('attr', 'placement', 'top').should('not.be.visible');
       cy.get('@trigger').click();
-      cy.get('@popover').find('[popover]').should('have.css', 'top', '76px');
+      cy.get('@popover').find('[popover]').should('have.css', 'top', '42px');
     });
   });
 });
diff --git a/packages/components/cypress/e2e/popovercontainer.cy.ts b/packages/components/cypress/e2e/popovercontainer.cy.ts
@@ -1,10 +1,10 @@
-describe('popovercontainer', () => {
+describe('popovercontainer', { baseUrl: null }, () => {
   describe('default', () => {
     let selector = isPopoverSupported() ? ':popover-open' : '.\\:popover-open';
 
     beforeEach(() => {
       // There is no dedicated docs page for the popovercontainer
-      cy.getComponent('popover');
+      cy.visit('./cypress/fixtures/post-popover.test.html');
       cy.get('[data-popover-target="popover-one"][aria-expanded]').as('trigger');
       cy.get('post-popovercontainer').as('container');
     });

diff --git a/packages/components/cypress/fixtures/post-popover.test.html b/packages/components/cypress/fixtures/post-popover.test.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script src="../../../dist/post-components/post-components.esm.js" type="module"></script>
+  </head>
+  <body>
+    <button data-popover-target="popover-one">toggle</button>
+    <post-popover id="popover-one">
+      <p>This is a test</p>
+    </post-popover>
+  </body>
+</html>
diff --git a/packages/components/src/components/post-popover/post-popover.scss b/packages/components/src/components/post-popover/post-popover.scss
@@ -8,6 +8,8 @@
 :host {
   --post-contrast-color: #{post.$white};
   --post-bg-rgb: #{post.rgb-values(post.$gray-80)};
+
+  display: block;
 }
 
 .visually-hidden {