192 lines
7.7 KiB
Python
192 lines
7.7 KiB
Python
"""
|
|
Test suite for Habits frontend page structure and navigation
|
|
Story US-006: Frontend - Page structure, layout, and navigation link
|
|
"""
|
|
|
|
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 run_all_tests():
|
|
"""Run all tests in sequence"""
|
|
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,
|
|
]
|
|
|
|
print(f"\nRunning {len(tests)} frontend tests for US-006...\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()
|