From 99aa577f80ce42de46f3df5528f3799a0dbcdcb5 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Wed, 6 Dec 2023 14:54:20 +0100 Subject: [PATCH] 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 https://github.com/swisspost/design-system/issues/2364. --- packages/components/cypress/e2e/popover.cy.ts | 6 +++--- .../components/cypress/e2e/popovercontainer.cy.ts | 4 ++-- .../cypress/fixtures/post-popover.test.html | 15 +++++++++++++++ .../src/components/post-popover/post-popover.scss | 2 ++ 4 files changed, 22 insertions(+), 5 deletions(-) create mode 100644 packages/components/cypress/fixtures/post-popover.test.html diff --git a/packages/components/cypress/e2e/popover.cy.ts b/packages/components/cypress/e2e/popover.cy.ts index d0d2d17317..d551244db6 100644 --- 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 index 7e606f07d6..2eef055cc9 100644 --- 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 new file mode 100644 index 0000000000..fabb184c94 --- /dev/null +++ b/packages/components/cypress/fixtures/post-popover.test.html @@ -0,0 +1,15 @@ + + + + + + Document + + + + + +

This is a test

+ + + diff --git a/packages/components/src/components/post-popover/post-popover.scss b/packages/components/src/components/post-popover/post-popover.scss index b93b642829..b294125742 100644 --- 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 {