fix: restore and stabilize tab navigation with Alpine.js
CI / Test (Python 3.11) (push) Has been cancelled
CI / Test (Python 3.12) (push) Has been cancelled
CI / Lint (push) Has been cancelled
CI / Type Check (push) Has been cancelled
CI / Summary (push) Has been cancelled

- Fixed navigation blockage by moving Alpine state to body scope
- Resolved CSS display conflicts between legacy .active class and x-show
- Synchronized legacy auth logic with Alpine global state
- Redirected legacy switchTab calls to Alpine events
- Removed obsolete tabs.js and updated home section initialization
- Added E2E navigation test placeholder
This commit is contained in:
root
2026-03-24 12:19:57 +00:00
parent 5c7116557d
commit 69e14afedf
7 changed files with 64 additions and 64 deletions
+41
View File
@@ -0,0 +1,41 @@
import pytest
from playwright.sync_api import Page, expect
# Since we don't have a full running environment with auth easily mockable in pure Python Playwright
# without starting the server, I will write a test that can be run if the server is up.
# For CI/CD, we'd use a fixture to start the uvicorn server.
@pytest.mark.skip(reason="Requires running server and complex auth mock")
def test_tab_navigation(page: Page):
# Navigate to the app
page.goto("http://localhost:3000/web")
# Mock authentication state in localStorage and Alpine
page.evaluate("""() => {
localStorage.setItem('auth_token', 'mock-token');
document.body.__x.$data.isAuthenticated = true;
document.body.__x.$data.username = 'TestUser';
}""")
# Reload or wait for Alpine to react
page.reload()
# Verify Home tab is active by default
expect(page.locator("#tab-home")).to_be_visible()
expect(page.locator("button.tab:has-text('Accueil')")).to_have_class(/active/)
# Click on Anime tab
page.click("button.tab:has-text('Anime')")
# Verify Anime tab is shown and Home is hidden
expect(page.locator("#tab-anime")).to_be_visible()
expect(page.locator("#tab-home")).to_be_hidden()
expect(page.locator("button.tab:has-text('Anime')")).to_have_class(/active/)
# Click on Watchlist tab
page.click("button.tab:has-text('Watchlist')")
# Verify Watchlist tab is shown
expect(page.locator("#tab-watchlist")).to_be_visible()
expect(page.locator("#tab-anime")).to_be_hidden()
expect(page.locator("button.tab:has-text('Watchlist')")).to_have_class(/active/)