[DPEDE-7325] Fix visual tests

[NachoCasaleLinde]

https://lumen.atlassian.net/browse/DPEDE-7325

This pull request introduces several improvements and fixes across the codebase, focusing on visual regression test stability, UI consistency, and dependency updates. The most significant changes include normalizing time picker scroll positions in tests for deterministic screenshots, updating icon usage for breadcrumbs, and upgrading key dependencies.

Visual Regression and UI Consistency Improvements:

• Added logic in backstop_data/engine_scripts/playwright/onReady.cjs to normalize the scroll position of chi time-picker columns before screenshots, ensuring deterministic visual regression results.
• Updated breadcrumb icons in tests/components/app-layout.pug from icon-chevron-left to icon-arrow-left for consistency with the new icon set. [1] [2] [3] [4]
• Adjusted grid class usage in card alert test cases in tests/components/card.pug and tests/custom-elements/card.pug to use a custom .w-1000 width for improved layout consistency; corresponding style added. [1] [2] [3] [4]
• Refined SCSS selector in src/chi/components/expansion-panel/expansion-panel.scss to exclude chi-tooltip and .chi-icon.-state from a universal child selector, preventing unintended styling.

Dependency Updates:

• Bumped @centurylink/chi, @centurylink/chi-custom-elements, and @centurylink/chi-vue to latest versions in tests/package-tests.json and tests/package-lock-tests.json to ensure compatibility and include recent bug fixes and features. [1] [2] [3]

[lumen-jenkins-prod]

The CI pipeline has run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-2113/2/. ✅

[lumen-jenkins-prod]

You can check this PRs instance in https://nginx-pr-2113-ux-chi.rke-odc-test.corp.intranet (internal)

[Copilot]

Pull request overview

Note

Copilot couldn't run its full agentic review because no GitHub Actions runner was available. Make sure your repository has a runner available to run Copilot's review, or add a copilot-setup-steps.yml file specifying one with the runs-on attribute. See the docs for more details.

This PR targets more stable visual regression tests and UI consistency by normalizing time-picker scroll positions before screenshots, adjusting a few test layouts/icons, and bumping Chi-related dependencies.

Changes:

• Normalize chi time-picker column scroll positions in Playwright Backstop onReady to produce deterministic screenshots.
• Update breadcrumb back-link icons in app layout visual test fixtures.
• Adjust card alert test layouts to a fixed 1000px width and refine an expansion-panel SCSS selector; bump Chi package versions used by tests.

Reviewed changes

Copilot reviewed 7 out of 282 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
tests/package-tests.json	Bumps Chi and related dependencies used in tests.
tests/package-lock-tests.json	Updates lockfile metadata to match bumped test dependency versions.
tests/custom-elements/card.pug	Adds a fixed-width helper class and applies it to the alert grid for consistent layout.
tests/components/card.pug	Same fixed-width helper and alert grid change for component test fixture.
tests/components/app-layout.pug	Replaces breadcrumb back icon class to align with the updated icon set.
src/chi/components/expansion-panel/expansion-panel.scss	Excludes tooltip/state icons from a universal child selector to avoid unintended styling.
backstop_data/engine_scripts/playwright/onReady.cjs	Adds deterministic time-picker scroll normalization right before screenshot capture.

Comments suppressed due to low confidence (4)

src/chi/components/expansion-panel/expansion-panel.scss:1

• :not() with a selector list is a newer CSS feature and may not be handled consistently by all toolchains/targets. Consider rewriting as chained negations (e.g., *:not(chi-tooltip):not(.chi-icon.-state)) to improve compatibility while keeping the same behavior.
  backstop_data/engine_scripts/playwright/onReady.cjs:1
• The scroll normalization depends on a hard-coded pixel value (24), which can become brittle when the time-picker item height changes (e.g., due to font/spacing updates). Prefer deriving this from the DOM (e.g., active.offsetHeight or computed styles) or documenting precisely why 24px is correct to reduce future test breakage.
  tests/components/card.pug:1
• The same .w-1000 helper style is introduced in multiple Pug fixtures (also in tests/custom-elements/card.pug). To reduce duplication and keep visual test helpers consistent, consider moving this to a shared test stylesheet/helper include (or a single common block styles import) so future width tweaks only need to be made in one place.
  tests/components/card.pug:1
• The custom class name w-1000 is close to common utility naming but isn’t clearly scoped to tests and may be confused with a framework utility. Consider a more explicit name like test-w-1000 / fixture-w-1000 to indicate intent and avoid collisions.

[lumen-jenkins-prod]

The CI pipeline has run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-2113/3/. ✅

[lumen-jenkins-prod]

You can check this PRs instance in https://nginx-pr-2113-ux-chi.rke-odc-test.corp.intranet (internal)

[lumn-sonarent]

SonarQube Quality Gate

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[lumen-jenkins-prod]

The CI pipeline has run successfully in https://jenkinsprod.corp.intranet:8443/job/UX-CHI/job/Productive/job/Chi/job/PR-2113/4/. ✅

[lumen-jenkins-prod]

You can check this PRs instance in https://nginx-pr-2113-ux-chi.rke-odc-test.corp.intranet (internal)

[ASanchLumen]

@josecarlosgonzalezv @wojciechwlodarczyklumen Should we enable again the tests in the pipelines?

[wojciechwlodarczyklumen]

@josecarlosgonzalezv @wojciechwlodarczyklumen Should we enable again the tests in the pipelines?

Theoretically we should. But maybe we should just migrate to GH actions first. Then take care of that (Maybe also introduce paralel checks of tests to speed it up - if possible)