364 lines
15 KiB
Python
364 lines
15 KiB
Python
"""
|
|
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
|
|
"""
|
|
|
|
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 '>Habits</' in content, "Should have 'Habits' title"
|
|
assert 'Add Habit' in content, "Should have 'Add Habit' button"
|
|
assert 'showAddHabitModal()' in content, "Add Habit button should have onclick handler"
|
|
print("✓ Test 3: Page has header with title and Add Habit button")
|
|
|
|
def test_empty_state():
|
|
"""Test 4: Empty state message shown when no habits exist"""
|
|
habits_path = Path(__file__).parent.parent / 'habits.html'
|
|
content = habits_path.read_text()
|
|
|
|
assert 'No habits yet' in content, "Should have empty state message"
|
|
assert 'Create your first habit' in content, "Should have call-to-action"
|
|
assert 'empty-state' in content, "Should have empty-state class"
|
|
print("✓ Test 4: Empty state message present")
|
|
|
|
def test_grid_container():
|
|
"""Test 5: Grid container uses CSS grid with responsive breakpoints (1/2/3 columns)"""
|
|
habits_path = Path(__file__).parent.parent / 'habits.html'
|
|
content = habits_path.read_text()
|
|
|
|
assert 'habits-grid' in content, "Should have habits-grid class"
|
|
assert 'display: grid' in content, "Should use CSS grid"
|
|
assert 'grid-template-columns' in content, "Should define grid columns"
|
|
|
|
# Check responsive breakpoints
|
|
assert '@media (max-width: 768px)' in content or '@media (max-width:768px)' in content, \
|
|
"Should have mobile breakpoint"
|
|
assert 'grid-template-columns: 1fr' in content or 'grid-template-columns:1fr' in content, \
|
|
"Should have 1 column on mobile"
|
|
|
|
# Check for 2 or 3 column layouts
|
|
assert ('grid-template-columns: repeat(2, 1fr)' in content or
|
|
'grid-template-columns:repeat(2,1fr)' in content or
|
|
'grid-template-columns: repeat(3, 1fr)' in content or
|
|
'grid-template-columns:repeat(3,1fr)' in content), \
|
|
"Should have multi-column layout for larger screens"
|
|
|
|
print("✓ Test 5: Grid container with responsive breakpoints")
|
|
|
|
def test_index_navigation_link():
|
|
"""Test 6: index.html navigation includes 'Habits' link with dumbbell icon"""
|
|
index_path = Path(__file__).parent.parent / 'index.html'
|
|
content = index_path.read_text()
|
|
|
|
assert '/echo/habits.html' in content, "Should link to /echo/habits.html"
|
|
assert 'dumbbell' in content, "Should have dumbbell icon"
|
|
assert '>Habits</' in content, "Should have 'Habits' label"
|
|
|
|
# Check that Habits link is in the nav
|
|
nav_start = content.find('<nav class="nav">')
|
|
nav_end = content.find('</nav>', 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 '<script>' in content, "Should have script tags"
|
|
assert 'function' in content, "Should have JavaScript functions"
|
|
|
|
# Check for proper escaping in rendering
|
|
assert 'escapeHtml' in content or 'textContent' in content, \
|
|
"Should have XSS protection (escapeHtml or textContent)"
|
|
|
|
print("✓ Test 9: No obvious console error sources")
|
|
|
|
def test_typecheck():
|
|
"""Test 10: HTML file is well-formed"""
|
|
habits_path = Path(__file__).parent.parent / 'habits.html'
|
|
content = habits_path.read_text()
|
|
|
|
# Basic HTML structure checks
|
|
assert '<!DOCTYPE html>' in content, "Should have DOCTYPE"
|
|
assert '<html' in content and '</html>' in content, "Should have html tags"
|
|
assert '<head>' in content and '</head>' in content, "Should have head tags"
|
|
assert '<body>' in content and '</body>' in content, "Should have body tags"
|
|
|
|
# Check for matching script tags
|
|
script_open = content.count('<script')
|
|
script_close = content.count('</script>')
|
|
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 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,
|
|
]
|
|
|
|
print(f"\nRunning {len(tests)} frontend tests for US-006 and US-007...\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()
|