POC Snapshot tests #3706
POC Snapshot tests #3706
Conversation
|
✅ Deploy Preview for adyen-web ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Summary of ChangesHello @ScottiBR, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the robustness of end-to-end testing by integrating DOM snapshot tests for critical payment components. The primary goal is to proactively identify and prevent structural regressions in the Drop-in and Gift Card interfaces, ensuring visual consistency and proper rendering, especially concerning dynamic DOM manipulations like accessibility element additions. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces DOM snapshot testing for the Drop-in and Gift Card components to catch structural regressions. The implementation is good, adding a new SCREENSHOT_CONFIG constant for consistency. I've made a couple of suggestions: one to improve test stability by ensuring a component is fully visible before taking a snapshot, and another to adhere to file formatting conventions.
packages/e2e-playwright/tests/e2e/dropin/sessions/dropin.sessions.spec.ts
Outdated
Show resolved
Hide resolved
size-limit report 📦
|
ScottiBR
force-pushed
the
add-snapshot-tests
branch
6 times, most recently
from
dc57efd to
a7cede9
Compare
ScottiBR
force-pushed
the
add-snapshot-tests
branch
2 times, most recently
from
981e785 to
afd6b73
Compare
ScottiBR
force-pushed
the
add-snapshot-tests
branch
from
afd6b73 to
8069abe
Compare
|
1 participant
📋 Pull Request Checklist
📝 Summary
This PR introduces visual snapshot testing into our existing E2E framework, focusing initially on the Credit Card and Gift Card components.
Using axe-core static Storybook testing to reuse our existing architecture proved unviable because we are not currently mocking backend requests in that environment. This led to inconsistencies across test runs (e.g., unpredictable payment method ordering) that made snapshot tests unreliable.
This is a "quick win" using our stable E2E environment. Added snapshot assertions to the existing Credit Card and Gift Card E2E tests. This acts as a baseline. It allows us to catch regressions immediately while we iteratively tune the snapshot configuration parameters (thresholds, masking, etc.) to better reflect the specifics of our Web SDK environment.
🧪 Tested scenarios
🔗 Related GitHub Issue / Internal Ticket number
https://youtrack.is.adyen.com/issue/COSDK-850/Implement-Snapshot-Tests-for-Drop-in-credit-card
Closes: COSDK-850