883 lines
27 KiB
Text
883 lines
27 KiB
Text
================================================================================
|
|
POWERON AI PLATFORM - UI TESTDOKUMENTATION
|
|
================================================================================
|
|
|
|
ÜBERSICHT
|
|
---------
|
|
Dieses Dokument strukturiert alle UI-Funktionen der PowerOn AI Platform nach Views,
|
|
Objekten und Attributen. Es dient als systematische Testanleitung für die Validierung
|
|
der neuen UI-Implementierung.
|
|
|
|
================================================================================
|
|
1. AUTHENTIFIZIERUNG & BENUTZERVERWALTUNG
|
|
================================================================================
|
|
|
|
1.1 LOGIN VIEW (/login.html)
|
|
---------------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Form: #login-form
|
|
- Input: #username (type="text", required, autocomplete="username")
|
|
- Input: #password (type="password", required, autocomplete="current-password")
|
|
- Input: #csrf-token (type="hidden", class="csrf-token")
|
|
- Button: .login-btn (type="submit")
|
|
|
|
- Error Display: #login-error (class="login-error-message")
|
|
|
|
- Alternative Login Buttons:
|
|
- Button: #msft-login-btn (class="register-btn msft-btn")
|
|
- Button: #google-login-btn (class="register-btn msft-btn")
|
|
- Link: .register-btn.local-btn (href="register.html")
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Username-Eingabe validiert (min. 3 Zeichen)
|
|
□ Password-Eingabe maskiert Zeichen
|
|
□ CSRF-Token wird generiert und übertragen
|
|
□ Login-Button aktiviert Form-Submission
|
|
□ Fehlerbehandlung bei ungültigen Credentials
|
|
□ Microsoft Login öffnet OAuth-Popup
|
|
□ Google Login öffnet OAuth-Popup
|
|
□ "Registrieren" Link führt zu Register-View
|
|
□ Form-Validation funktioniert (required fields)
|
|
□ Autocomplete-Attribute sind gesetzt
|
|
|
|
1.2 REGISTER VIEW (/register.html)
|
|
---------------------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Form: #register-form
|
|
- Input: #username (type="text", required, minlength="3")
|
|
- Input: #password (type="password", required, minlength="8")
|
|
- Input: #confirm-password (type="password", required)
|
|
- Input: #email (type="email", required)
|
|
- Input: #fullName (type="text", minlength="2")
|
|
- Input: #authenticationAuthority (type="hidden", value="local")
|
|
- Button: .login-btn (type="submit")
|
|
|
|
- Error Display: #register-error (class="login-error-message")
|
|
- Navigation: .register-link > a (href="login.html")
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Username-Validierung (min. 3 Zeichen)
|
|
□ Password-Validierung (min. 8 Zeichen)
|
|
□ Password-Bestätigung prüft Übereinstimmung
|
|
□ Email-Validierung (korrekte Email-Format)
|
|
□ FullName ist optional (min. 2 Zeichen wenn ausgefüllt)
|
|
□ AuthenticationAuthority ist auf "local" gesetzt
|
|
□ Form-Submission erstellt neuen Benutzer
|
|
□ Fehlerbehandlung bei Validierungsfehlern
|
|
□ "Zum Login" Link führt zurück zu Login-View
|
|
□ Alle required fields werden validiert
|
|
|
|
1.3 HOME VIEW (/poweron-home.html)
|
|
---------------------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Container: .container
|
|
- Header: .header
|
|
- H1: "PowerOn AI Platform"
|
|
- P: Beschreibungstext
|
|
- Content Sections: .content-section
|
|
- H2: Sektionsüberschriften
|
|
- P: Beschreibungstexte
|
|
- Features: .features (grid layout)
|
|
- Feature Cards: .feature-card
|
|
- H3: Feature-Titel
|
|
- P: Feature-Beschreibung
|
|
- Navigation: .navigation
|
|
- Links: .nav-link (href zu Privacy/Terms)
|
|
- Footer: .footer
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Responsive Grid-Layout für Features
|
|
□ Navigation-Links funktionieren
|
|
□ Alle Textinhalte sind korrekt angezeigt
|
|
□ CSS-Styling ist korrekt angewendet
|
|
□ Mobile-Responsive Design funktioniert
|
|
|
|
================================================================================
|
|
2. HAUPTANWENDUNG - MODULARES SYSTEM
|
|
================================================================================
|
|
|
|
2.1 MAIN CONTAINER (/index.html)
|
|
-------------------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- App Container: .app-container
|
|
- Sidebar: #sidebar (class="sidebar")
|
|
- Header: .sidebar-header
|
|
- H2: "PowerOn AI"
|
|
- User Display: #user-name (class="current-user")
|
|
- Environment: #environment-name (class="environment-info")
|
|
- Navigation: .navigation-container
|
|
- List: #main-navigation (ul)
|
|
|
|
- Main Content: .main-content
|
|
- Module Container: #module-container (class="module-container")
|
|
|
|
- File Preview Modal: #file-preview-modal
|
|
- Content: .file-preview-modal-content
|
|
- Header: .file-preview-modal-header
|
|
- Title: #file-preview-modal-title
|
|
- Actions: .file-preview-modal-actions
|
|
- Download: #modal-download-file-btn
|
|
- Copy: #modal-copy-file-btn
|
|
- Close: #modal-close-file-preview-btn
|
|
- Body: #file-preview-modal-body
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Sidebar wird korrekt geladen
|
|
□ Benutzername wird angezeigt
|
|
□ Environment-Info wird angezeigt
|
|
□ Navigation wird dynamisch generiert
|
|
□ Module-Container wechselt zwischen Views
|
|
□ File-Preview-Modal funktioniert
|
|
□ Modal-Actions (Download, Copy, Close) funktionieren
|
|
|
|
2.2 NAVIGATION SYSTEM
|
|
--------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Navigation List: #main-navigation
|
|
- Items: .nav-item (data-module, data-level)
|
|
- Links: a (href="#moduleName")
|
|
- Icons: i.fas (FontAwesome icons)
|
|
- Labels: span (text content)
|
|
|
|
- Folder Items: .folder-header
|
|
- Toggle Icon: .toggle-icon (fa-chevron-down)
|
|
- Collapsed State: .collapsed
|
|
|
|
- Dropdown Items: .dropdown
|
|
- Toggle: .dropdown-toggle
|
|
- Content: .dropdown-content
|
|
- Options: a (data-value)
|
|
|
|
- Action Items: .nav-action-btn
|
|
- Dynamic Labels: span (text updates based on state)
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Module-Navigation funktioniert
|
|
□ Folder-Toggle (auf/zu) funktioniert
|
|
□ Dropdown-Menüs öffnen/schließen
|
|
□ Action-Buttons (Logout, MS Login) funktionieren
|
|
□ Aktive Module werden hervorgehoben
|
|
□ Hierarchische Navigation funktioniert
|
|
□ Dynamic Labels werden aktualisiert
|
|
|
|
================================================================================
|
|
3. WORKFLOW MODULE
|
|
================================================================================
|
|
|
|
3.1 WORKFLOW VIEW (part_workflow.html)
|
|
-------------------------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Container: .workflow-container
|
|
- Chat Section: .chat-section
|
|
- Columns: .chat-columns
|
|
- Left Column: .chat-left (70%)
|
|
- Empty State: #empty-chat-state (class="empty-state")
|
|
- Icon: i.fas.fa-comments.fa-3x
|
|
- Title: h4 "Noch keine Kommunikation"
|
|
- Description: p
|
|
- Content Area: #unified-content-area (class="unified-content-area")
|
|
- Right Column: .chat-right (30%)
|
|
- Dashboard: #workflow-dashboard-container
|
|
- Header: .workflow-dashboard-header
|
|
- Title: h4 "Workflow Progress"
|
|
- Actions: .dashboard-actions
|
|
- Refresh: #refresh-dashboard-btn
|
|
- Minimize: #minimize-dashboard-btn
|
|
- Content: #workflow-dashboard-content
|
|
|
|
- Footer: .workflow-footer
|
|
- Columns: .footer-columns
|
|
- Left Column: .footer-left (70%)
|
|
- Input Area: #user-input-area (class="user-input-area file-dropzone-wrapper")
|
|
- Container: .user-input-container
|
|
- Prompt Selection: .prompt-selection
|
|
- Select: #prompt-select-main (class="form-control")
|
|
- Textarea: #user-message-input (class="form-control")
|
|
- Actions: .user-input-actions
|
|
- File Actions: .file-actions
|
|
- Upload Button: #upload-additional-file-btn
|
|
- File Input: #additional-file-input (type="file", multiple, hidden)
|
|
- Workflow Controls: .workflow-controls
|
|
- Stop: #stop-workflow-btn (class="btn btn-danger")
|
|
- Reset: #reset-btn (class="btn btn-outline-secondary")
|
|
- Refresh Tokens: #refresh-tokens-btn (class="btn btn-outline-warning")
|
|
- Send: #send-user-message-btn (class="btn btn-primary")
|
|
- Right Column: .footer-right (30%)
|
|
- Statistics: #data-statistics (class="data-statistics")
|
|
- Items: .stat-item (data sent, received, time, tokens)
|
|
- Files Container: #additional-files-container
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Empty State wird korrekt angezeigt
|
|
□ Unified Content Area zeigt Logs und Messages
|
|
□ Dashboard zeigt Workflow-Progress
|
|
□ Prompt-Selection lädt verfügbare Prompts
|
|
□ User-Input funktioniert (Textarea)
|
|
□ File-Upload (Button + Drag & Drop)
|
|
□ Workflow-Controls (Start, Stop, Reset, Refresh Tokens)
|
|
□ Statistics werden angezeigt
|
|
□ Additional Files werden gelistet
|
|
□ Drag & Drop funktioniert
|
|
□ Enter-Key sendet Message
|
|
□ Shift+Enter fügt neue Zeile hinzu
|
|
|
|
3.2 WORKFLOW STATE MANAGEMENT
|
|
----------------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Workflow States: WORKFLOW_STATES
|
|
- NULL: null
|
|
- RUNNING: 'running'
|
|
- COMPLETED: 'completed'
|
|
- FAILED: 'failed'
|
|
- STOPPED: 'stopped'
|
|
|
|
- State Properties:
|
|
- currentTask: number
|
|
- currentAction: number
|
|
- currentRound: number
|
|
- totalTasks: number
|
|
- totalActions: number
|
|
- status: string
|
|
- workflowId: string
|
|
- pollActive: boolean
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ State-Transitions funktionieren korrekt
|
|
□ Polling startet/stoppt bei State-Änderungen
|
|
□ UI aktualisiert sich bei State-Änderungen
|
|
□ Error-Handling bei State-Transitions
|
|
□ Workflow-ID wird korrekt gesetzt
|
|
□ Progress-Tracking funktioniert
|
|
|
|
3.3 FILE HANDLING
|
|
----------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- File Objects:
|
|
- id: string
|
|
- fileName: string
|
|
- fileSize: number
|
|
- mimeType: string
|
|
- content: Blob/File
|
|
|
|
- File Upload:
|
|
- Input: #additional-file-input
|
|
- Button: #upload-additional-file-btn
|
|
- Container: #additional-files-container
|
|
|
|
- File Display:
|
|
- Items: .additional-file-item
|
|
- Icon: i.fas.fa-file
|
|
- Name: .file-name
|
|
- Size: .file-size
|
|
- Remove: .remove-file-btn (data-file-id)
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ File-Upload funktioniert (Button + Drag & Drop)
|
|
□ Multiple Files werden unterstützt
|
|
□ File-Validation (Type, Size)
|
|
□ File-Display zeigt korrekte Informationen
|
|
□ File-Removal funktioniert
|
|
□ File-Preview funktioniert
|
|
□ Download-Links funktionieren
|
|
|
|
================================================================================
|
|
4. USER MANAGEMENT MODULE
|
|
================================================================================
|
|
|
|
4.1 USERS VIEW (part_formUsers.html)
|
|
-----------------------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Container: #users-view
|
|
- Card: .card
|
|
- Header: .section-header
|
|
- Title: h3 "Verfügbare Benutzer"
|
|
- Add Button: #add-user-btn (class="add-btn")
|
|
- List Container: #users-list
|
|
|
|
- User Objects:
|
|
- id: string
|
|
- username: string
|
|
- email: string
|
|
- password: string (hashed)
|
|
- enabled: boolean
|
|
- language: string
|
|
- privilege: string ('admin', 'user', 'sysadmin')
|
|
- mandateId: string
|
|
- authenticationAuthority: string
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ User-Liste wird geladen
|
|
□ Add-Button öffnet User-Form
|
|
□ User-Table zeigt alle Attribute
|
|
□ Edit-Button öffnet Edit-Form
|
|
□ Delete-Button löscht User
|
|
□ Enable/Disable-Toggle funktioniert
|
|
□ Form-Validation funktioniert
|
|
□ User-Creation funktioniert
|
|
□ User-Update funktioniert
|
|
□ User-Deletion funktioniert
|
|
|
|
4.2 USER FORM FIELDS
|
|
-------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Form Fields (from API getEntityAttributes('User')):
|
|
- username: text, required, minlength=3
|
|
- email: email, required
|
|
- password: password, required, minlength=8
|
|
- enabled: checkbox
|
|
- language: select, options from backend
|
|
- privilege: select, options: ['admin', 'user', 'sysadmin']
|
|
|
|
- Form Actions:
|
|
- Save: .entity-save-btn
|
|
- Cancel: .entity-cancel-btn
|
|
- Delete: .entity-delete-btn
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Alle Form-Felder werden korrekt gerendert
|
|
□ Field-Types entsprechen Backend-Definition
|
|
□ Required-Validation funktioniert
|
|
□ Minlength-Validation funktioniert
|
|
□ Select-Options werden geladen
|
|
□ Form-Submission funktioniert
|
|
□ Error-Messages werden angezeigt
|
|
□ Success-Messages werden angezeigt
|
|
|
|
================================================================================
|
|
5. CONNECTION MANAGEMENT MODULE
|
|
================================================================================
|
|
|
|
5.1 CONNECTIONS VIEW (part_formConnections.html)
|
|
-----------------------------------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Container: #connections-view
|
|
- Card: .card
|
|
- Header: .section-header
|
|
- Title: h3 "External Connections"
|
|
- Add Buttons: #add-connection-buttons
|
|
- Google: #connect-google-btn (class="add-btn")
|
|
- Microsoft: #connect-msft-btn (class="add-btn")
|
|
- List Container: #connections-list
|
|
|
|
- Connection Objects:
|
|
- id: string
|
|
- userId: string
|
|
- authority: string ('google', 'msft')
|
|
- externalUsername: string
|
|
- externalEmail: string
|
|
- status: string ('active', 'pending', 'needs_reconnection')
|
|
- expiresAt: number (UTC timestamp)
|
|
- lastChecked: number (UTC timestamp)
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Connection-Liste wird geladen
|
|
□ Google-Connect-Button funktioniert
|
|
□ Microsoft-Connect-Button funktioniert
|
|
□ Connection-Status wird angezeigt
|
|
□ Token-Expiration wird angezeigt
|
|
□ Refresh-Token-Button funktioniert
|
|
□ Connection-Deletion funktioniert
|
|
□ OAuth-Popup funktioniert
|
|
□ Token-Refresh funktioniert
|
|
□ Expired-Token-Warning funktioniert
|
|
|
|
5.2 TOKEN MANAGEMENT
|
|
-------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Token Status:
|
|
- hasValidToken: boolean
|
|
- hasRefreshableToken: boolean
|
|
- isExpired: boolean
|
|
- expiresSoon: boolean (5 min buffer)
|
|
|
|
- Token Actions:
|
|
- Refresh: .entity-refresh-token-btn
|
|
- Cleanup: automatic cleanup
|
|
- Warning: #refresh-tokens-btn (shows when tokens expire soon)
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Token-Status wird korrekt erkannt
|
|
□ Expired-Token-Detection funktioniert
|
|
□ Token-Refresh funktioniert
|
|
□ Automatic-Cleanup funktioniert
|
|
□ Warning-Button wird angezeigt
|
|
□ Token-Status-Updates funktionieren
|
|
□ Error-Handling bei Token-Refresh
|
|
|
|
================================================================================
|
|
6. FILE MANAGEMENT MODULE
|
|
================================================================================
|
|
|
|
6.1 FILES VIEW (part_formFiles.html)
|
|
-----------------------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Container: #files-view
|
|
- Card: .card
|
|
- Header: .section-header
|
|
- Title: h3 "Meine Dateien"
|
|
- List Container: #my-files-list (class="files-list-container")
|
|
- Empty State: #empty-files-state (class="empty-state")
|
|
- Icon: i.fas.fa-file-alt.empty-icon
|
|
- Message: p "Noch keine Dateien vorhanden."
|
|
|
|
- Upload Section: #upload-section (class="upload-section")
|
|
- Upload Area: .upload-area
|
|
- Icon: .upload-icon > i.fas.fa-cloud-upload-alt
|
|
- Text: .upload-text
|
|
- Button: .upload-button > input#file-upload-input (type="file", multiple, hidden)
|
|
|
|
- File Objects:
|
|
- id: string
|
|
- fileName: string
|
|
- mimeType: string
|
|
- fileSize: number
|
|
- creationDate: number (UTC timestamp)
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ File-Liste wird geladen
|
|
□ Upload-Section wird angezeigt
|
|
□ Drag & Drop funktioniert
|
|
□ File-Selection funktioniert
|
|
□ Multiple-File-Upload funktioniert
|
|
□ File-Information wird angezeigt
|
|
□ Empty-State wird angezeigt
|
|
□ File-Actions funktionieren
|
|
|
|
6.2 FILE ACTIONS
|
|
---------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- File Action Buttons:
|
|
- Download: .entity-view-btn
|
|
- Icon: i.fas.fa-download
|
|
- Text: "Download"
|
|
- Copy Link: .entity-copy-btn
|
|
- Icon: i.fas.fa-clipboard
|
|
- Text: "Copy Download Link"
|
|
- Edit: .entity-edit-btn
|
|
- Delete: .entity-delete-btn
|
|
|
|
- File Edit Modal: #edit-file-modal
|
|
- Name Field: #edit-file-name
|
|
- Upload Field: #edit-file-upload
|
|
- Save Button: .entity-modal-save
|
|
- Cancel Button: .entity-modal-cancel
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Download-Button funktioniert
|
|
□ Copy-Link-Button funktioniert
|
|
□ Edit-Button öffnet Modal
|
|
□ Delete-Button löscht File
|
|
□ File-Edit-Modal funktioniert
|
|
□ File-Rename funktioniert
|
|
□ File-Replacement funktioniert
|
|
□ Modal-Validation funktioniert
|
|
|
|
================================================================================
|
|
7. WORKFLOW LIST MODULE
|
|
================================================================================
|
|
|
|
7.1 WORKFLOWS VIEW (part_formWorkflows.html)
|
|
-------------------------------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Container: #workflows-view
|
|
- Card: .card
|
|
- Header: .section-header
|
|
- Title: h3 "Workflows"
|
|
- Add Button: #add-workflow-btn (class="add-btn")
|
|
- List Container: #workflows-list
|
|
|
|
- Workflow Objects:
|
|
- id: string
|
|
- name: string
|
|
- status: string ('running', 'completed', 'stopped', 'error')
|
|
- currentRound: number
|
|
- lastActivity: number (UTC timestamp)
|
|
- mandateId: string
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Workflow-Liste wird geladen
|
|
□ Add-Button öffnet Workflow-Form
|
|
□ Workflow-Status wird angezeigt
|
|
□ Last-Activity wird formatiert angezeigt
|
|
□ Continue-Button funktioniert
|
|
□ Workflow-Creation funktioniert
|
|
□ Workflow-Deletion funktioniert
|
|
□ Sorting funktioniert (by lastActivity)
|
|
□ Status-Badges werden korrekt angezeigt
|
|
|
|
7.2 WORKFLOW TABLE FORMATTING
|
|
----------------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Table Fields:
|
|
- id: text, readonly
|
|
- name: text, readonly
|
|
- status: select, readonly, options: ['running', 'completed', 'stopped', 'error']
|
|
- currentRound: number, readonly
|
|
- lastActivity: timestamp, readonly
|
|
|
|
- Field Formatters:
|
|
- status: badge formatting (success, info, warning, danger)
|
|
- lastActivity: UTC timestamp formatting
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Table-Columns werden korrekt angezeigt
|
|
□ Status-Badges haben richtige Farben
|
|
□ Timestamp-Formatting funktioniert
|
|
□ Sorting funktioniert
|
|
□ Field-Alignment ist korrekt
|
|
□ Readonly-Fields sind nicht editierbar
|
|
|
|
================================================================================
|
|
8. PROMPT MANAGEMENT MODULE
|
|
================================================================================
|
|
|
|
8.1 PROMPTS VIEW (part_formPrompts.html)
|
|
---------------------------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Container: #prompts-view
|
|
- Card: .card
|
|
- Header: .section-header
|
|
- Title: h3 "Prompts"
|
|
- Add Button: #add-prompt-btn (class="add-btn")
|
|
- List Container: #prompts-list
|
|
|
|
- Prompt Objects:
|
|
- id: string
|
|
- name: string
|
|
- content: string
|
|
- mandateId: string
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Prompt-Liste wird geladen
|
|
□ Add-Button öffnet Prompt-Form
|
|
□ Prompt-Name wird angezeigt
|
|
□ Prompt-Content wird angezeigt
|
|
□ Copy-Button funktioniert
|
|
□ Prompt-Creation funktioniert
|
|
□ Prompt-Update funktioniert
|
|
□ Prompt-Deletion funktioniert
|
|
□ Form-Validation funktioniert
|
|
|
|
8.2 PROMPT FORM FIELDS
|
|
---------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Form Fields (from API getEntityAttributes('Prompt')):
|
|
- name: text, required
|
|
- content: textarea, required
|
|
|
|
- Form Actions:
|
|
- Save: .entity-save-btn
|
|
- Cancel: .entity-cancel-btn
|
|
- Copy: .entity-copy-btn
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Name-Field ist required
|
|
□ Content-Field ist textarea
|
|
□ Form-Validation funktioniert
|
|
□ Copy-to-Clipboard funktioniert
|
|
□ Form-Submission funktioniert
|
|
□ Error-Handling funktioniert
|
|
|
|
8.3 PROMPT INTEGRATION
|
|
---------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Workflow Integration:
|
|
- Select: #prompt-select-main
|
|
- Options: option (value=promptId, text=promptName)
|
|
- Textarea: #user-message-input
|
|
|
|
- Event Handling:
|
|
- prompt:created event
|
|
- prompt:updated event
|
|
- prompt:deleted event
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Prompt-Dropdown wird geladen
|
|
□ Prompt-Selection lädt Content
|
|
□ Event-Handling funktioniert
|
|
□ Global-Prompt-List wird aktualisiert
|
|
□ Workflow-Integration funktioniert
|
|
|
|
================================================================================
|
|
9. UI COMPONENTS & SHARED ELEMENTS
|
|
================================================================================
|
|
|
|
9.1 MODALS
|
|
---------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- File Preview Modal: #file-preview-modal
|
|
- Content: .file-preview-modal-content
|
|
- Header: .file-preview-modal-header
|
|
- Title: #file-preview-modal-title
|
|
- Actions: .file-preview-modal-actions
|
|
- Body: #file-preview-modal-body
|
|
|
|
- Edit Modals: .entity-modal
|
|
- Content: .entity-modal-content
|
|
- Header: .entity-modal-header
|
|
- Body: .entity-modal-body
|
|
- Footer: .entity-modal-footer
|
|
- Close: .entity-modal-close
|
|
- Save: .entity-modal-save
|
|
- Cancel: .entity-modal-cancel
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Modal-Öffnung funktioniert
|
|
□ Modal-Schließung funktioniert
|
|
□ Modal-Content wird korrekt angezeigt
|
|
□ Modal-Actions funktionieren
|
|
□ Modal-Validation funktioniert
|
|
□ Modal-Overlay funktioniert
|
|
□ Escape-Key schließt Modal
|
|
|
|
9.2 NOTIFICATIONS
|
|
----------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Toast Messages: window.utils.ui.showToast()
|
|
- Types: 'success', 'error', 'warning', 'info'
|
|
- Properties: title, message, type
|
|
- Styling: .toast-success, .toast-error, .toast-warning, .toast-info
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Success-Toasts werden angezeigt
|
|
□ Error-Toasts werden angezeigt
|
|
□ Warning-Toasts werden angezeigt
|
|
□ Info-Toasts werden angezeigt
|
|
□ Toast-Auto-Dismiss funktioniert
|
|
□ Toast-Styling ist korrekt
|
|
□ Multiple-Toasts funktionieren
|
|
|
|
9.3 FORM VALIDATION
|
|
------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Validation Rules:
|
|
- required: boolean
|
|
- minlength: number
|
|
- maxlength: number
|
|
- pattern: regex
|
|
- type: string (text, email, password, etc.)
|
|
|
|
- Error Display:
|
|
- Field Errors: .field-error
|
|
- Form Errors: .form-error
|
|
- Validation Messages: dynamic text content
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Required-Validation funktioniert
|
|
□ Minlength-Validation funktioniert
|
|
□ Email-Validation funktioniert
|
|
□ Password-Validation funktioniert
|
|
□ Real-time-Validation funktioniert
|
|
□ Error-Messages werden angezeigt
|
|
□ Success-Validation funktioniert
|
|
|
|
9.4 TABLES
|
|
----------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Table Structure:
|
|
- Container: .table-container
|
|
- Table: table
|
|
- Header: thead > tr > th
|
|
- Body: tbody > tr > td
|
|
- Actions: .entity-actions-cell
|
|
|
|
- Table Features:
|
|
- Sorting: .sortable (data-sort)
|
|
- Filtering: .filter-input
|
|
- Pagination: .pagination
|
|
- Empty State: .empty-state
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Table-Rendering funktioniert
|
|
□ Column-Headers werden angezeigt
|
|
□ Data-Rows werden angezeigt
|
|
□ Action-Buttons funktionieren
|
|
□ Sorting funktioniert
|
|
□ Filtering funktioniert
|
|
□ Pagination funktioniert
|
|
□ Empty-State wird angezeigt
|
|
|
|
9.5 RESPONSIVE DESIGN
|
|
--------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Breakpoints:
|
|
- Mobile: < 768px
|
|
- Tablet: 768px - 1024px
|
|
- Desktop: > 1024px
|
|
|
|
- Responsive Classes:
|
|
- .d-none, .d-block
|
|
- .d-md-none, .d-md-block
|
|
- .d-lg-none, .d-lg-block
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Mobile-Layout funktioniert
|
|
□ Tablet-Layout funktioniert
|
|
□ Desktop-Layout funktioniert
|
|
□ Navigation ist responsive
|
|
□ Tables sind responsive
|
|
□ Forms sind responsive
|
|
□ Modals sind responsive
|
|
|
|
================================================================================
|
|
10. PERFORMANCE & ERROR HANDLING
|
|
================================================================================
|
|
|
|
10.1 LOADING STATES
|
|
-----------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Loading Indicators:
|
|
- Spinner: .spinner, .loading
|
|
- Progress: .progress-bar
|
|
- Skeleton: .skeleton-loader
|
|
|
|
- Loading States:
|
|
- Module Loading: moduleLoader states
|
|
- Data Loading: formGeneric loading
|
|
- API Loading: apiCalls loading
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Loading-Indicators werden angezeigt
|
|
□ Loading-States werden korrekt gesetzt
|
|
□ Loading-Errors werden behandelt
|
|
□ Loading-Performance ist akzeptabel
|
|
□ Loading-Cancellation funktioniert
|
|
|
|
10.2 ERROR HANDLING
|
|
-----------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Error Types:
|
|
- Validation Errors: form validation
|
|
- API Errors: network/server errors
|
|
- JavaScript Errors: runtime errors
|
|
- User Errors: user input errors
|
|
|
|
- Error Display:
|
|
- Error Messages: .error-message
|
|
- Error Toasts: showToast('error', ...)
|
|
- Error Modals: .error-modal
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Validation-Errors werden angezeigt
|
|
□ API-Errors werden behandelt
|
|
□ JavaScript-Errors werden abgefangen
|
|
□ User-Errors werden erklärt
|
|
□ Error-Recovery funktioniert
|
|
□ Error-Logging funktioniert
|
|
|
|
10.3 MEMORY MANAGEMENT
|
|
--------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Memory Cleanup:
|
|
- Event Listeners: removeEventListener
|
|
- Intervals: clearInterval
|
|
- Timeouts: clearTimeout
|
|
- Objects: null assignment
|
|
|
|
- Module Cleanup:
|
|
- onDeactivation: module cleanup
|
|
- Event Cleanup: removeEventListeners
|
|
- State Cleanup: reset state
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Event-Listeners werden entfernt
|
|
□ Intervals werden gestoppt
|
|
□ Timeouts werden gestoppt
|
|
□ Module-Cleanup funktioniert
|
|
□ Memory-Leaks werden vermieden
|
|
□ Performance bleibt stabil
|
|
|
|
================================================================================
|
|
11. ACCESSIBILITY & USABILITY
|
|
================================================================================
|
|
|
|
11.1 KEYBOARD NAVIGATION
|
|
-----------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- Focus Management:
|
|
- Tab Order: tabindex
|
|
- Focus Indicators: :focus styles
|
|
- Focus Trapping: modal focus
|
|
|
|
- Keyboard Shortcuts:
|
|
- Enter: form submission
|
|
- Escape: modal close
|
|
- Tab: next element
|
|
- Shift+Tab: previous element
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ Tab-Navigation funktioniert
|
|
□ Focus-Indicators sind sichtbar
|
|
□ Keyboard-Shortcuts funktionieren
|
|
□ Focus-Trapping funktioniert
|
|
□ Skip-Links funktionieren
|
|
|
|
11.2 SCREEN READER SUPPORT
|
|
------------------------
|
|
OBJEKTE & ATTRIBUTE:
|
|
- ARIA Attributes:
|
|
- aria-label: element labels
|
|
- aria-describedby: element descriptions
|
|
- aria-expanded: expandable elements
|
|
- aria-hidden: hidden elements
|
|
|
|
- Semantic HTML:
|
|
- Headings: h1-h6 hierarchy
|
|
- Lists: ul, ol, li
|
|
- Forms: form, label, input
|
|
- Tables: table, th, td
|
|
|
|
FUNKTIONEN ZU TESTEN:
|
|
□ ARIA-Attribute sind gesetzt
|
|
□ Semantic-HTML ist korrekt
|
|
□ Screen-Reader-Navigation funktioniert
|
|
□ Alt-Text ist vorhanden
|
|
□ Form-Labels sind korrekt
|
|
|
|
================================================================================
|
|
12. TESTING CHECKLIST
|
|
================================================================================
|
|
|
|
ALLGEMEINE TESTS:
|
|
□ Alle Views laden korrekt
|
|
□ Navigation zwischen Modulen funktioniert
|
|
□ Responsive Design funktioniert
|
|
□ Error-Handling funktioniert
|
|
□ Loading-States funktionieren
|
|
□ Form-Validation funktioniert
|
|
□ Modal-Funktionalität funktioniert
|
|
□ Toast-Notifications funktionieren
|
|
□ Keyboard-Navigation funktioniert
|
|
□ Screen-Reader-Support funktioniert
|
|
|
|
WORKFLOW-SPEZIFISCHE TESTS:
|
|
□ Workflow-Erstellung funktioniert
|
|
□ Workflow-Ausführung funktioniert
|
|
□ Workflow-Stopp funktioniert
|
|
□ Workflow-Reset funktioniert
|
|
□ File-Upload funktioniert
|
|
□ Prompt-Selection funktioniert
|
|
□ Dashboard-Updates funktionieren
|
|
□ State-Management funktioniert
|
|
|
|
DATEN-MANAGEMENT TESTS:
|
|
□ User-CRUD funktioniert
|
|
□ Connection-Management funktioniert
|
|
□ File-Management funktioniert
|
|
□ Prompt-Management funktioniert
|
|
□ Workflow-List funktioniert
|
|
□ Token-Management funktioniert
|
|
□ Data-Synchronisation funktioniert
|
|
|
|
UI-COMPONENT TESTS:
|
|
□ Tables funktionieren
|
|
□ Forms funktionieren
|
|
□ Buttons funktionieren
|
|
□ Modals funktionieren
|
|
□ Dropdowns funktionieren
|
|
□ File-Upload funktioniert
|
|
□ Drag & Drop funktioniert
|
|
|
|
================================================================================
|
|
ENDE DER TESTDOKUMENTATION
|
|
================================================================================
|