test(et): migrate background snapshot coverage by Yradex · Pull Request #2559 · lynx-family/lynx-stack

Yradex · 2026-05-06T02:55:37Z

Summary by CodeRabbit

Tests
- Expanded test coverage for element template hydration with attribute slots and null handling scenarios.
- Added tests verifying keyed children order stability in rendering.
Bug Fixes
- Fixed attribute slot synchronization to properly handle null values during hydration.

Overview

This migrates the currently supported BackgroundSnapshotInstance behavior coverage into Element Template runtime tests. The new coverage focuses on ET hydrate diffing, background update emission, keyed reorder stability, and post-hydrate handle continuity.

It also aligns ET hydrate handling for serialized null versus missing background attribute slots with the existing Snapshot behavior, avoiding meaningless update noise caused by JSON serialization.

Key Points

Adds ET hydrate tests for attribute diffs, child insert/remove/reorder, empty first-screen rebuild, multi-slot alignment, slot-index isolation, and post-hydrate updates.
Adds background instance tests for raw-text updates and attribute-slot removal to null.
Adds a Preact-driven background render test file for keyed reorder stability, including randomized shuffles.
Adds an empty changeset because this only changes internal tests and an experimental ET hydrate edge case without release-facing API changes.

Verification

pnpm exec vitest run --configLoader runner -c __test__/element-template/vitest.config.ts __test__/element-template/runtime/background/hydrate.test.ts __test__/element-template/runtime/background/instance.test.ts __test__/element-template/runtime/background/render/preact.test.tsx

Checklist

Tests updated (or not required).
Documentation updated (or not required).
Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

changeset-bot · 2026-05-06T02:55:41Z

🦋 Changeset detected

Latest commit: ec9280d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-05-06T02:55:44Z

📝 Walkthrough

Walkthrough

This PR adds Element Template runtime test coverage for hydration behavior and Preact child rendering, and applies a minor logic adjustment in hydrate.ts to skip attribute updates when undefined slots are serialized as null from JSON, aligning with Snapshot behavior.

Changes

Element Template Hydration & Rendering Test Coverage

Layer / File(s)	Summary
Core Logic Fix `packages/react/runtime/src/element-template/background/hydrate.ts`	Added guard in `syncAttributeSlots` to skip emitting an Attribute update when `afterValue` is undefined and `beforeValue` is null, addressing JSON serialization edge case.
Hydration Test Infrastructure `packages/react/runtime/__test__/element-template/runtime/background/hydrate.test.ts`	Extended imports with commit context utilities; added `resetElementTemplateCommitState()` reset in `beforeEach`; new tests verify attribute slot patching during child creation and null-slot serialization handling.
Instance Update Tests `packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts`	Added `ElementTemplateUpdateOps` import; new tests verify `setAttribute` updates when raw-text data changes after hydration and explicit null emission when attribute slots are removed.
Preact Rendering Tests `packages/react/runtime/__test__/element-template/runtime/background/render/preact.test.tsx`	New test file with App component, shuffle helper, and collector; verifies keyed children order stability under re-render and random reordering stress test (100 iterations).
Metadata `.changeset/quiet-templates-smile.md`	Changeset entry documents that no package release is required; change only adds test coverage and aligns internal behavior without public API modifications.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested labels

framework:React

Suggested reviewers

HuJean
hzy

Poem

🐰 With templates hydrated and nulls now aligned,
Our tests catch the quirks that JSON would bind,
From attributes to preact, each scenario blessed,
The rabbits are hopping—your code passes the test! 🎉

🚥 Pre-merge checks | ✅ 4 | ❌ 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 (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: migrating background snapshot coverage to Element Template runtime tests, which aligns with the PR objectives.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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.}

codecov · 2026-05-06T03:06:34Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

relativeci · 2026-05-06T03:16:04Z

Web Explorer

#9358 Bundle Size — 900.03KiB (0%).

ec9280d(current) vs 68502b7 main#9352(baseline)

