Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(components): add e2e for the header layout shift #4861

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

chore(components): add e2e for the header layout shift #4861

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
99cbf9d
chore(components): add e2e for the header layout shift
alizedebray Mar 3, 2025
c5ad907
Merge branch 'main' into 4593-add-tests-for-the-initial-header-height
alizedebray Mar 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/sharp-frogs-change.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@swisspost/design-system-components': patch
---

Fixed issue where the local header behaved inconsistently across different browsers.
59 changes: 59 additions & 0 deletions packages/components/cypress/e2e/header.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
describe('header', { baseUrl: null, includeShadowDom: true }, () => {
const testFiles = ['post-header', 'post-header-without-title'];

testFiles.forEach(testFile => {
describe(testFile.replaceAll('-', ' '), () => {
beforeEach(() => {
cy.visit(`./cypress/fixtures/${testFile}.test.html`);

cy.get('post-header').as('header');
});

function getContentTop() {
return cy.get('main').then($main => Math.round($main.position().top));
}

function checkLayoutShift() {
// get the content position before the header is visible
let initialContentTop: number;
getContentTop().then(pos => {
initialContentTop = pos;
cy.get('@header').should('not.be.visible');
});

// check the content position did not change when the header is visible
cy.get('@header')
.should('be.visible')
.then(() => {
getContentTop().should('eq', initialContentTop);
});
}

it('should not shift layout on desktop', () => {
checkLayoutShift();
});

it('should not shift layout on mobile', () => {
cy.viewport('ipad-2');
checkLayoutShift();
});

it('should not shift layout on mobile', () => {
cy.viewport('iphone-6');
checkLayoutShift();
});
});
});

describe('Accessibility', () => {
beforeEach(() => {
cy.visit('./cypress/fixtures/post-header.test.html');
cy.get('post-header[data-hydrated]').should('be.visible');
cy.injectAxe();
});

it('Has no detectable a11y violations on load', () => {
cy.checkA11y('post-mainnavigation');
});
});
});
137 changes: 137 additions & 0 deletions packages/components/cypress/fixtures/post-header-without-title.test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="../../node_modules/@swisspost/design-system-styles/post-tokens-external.css"
/>
<link rel="stylesheet" href="../../node_modules/@swisspost/design-system-styles/elements.css" />
<link
rel="stylesheet"
href="../../node_modules/@swisspost/design-system-styles/components/header/index.css"
/>
<script src="../../dist/post-components/post-components.esm.js" type="module"></script>
</head>
<body>
<post-header>
<!-- Logo -->
<post-logo slot="post-logo">Homepage</post-logo>

<!-- Meta navigation -->
<ul class="list-inline" slot="meta-navigation">
<li><a href="">Jobs</a></li>
<li><a href="">Über uns</a></li>
</ul>

<!-- Menu button for mobile -->
<post-togglebutton slot="post-togglebutton">
<span class="visually-hidden-sm">Menu</span>
<post-icon aria-hidden="true" name="burger" data-showWhen="untoggled"></post-icon>
<post-icon aria-hidden="true" name="closex" data-showWhen="toggled"></post-icon>
</post-togglebutton>

<!-- Language switch -->
<post-language-switch
caption="Change the language"
description="The currently selected language is English."
name="language-switch-example"
slot="post-language-switch"
>
<post-language-option active="false" code="de" name="Deutsch">DE</post-language-option>
<post-language-option active="false" code="fr" name="French">FR</post-language-option>
<post-language-option active="false" code="it" name="Italiano">IT</post-language-option>
<post-language-option active="true" code="en" name="English">EN</post-language-option>
</post-language-switch>

<!-- Custom content (optional) -->
<ul class="list-inline">
<li>
<a href="#">
<span class="visually-hidden-sm">Search</span>
<post-icon aria-hidden="true" name="search"></post-icon>
</a>
</li>
<li>
<a href="#">
<span class="visually-hidden-sm">Login</span>
<post-icon aria-hidden="true" name="login"></post-icon>
</a>
</li>
</ul>

<!-- Main navigation -->
<post-mainnavigation caption="Hauptnavigation">
<button type="button" slot="back-button" class="btn btn-sm btn-tertiary">
<post-icon aria-hidden="true" name="arrowright"></post-icon> Back
</button>

<post-list title-hidden="">
<h2>Main Navigation</h2>

<!-- Link only level 1 -->
<post-list-item><a href="/briefe">Briefe</a></post-list-item>
<post-list-item><a href="/pakete">Pakete</a></post-list-item>

<!-- Level 1 with megadropdown -->
<post-list-item>
<post-megadropdown-trigger for="briefe">Briefe</post-megadropdown-trigger>
<post-megadropdown id="briefe">
<button slot="back-button" class="btn btn-tertiary btn-sm">
<post-icon name="arrowright"></post-icon>
Back
</button>
<post-closebutton slot="close-button">Schliessen</post-closebutton>
<h2 slot="megadropdown-title">Briefe title</h2>
<post-list>
<h3>Briefe senden</h3>
<post-list-item><a href="/sch">Briefe Schweiz</a></post-list-item>
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
<post-list-item><a href="">Waren Ausland</a></post-list-item>
<post-list-item><a href="">Express und Kurier</a></post-list-item>
</post-list>
<post-list>
<h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
<post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
<post-list-item><a href="">Waren Ausland</a></post-list-item>
<post-list-item><a href="">Express und Kurier</a></post-list-item>
</post-list>
</post-megadropdown>
</post-list-item>
<post-list-item>
<post-megadropdown-trigger for="pakete">Pakete</post-megadropdown-trigger>
<post-megadropdown id="pakete">
<button slot="back-button" class="btn btn-tertiary btn-sm">
<post-icon name="arrowright"></post-icon>
Back
</button>
<post-closebutton slot="close-button">Schliessen</post-closebutton>
<h2 slot="megadropdown-title">Pakete title</h2>
<post-list>
<h3>Pakete senden</h3>
<post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
<post-list-item><a href="">Waren Ausland</a></post-list-item>
<post-list-item><a href="">Express und Kurier</a></post-list-item>
</post-list>
<post-list>
<h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
<post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
<post-list-item><a href="">Waren Ausland</a></post-list-item>
<post-list-item><a href="">Express und Kurier</a></post-list-item>
</post-list>
</post-megadropdown>
</post-list-item>
</post-list>
</post-mainnavigation>
</post-header>

