Skip to content

[TESTING][FUNCTIONALITY]: Admin UI manual test plan (HTMX, Alpine.js, navigation, CRUD) #2428

Open
Task
Open
[TESTING][FUNCTIONALITY]: Admin UI manual test plan (HTMX, Alpine.js, navigation, CRUD)#2428
Task
Labels
SHOULDP2: Important but not vital; high-value items that are not crucial for the immediate releasechoreLinting, formatting, dependency hygiene, or project maintenance choresfrontendFrontend development (HTML, CSS, JavaScript)manual-testingManual testing / test planning issuesreadyValidated, ready-to-work-on itemstestingTesting (unit, e2e, manual, automated, etc)
Milestone
Release 1.1.0
@crivetimihai

Description

@crivetimihai
crivetimihai
opened on Jan 25, 2026

🖼️ [TESTING][FUNCTIONALITY]: Admin UI Manual Test Plan

Goal

Produce a comprehensive manual test plan for Admin UI functionality including HTMX interactions, Alpine.js components, navigation, CRUD operations, and responsive design.

Why Now?

The Admin UI is the primary management interface:

  1. Usability: Admins need intuitive server management
  2. Responsiveness: UI must work across devices
  3. Functionality: All CRUD operations must work
  4. Feedback: Actions need clear status indication

📖 User Stories

US-1: Admin - Dashboard Access

As an administrator
I want to access the admin dashboard
So that I can monitor and manage the gateway

Acceptance Criteria:

Feature: Dashboard Access

  Scenario: Login to dashboard
    Given valid admin credentials
    When I access the admin UI
    Then I should see the dashboard
    And I should see system status

  Scenario: Navigation
    Given I am logged in
    When I click on navigation links
    Then I should navigate to the correct section
US-2: Admin - Entity Management

As an administrator
I want to manage entities through the UI
So that I don't need to use the API directly

Acceptance Criteria:

Feature: Entity Management

  Scenario: Create entity
    Given I am on the entity list page
    When I click create and fill the form
    Then the entity should be created
    And I should see it in the list

  Scenario: Edit entity
    Given an entity exists
    When I edit and save changes
    Then the changes should be persisted

🏗 Architecture

┌─────────────────────────────────────────────────────────────────────────────┐
│                          ADMIN UI ARCHITECTURE                               │
└─────────────────────────────────────────────────────────────────────────────┘

    BROWSER                 GATEWAY                    DATABASE
    ───────                 ───────                    ────────

  ┌──────────────┐       ┌──────────────┐       ┌──────────────┐
  │  Admin UI    │       │  FastAPI     │       │  PostgreSQL  │
  │  (HTMX +     │◀─────▶│  Server      │◀─────▶│  / SQLite    │
  │  Alpine.js)  │       │              │       │              │
  └──────────────┘       └──────────────┘       └──────────────┘
       │                        │
       │ HTMX requests          │
       │ (partial HTML)         │
       │                        │
       │ hx-get, hx-post        │
       │ hx-swap                │


    UI COMPONENTS
    ─────────────

    ┌─────────────────────────────────────────────────────────────┐
    │ Header (Navigation)                                         │
    ├─────────────────────────────────────────────────────────────┤
    │ Sidebar       │ Main Content Area                           │
    │               │                                             │
    │ - Dashboard   │  ┌─────────────────────────────────────┐   │
    │ - Gateways    │  │ Data Table                          │   │
    │ - Servers     │  │ - Search/Filter                     │   │
    │ - Tools       │  │ - Pagination                        │   │
    │ - Users       │  │ - Actions (Edit, Delete)            │   │
    │ - Teams       │  └─────────────────────────────────────┘   │
    │ - Settings    │                                             │
    └───────────────┴─────────────────────────────────────────────┘

📋 Test Environment Setup

export GATEWAY_URL="http://localhost:8000"
export MCPGATEWAY_UI_ENABLED=true

# Start gateway with UI
make dev

# Access UI at
open "$GATEWAY_URL/admin"

🧪 Manual Test Cases

Section 1: Authentication & Access

Case Scenario Credentials Expected Validation
AU-01 Login Valid Dashboard Redirected
AU-02 Invalid login Wrong password Error Message shown
AU-03 Session timeout Expired Redirect to login Session ended
AU-01: Successful Login

