Skip to content

Re-implementing snapshot testing in cypress, as none of the dependencies I found are maintained and working#4039

Merged
olemartinorg merged 2 commits intomainfrom
feat/diy-snapshot-testing
Mar 4, 2026
Merged

Re-implementing snapshot testing in cypress, as none of the dependencies I found are maintained and working#4039
olemartinorg merged 2 commits intomainfrom
feat/diy-snapshot-testing

Conversation

@olemartinorg
Copy link
Copy Markdown
Contributor

@olemartinorg olemartinorg commented Mar 3, 2026

Description

I spent some time today making sure the snapshots.js file gets updated whenever we upgrade the cypress version (#4035), but then I looked at the dependency dashboard (#410) that the entire plugin is archived and not available anymore. I tried https://github.com/meinaart/cypress-plugin-snapshots instead, but that didn't seem to be compatible with Cypress 10...

This re-implements snapshot testing, without any annoying version number in the snapshot file. Plain and simple.

Related Issue(s)

  • closes #{issue number}

Verification/QA

  • Manual functionality testing
    • I have tested these changes manually
    • Creator of the original issue (or service owner) has been contacted for manual testing (or will be contacted when released in alpha)
    • No testing done/necessary
  • Automated tests
    • Unit test(s) have been added/updated
    • Cypress E2E test(s) have been added/updated
    • No automatic tests are needed here (no functional changes/additions)
    • I want someone to help me make some tests
  • UU/WCAG (follow these guidelines until we have our own)
    • I have tested with a screen reader/keyboard navigation/automated wcag validator
    • No testing done/necessary (no DOM/visual changes)
    • I want someone to help me perform accessibility testing
  • User documentation @ altinn-studio-docs
    • Has been added/updated
    • No functionality has been changed/added, so no documentation is needed
    • I will do that later/have created an issue
  • Support in Altinn Studio
    • Issue(s) created for support in Studio
    • This change/feature does not require any changes to Altinn Studio
  • Sprint board
    • The original issue (or this PR itself) has been added to the Team Apps project and to the current sprint board
    • I don't have permissions to do that, please help me out
  • Labels
    • I have added a kind/* and backport* label to this PR for proper release notes grouping
    • I don't have permissions to add labels, please help me out

Summary by CodeRabbit

  • Refactor

    • Snapshot testing rebuilt to use a JSON-backed custom implementation and unified collection/matching flow.
  • New Features

    • Added a new snapshot matcher command for end-to-end tests that reads/writes JSON snapshots.
  • Chores

    • Removed external snapshot library and updated test support/configuration files.
    • Converted legacy snapshot data into the new JSON format and updated test data collection.

@olemartinorg olemartinorg added the ignore-for-release Pull requests to be ignored in release notes label Mar 3, 2026
@olemartinorg olemartinorg added backport-ignore This PR is a new feature and should not be cherry-picked onto release branches taskforce/next Issues that belongs to the named task-force labels Mar 3, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Mar 3, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4a1fcc8 and 9ed52f6.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (1)
  • package.json
💤 Files with no reviewable changes (1)
  • package.json

📝 Walkthrough

Walkthrough

Snapshot testing was migrated from an external package to an in-repo solution: snapshots converted from JS to JSON, Cypress tasks for reading/writing/checking snapshots were added, and a new toMatchSnapshot command drives read/write/compare via snapshots.json.

Changes

Cohort / File(s) Summary
Cypress config & tasks
cypress.config.js
Added snapshotsPath and three Cypress tasks: readSnapshot(key), snapshotExists(key), and writeSnapshot({key,value}) to manage snapshots.json.
ESLint & Renovate
eslint.config.mjs, renovate.json
Removed the exclusion for snapshots.js from ESLint ignores; removed custom Renovate manager and related package rule targeting snapshots.
Package manifest
package.json
Removed the @cypress/snapshot dependency from dependencies (migration away from external snapshot package).
Snapshot storage
snapshots.js, snapshots.json
Deleted the JS module snapshots.js (large exported snapshot object); added snapshots.json containing the same comprehensive snapshot data as JSON.
Cypress support/commands
test/e2e/support/global.ts, test/e2e/support/index.ts, test/e2e/support/snapshot.ts
Replaced the old snapshot chainable with toMatchSnapshot() declaration; switched from explicit registerSnapshot() to importing the module; added toMatchSnapshot command that uses the Cypress tasks to read/compare or write snapshots keyed by test titlePath.
E2E test change
test/e2e/integration/frontend-test/all-process-steps.ts
Refactored data-model collection: gather all XML element models into an aggregated dataModels object first, then snapshot the aggregated result instead of snapshotting per-element inline.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: re-implementing snapshot testing in Cypress by replacing the archived plugin with a custom in-repo solution.
Description check ✅ Passed The PR description covers key sections including rationale (archived plugin, incompatible alternative), implementation approach, and verification checklist with appropriate selections.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/diy-snapshot-testing

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 and usage tips.

Comment thread cypress.config.js Dismissed
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@cypress.config.js`:
- Around line 49-67: The snapshot read/write logic (readSnapshot,
snapshotExists, writeSnapshot using snapshotsPath) is vulnerable to TOCTOU
races; replace the separate existsSync+read sequences with a single helper like
loadSnapshots() that reads/parses the file (returning {} if missing) and then
serialize all writes using an in-process mutex/Promise queue so concurrent tasks
enqueue read-modify-write operations rather than racing; update snapshotExists
and readSnapshot to call loadSnapshots(), and make writeSnapshot perform
loadSnapshots(), merge the new key/value, then write the file while holding the
queue lock to prevent lost updates.

In `@test/e2e/integration/frontend-test/all-process-steps.ts`:
- Around line 196-205: The loop over xmlElements currently assigns into
dataModels using dataModels[dataElement.dataType] = ..., which silently
overwrites when multiple elements share the same dataType; change this to
accumulate instead: detect if dataModels[dataElement.dataType] exists and is an
array (create one if not), then push the replaceVariableData(res.body) result
into that array inside the cy.request.then callback so all entries for the same
dataType are preserved; update any downstream consumers to handle arrays for a
given dataType.

In `@test/e2e/support/snapshot.ts`:
- Line 2: The snapshot key generation in snapshot.ts uses only
Cypress.currentTest.titlePath.join(' -- ') (variable key) which causes
collisions across spec files; include the spec identifier (e.g.,
Cypress.spec.name or Cypress.spec.relative) when building the key so it's
spec-unique (for example prepend or append Cypress.spec.name to the existing
titlePath-based key) and update any references that use key accordingly to
preserve behavior while isolating snapshots per spec.
- Around line 9-11: The current branch unconditionally calls
cy.task('writeSnapshot', { key, value: subject }) and logs "New snapshot written
for: \"${key}\"", which auto-creates baselines; change this so snapshot creation
is explicit: detect an "update" flag (e.g. via Cypress.env or a config variable)
and only call writeSnapshot and the cy.log when that flag is true; otherwise do
not write and instead fail the test (throw an Error or use Cypress assertion)
with a clear message that the snapshot for key is missing and must be updated
explicitly. Keep the references to writeSnapshot, the log message "New snapshot
written for", the key variable and subject value so you modify the exact lines.

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between db1d9b9 and 4a1fcc8.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (10)
  • cypress.config.js
  • eslint.config.mjs
  • package.json
  • renovate.json
  • snapshots.js
  • snapshots.json
  • test/e2e/integration/frontend-test/all-process-steps.ts
  • test/e2e/support/global.ts
  • test/e2e/support/index.ts
  • test/e2e/support/snapshot.ts
💤 Files with no reviewable changes (4)
  • eslint.config.mjs
  • renovate.json
  • package.json
  • snapshots.js

Comment thread cypress.config.js
Comment thread test/e2e/integration/frontend-test/all-process-steps.ts
Comment thread test/e2e/support/snapshot.ts
Comment thread test/e2e/support/snapshot.ts
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented Mar 3, 2026

@framitdavid framitdavid moved this to 🔎 In review in Team Altinn Studio Mar 4, 2026
@olemartinorg olemartinorg changed the title Re-implementing snapshot testing in cypress Re-implementing snapshot testing in cypress, as none of the dependencies I found are maintained and working Mar 4, 2026
@olemartinorg olemartinorg merged commit 6b5479f into main Mar 4, 2026
16 checks passed
@olemartinorg olemartinorg deleted the feat/diy-snapshot-testing branch March 4, 2026 13:32
@github-project-automation github-project-automation Bot moved this from 🔎 In review to ✅ Done in Team Altinn Studio Mar 4, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport-ignore This PR is a new feature and should not be cherry-picked onto release branches ignore-for-release Pull requests to be ignored in release notes taskforce/next Issues that belongs to the named task-force

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

3 participants