Bundle metrics

2 changes

	Current #9358	Baseline #9352
Initial JS	`44.46KiB`	`44.46KiB`
Initial CSS	`2.22KiB`	`2.22KiB`
Cache Invalidation	`0%`	`0%`
Chunks	`9`	`9`
Assets	`11`	`11`
Modules	`229`(`+0.44%`)	`228`
Duplicate Modules	`11`	`11`
Duplicate Code	`27.28%`(`-0.04%`)	`27.29%`
Packages	`10`	`10`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #9358	Baseline #9352
JS	`495.9KiB`	`495.9KiB`
Other	`401.92KiB`	`401.92KiB`
CSS	`2.22KiB`	`2.22KiB`

Bundle analysis report Branch Yradex:slice/element-template/02 Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-06T03:16:09Z

React MTF Example

#917 Bundle Size — 196.68KiB (0%).

ec9280d(current) vs 68502b7 main#911(baseline)

Bundle metrics no changes

	Current #917	Baseline #911
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`174`	`174`
Duplicate Modules	`66`	`66`
Duplicate Code	`44.05%`	`44.05%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #917	Baseline #911
IMG	`111.23KiB`	`111.23KiB`
Other	`85.45KiB`	`85.45KiB`

Bundle analysis report Branch Yradex:slice/element-template/02 Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-06T03:16:09Z

React External

#900 Bundle Size — 680.82KiB (0%).

ec9280d(current) vs 68502b7 main#894(baseline)

Bundle metrics no changes

	Current #900	Baseline #894
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`17`	`17`
Duplicate Modules	`5`	`5`
Duplicate Code	`8.59%`	`8.59%`
Packages	`0`	`0`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #900	Baseline #894
Other	`680.82KiB`	`680.82KiB`

Bundle analysis report Branch Yradex:slice/element-template/02 Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-06T03:16:11Z

React Example

#7785 Bundle Size — 225.52KiB (0%).

ec9280d(current) vs 68502b7 main#7779(baseline)

Bundle metrics no changes

	Current #7785	Baseline #7779
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`180`	`180`
Duplicate Modules	`69`	`69`
Duplicate Code	`44.54%`	`44.54%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #7785	Baseline #7779
IMG	`145.76KiB`	`145.76KiB`
Other	`79.77KiB`	`79.77KiB`

Bundle analysis report Branch Yradex:slice/element-template/02 Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-05-06T03:16:15Z

React Example with Element Template

#52 Bundle Size — 198.12KiB (+0.01%).

ec9280d(current) vs 68502b7 main#46(baseline)

Bundle metrics

3 changes

	Current #52	Baseline #46
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`26.42%`	`26.61%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`77`(`-3.75%`)	`80`
Duplicate Modules	`23`	`23`
Duplicate Code	`40.59%`(`+0.12%`)	`40.54%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type

1 change

1 regression

	Current #52	Baseline #46
IMG	`145.76KiB`	`145.76KiB`
Other	`52.36KiB` (`+0.05%`)	`52.34KiB`

Bundle analysis report Branch Yradex:slice/element-template/02 Project dashboard

^{Generated by RelativeCI Documentation Report issue}

coderabbitai

🧹 Nitpick comments (1)

packages/react/runtime/__test__/element-template/runtime/background/render/preact.test.tsx (1)
25-25: ⚡ Quick win

Use BUILTIN_RAW_TEXT_TEMPLATE_KEY instead of the hardcoded magic string.

If the constant's value changes, collectRawText would silently stop matching raw-text nodes without any compile-time or import-time signal. The sibling test files (instance.test.ts, hydrate.test.ts) already import the constant.
♻️ Proposed fix

