`public/test-activity-links.html`

157 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Activity Links - Fallback Message Tests</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Activity Links CSS -->
    <link rel="stylesheet" href="/css/activity-links.css">

    <style>
        body {
            font-family: 'Inter', sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
            background: #f5f5f5;
        }

        h1 {
            color: #333;
            margin-bottom: 2rem;
        }

        .test-section {
            background: white;
            padding: 2rem;
            margin-bottom: 2rem;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .test-section h2 {
            color: #667eea;
            margin-bottom: 1rem;
            font-size: 1.25rem;
        }

        .test-section p {
            color: #666;
            margin-bottom: 1.5rem;
        }

        .status {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 15px;
            font-size: 0.875rem;
            font-weight: 600;
            margin-left: 0.5rem;
        }

        .status.all-links {
            background: #d4edda;
            color: #155724;
        }

        .status.partial {
            background: #fff3cd;
            color: #856404;
        }

        .status.no-links {
            background: #f8d7da;
            color: #721c24;
        }
    </style>
</head>
<body>
    <h1>US-005: Fallback Message Display Tests</h1>

    <!-- Test 1: All Links Available -->
    <div class="test-section">
        <h2>Test 1: All Links Available <span class="status all-links">✓ All Links</span></h2>
        <p>Activity ID 1 (Coconut Harry) - Should display all three links (Website, Directions, Reviews)</p>
        <div class="activity-links-container"
             data-activity-links
             data-activity-id="1"
             data-show-labels="true">
            <!-- Links will be loaded here automatically -->
        </div>
    </div>

    <!-- Test 2: No Links Available -->
    <div class="test-section">
        <h2>Test 2: No Links Available <span class="status no-links">✗ No Links</span></h2>
        <p>Activity ID 2 (No Links) - Should display fallback message: "Contact information not available"</p>
        <div class="activity-links-container"
             data-activity-links
             data-activity-id="2"
             data-show-labels="true">
            <!-- Fallback message should appear -->
        </div>
    </div>

    <!-- Test 3: Partial Links - Website Only -->
    <div class="test-section">
        <h2>Test 3: Partial Links - Website Only <span class="status partial">⚠ Partial</span></h2>
        <p>Activity ID 3 (Website Only) - Should display website link + note about missing directions and reviews</p>
        <div class="activity-links-container"
             data-activity-links
             data-activity-id="3"
             data-show-labels="true">
            <!-- Website link + partial info message -->
        </div>
    </div>

    <!-- Test 4: Partial Links - Website and Maps -->
    <div class="test-section">
        <h2>Test 4: Partial Links - Website and Maps <span class="status partial">⚠ Partial</span></h2>
        <p>Activity ID 4 (Website + Maps) - Should display website and directions links + note about missing reviews</p>
        <div class="activity-links-container"
             data-activity-links
             data-activity-id="4"
             data-show-labels="true">
            <!-- Website + Maps links + partial info message -->
        </div>
    </div>

    <!-- Test 5: Compact Mode with Partial Links -->
    <div class="test-section">
        <h2>Test 5: Compact Mode <span class="status partial">⚠ Partial</span></h2>
        <p>Activity ID 3 in compact mode - Should work with smaller styling</p>
        <div class="activity-links-container"
             data-activity-links
             data-activity-id="3"
             data-show-labels="true"
             data-compact>
            <!-- Compact version -->
        </div>
    </div>

    <!-- Test 6: Icon-only Mode -->
    <div class="test-section">
        <h2>Test 6: Icon-only Mode <span class="status all-links">✓ All Links</span></h2>
        <p>Activity ID 1 without labels - Should display icon-only buttons</p>
        <div class="activity-links-container"
             data-activity-links
             data-activity-id="1"
             data-show-labels="false">
            <!-- Icon-only buttons -->
        </div>
    </div>

    <!-- Activity Links JavaScript -->
    <script src="/js/activity-links.js"></script>

    <script>
        console.log('Activity Links Test Page Loaded');
        console.log('Testing US-005: Fallback Message Display');
    </script>
</body>
</html>