Steps:

  1. Navigate to $GATEWAY_URL/admin
  2. Enter valid username and password
  3. Click "Login"
  4. Verify dashboard loads
  5. Check session cookie is set

Expected Result:

  • Dashboard displays
  • User info visible
  • Navigation active

Section 2: Navigation

Case Scenario Link Expected Validation
NV-01 Dashboard link Dashboard Main view Stats visible
NV-02 Gateways link Gateways Gateway list Table shows
NV-03 Mobile menu Hamburger Menu opens Links visible
NV-01: Dashboard Navigation

Steps:

  1. Click "Dashboard" in sidebar
  2. Verify main content updates
  3. Check URL changes (if applicable)
  4. Verify stats widgets load

Expected Result:

  • Dashboard content displays
  • Stats show current values
  • Recent activity visible

Section 3: CRUD Operations

Case Scenario Entity Operation Validation
CR-01 Create gateway Gateway Create Added to list
CR-02 Edit gateway Gateway Update Changes saved
CR-03 Delete gateway Gateway Delete Removed
CR-04 Bulk delete Multiple Delete All removed
CR-01: Create Gateway via UI

Steps:

  1. Navigate to Gateways section
  2. Click "Add Gateway" button
  3. Fill form:
  4. Click "Save"
  5. Verify gateway appears in list

Expected Result:

  • Form submits successfully
  • Success message shown
  • Gateway in list with correct details
CR-03: Delete Gateway via UI

Steps:

  1. Navigate to Gateways section
  2. Find gateway to delete
  3. Click delete icon/button
  4. Confirm deletion in modal
  5. Verify gateway removed from list

Expected Result:

  • Confirmation modal appears
  • Gateway removed after confirm
  • List updates without refresh

Section 4: HTMX Interactions

Case Scenario Trigger Expected Validation
HX-01 Partial update hx-swap Content updates No full reload
HX-02 Form submit hx-post Form processed Response injected
HX-03 Search hx-trigger Results filter Debounced
HX-01: HTMX Partial Update

Steps:

  1. Open browser DevTools Network tab
  2. Click on a navigation item
  3. Observe network requests
  4. Verify only partial HTML returned
  5. Check page doesn't fully reload

Expected Result:

  • XHR/Fetch request made
  • Partial HTML response
  • Only target element updates
  • No full page reload

Section 5: Responsive Design

Case Scenario Viewport Expected Validation
RD-01 Desktop 1920px Full layout Sidebar visible
RD-02 Tablet 768px Adapted Collapsible sidebar
RD-03 Mobile 375px Mobile Hamburger menu
RD-03: Mobile Layout

Steps:

  1. Open DevTools and set viewport to 375px width
  2. Refresh page
  3. Verify hamburger menu appears
  4. Click hamburger to open menu
  5. Verify navigation works

Expected Result:

  • Sidebar collapses to hamburger
  • Menu opens on tap
  • All functions accessible
  • Touch-friendly buttons

📊 Test Matrix

Test Case Auth Navigation CRUD HTMX Responsive
AU-01 ✓
AU-02 ✓
AU-03 ✓
NV-01 ✓
NV-02 ✓
NV-03 ✓ ✓
CR-01 ✓ ✓
CR-02 ✓ ✓
CR-03 ✓ ✓
CR-04 ✓
HX-01 ✓
HX-02 ✓
HX-03 ✓
RD-01 ✓
RD-02 ✓
RD-03 ✓

✅ Success Criteria

  • All 16 test cases pass
  • Login/logout works correctly
  • Navigation is functional
  • CRUD operations work for all entities
  • HTMX updates work without full reload
  • UI is responsive across devices

🔗 Related Files

  • mcpgateway/templates/
  • mcpgateway/static/
  • mcpgateway/routers/admin.py

🔗 Related Issues

Metadata

Metadata

Assignees

No one assigned

    Labels

    SHOULDP2: Important but not vital; high-value items that are not crucial for the immediate releasechoreLinting, formatting, dependency hygiene, or project maintenance choresfrontendFrontend development (HTML, CSS, JavaScript)manual-testingManual testing / test planning issuesreadyValidated, ready-to-work-on itemstestingTesting (unit, e2e, manual, automated, etc)

    Type

    Task

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions