Skip to content

test(e2e): fix broken test and update docs (#3356)#3357

Merged
KATO-Hiro merged 7 commits intostagingfrom
#3356
Apr 4, 2026
Merged

test(e2e): fix broken test and update docs (#3356)#3357
KATO-Hiro merged 7 commits intostagingfrom
#3356

Conversation

@KATO-Hiro
Copy link
Copy Markdown
Collaborator

@KATO-Hiro KATO-Hiro commented Apr 4, 2026

close #3356

Summary by CodeRabbit

  • ドキュメント

    • マイグレーション文書を「移行完了(フォローアップあり)」に更新し、長大な段階別計画や調査・マッピング資料を整理・削除、要点に集約して教訓を簡潔化
    • フォローアップタスクを追加(視覚回帰チェックリスト、Flowbite‑Svelte v2 検討、FormWrapper リファクタ指針)
  • テスト

    • モバイルナビゲーションE2Eを有効化し、ハンバーガー開閉フローと表示/非表示検証、遷移待ち処理を強化
  • ドキュメント(テスト運用)

    • Svelte遷移によるE2Eフラッキー回避指針を追加

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Apr 4, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 0487bdef-af34-46d6-90d4-85f528a3c266

📥 Commits

Reviewing files that changed from the base of the PR and between f40eeb5 and d487305.

📒 Files selected for processing (1)
  • docs/dev-notes/2026-01-02/migrate-from-svelte-5-ui-lib-to-flowbite-svelte/README-plan.md

📝 Walkthrough

Walkthrough

Flowbite-Svelte移行ドキュメント群を大幅に整理(複数ファイル削除/README簡略化)し、モバイルNavbarのE2Eテストを再有効化してセレクタと開閉アサーションを更新、Header のコメントを削除しました(50語以内)。

Changes

Cohort / File(s) Summary
README更新(移行計画要約化)
docs/dev-notes/2026-01-02/migrate-from-svelte-5-ui-lib-to-flowbite-svelte/README-plan.md
メタデータ更新(最終更新=2026-04-04/ステータス: 移行完了)。段階別計画と詳細手順を削除し、完了宣言と簡潔なフォローアップタスク(視覚回帰チェックリスト、Flowbite-Svelte v2 検討、FormWrapper リファクタ指針)に置換。
移行ドキュメント削除(詳細参照消失)
docs/dev-notes/.../component-mapping.md, docs/dev-notes/.../investigation.md, docs/dev-notes/.../testing-strategy.md
移行マッピング、調査報告、テスト戦略の各ドキュメントを削除。実装例、リスク評価、テスト手順、推奨パターンなどの詳細がリポジトリから取り除かれました。
E2E テスト修正・再有効化(高優先)
e2e/navbar.spec.ts
test.fixmetest に戻して有効化。ハンバーガー選択子を汎用から nav button[aria-label="Open main menu"] に絞り、メニューセレクタを div[role="none"] ulnav div ul に変更。開閉アサーションを追加し、Svelte の outro/intro 重複レンダリング対策として全インスタンスの非表示を待つ処理を導入。レビュー重点。
コンポーネント注釈削除(軽微)
src/lib/components/Header.svelte
Flowbite-Svelte v1.31.0 の fluid / breakpoint に関するコメントを削除。実装や挙動には変更なし。
E2E フラッキーパターン指針追加(テスト規則)
.claude/rules/testing-e2e.md
Svelte のトランジションで Playwright が複数要素を非決定的にマッチする問題への回避策を追加。waitForFunction を用いて全マッチ要素の望ましい状態を確認するパターンを推奨(モーダル/ドロワー等にも一般化)。

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 分

Poem

✂️ ドキュメントの森を刈り込み、
小さなテストがまた鐘を鳴らす。
消えた頁は静かに眠り、
ボタン一つで風景が戻る。 🌤️

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed PR タイトルは主な変更内容(e2e テストの修正とドキュメント更新)を簡潔に反映しており、関連する issue #3356 を参照している。
Linked Issues check ✅ Passed Navbar バグ修正とドキュメント更新という要件に対し、Header.Svelte のコメント削除、navbar.spec.ts のテスト修正、およびドキュメント全体の更新で対応している。
Out of Scope Changes check ✅ Passed すべての変更が Flowbite Svelte migration 完了に関連しており、Navbar バグ修正とドキュメント整理という要件スコープ内である。
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch #3356

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.

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: 2

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

Inline comments:
In
`@docs/dev-notes/2026-01-02/migrate-from-svelte-5-ui-lib-to-flowbite-svelte/README-plan.md`:
- Around line 418-423: The doc contains an outdated selector example—update the
old example `div[role="none"] ul` to match the new guideline `nav div ul` (or
explicitly annotate the old example as “v1.31.0” to avoid confusion), and ensure
other examples like `nav button:not([aria-label])` → `nav
button[aria-label="Open main menu"]` and the ToolbarButton.svelte →
NavHamburger.svelte tracking note remain consistent with this change so readers
aren’t left with conflicting selectors.

In `@e2e/navbar.spec.ts`:
- Around line 42-56: Add a click/action test to validate the hamburger toggles
the menu: in the existing test 'navbar is visible and functional on mobile
(375px)' after locating hamburger (nav button[aria-label="Open main menu"]) call
its click and then assert menuContainer (nav div ul) becomes visible, then click
the hamburger again and assert menuContainer is not visible; also assert the
hamburger's aria-expanded (or equivalent attribute/state) updates if present.
Ensure to use the existing goToHome(page), navbar, hamburger, and menuContainer
locators.
🪄 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: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 2aaa6369-dab2-4d84-b51f-e4ee1b152e65

📥 Commits

Reviewing files that changed from the base of the PR and between 3fc12c0 and cd67238.

📒 Files selected for processing (3)
  • docs/dev-notes/2026-01-02/migrate-from-svelte-5-ui-lib-to-flowbite-svelte/README-plan.md
  • e2e/navbar.spec.ts
  • src/lib/components/Header.svelte
💤 Files with no reviewable changes (1)
  • src/lib/components/Header.svelte

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: 2

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

Inline comments:
In
`@docs/dev-notes/2026-01-02/migrate-from-svelte-5-ui-lib-to-flowbite-svelte/README-plan.md`:
- Line 3: 現在のドキュメントで先頭のステータス表記 "**移行完了**"
が下部の未着手チェックリストと矛盾しているため、ステータスを明確化してください:該当箇所の "**移行完了**" を
"**移行完了(フォローアップ残あり)**"
のように変更するか、下部の未着手チェックリスト見出しを「移行後フォローアップ」などに改名して完了定義を統一(対象テキスト: 行3 の "**移行完了**"
と行10以降のチェックリスト見出し)してください。

In `@e2e/navbar.spec.ts`:
- Around line 61-65: The test is flaky because asserting toHaveCount(1) before
waiting for the slide-out transition can fail while Svelte still renders two
<div><ul>; change the assertion order so you call await
expect(menuContainer).not.toBeVisible() first (which waits for the transition),
then assert await expect(menuContainer).toHaveCount(1) after clicking hamburger
(referencing hamburger.click(), menuContainer and the two expect(...) assertions
in the diff).
🪄 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: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: ec22e3ea-33be-414c-b24d-d0ceb59de44d

📥 Commits

Reviewing files that changed from the base of the PR and between cd67238 and 412baca.

📒 Files selected for processing (5)
  • docs/dev-notes/2026-01-02/migrate-from-svelte-5-ui-lib-to-flowbite-svelte/README-plan.md
  • docs/dev-notes/2026-01-02/migrate-from-svelte-5-ui-lib-to-flowbite-svelte/component-mapping.md
  • docs/dev-notes/2026-01-02/migrate-from-svelte-5-ui-lib-to-flowbite-svelte/investigation.md
  • docs/dev-notes/2026-01-02/migrate-from-svelte-5-ui-lib-to-flowbite-svelte/testing-strategy.md
  • e2e/navbar.spec.ts
💤 Files with no reviewable changes (3)
  • docs/dev-notes/2026-01-02/migrate-from-svelte-5-ui-lib-to-flowbite-svelte/component-mapping.md
  • docs/dev-notes/2026-01-02/migrate-from-svelte-5-ui-lib-to-flowbite-svelte/testing-strategy.md
  • docs/dev-notes/2026-01-02/migrate-from-svelte-5-ui-lib-to-flowbite-svelte/investigation.md

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: 2

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

Inline comments:
In @.claude/rules/testing-e2e.md:
- Around line 91-98: Add a concrete TypeScript code example showing the
Playwright pattern described: use page.waitForFunction with
Array.from(elements).every(...) to wait until all matching elements reach the
desired state during Svelte transitions, then perform a separate assertion;
specifically reference the use of page.waitForFunction,
Array.from(elements).every, and expect(page.locator(...)).not.toBeVisible() so
readers can copy the snippet and the section matches the style of other examples
(e.g., Flowbite Toggle).

In
`@docs/dev-notes/2026-01-02/migrate-from-svelte-5-ui-lib-to-flowbite-svelte/README-plan.md`:
- Around line 56-58: ドキュメントの手順がテスト実装と逆になっているため、README の該当節(NavUl の `{`#if`
!hidden}` と `transition:slide` に関する記述)を e2e/navbar.spec.ts
の実装順に合わせて修正してください:テストは現在 waitForFunction → not.toBeVisible() → toHaveCount(1)
の順で検証しているので、ドキュメント本文も「まず waitForFunction で条件を待ち、次に not.toBeVisible() を
assert、最後に toHaveCount(1) で DOM 個数を確認してトランジション完了を担保する」と明記してください。
🪄 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: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: f7405f50-ee4b-4b0d-8631-a50300f9065a

📥 Commits

Reviewing files that changed from the base of the PR and between 412baca and f40eeb5.

📒 Files selected for processing (3)
  • .claude/rules/testing-e2e.md
  • docs/dev-notes/2026-01-02/migrate-from-svelte-5-ui-lib-to-flowbite-svelte/README-plan.md
  • e2e/navbar.spec.ts

Copy link
Copy Markdown
Collaborator Author

@KATO-Hiro KATO-Hiro left a comment

Choose a reason for hiding this comment

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

LGTM

@KATO-Hiro KATO-Hiro merged commit 2dc7976 into staging Apr 4, 2026
3 checks passed
@KATO-Hiro KATO-Hiro deleted the #3356 branch April 4, 2026 13:17
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.

[Bug & Docs] Flowbite Svelte のアップデートによるNavBarのバグ修正・ドキュメントの更新

1 participant