dynamic dashboard initial
This commit is contained in:
296
tools/test_responsive_dashboard.py
Normal file
296
tools/test_responsive_dashboard.py
Normal file
@@ -0,0 +1,296 @@
|
||||
"""
|
||||
Acceptance tests for Responsive Dashboard.
|
||||
|
||||
Tests:
|
||||
1. Desktop: 4 columns grid
|
||||
2. Tablet: 2 columns grid
|
||||
3. Mobile: 1 column grid
|
||||
4. POST requests work (via API check)
|
||||
5. No horizontal scrolling on any viewport
|
||||
"""
|
||||
import sys
|
||||
import httpx
|
||||
from bs4 import BeautifulSoup
|
||||
|
||||
|
||||
def test_dashboard_html_structure():
|
||||
"""Test 1: Dashboard has correct HTML structure."""
|
||||
print("Test 1: Dashboard HTML Structure")
|
||||
print("-" * 60)
|
||||
|
||||
try:
|
||||
response = httpx.get("http://localhost:8002/dashboard", timeout=5.0)
|
||||
response.raise_for_status()
|
||||
|
||||
html = response.text
|
||||
soup = BeautifulSoup(html, 'html.parser')
|
||||
|
||||
# Check for grid container
|
||||
grid = soup.find('div', class_='devices-grid')
|
||||
if not grid:
|
||||
print(" ✗ FAILED: Missing .devices-grid container")
|
||||
return False
|
||||
|
||||
# Check for device tiles
|
||||
tiles = soup.find_all('div', class_='device-tile')
|
||||
if len(tiles) < 2:
|
||||
print(f" ✗ FAILED: Expected at least 2 device tiles, found {len(tiles)}")
|
||||
return False
|
||||
|
||||
# Check for state spans
|
||||
state_spans = soup.find_all('span', id=lambda x: x and x.startswith('state-'))
|
||||
if len(state_spans) < 2:
|
||||
print(f" ✗ FAILED: Expected state spans, found {len(state_spans)}")
|
||||
return False
|
||||
|
||||
# Check for ON/OFF buttons
|
||||
btn_on = soup.find_all('button', class_='btn-on')
|
||||
btn_off = soup.find_all('button', class_='btn-off')
|
||||
|
||||
if not btn_on or not btn_off:
|
||||
print(" ✗ FAILED: Missing ON/OFF buttons")
|
||||
return False
|
||||
|
||||
print(f" ✓ Found {len(tiles)} device tiles")
|
||||
print(f" ✓ Found {len(state_spans)} state indicators")
|
||||
print(f" ✓ Found {len(btn_on)} ON buttons and {len(btn_off)} OFF buttons")
|
||||
print()
|
||||
return True
|
||||
|
||||
except Exception as e:
|
||||
print(f" ✗ FAILED: {e}")
|
||||
print()
|
||||
return False
|
||||
|
||||
|
||||
def test_responsive_css():
|
||||
"""Test 2: CSS has responsive grid rules."""
|
||||
print("Test 2: Responsive CSS")
|
||||
print("-" * 60)
|
||||
|
||||
try:
|
||||
response = httpx.get("http://localhost:8002/static/style.css", timeout=5.0)
|
||||
response.raise_for_status()
|
||||
|
||||
css = response.text
|
||||
|
||||
# Check for desktop 4 columns
|
||||
if 'grid-template-columns: repeat(4, 1fr)' not in css:
|
||||
print(" ✗ FAILED: Missing desktop grid (4 columns)")
|
||||
return False
|
||||
|
||||
# Check for tablet media query (2 columns)
|
||||
if 'max-width: 1024px' not in css or 'repeat(2, 1fr)' not in css:
|
||||
print(" ✗ FAILED: Missing tablet media query (2 columns)")
|
||||
return False
|
||||
|
||||
# Check for mobile media query (1 column)
|
||||
if 'max-width: 640px' not in css:
|
||||
print(" ✗ FAILED: Missing mobile media query")
|
||||
return False
|
||||
|
||||
print(" ✓ Desktop: 4 columns (grid-template-columns: repeat(4, 1fr))")
|
||||
print(" ✓ Tablet: 2 columns (@media max-width: 1024px)")
|
||||
print(" ✓ Mobile: 1 column (@media max-width: 640px)")
|
||||
print()
|
||||
return True
|
||||
|
||||
except Exception as e:
|
||||
print(f" ✗ FAILED: {e}")
|
||||
print()
|
||||
return False
|
||||
|
||||
|
||||
def test_javascript_functions():
|
||||
"""Test 3: JavaScript POST function exists."""
|
||||
print("Test 3: JavaScript POST Function")
|
||||
print("-" * 60)
|
||||
|
||||
try:
|
||||
response = httpx.get("http://localhost:8002/dashboard", timeout=5.0)
|
||||
response.raise_for_status()
|
||||
|
||||
html = response.text
|
||||
|
||||
# Check for setDeviceState function
|
||||
if 'function setDeviceState' not in html and 'async function setDeviceState' not in html:
|
||||
print(" ✗ FAILED: Missing setDeviceState function")
|
||||
return False
|
||||
|
||||
# Check for fetch POST call
|
||||
if 'fetch(' not in html or 'method: \'POST\'' not in html:
|
||||
print(" ✗ FAILED: Missing fetch POST call")
|
||||
return False
|
||||
|
||||
# Check for correct API endpoint pattern
|
||||
if '/devices/${deviceId}/set' not in html and '/devices/' not in html:
|
||||
print(" ✗ FAILED: Missing correct API endpoint")
|
||||
return False
|
||||
|
||||
# Check for JSON payload
|
||||
if 'type: \'light\'' not in html and '"type":"light"' not in html:
|
||||
print(" ✗ FAILED: Missing correct JSON payload")
|
||||
return False
|
||||
|
||||
print(" ✓ setDeviceState function defined")
|
||||
print(" ✓ Uses fetch with POST method")
|
||||
print(" ✓ Correct endpoint: /devices/{deviceId}/set")
|
||||
print(" ✓ Correct payload: {type:'light', payload:{power:...}}")
|
||||
print()
|
||||
return True
|
||||
|
||||
except Exception as e:
|
||||
print(f" ✗ FAILED: {e}")
|
||||
print()
|
||||
return False
|
||||
|
||||
|
||||
def test_device_controls():
|
||||
"""Test 4: Devices have correct controls."""
|
||||
print("Test 4: Device Controls")
|
||||
print("-" * 60)
|
||||
|
||||
try:
|
||||
response = httpx.get("http://localhost:8002/dashboard", timeout=5.0)
|
||||
response.raise_for_status()
|
||||
|
||||
html = response.text
|
||||
soup = BeautifulSoup(html, 'html.parser')
|
||||
|
||||
# Find device tiles
|
||||
tiles = soup.find_all('div', class_='device-tile')
|
||||
|
||||
for tile in tiles:
|
||||
device_id = tile.get('data-device-id')
|
||||
|
||||
# Check for device header
|
||||
header = tile.find('div', class_='device-header')
|
||||
if not header:
|
||||
print(f" ✗ FAILED: Device {device_id} missing header")
|
||||
return False
|
||||
|
||||
# Check for icon and title
|
||||
icon = tile.find('div', class_='device-icon')
|
||||
title = tile.find('h3', class_='device-title')
|
||||
device_id_elem = tile.find('p', class_='device-id')
|
||||
|
||||
if not icon or not title or not device_id_elem:
|
||||
print(f" ✗ FAILED: Device {device_id} missing icon/title/id")
|
||||
return False
|
||||
|
||||
# Check for state indicator
|
||||
state_span = tile.find('span', id=f'state-{device_id}')
|
||||
if not state_span:
|
||||
print(f" ✗ FAILED: Device {device_id} missing state indicator")
|
||||
return False
|
||||
|
||||
print(f" ✓ All {len(tiles)} devices have:")
|
||||
print(" • Icon, title, and device_id")
|
||||
print(" • State indicator (span#state-{{device_id}})")
|
||||
print(" • ON/OFF buttons (for lights with power feature)")
|
||||
print()
|
||||
return True
|
||||
|
||||
except Exception as e:
|
||||
print(f" ✗ FAILED: {e}")
|
||||
print()
|
||||
return False
|
||||
|
||||
|
||||
def test_rank_sorting():
|
||||
"""Test 5: Devices sorted by rank."""
|
||||
print("Test 5: Device Rank Sorting")
|
||||
print("-" * 60)
|
||||
|
||||
try:
|
||||
response = httpx.get("http://localhost:8002/dashboard", timeout=5.0)
|
||||
response.raise_for_status()
|
||||
|
||||
html = response.text
|
||||
|
||||
# In Wohnzimmer: Deckenlampe (rank=5) should come before Stehlampe (rank=10)
|
||||
deckenlampe_pos = html.find('device-title">Deckenlampe<')
|
||||
stehlampe_pos = html.find('device-title">Stehlampe<')
|
||||
|
||||
if deckenlampe_pos == -1 or stehlampe_pos == -1:
|
||||
print(" ℹ INFO: Test devices not found (expected for test)")
|
||||
print()
|
||||
return True
|
||||
|
||||
if deckenlampe_pos > stehlampe_pos:
|
||||
print(" ✗ FAILED: Devices not sorted by rank")
|
||||
return False
|
||||
|
||||
print(" ✓ Devices sorted by rank (Deckenlampe before Stehlampe)")
|
||||
print()
|
||||
return True
|
||||
|
||||
except Exception as e:
|
||||
print(f" ✗ FAILED: {e}")
|
||||
print()
|
||||
return False
|
||||
|
||||
|
||||
def main():
|
||||
"""Run all acceptance tests."""
|
||||
print("=" * 60)
|
||||
print("Testing Responsive Dashboard")
|
||||
print("=" * 60)
|
||||
print()
|
||||
|
||||
# Check if UI is running
|
||||
print("Prerequisites: Checking if UI is running on port 8002...")
|
||||
try:
|
||||
response = httpx.get("http://localhost:8002/dashboard", timeout=3.0)
|
||||
print("✓ UI is running")
|
||||
print()
|
||||
except Exception as e:
|
||||
print(f"✗ Cannot reach UI: {e}")
|
||||
print(" Start UI with: poetry run uvicorn apps.ui.main:app --port 8002")
|
||||
print()
|
||||
sys.exit(1)
|
||||
|
||||
results = []
|
||||
|
||||
# Run tests
|
||||
results.append(("HTML Structure", test_dashboard_html_structure()))
|
||||
results.append(("Responsive CSS", test_responsive_css()))
|
||||
results.append(("JavaScript POST", test_javascript_functions()))
|
||||
results.append(("Device Controls", test_device_controls()))
|
||||
results.append(("Rank Sorting", test_rank_sorting()))
|
||||
|
||||
# Summary
|
||||
print("=" * 60)
|
||||
passed = sum(1 for _, result in results if result)
|
||||
total = len(results)
|
||||
print(f"Results: {passed}/{total} tests passed")
|
||||
print("=" * 60)
|
||||
|
||||
for name, result in results:
|
||||
status = "✓" if result else "✗"
|
||||
print(f" {status} {name}")
|
||||
|
||||
print()
|
||||
print("Manual Tests Required:")
|
||||
print(" 1. Open http://localhost:8002/dashboard in browser")
|
||||
print(" 2. Resize browser window to test responsive breakpoints:")
|
||||
print(" - Desktop (>1024px): Should show 4 columns")
|
||||
print(" - Tablet (640-1024px): Should show 2 columns")
|
||||
print(" - Mobile (<640px): Should show 1 column")
|
||||
print(" 3. Click ON/OFF buttons and check Network tab in DevTools")
|
||||
print(" - Should see POST to http://localhost:8001/devices/.../set")
|
||||
print(" - No JavaScript errors in Console")
|
||||
print(" 4. Verify no horizontal scrolling at any viewport size")
|
||||
|
||||
if passed == total:
|
||||
print()
|
||||
print("All automated tests passed!")
|
||||
sys.exit(0)
|
||||
else:
|
||||
print()
|
||||
print("Some tests failed.")
|
||||
sys.exit(1)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
Reference in New Issue
Block a user