208 add tests for a richeditor

[katsyuta]

Closes #208

I added Vitest projects to separate tests by environment. Projects allow us to use different setup files and test settings for different groups of tests. To distinguish tests that require a DOM environment, I suggest using the .dom.test.ts suffix.

Changes:

Update NotesExporter.test.ts to make the tests deterministic. The snapshots changed in this pull request because it have to non-deterministic order in result, so i added sorting before creating the snapshots to prevent this in the future.

Summary by CodeRabbit

• Tests

  • Expanded test coverage for the rich text editor, including markdown rendering, formatting, image handling, and list management.

• Chores

  • Updated testing infrastructure to support DOM-based test execution alongside node-based tests.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

Adds DOM-level testing infrastructure for the RichEditor component: new devDependencies (@testing-library/react, jsdom), a Vitest config split into node and dom projects, global jsdom mocks in the setup file, a renderRichEditor test helper with Effector event wiring, DOM selection/cursor utilities, and a 244-line test suite covering markdown rendering, formatting, image insertion, and list operations.

Changes

RichEditor Testing Setup and Coverage

Layer / File(s)	Summary
Testing infrastructure and environment setup package.json, packages/app/vitest.config.mts, packages/app/scripts/vitest.setup.ts, packages/app/src/core/.../NotesExporter.dom.test.ts, words.txt	Adds @testing-library/react and jsdom devDependencies, splits Vitest config into node and dom projects (dom project uses jsdom env and vitest.setup.ts), installs global jsdom mocks (MockImage, getClientRects, getBoundingClientRect stubs), removes the per-file @vitest-environment jsdom directive from NotesExporter.dom.test.ts, and adds contenteditable to the word list.
RichEditor test helper utilities packages/app/src/features/NoteEditor/tests/utils/renderRichEditor.tsx, packages/app/src/features/NoteEditor/tests/utils/utils.ts	Adds renderRichEditor wrapping RichEditor in Redux, Chakra, WorkspaceProvider, and editorPanelContext.Provider with Effector events and act-wrapped rerender/insert/format helpers. Adds DOM utilities selectContent and setCursorPosition that construct ranges and dispatch selectionchange.
Comprehensive RichEditor DOM test suite packages/app/src/features/NoteEditor/tests/richEditor.dom.test.ts	Adds 244-line DOM test suite asserting markdown rendering (H1, paragraph, blockquote, hr, list, code block, link), rerender, read-only mode, image rendering and insertion (between text nodes and after a code block), heading level toggling, bold/italic toggling, combined italic+bold+strikethrough with selective removal, nested checklist states, and unordered-to-ordered list conversion.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐇 Hop hop, the tests now play,
In jsdom's garden every day.
Bold, italic, headings tall,
The editor handles them all!
No regressions, pure delight—
The rabbit checks each DOM in sight. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly matches the PR's main objective of adding tests for a RichEditor, clearly summarizing the primary change.
Linked Issues check	✅ Passed	The PR successfully establishes test infrastructure for the RichEditor with Vitest project separation, comprehensive DOM-level tests, and utilities supporting safe feature development and regression prevention as required by issue #208.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to establishing RichEditor test infrastructure; minor supporting changes like dependency updates and config modifications are all necessary for implementing the testing framework.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[katsyuta]

@coderabbitai full review

[coderabbitai]

✅ Action performed

Full review finished.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/app/src/features/NoteEditor/tests/utils/renderRichEditor.tsx (1)

44-46: 💤 Low value

Consider simplifying the initial render.

React Testing Library's render function already wraps updates in act internally, so the explicit await act(async () => render(...)) wrapper is redundant. The async callback wrapper serves no purpose here since render is synchronous.

♻️ Simplified version

-	// Use `act` to wait for all editor updates to complete before making assertions;
-	// otherwise, some asynchronous updates may not have been applied to the DOM yet.
-	const result = await act(async () => render(renderEditor(props)));
+	const result = render(renderEditor(props));

Note: The custom rerender, insert, and format methods correctly use act since they trigger state updates outside of RTL's automatic wrapping.

