Skip to content

[FEATURE] Run and update Component Snapshots in the backend - #50

Open
Kanti wants to merge 59 commits into
mainfrom
feat/26-snapshot-gui
Open

Kanti wants to merge 59 commits into
mainfrom
feat/26-snapshot-gui

Conversation

@Kanti

@Kanti Kanti commented Oct 5, 2026 •

Copy link
Copy Markdown
Member

Adds Component Snapshot tests and updates to the Frontend Studio backend. Test individual variants, components or folders, or use Test all for the complete catalog, including filtered and collapsed rows. Tests render saved fixtures with the selected preview site and language.

GUI testing is enabled by default. The Enable GUI snapshot testing checkbox in Settings → Extension Configuration → frontend_studio hides the controls and disables backend snapshot requests when cleared. CLI tests and CI remain available. Snapshot requests require a backend login, a valid route token and access to the Frontend Studio module.

Tree actions appear on hover or keyboard focus. Green checkmarks require every variant in the scope to pass; red failure buttons and ✕ Results (N) open the details. The toolbar shows the passed/total count. Failure details include site/language context, a full-height variant list that scrolls independently, and a word diff with two surrounding HTML lines where available. Should and Got retain source line numbers; dynamic values use the same masking as the CLI. Guidance appears above the diff. Go to Component preserves the preview context, Copy Snapshot file location copies the project-relative path, and Copy details includes context and output. HTML and stack traces are escaped.

Normal GUI and CLI tests never write snapshot files. Missing snapshots show a warning, their file location and an explicit Create snapshot action. The GUI creates only the displayed variant's baseline for the selected site and language; CLI --update / -u creates or updates the selected scope. New files report yellow CREATED, and creating or changing files returns a nonzero CLI exit code. Review and commit the file, then rerun without updating. Created and updated snapshots do not count as passed.

Update snapshot replaces only the selected variant's existing baseline for the displayed context. Failed creation or updates retain the original result and any mismatch diff, display the write error separately, and keep the retry action available. Production and its subcontexts allow comparisons but block snapshot creation and updates.

Starting a run immediately clears previous results and discovery errors within its scope. Partial runs preserve unrelated results and errors. Site/language or component-file changes clear the catalog and results, cancel pending requests, and ignore stale responses. The toolbar shows 0/0 passed until discovery rebuilds the catalog. Snapshot files are excluded from component discovery and the development watcher.

Closes #26.

Tree results
Failure details
Narrow diff
Failed update with retained diff and retry action
Explicit snapshot creation

@Kanti
Kanti added this pull request to stack #53 October 6, 2026 07:19
@Kanti
Kanti force-pushed the feat/25-html-snapshots branch from 7ac4c4c to 7f64207 Compare October 7, 2026 09:54
@Kanti
Kanti force-pushed the feat/26-snapshot-gui branch 2 times, most recently from 4dd629f to 33734f8 Compare October 7, 2026 13:00
Kanti and others added 26 commits October 7, 2026 13:06
@Kanti
Kanti force-pushed the feat/26-snapshot-gui branch from 5ca9c1b to 50534a7 Compare October 8, 2026 11:10
@Kanti
Kanti force-pushed the feat/26-snapshot-gui branch from 50534a7 to 6b7238d Compare October 8, 2026 11:42
Base automatically changed from feat/25-html-snapshots to main October 8, 2026 14:08
@Kanti
Kanti force-pushed the feat/26-snapshot-gui branch from 933f6f9 to 2fde335 Compare October 8, 2026 14:13
@Kanti
Kanti removed this pull request from stack #53 October 8, 2026 18:19
@Kanti
Kanti force-pushed the feat/26-snapshot-gui branch 2 times, most recently from 72b8963 to e7eb9dd Compare October 9, 2026 06:13
# Conflicts:
#	Classes/Service/Snapshot/FrontendRenderer.php
#	Classes/Service/Snapshot/InlineDiff.php
#	Classes/Service/Snapshot/Runner.php
#	Configuration/Backend/AjaxRoutes.php
#	Documentation/ComponentSnapshots.md
#	Tests/Functional/Middleware/SnapshotRunnerTest.php
#	Tests/Unit/Service/Snapshot/InlineDiffTest.php
@Kanti
Kanti force-pushed the feat/26-snapshot-gui branch from e7eb9dd to fad37c9 Compare October 21, 2026 09:03
Kanti added 7 commits October 21, 2026 11:04
Test up to three fixture variants at once and start the next variant as
soon as a request finishes. Keep progress updates immediate and cancel
active and queued work when the preview context or component files change.

Document the limit and cover concurrency, failures, cancellation and
stale responses with regression tests.
Keep regular snapshot tests read-only and create missing baselines only
through the explicit Create or Update action. Distinguish created,
updated and unchanged results so only a regular test can mark a variant
as passed.

Allow Test all to succeed with an empty catalog while retaining errors
for unknown or empty explicit scopes. Update CLI output, documentation
and regression coverage for the complete snapshot lifecycle.
Validate each requested variant directly so Test all discovers the full catalog only once.

Cover unrelated malformed fixtures and invalid scopes, and add the missing snapshot creation screenshot.
Show blue double arrows for queued variants and rotate them during execution so progress is visible in the tree.

Track parent scopes and clear indicators on cancellation. Cover TYPO3 13 and 14 and document the UI with a screenshot.
Reuse catalog scope membership across tree updates while keeping progress and results current.

Disable spinner animation for reduced-motion preferences and cover both behaviors with regression tests.
Expose snapshot actions only for scopes containing fixture variants, using the complete catalog even when filtered.

Use equal-width TYPO3 status icons so checkmarks, failures and progress arrows stay aligned.

Cover fixture lifecycle, filtered scopes and icon widths, and update the documentation screenshots.
Route Go to Component through the existing navigation guard and tree selection while preserving the preview context.

Cover cancelled and approved navigation with dirty documentation in TYPO3 13 and 14, including filtered variants.

Compare complete fixture testability maps to avoid false PHPStan narrowing in the lifecycle test.
@Kanti
Kanti marked this pull request as ready for review October 21, 2026 13:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

GUI Test run

1 participant