Skip to content

Commit f30040d

Browse files
alionazherdetskaalionazherdetska
committed
Merge branch 'add-missing-components-markup-to-angular-integration-package' into e2e-tabs-component-angular-nextjs
2 parents acc52e4 + 0c8b361 commit f30040d

File tree

14 files changed

+442
-144
lines changed

14 files changed

+442
-144
lines changed

‎packages/components-angular/projects/consumer-app/cypress/e2e/components.cy.ts‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,24 @@
1-
import { setupComponentErrorCapture, assertNoComponentErrors } from '../support/component-error-filter';
2-
import { componentNames } from '@swisspost/design-system-components/dist/component-names.json';
1+
import * as Components from '@swisspost/design-system-components/dist';
2+
3+
const COMPONENT_TAG_NAMES = Object.keys(Components)
4+
.filter(c => /^Post([A-Z][a-z]+)+$/.test(c))
5+
.map(c => c.replace(/([a-z0–9])([A-Z])/g, '$1-$2').toLowerCase());
36

47
describe('Components', () => {
58
beforeEach(() => {
69
cy.visit('/');
7-
});
8-
9-
componentNames.forEach(componentName => {
10-
it(`should contain <${componentName}>`, () => {
11-
cy.get(componentName).first().should('exist');
10+
cy.window().then(win => {
11+
cy.wrap(cy.spy(win.console, 'error')).as('consoleError');
1212
});
1313
});
1414

15-
componentNames.forEach(componentName => {
16-
it(`should render and be attached: <${componentName}>`, () => {
17-
cy.get(`${componentName}.hydrated`).first().should('exist');
18-
});
15+
it('should not log any error', () => {
16+
cy.get('@consoleError').should('not.have.been.called');
1917
});
2018

21-
it('should not have console errors from components', () => {
22-
const errorCapture = setupComponentErrorCapture(componentNames);
23-
24-
cy.visit('/', {
25-
onBeforeLoad: errorCapture.onBeforeLoad
19+
COMPONENT_TAG_NAMES.forEach(tagName => {
20+
it(`should contain <${tagName}>`, () => {
21+
cy.get(tagName).should('exist');
2622
});
27-
28-
// Wait for all components to hydrate and any asynchronous errors to surface
29-
cy.wait(500);
30-
31-
assertNoComponentErrors(errorCapture.errors, componentNames);
3223
});
3324
});

‎packages/components-angular/projects/consumer-app/cypress/support/component-error-filter.ts‎

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎packages/components-angular/projects/consumer-app/src/app/app.component.html‎

Lines changed: 222 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,119 @@
1-
<header class="palette palette-alternate">
2-
<nav class="container py-8">
1+
<post-header>
2+
<!-- Logo -->
3+
<post-logo slot="post-logo" url="/">Homepage</post-logo>
4+
5+
<!-- Target Group -->
6+
<ul slot="target-group" class="target-group">
7+
<li>
8+
<a href="#" class="active">Private customers</a>
9+
</li>
10+
<li>
11+
<a href="#">Business customers</a>
12+
</li>
13+
</ul>
14+
15+
<!-- Global controls (Search) -->
16+
<ul class="list-inline" slot="global-controls">
17+
<li>
18+
<a href="">
19+
<span>Search</span>
20+
<post-icon aria-hidden="true" name="search"></post-icon>
21+
</a>
22+
</li>
23+
</ul>
24+
25+
<!-- Meta navigation -->
26+
<ul class="list-inline" slot="meta-navigation">
27+
<li>
28+
<a href="">
29+
Jobs
30+
<post-icon name="jobs" aria-hidden="true"></post-icon>
31+
</a>
32+
</li>
33+
<li>
34+
<a href="">
35+
Create Account
36+
<post-icon name="adduser" aria-hidden="true"></post-icon>
37+
</a>
38+
</li>
39+
</ul>
40+
41+
<!-- Language switch -->
42+
<post-language-switch
43+
caption="Change the language"
44+
description="The currently selected language is English."
45+
variant="list"
46+
name="language-switch-example"
47+
slot="post-language-switch"
48+
>
49+
<post-language-option code="de" name="German">de</post-language-option>
50+
<post-language-option code="fr" name="French">fr</post-language-option>
51+
<post-language-option code="it" name="Italian">it</post-language-option>
52+
<post-language-option active="true" code="en" name="English">en</post-language-option>
53+
</post-language-switch>
54+
55+
<!-- Global header login/user menu -->
56+
57+
<a href="" slot="global-login">
58+
<span>Login</span>
59+
<post-icon name="login"></post-icon>
60+
</a>
61+
62+
<!-- Menu button for mobile -->
63+
<post-togglebutton slot="post-togglebutton">
64+
<span>Menu</span>
65+
<post-icon aria-hidden="true" name="burger" data-showwhen="untoggled"></post-icon>
66+
<post-icon aria-hidden="true" name="closex" data-showwhen="toggled"></post-icon>
67+
</post-togglebutton>
68+
69+
<!-- Main navigation -->
70+
<post-mainnavigation caption="Main navigation">
71+
<post-list title-hidden="">
72+
<h2>Main Navigation</h2>
73+
<!-- Link only level 1 -->
74+
<post-list-item slot="post-list-item">
75+
<a href="/letters">Letters</a>
76+
</post-list-item>
77+
<post-list-item slot="post-list-item">
78+
<a href="/packages">Packages</a>
79+
</post-list-item>
80+
81+
<!-- Level 1 with megadropdown -->
82+
@for (dropdown of megadropdowns; track dropdown.id) {
83+
<post-list-item slot="post-list-item">
84+
<post-megadropdown-trigger [for]="dropdown.id">{{ dropdown.trigger }}</post-megadropdown-trigger>
85+
<post-megadropdown [id]="dropdown.id">
86+
<button slot="back-button" class="btn btn-tertiary px-0 btn-sm">
87+
<post-icon name="arrowleft"></post-icon>
88+
Back
89+
</button>
90+
<post-closebutton slot="close-button">Close</post-closebutton>
91+
<h2 slot="megadropdown-title">{{ dropdown.title }}</h2>
92+
<a slot="megadropdown-overview-link" [href]="dropdown.overviewLink">Overview {{ dropdown.trigger }}</a>
93+
@for (section of dropdown.sections; track section.title) {
94+
<post-list>
95+
@if (section.titleLink) {
96+
<h3><a [href]="section.titleLink">{{ section.title }}</a></h3>
97+
} @else {
98+
<h3>{{ section.title }}</h3>
99+
}
100+
@for (link of section.links; track link.text) {
101+
<post-list-item slot="post-list-item">
102+
<a [href]="link.url">{{ link.text }}</a>
103+
</post-list-item>
104+
}
105+
</post-list>
106+
}
107+
</post-megadropdown>
108+
</post-list-item>
109+
}
110+
</post-list>
111+
</post-mainnavigation>
112+
</post-header>
113+
114+
<header class="palette palette-alternate my-24">
115+
<nav class="container py-12">
116+
<p class="mb-12"><strong>Component Showcase Routes:</strong></p>
3117
<ul class="d-flex flex-wrap row-gap-4 column-gap-16 m-0 list-unstyled">
4118
<li *ngFor="let route of navigationRoutes">
5119
<a [routerLink]="route.path">{{ route.title }}</a>
@@ -8,7 +122,112 @@
8122
</nav>
9123
</header>
10124

125+
<div class="container">
126+
<post-breadcrumbs
127+
home-url="/"
128+
home-text="Home"
129+
label="Breadcrumbs"
130+
menu-label="More breadcrumb items"
131+
>
132+
<post-breadcrumb-item url="/section1">Section 1</post-breadcrumb-item>
133+
<post-breadcrumb-item url="/section2">Section 2</post-breadcrumb-item>
134+
<post-breadcrumb-item url="/section3">Section 3</post-breadcrumb-item>
135+
</post-breadcrumbs>
136+
</div>
137+
11138
<main class="container my-16">
12139
<h1>Hurray, it works!</h1>
13140
<router-outlet></router-outlet>
14-
</main>
141+
</main>
142+
143+
<post-back-to-top label="Back to top button"></post-back-to-top>
144+
145+
<post-footer label="Footer label">
146+
@for (grid of footerGrids; track grid.slot) {
147+
<span [attr.slot]="grid.slot + '-title'">{{ grid.title }}</span>
148+
<post-list [attr.slot]="grid.slot" [attr.id]="grid.slot">
149+
<h3>{{ grid.title }}</h3>
150+
@for (link of footerLinks.slice(0, grid.linkCount); track link.text) {
151+
<post-list-item>
152+
<a [href]="link.url">{{ link.text }}</a>
153+
</post-list-item>
154+
}
155+
</post-list>
156+
}
157+
158+
<post-list slot="socialmedia">
159+
<h3>Follow us</h3>
160+
@for (social of socialMediaLinks; track social.name) {
161+
<post-list-item>
162+
<a [href]="social.url" class="btn btn-primary btn-icon">
163+
<post-icon aria-hidden="true" [name]="social.icon"></post-icon>
164+
<span class="visually-hidden">{{ social.name }}</span>
165+
</a>
166+
</post-list-item>
167+
}
168+
</post-list>
169+
170+
<post-list slot="app">
171+
<h3>Download app</h3>
172+
<post-list-item>
173+
<a
174+
class="app-store-badge"
175+
href="https://play.google.com/store/apps/details?id=com.nth.swisspost&amp;hl=de_CH&amp;pli=1"
176+
>
177+
<img
178+
width="135"
179+
height="40"
180+
src="https://next.design-system.post.ch/assets/images/google-play-badge.svg"
181+
alt="Google Play Store badge"
182+
/>
183+
<span class="visually-hidden">Download the App on Google Play</span>
184+
</a>
185+
</post-list-item>
186+
<post-list-item>
187+
<a
188+
class="app-store-badge"
189+
href="https://apps.apple.com/ch/app/die-post/id378676700"
190+
>
191+
<img
192+
width="120"
193+
height="40"
194+
src="https://next.design-system.post.ch/assets/images/apple-store-badge.svg"
195+
alt="Apple App Store badge"
196+
/>
197+
<span class="visually-hidden">Download the App on the Apple Store</span>
198+
</a>
199+
</post-list-item>
200+
</post-list>
201+
202+
<post-list slot="businesssectors">
203+
<h3>Die schweizerische Post AG</h3>
204+
<post-list-item>
205+
<a href="https://www.postauto.ch">PostAuto</a>
206+
</post-list-item>
207+
<post-list-item>
208+
<a href="https://www.postfinance.ch">PostFinance</a>
209+
</post-list-item>
210+
</post-list>
211+
212+
<post-list slot="meta" title-hidden="">
213+
<h3>Meta</h3>
214+
@for (meta of metaLinks; track meta.text) {
215+
<post-list-item>
216+
<a [href]="meta.url">{{ meta.text }}</a>
217+
</post-list-item>
218+
}
219+
<post-list-item>
220+
<button
221+
class="btn btn-link"
222+
[style.minHeight]="0"
223+
[style.border]="'0 none'"
224+
[style.fontWeight]="'inherit'"
225+
>
226+
Cookie Settings
227+
</button>
228+
</post-list-item>
229+
</post-list>
230+
231+
<span slot="copyright">© Copyright 2024 by Swiss Post Ltd.</span>
232+
<span slot="copyright">All rights reserved.</span>
233+
</post-footer>

0 commit comments

Comments
 (0)