Skip to content

feat(qa): add visual regression baseline snapshots for canvas and SVG cipher diagrams (#1476) - #1689

Merged
csxark merged 1 commit into
csxark:mainfrom
nayanraj864-cmyk:feat/visual-regression-canvas-svg-1476
Aug 28, 2026
Merged

feat(qa): add visual regression baseline snapshots for canvas and SVG cipher diagrams (#1476)#1689
csxark merged 1 commit into
csxark:mainfrom
nayanraj864-cmyk:feat/visual-regression-canvas-svg-1476

Conversation

@nayanraj864-cmyk

@nayanraj864-cmyk nayanraj864-cmyk commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

Pull Request

Description

Implements issue #1476 by adding automated visual regression baseline snapshot tests targeting Canvas and SVG cipher diagrams under tests/visual/, updating Playwright configuration, and integrating visual baseline execution into CI scripts.

Related Issue

Closes #1476

Scope

  • Cipher module (lib/cipher/**)
  • Visualizer/route (app/**, components/**)
  • Worker/protocol (lib/workers/**, hooks/use*Worker.ts)
  • Documentation only (docs/**, *.md, MDX content)
  • Security fix (CSP, key handling, sanitization, dependency CVE)
  • Test-only (tests/**)
  • Config/chore (build, deps, CI)

Changes Made

  • Visual Test Suite: Created tests/visual/diagrams.spec.ts containing Playwright element-level screenshot tests for Canvas and SVG visualizer diagrams (Playfair, Rail Fence, Diffie-Hellman, HMAC, SM3, AES, S-Box Explorer, and Dark Mode).
  • Playwright Configuration: Updated playwright.config.ts testDir and testMatch to include tests/visual/ alongside tests/e2e/.
  • NPM Script Integration: Updated package.json "test:visual" script to "playwright test tests/visual tests/e2e/visual.spec.ts".
  • Documentation & Unit Test: Created tests/visual/README.md and added Vitest unit test suite tests/unit/visual/visualRegressionConfig.test.ts.

Testing

  • Unit tests added/updated for every code path changed (not just the happy path).
  • npm test passes locally.
  • npm run typecheck passes locally.
  • npm run lint passes locally.
  • Coverage on any touched lib/cipher/** file stays at or above 80%.
  • E2E/a11y tests added if a route or interactive component changed.

Simulation vs. Live Data

  • I have read the Simulation vs. Live Data Policy: docs/simulation-vs-live-data-policy.md
  • This change does not describe, label, or imply that a simulated operation (reduced parameters, mocked peer, synthetic randomness) is a verified or real cryptographic operation, in code, UI copy, or this PR description.

Screenshots

(Automated Playwright screenshot comparison tests configured for Canvas and SVG cipher diagrams under tests/visual/)

Checklist

  • My code follows the project guidelines.
  • I have tested my changes.
  • I have updated the documentation if required.
  • My changes address the related issue.
  • This PR focuses on a single issue.

Applicable Checklist

  • New visualizer -> Visualizer Checklist: docs/contribution-checklists.md#2-new-visualizer-checklist

Architecture Review Checklist

  • Existing shared abstractions: playwright.config.ts
  • Existing persistence mechanism: Playwright snapshot directory tests/visual/
  • Existing operation state machine: toHaveScreenshot element comparison
  • Existing authorization boundary: CI build runner & Playwright test engine
  • Existing error model: Pixel threshold assertion error
  • Existing telemetry/audit mechanism: Playwright HTML report artifact upload

Additional Notes

All Vitest unit tests (npx vitest run tests/unit/visual/visualRegressionConfig.test.ts) passed cleanly.

@nayanraj864-cmyk
feat(qa): add visual regression baseline snapshots for canvas and SVG…
d375ac9 
… cipher diagrams (csxark#1476)

- Add Playwright visual regression test suite tests/visual/diagrams.spec.ts targeting canvas and SVG diagram elements across core visualizers (Playfair, Rail Fence, Diffie-Hellman, HMAC, SM3, AES, S-Box Explorer) in light and dark modes
- Add documentation guide tests/visual/README.md for visual baseline test execution and snapshot updates
- Update playwright.config.ts testDir and testMatch to include tests/visual and tests/e2e
- Update package.json test:visual script to execute Playwright on tests/visual and tests/e2e/visual.spec.ts
- Add Vitest unit test suite tests/unit/visual/visualRegressionConfig.test.ts verifying visual test configuration parameters
@vercel

vercel Bot commented Aug 28, 2026

Copy link
Copy Markdown

@nayanraj864-cmyk is attempting to deploy a commit to the csxark's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

Warning

Review limit reached

Next included review available in 30 minutes.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: a26e47c7-7fb2-4315-99bb-d7b63fdc3489

📥 Commits

Reviewing files that changed from the base of the PR and between 264d746 and d375ac9.

📒 Files selected for processing (5)
  • package.json
  • playwright.config.ts
  • tests/unit/visual/visualRegressionConfig.test.ts
  • tests/visual/README.md
  • tests/visual/diagrams.spec.ts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

🎉 Thank You for Your Contribution

Hello @nayanraj864-cmyk,

Thank you for submitting a Pull Request to CryptoViz. We appreciate the time and effort you've invested in contributing to the project.

Your Pull Request has been received successfully and will be reviewed by the maintainers as soon as possible.

📋 Pull Request Checklist

  • ✅ Linked the related issue
  • ✅ No merge conflicts
  • ✅ Synced with the latest main branch
  • ✅ Build passes successfully
  • ✅ All tests pass

Ensuring these requirements are met helps streamline the review process and enables maintainers to review your contribution more efficiently.

❤️ Support CryptoViz

If you find CryptoViz helpful, consider supporting the project by:

  • ⭐ Starring the repository
  • 🍴 Forking the repository
  • 👤 Following Ark on GitHub
  • 💼 Connecting on LinkedIn
  • 🌐 Visiting the Portfolio

Your support helps increase the project's visibility and encourages continued development. Thank you for being a part of the CryptoViz community!

Thank you once again for contributing to CryptoViz. We appreciate your support and look forward to reviewing your contribution.

@csxark csxark added ECSoC26 Elite Coders Summer of Code 2026 good-issue and removed needs review labels Aug 28, 2026
@csxark
csxark merged commit 865d11f into csxark:main Aug 28, 2026
4 of 10 checks passed
@github-actions

github-actions Bot commented Aug 28, 2026

Copy link
Copy Markdown
Contributor

🎉 Pull Request Merged

Hello @nayanraj864-cmyk,

Thank you for your contribution to CryptoViz. Your Pull Request has been reviewed and successfully merged into the project.

We sincerely appreciate the time and effort you invested in improving the project. Contributions like yours help make CryptoViz better for the entire community.

We look forward to your future contributions and hope to collaborate with you again.

❤️ Support CryptoViz

If you find CryptoViz helpful, consider supporting the project by:

  • ⭐ Starring the repository
  • 🍴 Forking the repository
  • 👤 Following Ark on GitHub
  • 💼 Connecting on LinkedIn
  • 🌐 Visiting the Portfolio

Your support helps increase the project's visibility and encourages continued development. Thank you for being a part of the CryptoViz community!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

ECSoC26-L2 ECSoC26 Elite Coders Summer of Code 2026 good-issue

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[QA] Add automated visual regression baseline snapshots for canvas and SVG cipher diagrams

2 participants

@nayanraj864-cmyk @csxark