chore(components-angular, nextjs-integration): add general component e2e test suite

[alionazherdetska]

Depends on

• chore: remove playwright continue-on-error flag #6459

📄 Description

This PR adds E2E tests for component error detection in Angular (Cypress) and Next.js (Playwright) integration packages, plus fixes for issues discovered during testing.

• Added component error monitoring utilities that filter component-specific errors
• Implemented hydration error filtering for Next.js tests
• Created tests which validate components render, attach to DOM, and hydrate without errors

Fixes

1. post-menu Validation Timing

Deferred label validation with requestAnimationFrame() to fix timing issues where child componentDidLoad runs before parent finishes passing props

2. Nextjs Integration package Page Issues (oversight from component API update):

• Added missing required label="Demo menu" attribute to
• Removed second"Ligilo teksto" link from card component

Notes

Tests intentionally exclude hydration errors (handled separately in ssr.spec.ts)
Error monitoring focuses on runtime component issues, not SSR mismatches

📝 Checklist

• ✅ My code follows the style guidelines of this project
• 🛠️ I have performed a self-review of my own code
• 📄 I have made corresponding changes to the documentation
• ⚠️ My changes generate no new warnings or errors
• 🧪 I have added tests that prove my fix is effective or that my feature works
• ✔️ New and existing unit tests pass locally with my changes

[changeset-bot]

⚠️ No Changeset found

Latest commit: 241e499

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[swisspost-bot]

Related Previews

• https://preview-6471--swisspost-design-system-next.netlify.app
• https://preview-6471--swisspost-design-system-next.netlify.app?devModeEnabled=true

[Copilot]

Pull Request Overview

This PR updates the tabs component API and improves test coverage for web components. The main changes involve renaming component references from PostTabHeader to PostTabItem, updating prop names from name/panel to name/for, adding a label prop to PostMenu, and implementing comprehensive component error testing for both Next.js and Angular integrations.

Key Changes

• Tabs component API updated with new prop naming conventions (for instead of name for panels, name attribute for tab items)
• Added robust error monitoring for components in test suites using new error filter utilities
• Updated documentation to reflect the new tabs API across multiple MDX files

Reviewed Changes

Copilot reviewed 18 out of 26 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Updated detect-libc dependency version from 2.0.4 to 2.1.2
packages/nextjs-integration/src/app/ssr/page.tsx	Updated to use PostTabItem instead of PostTabHeader, changed prop names, added new tabs examples
packages/nextjs-integration/playwright/tests/components.spec.ts	New test file for component hydration and error checking
packages/nextjs-integration/playwright/support/component-error-filter.ts	New utility for capturing and filtering component errors
packages/documentation/src/stories/packages/internet-header/internet-header.docs.mdx	Updated tabs usage to new API (post-tab-item and for attribute)
packages/documentation/src/stories/packages/icons/package-icons.mdx	Updated tabs usage to new API
packages/documentation/src/stories/packages/components/components.docs.mdx	Removed trailing whitespace
packages/documentation/src/stories/packages/components-react/components-react.docs.mdx	Added "cp" typo to heading
packages/documentation/src/stories/foundations/icons/icon.docs.mdx	Mixed old and new tabs API usage - uses old post-tab-header elements
packages/documentation/src/stories/components/tabs/tabs.stories.ts	Added InProgress status tag, removed some default args
packages/documentation/src/stories/components/tabs/tabs.docs.mdx	Updated imports and added component installation section
packages/documentation/src/stories/components/card-product/card-product.docs.mdx	Updated imports and added PackageTag
packages/documentation/src/stories/components/card-control/card-control.docs.mdx	Simplified installation section using shared component
packages/documentation/src/shared/packages-docs-layout.mdx	Removed trailing whitespace
packages/documentation/.storybook/styles/components/tabs.scss	Removed trailing whitespace
packages/components/src/components/post-tabs/readme.md	Changed activePanel type from string to any
packages/components/src/components/post-tabs/post-tabs.tsx	Removed trailing whitespace
packages/components/src/components/post-tab-panel/post-tab-panel.tsx	Removed trailing whitespace
packages/components/src/components/post-tab-header/readme.md	Updated component name from post-tab-header to post-tab-item
packages/components/src/components/post-tab-header/post-tab-header.tsx	Removed trailing whitespace
packages/components/src/components/post-menu/post-menu.tsx	Added requestAnimationFrame workaround for label validation timing
packages/components/cypress/e2e/tabs.cy.ts	Removed trailing whitespace
packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.ts	Added PostPopoverTrigger import and fixed formatting
packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html	Updated popover markup to use new trigger component
packages/components-angular/projects/consumer-app/cypress/support/component-error-filter.ts	New utility for Cypress component error capture
packages/components-angular/projects/consumer-app/cypress/e2e/components.cy.ts	Comprehensive rewrite using component-names.json and error filtering

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (2)

packages/documentation/src/stories/foundations/icons/icon.docs.mdx:40

• The tabs API is inconsistent with the rest of the PR changes. This should use post-tab-item with name attribute and post-tab-panel with for attribute to match the updated API used in other documentation files.

  <post-tab-header panel="component">Usage as Web-Component</post-tab-header>
  <post-tab-panel name="component">

packages/documentation/src/stories/foundations/icons/icon.docs.mdx:110

• The tabs API is inconsistent with the rest of the PR changes. This should use post-tab-item with name attribute and post-tab-panel with for attribute to match the updated API used in other documentation files.

  <post-tab-header panel="scss">Usage as CSS-Background</post-tab-header>
  <post-tab-panel name="scss">

[Copilot]

The tabs API is inconsistent with the rest of the PR changes. This file still uses the old post-tab-header element with panel attribute and post-tab-panel with name attribute, while other documentation files have been updated to use post-tab-item with name attribute and post-tab-panel with for attribute. This should be updated for consistency.

[Copilot]

The tabs API is inconsistent with the rest of the PR changes. This should use post-tab-item with name attribute and post-tab-panel with for attribute to match the updated API used in other documentation files.

[sonarqubecloud]

Quality Gate failed

Failed conditions
12.5% Duplication on New Code (required ≤ 3%)
1 New Code Smells (required ≤ 0)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE