Validating UI Features

CRITICAL: Load this skill before running any UI validation tests.

Prerequisites

• Local dev servers running (Backend: 8080, Frontend: 5173)
• Playwright MCP tools available
• Authenticated user session (MSAL popup completed)

Quick Test Commands

Test	Command
Start servers	VS Code task: `Start Dev (VS Code Terminals)`
Navigate	`browser_navigate` to `http://localhost:5173`
Check state	Look for `🔄` entries in browser console

Test 1: Theme Toggle (Settings Panel)

Purpose

Verify the Settings panel opens and theme switching works correctly.

UI Flow

code

ChatInput toolbar → Settings button (gear) → SettingsPanel drawer → ThemePicker dropdown

Steps

•Navigate to http://localhost:5173
•Wait for authentication and agent metadata load
•Find Settings button in ChatInput toolbar (gear icon, aria-label="Settings")
•Click Settings button
•Verify SettingsPanel drawer opens from right side
•Verify "Appearance" section visible with ThemePicker
•Click ThemePicker dropdown (currently shows "Light" or saved preference)
•Select "Dark" option
•
Verify Theme changes:
- •Background becomes dark (≈ rgb(32, 31, 30))
- •Text becomes light
- •No console errors
•Select "Light" option
•
Verify Theme changes back:
- •Background becomes light (≈ rgb(255, 255, 255))
- •Text becomes dark
•Select "System" option
•Verify Theme matches OS preference
•Close Settings panel (X button or click outside)

Console Evidence

code

// No errors should appear
// LocalStorage updated:
localStorage.getItem('ai-foundry-theme') // "Dark", "Light", or "System"

DOM Changes

•<body> FluentProvider styles update
•CSS variables change: --colorNeutralBackground1, --colorNeutralForeground1

Pass Criteria

• Settings panel opens/closes without errors
• All three theme options selectable
• Visual theme changes immediately on selection
• Theme persists after closing panel

Test 2: New Chat Button

Purpose

Verify the New Chat button clears messages and resets conversation state.

UI Flow

code

Send message → Wait for response → Click New Chat button → Verify reset

Prerequisites

•At least one message exchange completed

Steps

•Send a test message: "Hello, testing new chat button"
•Wait for assistant response to complete (status: idle)
•Verify New Chat button is enabled (not grayed out)
•Click New Chat button (ChatAdd icon, aria-label="New chat")
•
Verify immediate changes:
- •Messages array cleared (empty chat area)
- •StarterMessages component visible (agent intro + prompts)
- •Input field focused and empty
- •New Chat button now disabled (no messages to clear)

Console Evidence

code

🔄 [timestamp] CHAT_CLEAR
Action: {type: CHAT_CLEAR}
Changes: {
  chat.messages.length: N → 0,
  chat.currentConversationId: "conv_xxx" → null,
  chat.status: idle → idle
}

Pass Criteria

• Button disabled when no messages
• Button enabled after first message
• Click clears all messages instantly
• StarterMessages reappear
• conversationId reset to null
• Input field receives focus
• No console errors

Test 3: Cancel Stream (Stop Button)

Purpose

Verify streaming can be cancelled mid-response.

UI Flow

code

Send long prompt → While streaming → Click Stop button → Verify cancellation

Steps

•Start a new chat (or use existing)

•Send a prompt that triggers a long response:

code

Write a detailed 500-word essay about the history of software testing methodologies, including unit testing, integration testing, and end-to-end testing.

•
Immediately observe:
- •Status changes to streaming
- •Stop button becomes enabled (red, aria-label="Cancel response")
- •Send button becomes disabled
- •Text chunks appearing in assistant message
•Click Stop button while streaming is active
•
Verify cancellation:
- •Streaming stops immediately
- •Partial response preserved (not deleted)
- •Status returns to idle
- •Send button re-enabled
- •Stop button disabled again

Keyboard Shortcut

•Press Escape key during streaming → should also cancel

Console Evidence

code

🔄 [timestamp] CHAT_CANCEL_STREAM
Action: {type: CHAT_CANCEL_STREAM}
Changes: {
  chat.status: streaming → idle,
  chat.streamingMessageId: "xxx" → undefined
}

Edge Cases

•Very fast response may complete before cancel → OK, not an error
•Multiple rapid clicks → should be idempotent

Pass Criteria

• Stop button disabled when not streaming
• Stop button enabled during streaming
• Click stops stream immediately
• Partial response text preserved
• Status returns to idle
• Escape key works as shortcut
• No errors in console

Test 4: Markdown Code Block Rendering

Purpose

Verify code blocks render with syntax highlighting, line numbers, and copy button.

UI Flow

code

Send code request → Wait for response → Verify code block UI

Steps

•Start a new chat

•Send a code generation prompt:

code

Write a Python function to calculate fibonacci numbers with proper type hints