<main>
<h1>Page Content</h1>
</main>
</body>
</html>
140 changes: 140 additions & 0 deletions packages/components/cypress/fixtures/post-header.test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="../../node_modules/@swisspost/design-system-styles/post-tokens-external.css"
/>
<link rel="stylesheet" href="../../node_modules/@swisspost/design-system-styles/elements.css" />
<link
rel="stylesheet"
href="../../node_modules/@swisspost/design-system-styles/components/header/index.css"
/>
<script src="../../dist/post-components/post-components.esm.js" type="module"></script>
</head>
<body>
<post-header>
<!-- Logo -->
<post-logo slot="post-logo">Homepage</post-logo>

<!-- Meta navigation -->
<ul class="list-inline" slot="meta-navigation">
<li><a href="">Jobs</a></li>
<li><a href="">Über uns</a></li>
</ul>

<!-- Menu button for mobile -->
<post-togglebutton slot="post-togglebutton">
<span class="visually-hidden-sm">Menu</span>
<post-icon aria-hidden="true" name="burger" data-showWhen="untoggled"></post-icon>
<post-icon aria-hidden="true" name="closex" data-showWhen="toggled"></post-icon>
</post-togglebutton>

<!-- Language switch -->
<post-language-switch
caption="Change the language"
description="The currently selected language is English."
name="language-switch-example"
slot="post-language-switch"
>
<post-language-option active="false" code="de" name="Deutsch">DE</post-language-option>
<post-language-option active="false" code="fr" name="French">FR</post-language-option>
<post-language-option active="false" code="it" name="Italiano">IT</post-language-option>
<post-language-option active="true" code="en" name="English">EN</post-language-option>
</post-language-switch>

<!-- Application title (optional) -->
<h1 slot="title">Application title</h1>

<!-- Custom content (optional) -->
<ul class="list-inline">
<li>
<a href="#">
<span class="visually-hidden-sm">Search</span>
<post-icon aria-hidden="true" name="search"></post-icon>
</a>
</li>
<li>
<a href="#">
<span class="visually-hidden-sm">Login</span>
<post-icon aria-hidden="true" name="login"></post-icon>
</a>
</li>
</ul>

<!-- Main navigation -->
<post-mainnavigation caption="Hauptnavigation">
<button type="button" slot="back-button" class="btn btn-sm btn-tertiary">
<post-icon aria-hidden="true" name="arrowright"></post-icon> Back
</button>

<post-list title-hidden="">
<h2>Main Navigation</h2>

<!-- Link only level 1 -->
<post-list-item><a href="/briefe">Briefe</a></post-list-item>
<post-list-item><a href="/pakete">Pakete</a></post-list-item>

<!-- Level 1 with megadropdown -->
<post-list-item>
<post-megadropdown-trigger for="briefe">Briefe</post-megadropdown-trigger>
<post-megadropdown id="briefe">
<button slot="back-button" class="btn btn-tertiary btn-sm">
<post-icon name="arrowright"></post-icon>
Back
</button>
<post-closebutton slot="close-button">Schliessen</post-closebutton>
<h2 slot="megadropdown-title">Briefe title</h2>
<post-list>
<h3>Briefe senden</h3>
<post-list-item><a href="/sch">Briefe Schweiz</a></post-list-item>
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
<post-list-item><a href="">Waren Ausland</a></post-list-item>
<post-list-item><a href="">Express und Kurier</a></post-list-item>
</post-list>
<post-list>
<h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
<post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
<post-list-item><a href="">Waren Ausland</a></post-list-item>
<post-list-item><a href="">Express und Kurier</a></post-list-item>
</post-list>
</post-megadropdown>
</post-list-item>
<post-list-item>
<post-megadropdown-trigger for="pakete">Pakete</post-megadropdown-trigger>
<post-megadropdown id="pakete">
<button slot="back-button" class="btn btn-tertiary btn-sm">
<post-icon name="arrowright"></post-icon>
Back
</button>
<post-closebutton slot="close-button">Schliessen</post-closebutton>
<h2 slot="megadropdown-title">Pakete title</h2>
<post-list>
<h3>Pakete senden</h3>
<post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
<post-list-item><a href="">Waren Ausland</a></post-list-item>
<post-list-item><a href="">Express und Kurier</a></post-list-item>
</post-list>
<post-list>
<h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
<post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
<post-list-item><a href="">Waren Ausland</a></post-list-item>
<post-list-item><a href="">Express und Kurier</a></post-list-item>
</post-list>
</post-megadropdown>
</post-list-item>
</post-list>
</post-mainnavigation>
</post-header>

<main>
<h1>Page Content</h1>
</main>
</body>
</html>
Loading
Loading