""" Test suite for Habits frontend page structure and navigation Story US-006: Frontend - Page structure, layout, and navigation link Story US-007: Frontend - Habit card component Story US-008: Frontend - Create habit modal with all options """ import sys import os from pathlib import Path # Add parent directory to path for imports sys.path.insert(0, str(Path(__file__).parent.parent)) def test_habits_html_exists(): """Test 1: habits.html exists in dashboard/""" habits_path = Path(__file__).parent.parent / 'habits.html' assert habits_path.exists(), "habits.html should exist in dashboard/" print("✓ Test 1: habits.html exists") def test_habits_html_structure(): """Test 2: Page includes common.css, Lucide icons, and swipe-nav.js""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert 'href="/echo/common.css"' in content, "Should include common.css" assert 'lucide@latest/dist/umd/lucide.min.js' in content, "Should include Lucide icons" assert 'src="/echo/swipe-nav.js"' in content, "Should include swipe-nav.js" print("✓ Test 2: Page includes required CSS and JS") def test_page_has_header(): """Test 3: Page has header with 'Habits' title and 'Add Habit' button""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert 'class="page-title"' in content, "Should have page-title element" assert '>HabitsHabits') nav_end = content.find('', nav_start) nav_section = content[nav_start:nav_end] assert '/echo/habits.html' in nav_section, "Habits link should be in navigation" assert 'dumbbell' in nav_section, "Dumbbell icon should be in navigation" print("✓ Test 6: index.html includes Habits navigation link") def test_page_fetches_habits(): """Test 7: Page fetches GET /echo/api/habits on load""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert "fetch('/echo/api/habits')" in content or 'fetch("/echo/api/habits")' in content, \ "Should fetch from /echo/api/habits" assert 'loadHabits' in content, "Should have loadHabits function" # Check that loadHabits is called on page load # (either in inline script or as last statement) assert content.count('loadHabits()') > 0, "loadHabits should be called" print("✓ Test 7: Page fetches habits on load") def test_habit_card_rendering(): """Test 8: Placeholder habit card rendering exists""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert 'renderHabitCard' in content, "Should have renderHabitCard function" assert 'habit-card' in content, "Should have habit-card class" assert 'renderHabits' in content, "Should have renderHabits function" print("✓ Test 8: Habit card rendering functions exist") def test_no_console_errors_structure(): """Test 9: No obvious console error sources (basic structure check)""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() # Check for basic script structure assert '') assert script_open == script_close, f"Script tags should match (found {script_open} opens, {script_close} closes)" print("✓ Test 10: HTML structure is well-formed") def test_card_colored_border(): """Test 11: Habit card has colored left border matching habit.color""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert 'border-left-color' in content or 'borderLeftColor' in content, \ "Card should have colored left border" assert 'habit.color' in content, "Card should use habit.color for border" print("✓ Test 11: Card has colored left border") def test_card_header_icons(): """Test 12: Card header shows icon, name, settings, and delete""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() # Check for icon display assert 'habit.icon' in content or 'habit-card-icon' in content, \ "Card should display habit icon" # Check for name display assert 'habit.name' in content or 'habit-card-name' in content, \ "Card should display habit name" # Check for settings (gear) icon assert 'settings' in content.lower(), "Card should have settings icon" # Check for delete (trash) icon assert 'trash' in content.lower(), "Card should have delete icon" print("✓ Test 12: Card header has icon, name, settings, and delete") def test_card_streak_display(): """Test 13: Streak displays with fire emoji for current and trophy for best""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert '🔥' in content, "Card should have fire emoji for current streak" assert '🏆' in content, "Card should have trophy emoji for best streak" assert 'habit.streak' in content or 'streak?.current' in content or 'streak.current' in content, \ "Card should display streak.current" assert 'streak?.best' in content or 'streak.best' in content, \ "Card should display streak.best" print("✓ Test 13: Streak display with fire and trophy emojis") def test_card_checkin_button(): """Test 14: Check-in button is large and centered""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert 'habit-card-check-btn' in content or 'check-btn' in content or 'checkin' in content.lower(), \ "Card should have check-in button" assert 'Check In' in content or 'Check in' in content, \ "Button should have 'Check In' text" # Check for button styling (large/centered) assert 'width: 100%' in content or 'width:100%' in content, \ "Check-in button should be full-width" print("✓ Test 14: Check-in button is large and centered") def test_card_checkin_disabled_when_done(): """Test 15: Check-in button disabled when already checked today""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert 'disabled' in content, "Button should have disabled state" assert 'Done today' in content or 'Done' in content, \ "Button should show 'Done today' when disabled" assert 'isCheckedToday' in content or 'isDoneToday' in content, \ "Should have function to check if habit is done today" print("✓ Test 15: Check-in button disabled when done today") def test_card_lives_display(): """Test 16: Lives display shows filled and empty hearts (total 3)""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert '❤️' in content or '♥' in content, "Card should have filled heart emoji" assert '🖤' in content or '♡' in content, "Card should have empty heart emoji" assert 'habit.lives' in content or 'renderLives' in content, \ "Card should display lives" # Check for lives rendering function assert 'renderLives' in content or 'lives' in content.lower(), \ "Should have lives rendering logic" print("✓ Test 16: Lives display with hearts") def test_card_completion_rate(): """Test 17: Completion rate percentage is displayed""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert 'completion_rate' in content or 'completion' in content, \ "Card should display completion rate" assert '(30d)' in content or '30d' in content, \ "Completion rate should show 30-day period" assert '%' in content, "Completion rate should show percentage" print("✓ Test 17: Completion rate displayed") def test_card_footer_category_priority(): """Test 18: Footer shows category badge and priority""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert 'habit.category' in content or 'habit-card-category' in content, \ "Card should display category" assert 'habit.priority' in content or 'priority' in content.lower(), \ "Card should display priority" assert 'habit-card-footer' in content or 'footer' in content.lower(), \ "Card should have footer section" print("✓ Test 18: Footer shows category and priority") def test_card_lucide_createicons(): """Test 19: lucide.createIcons() is called after rendering cards""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() # Check that createIcons is called after rendering render_pos = content.find('renderHabits') if render_pos != -1: after_render = content[render_pos:] assert 'lucide.createIcons()' in after_render, \ "lucide.createIcons() should be called after rendering" print("✓ Test 19: lucide.createIcons() called after rendering") def test_card_common_css_variables(): """Test 20: Card uses common.css variables for styling""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() # Check for common.css variable usage assert '--bg-surface' in content or '--text-primary' in content or '--border' in content, \ "Card should use common.css variables" assert 'var(--' in content, "Should use CSS variables" print("✓ Test 20: Card uses common.css variables") def test_typecheck_us007(): """Test 21: Typecheck passes for US-007""" habits_path = Path(__file__).parent.parent / 'habits.html' assert habits_path.exists(), "habits.html should exist" # Check that all functions are properly defined content = habits_path.read_text() assert 'function renderHabitCard(' in content, "renderHabitCard function should be defined" assert 'function isCheckedToday(' in content, "isCheckedToday function should be defined" assert 'function getLastCheckInfo(' in content, "getLastCheckInfo function should be defined" assert 'function renderLives(' in content, "renderLives function should be defined" assert 'function getPriorityLevel(' in content, "getPriorityLevel function should be defined" print("✓ Test 21: Typecheck passes (all functions defined)") def test_modal_opens_on_add_habit_click(): """Test 22: Modal opens when clicking 'Add Habit' button""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert 'showAddHabitModal()' in content, "Add Habit button should call showAddHabitModal()" assert 'function showAddHabitModal(' in content, "showAddHabitModal function should be defined" assert 'modal-overlay' in content or 'habitModal' in content, "Should have modal overlay element" print("✓ Test 22: Modal opens on Add Habit button click") def test_modal_closes_on_x_and_outside_click(): """Test 23: Modal closes on X button or clicking outside""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert 'closeHabitModal()' in content, "Should have closeHabitModal function" assert 'modal-close' in content or 'onclick="closeHabitModal()"' in content, \ "X button should call closeHabitModal()" # Check for click outside handler assert 'e.target === modal' in content or 'event.target' in content, \ "Should handle clicking outside modal" print("✓ Test 23: Modal closes on X button and clicking outside") def test_modal_has_all_form_fields(): """Test 24: Form has all required fields""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() # Required fields assert 'habitName' in content or 'name' in content.lower(), "Form should have name field" assert 'habitCategory' in content or 'category' in content.lower(), "Form should have category field" assert 'habitPriority' in content or 'priority' in content.lower(), "Form should have priority field" assert 'habitNotes' in content or 'notes' in content.lower(), "Form should have notes field" assert 'frequencyType' in content or 'frequency' in content.lower(), "Form should have frequency field" assert 'reminderTime' in content or 'reminder' in content.lower(), "Form should have reminder time field" print("✓ Test 24: Form has all required fields") def test_color_picker_presets_and_custom(): """Test 25: Color picker shows preset swatches and custom hex input""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert 'color-picker' in content or 'colorSwatches' in content or 'color-swatch' in content, \ "Should have color picker" assert 'customColor' in content or 'custom' in content.lower(), \ "Should have custom color input" assert '#RRGGBB' in content or 'pattern=' in content, \ "Custom color should have hex pattern" assert 'presetColors' in content or '#3B82F6' in content or '#EF4444' in content, \ "Should have preset colors" print("✓ Test 25: Color picker with presets and custom hex") def test_icon_picker_grid(): """Test 26: Icon picker shows grid of common Lucide icons""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert 'icon-picker' in content or 'iconPicker' in content, \ "Should have icon picker" assert 'icon-option' in content or 'commonIcons' in content, \ "Should have icon options" assert 'selectIcon' in content, "Should have selectIcon function" # Check for common icons icon_count = sum([1 for icon in ['dumbbell', 'moon', 'book', 'brain', 'heart'] if icon in content]) assert icon_count >= 3, "Should have at least 3 common icons" print("✓ Test 26: Icon picker with grid of Lucide icons") def test_frequency_params_conditional(): """Test 27: Frequency params display conditionally based on type""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert 'updateFrequencyParams' in content, "Should have updateFrequencyParams function" assert 'frequencyParams' in content, "Should have frequency params container" assert 'specific_days' in content, "Should handle specific_days frequency" assert 'x_per_week' in content, "Should handle x_per_week frequency" assert 'custom' in content.lower(), "Should handle custom frequency" # Check for conditional rendering (day checkboxes for specific_days) assert 'day-checkbox' in content or "['Mon', 'Tue'" in content or 'Mon' in content, \ "Should have day checkboxes for specific_days" print("✓ Test 27: Frequency params display conditionally") def test_client_side_validation(): """Test 28: Client-side validation prevents submit without name""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert 'required' in content, "Name field should be required" assert 'trim()' in content, "Should trim input values" # Check for validation in submit function submit_func = content[content.find('function submitHabitForm'):] assert 'if (!name)' in submit_func or 'name.length' in submit_func, \ "Should validate name is not empty" assert 'showToast' in submit_func and 'error' in submit_func, \ "Should show error toast for validation failures" print("✓ Test 28: Client-side validation checks name required") def test_submit_posts_to_api(): """Test 29: Submit sends POST /echo/api/habits and refreshes list""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert 'submitHabitForm' in content, "Should have submitHabitForm function" submit_func = content[content.find('function submitHabitForm'):] assert "fetch('/echo/api/habits'" in submit_func or 'fetch("/echo/api/habits"' in submit_func, \ "Should POST to /echo/api/habits" assert "'POST'" in submit_func or '"POST"' in submit_func, \ "Should use POST method" assert 'JSON.stringify' in submit_func, "Should send JSON body" assert 'loadHabits()' in submit_func, "Should refresh habit list on success" print("✓ Test 29: Submit POSTs to API and refreshes list") def test_loading_state_on_submit(): """Test 30: Loading state shown on submit button during API call""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() submit_func = content[content.find('function submitHabitForm'):] assert 'disabled = true' in submit_func or '.disabled' in submit_func, \ "Submit button should be disabled during API call" assert 'Creating' in submit_func or 'loading' in submit_func.lower(), \ "Should show loading text" assert 'disabled = false' in submit_func, \ "Submit button should be re-enabled after API call" print("✓ Test 30: Loading state on submit button") def test_toast_notifications(): """Test 31: Toast notification shown for success and error""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() assert 'showToast' in content, "Should have showToast function" assert 'toast' in content, "Should have toast styling" toast_func = content[content.find('function showToast'):] assert 'success' in toast_func and 'error' in toast_func, \ "Toast should handle both success and error types" assert 'check-circle' in toast_func or 'alert-circle' in toast_func, \ "Toast should show appropriate icons" assert 'setTimeout' in toast_func or 'remove()' in toast_func, \ "Toast should auto-dismiss" print("✓ Test 31: Toast notifications for success and error") def test_modal_no_console_errors(): """Test 32: No obvious console error sources in modal code""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() # Check that modal functions exist assert 'function showAddHabitModal(' in content, "showAddHabitModal should be defined" assert 'function closeHabitModal(' in content, "closeHabitModal should be defined" assert 'function submitHabitForm(' in content, "submitHabitForm should be defined" assert 'function updateFrequencyParams(' in content, "updateFrequencyParams should be defined" # Check for proper error handling submit_func = content[content.find('function submitHabitForm'):] assert 'try' in submit_func and 'catch' in submit_func, \ "Submit function should have try-catch error handling" print("✓ Test 32: No obvious console error sources") def test_typecheck_us008(): """Test 33: Typecheck passes for US-008 (all modal functions defined)""" habits_path = Path(__file__).parent.parent / 'habits.html' content = habits_path.read_text() # Check all new functions are defined required_functions = [ 'showAddHabitModal', 'closeHabitModal', 'initColorPicker', 'selectColor', 'initIconPicker', 'selectIcon', 'updateFrequencyParams', 'submitHabitForm', 'showToast' ] for func in required_functions: assert f'function {func}(' in content or f'const {func} =' in content, \ f"{func} function should be defined" print("✓ Test 33: Typecheck passes (all modal functions defined)") def run_all_tests(): """Run all tests in sequence""" tests = [ # US-006 tests test_habits_html_exists, test_habits_html_structure, test_page_has_header, test_empty_state, test_grid_container, test_index_navigation_link, test_page_fetches_habits, test_habit_card_rendering, test_no_console_errors_structure, test_typecheck, # US-007 tests test_card_colored_border, test_card_header_icons, test_card_streak_display, test_card_checkin_button, test_card_checkin_disabled_when_done, test_card_lives_display, test_card_completion_rate, test_card_footer_category_priority, test_card_lucide_createicons, test_card_common_css_variables, test_typecheck_us007, # US-008 tests test_modal_opens_on_add_habit_click, test_modal_closes_on_x_and_outside_click, test_modal_has_all_form_fields, test_color_picker_presets_and_custom, test_icon_picker_grid, test_frequency_params_conditional, test_client_side_validation, test_submit_posts_to_api, test_loading_state_on_submit, test_toast_notifications, test_modal_no_console_errors, test_typecheck_us008, ] print(f"\nRunning {len(tests)} frontend tests for US-006, US-007, and US-008...\n") failed = [] for test in tests: try: test() except AssertionError as e: print(f"✗ {test.__name__}: {e}") failed.append((test.__name__, str(e))) except Exception as e: print(f"✗ {test.__name__}: Unexpected error: {e}") failed.append((test.__name__, str(e))) print(f"\n{'='*60}") if failed: print(f"FAILED: {len(failed)} test(s) failed:") for name, error in failed: print(f" - {name}: {error}") sys.exit(1) else: print(f"SUCCESS: All {len(tests)} tests passed!") sys.exit(0) if __name__ == '__main__': run_all_tests()