•Wait for response to complete
•
Verify code block structure:
- •Container with dark background
- •Header bar showing "python" language label
- •"Copy" button in header
- •Line numbers on left side
- •Syntax highlighting (keywords, strings, comments in different colors)
•Click "Copy" button
•Verify code copied (paste somewhere to confirm)

Additional Test Prompts

From test-files/test-prompts.json:

json

[
  "Create a TypeScript interface for a user profile with nested preferences",
  "Show me a bash script to backup a PostgreSQL database",
  "Write a SQL query with a CTE to find duplicate customer records"
]

Expected Code Block DOM

html

<div class="codeBlock">
  <div class="codeHeader">
    <span class="codeLanguage">python</span>
    <button>Copy</button>
  </div>
  <div> <!-- SyntaxHighlighter -->
    <!-- Line numbers + highlighted code -->
  </div>
</div>

Syntax Highlighting Colors (vscDarkPlus theme)

Element	Color
Keywords (`def`, `return`, `if`)	Purple/Blue
Strings	Orange
Comments	Green
Function names	Yellow
Types	Cyan

Pass Criteria

• Language label displayed correctly
• Copy button present and functional
• Syntax highlighting applied
• Line numbers visible
• Long lines wrap (no horizontal overflow)
• Multiple code blocks render independently

Test 5: Complex Markdown Rendering

Purpose

Verify tables, lists, headings, and text formatting render correctly.

Steps

•Send a complex markdown prompt:

code

Create a comprehensive guide with:
- A comparison table of React, Vue, and Angular
- Numbered installation steps
- A code example
- Bold and italic text formatting
- A blockquote with a tip

•Wait for response to complete
•Verify each element:

Expected Elements

Element	Verification
Table	Borders visible, headers bold, rows alternate
Ordered list	Numbers 1, 2, 3... with proper indentation
Unordered list	Bullets with proper indentation
Nested list	Sub-items indented further
Bold text	text renders with heavier weight
Italic text	text renders with slant
Inline code	`code` has background highlight
Blockquote	Left border, indented, lighter text
Links	Underlined, opens in new tab

Pass Criteria

• Tables render with visible structure
• Lists have proper indentation
• Text formatting (bold/italic) applied
• Inline code visually distinct
• Links functional and styled
• No raw markdown visible

Test 6: Token Usage Info

Purpose

Verify response footer shows timing, token counts, and expandable usage details.

UI Flow

code

Send message → Wait for response → Verify footer → Click expand → Verify breakdown

Steps

•Send any message and wait for response to complete
•
Verify response footer displays:
- •Response time (e.g., 3575ms)
- •Total token count (e.g., 848 tokens)
- •Expand button (Show token usage details)
•Click "Show token usage details" button
•
Verify expanded panel shows:
- •"Usage Information" header
- •Input tokens (e.g., Input: 799 tokens)
- •Output tokens (e.g., Output: 49 tokens)

Console Evidence

code

Action: {type: CHAT_STREAM_COMPLETE, usage: Object}
// usage object: { inputTokens, outputTokens, totalTokens }

Pass Criteria

• Response time displayed after completion
• Total token count displayed
• Expand button present and clickable
• Input/Output breakdown shows on expand
• Values are non-zero numbers

Test Files Reference

File	Purpose
`test-files/test-prompts.json`	Prompts for each test scenario
`test-files/code-sample.md`	Expected code block rendering
`test-files/complex-response.md`	Expected complex markdown
`test-files/test.txt`	Plain text upload test
`test-files/test.png`	Image upload test

Troubleshooting

Issue	Likely Cause	Solution
Theme not changing	ThemeContext not receiving update	Check FluentProvider wrapping
New chat button always disabled	`hasMessages` prop false	Check messages array binding
Cancel not working	AbortController not set	Check `currentStreamAbort` in ChatService
Code not highlighted	Language not detected	Check regex pattern in Markdown.tsx
Copy button not working	`copy-to-clipboard` import	Check package installed
Table not rendering	GFM plugin missing	Check `remarkGfm` in Markdown.tsx

Quick Validation Checklist

code

□ Theme Toggle
  □ Settings opens
  □ Dark theme works
  □ Light theme works
  □ System theme works
  □ Persists on refresh

□ New Chat
  □ Button disabled initially
  □ Enabled after message
  □ Clears messages
  □ Resets conversation

□ Cancel Stream
  □ Stop enabled during stream
  □ Cancels immediately
  □ Preserves partial response
  □ Escape key works

□ Code Blocks
  □ Language label
  □ Copy button works
  □ Syntax highlighting
  □ Line numbers

□ Complex Markdown
  □ Tables
  □ Lists
  □ Formatting
  □ Links

□ Token Usage
  □ Response time shown
  □ Token count shown
  □ Expand button works
  □ Input/Output breakdown