🤖 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/app/src/features/NoteEditor/tests/utils/renderRichEditor.tsx` around
lines 44 - 46, The initial render in renderRichEditor.tsx wraps
render(renderEditor(props)) in an unnecessary await act(...) call; replace the
explicit await act(async () => render(renderEditor(props))) with a direct call
to render(renderEditor(props)) and assign its return to result (since RTL's
render already handles act), while leaving the custom rerender, insert, and
format helpers that explicitly use act unchanged; locate the call around
renderEditor and act imports and update accordingly.

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

Inline comments:
In `@packages/app/scripts/vitest.setup.ts`:
- Around line 17-22: Element.prototype.getClientRects currently sets
Symbol.iterator to an empty function which returns undefined and breaks
iteration; update the mock returned by Element.prototype.getClientRects (the
DOMRectList stub) so its [Symbol.iterator] property is a function that returns
an iterator object with a next() method (e.g., returning { done: true }
immediately or iterating over an internal array), ensuring the returned object
conforms to the iterator protocol and matches DOMRectList behavior for for...of
and spread usage.

---

Nitpick comments:
In `@packages/app/src/features/NoteEditor/tests/utils/renderRichEditor.tsx`:
- Around line 44-46: The initial render in renderRichEditor.tsx wraps
render(renderEditor(props)) in an unnecessary await act(...) call; replace the
explicit await act(async () => render(renderEditor(props))) with a direct call
to render(renderEditor(props)) and assign its return to result (since RTL's
render already handles act), while leaving the custom rerender, insert, and
format helpers that explicitly use act unchanged; locate the call around
renderEditor and act imports and update accordingly.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b7501d73-29c8-475e-96a6-79c0b93d9557

📥 Commits

Reviewing files that changed from the base of the PR and between c0a5387 and 78c1602.

⛔ Files ignored due to path filters (2)

• package-lock.json is excluded by !**/package-lock.json
• packages/app/src/core/storage/interop/export/__snapshots__/NotesExporter.dom.test.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (8)

• package.json
• packages/app/scripts/vitest.setup.ts
• packages/app/src/core/storage/interop/export/NotesExporter.dom.test.ts
• packages/app/src/features/NoteEditor/tests/richEditor.dom.test.ts
• packages/app/src/features/NoteEditor/tests/utils/renderRichEditor.tsx
• packages/app/src/features/NoteEditor/tests/utils/utils.tsx
• packages/app/vitest.config.mts
• words.txt

💤 Files with no reviewable changes (1)

• packages/app/src/core/storage/interop/export/NotesExporter.dom.test.ts

[coderabbitai]

Actionable comments posted: 2

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

Inline comments:
In `@packages/app/src/features/NoteEditor/tests/utils/renderRichEditor.tsx`:
- Around line 51-60: The test helper functions insert and format are declared
async but do not await anything, misleading callers who use await
editor.insert(...) / await editor.format(...); update the helper implementations
in renderRichEditor.tsx by removing the async keyword from the insert and format
functions (the ones calling onInserting(payload) and onFormatting(format)) so
they are plain synchronous helpers, ensuring tests do not falsely rely on
awaiting them for Lexical/React DOM flushes.

In `@packages/app/src/features/NoteEditor/tests/utils/utils.tsx`:
- Line 34: The error message in utils.tsx is using the wrong variable: when
endNode is null the thrown Error interpolates endNode (null) instead of the
search string endText; update the throw in the code that checks if (!endNode) to
reference endText (or the correct search variable) so the Error reads something
like "Text node not found for \"<searched text>\"" to show what was being looked
for (locate the check that throws when endNode is falsy and replace the
interpolated variable).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b06610c8-eaf5-45e1-a4c2-29930f203051

📥 Commits

Reviewing files that changed from the base of the PR and between 78c1602 and 7deb02e.

📒 Files selected for processing (4)

• packages/app/scripts/vitest.setup.ts
• packages/app/src/features/NoteEditor/tests/richEditor.dom.test.ts
• packages/app/src/features/NoteEditor/tests/utils/renderRichEditor.tsx
• packages/app/src/features/NoteEditor/tests/utils/utils.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

• packages/app/scripts/vitest.setup.ts
• packages/app/src/features/NoteEditor/tests/richEditor.dom.test.ts