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.

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

e2e: add screenshot state custom height #8246

Merged
merged 6 commits into from
Feb 12, 2025

Conversation

EldarMuhamethanov
Copy link
Contributor

  • e2e-тесты

Проблема

В текущей реализации скриншотных тестов состояния компонентов располагаются вертикально друг под другом. При изменении высоты одного из состояний все нижележащие состояния сдвигаются, что затрудняет анализ diff'а и выявление конкретных изменений.

Решение

Добавлена возможность явно задавать фиксированную высоту для состояний компонента на скриншоте через свойство componentStateHeight.

Особенности реализации

  • componentStateHeight представляет собой мапу PlatformType -> number
  • Можно задать высоту:
    • Глобально для всех состояний
    • Для определенного набора состояний
    • Для каждого типа платформы отдельно
  • Если componentStateHeight не указан, высота не ограничивается (поведение остается прежним)

Плюсы и минусы решения

✅ Плюсы ❌ Минусы
Улучшенная читаемость diff'а при изменениях Необходимость ручного расчета и указания высот состояний
Четкая визуализация изменений в конкретных состояниях Дополнительная настройка для компонентов с динамической высотой
Гибкая настройка под разные платформы Возможное усложнение поддержки при частом изменении высоты состояний
Обратная совместимость с текущими тестами

Release notes

# Conflicts:
#	packages/vkui/src/components/Cell/__image_snapshots__/cell-android-chromium-dark-1-snap.png
#	packages/vkui/src/components/Cell/__image_snapshots__/cell-android-chromium-light-1-snap.png
#	packages/vkui/src/components/Cell/__image_snapshots__/cell-vkcom-chromium-dark-1-snap.png
#	packages/vkui/src/components/Cell/__image_snapshots__/cell-vkcom-chromium-light-1-snap.png
#	packages/vkui/src/components/CellButton/__image_snapshots__/cellbutton-android-chromium-dark-1-snap.png
#	packages/vkui/src/components/CellButton/__image_snapshots__/cellbutton-android-chromium-light-1-snap.png
#	packages/vkui/src/components/CellButton/__image_snapshots__/cellbutton-vkcom-chromium-dark-1-snap.png
#	packages/vkui/src/components/CellButton/__image_snapshots__/cellbutton-vkcom-chromium-light-1-snap.png
#	packages/vkui/src/components/MiniInfoCell/__image_snapshots__/miniinfocell-android-chromium-dark-1-snap.png
#	packages/vkui/src/components/MiniInfoCell/__image_snapshots__/miniinfocell-android-chromium-light-1-snap.png
#	packages/vkui/src/components/MiniInfoCell/__image_snapshots__/miniinfocell-vkcom-chromium-dark-1-snap.png
#	packages/vkui/src/components/MiniInfoCell/__image_snapshots__/miniinfocell-vkcom-chromium-light-1-snap.png
#	packages/vkui/src/components/RichCell/RichCell.e2e-playground.tsx
#	packages/vkui/src/components/RichCell/__image_snapshots__/richcell-android-chromium-dark-1-snap.png
#	packages/vkui/src/components/RichCell/__image_snapshots__/richcell-android-chromium-light-1-snap.png
#	packages/vkui/src/components/RichCell/__image_snapshots__/richcell-ios-webkit-dark-1-snap.png
#	packages/vkui/src/components/RichCell/__image_snapshots__/richcell-ios-webkit-light-1-snap.png
#	packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-chromium-dark-1-snap.png
#	packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-chromium-light-1-snap.png
#	packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-firefox-dark-1-snap.png
#	packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-firefox-light-1-snap.png
#	packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-webkit-dark-1-snap.png
#	packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-webkit-light-1-snap.png
#	packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-android-chromium-dark-1-snap.png
#	packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-android-chromium-light-1-snap.png
#	packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-dark-1-snap.png
#	packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-light-1-snap.png
@EldarMuhamethanov EldarMuhamethanov self-assigned this Feb 6, 2025
@EldarMuhamethanov EldarMuhamethanov requested a review from a team as a code owner February 6, 2025 14:36
@EldarMuhamethanov EldarMuhamethanov marked this pull request as draft February 6, 2025 14:36
Copy link

codesandbox-ci bot commented Feb 6, 2025

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Copy link
Contributor

github-actions bot commented Feb 6, 2025

size-limit report 📦

Path Size
JS 396.37 KB (0%)
JS (gzip) 120.39 KB (0%)
JS (brotli) 99.02 KB (0%)
JS import Div (tree shaking) 1.56 KB (0%)
CSS 348.14 KB (0%)
CSS (gzip) 43.1 KB (0%)
CSS (brotli) 34.44 KB (0%)

Copy link
Contributor

github-actions bot commented Feb 6, 2025

e2e tests

Playwright Report

Copy link

codecov bot commented Feb 6, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.54%. Comparing base (4f2d7c0) to head (48d0399).
Report is 17 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #8246      +/-   ##
==========================================
+ Coverage   95.53%   95.54%   +0.01%     
==========================================
  Files         404      404              
  Lines       11553    11920     +367     
  Branches     3836     4039     +203     
==========================================
+ Hits        11037    11389     +352     
- Misses        516      531      +15     
Flag Coverage Δ
unittests 95.54% <ø> (+0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link
Contributor

@inomdzhon inomdzhon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏

@EldarMuhamethanov EldarMuhamethanov marked this pull request as ready for review February 12, 2025 10:20
Copy link
Contributor

👀 Docs deployed

Commit 48d0399

@EldarMuhamethanov EldarMuhamethanov added this to the v7.2.0 milestone Feb 12, 2025
@EldarMuhamethanov EldarMuhamethanov merged commit 5fe0617 into master Feb 12, 2025
55 checks passed
@EldarMuhamethanov EldarMuhamethanov deleted the e.muhamethanov/screenshots-custom-height branch February 12, 2025 10:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: ✅ Done
Development

Successfully merging this pull request may close these issues.

3 participants