Add the import at the top:
+import { BackgroundElementTemplateInstance, BUILTIN_RAW_TEXT_TEMPLATE_KEY } from '../../../../../src/element-template/background/instance.js';
-import { BackgroundElementTemplateInstance } from '../../../../../src/element-template/background/instance.js';
Then use the constant:
-      if (child.type === '__et_builtin_raw_text__') {
+      if (child.type === BUILTIN_RAW_TEXT_TEMPLATE_KEY) {
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@packages/react/runtime/__test__/element-template/runtime/background/render/preact.test.tsx`
at line 25, Replace the hardcoded magic string '__et_builtin_raw_text__' used in
the test assertion with the shared constant BUILTIN_RAW_TEXT_TEMPLATE_KEY: add
an import for BUILTIN_RAW_TEXT_TEMPLATE_KEY at the top of the test file and
update the condition (wherever child.type is compared, e.g., in the
collectRawText/test block) to use BUILTIN_RAW_TEXT_TEMPLATE_KEY so the test
tracks the canonical symbol used by instance.test.ts and hydrate.test.ts.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In
`@packages/react/runtime/__test__/element-template/runtime/background/render/preact.test.tsx`:
- Line 25: Replace the hardcoded magic string '__et_builtin_raw_text__' used in
the test assertion with the shared constant BUILTIN_RAW_TEXT_TEMPLATE_KEY: add
an import for BUILTIN_RAW_TEXT_TEMPLATE_KEY at the top of the test file and
update the condition (wherever child.type is compared, e.g., in the
collectRawText/test block) to use BUILTIN_RAW_TEXT_TEMPLATE_KEY so the test
tracks the canonical symbol used by instance.test.ts and hydrate.test.ts.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ccbed2fc-a91a-498b-b838-04f77666bf6d

📥 Commits

Reviewing files that changed from the base of the PR and between 68502b7 and ec9280d.

📒 Files selected for processing (5)

.changeset/quiet-templates-smile.md
packages/react/runtime/__test__/element-template/runtime/background/hydrate.test.ts
packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts
packages/react/runtime/__test__/element-template/runtime/background/render/preact.test.tsx
packages/react/runtime/src/element-template/background/hydrate.ts

test: migrate ET background snapshot coverage

ec9280d

Yradex marked this pull request as ready for review May 6, 2026 03:49

Yradex requested review from HuJean and hzy as code owners May 6, 2026 03:49

coderabbitai Bot added the framework:React label May 6, 2026

coderabbitai Bot reviewed May 6, 2026

View reviewed changes

HuJean approved these changes May 6, 2026

View reviewed changes

Yradex merged commit 0c6e660 into lynx-family:main May 6, 2026
144 of 149 checks passed

Yradex deleted the slice/element-template/02 branch May 6, 2026 06:14

coderabbitai Bot mentioned this pull request May 8, 2026

feat(react): align element template hydrate cleanup #2576

Merged

3 tasks

coderabbitai Bot mentioned this pull request May 18, 2026

feat(react): route element-template background tree via multi-slot #2651

Open

6 tasks

Conversation

Yradex commented May 6, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Overview

Key Points

Verification

Checklist

Uh oh!

changeset-bot Bot commented May 6, 2026

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested labels

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

codecov Bot commented May 6, 2026

Codecov Report

Uh oh!

relativeci Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Web Explorer

#9358 Bundle Size — 900.03KiB (0%).

Uh oh!

relativeci Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React MTF Example

#917 Bundle Size — 196.68KiB (0%).

Uh oh!

relativeci Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React External

#900 Bundle Size — 680.82KiB (0%).

Uh oh!

relativeci Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Example

#7785 Bundle Size — 225.52KiB (0%).

Uh oh!

relativeci Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Example with Element Template

#52 Bundle Size — 198.12KiB (+0.01%).

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Yradex commented May 6, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 6, 2026 •

edited

Loading

relativeci Bot commented May 6, 2026 •

edited

Loading

relativeci Bot commented May 6, 2026 •

edited

Loading

relativeci Bot commented May 6, 2026 •

edited

Loading

relativeci Bot commented May 6, 2026 •

edited

Loading

relativeci Bot commented May 6, 2026 •

edited

Loading