compiler-explorer/docs/TestingTheUi.md

UI Testing Checklist for Compiler Explorer

This document provides a checklist for testing the Compiler Explorer UI components. Use this checklist for major UI changes, framework updates, or when implementing significant new features.

Modal Components

Settings Modal

• Open and close using the "Settings" option in the "More" dropdown
• Test tab navigation between all tab sections (Colouring, Site behaviour, etc.)
• Verify form controls within settings (checkboxes, selects, inputs)
• Check that the close button works
• Verify proper modal appearance/styling in both light and dark themes

Share Modal

• Open and close using the "Share" button
• Verify the URL is generated correctly
• Test the copy button
• Check that social sharing buttons display correctly
• Verify proper styling in both light and dark themes
• Check the <iframe> of embed is correct HTML, including its various options
• Check the inner link of the iframe for embed works still (that is, embed mode)
• Test "Copied to clipboard" tooltip functionality

Load/Save Modal

• Open and close using "Save" or "Load" options
• Test tab navigation between sections (Examples, Browser-local storage, etc.)
• Verify save functionality to browser storage
• Test loading from browser storage
• Check proper styling/layout in both light and dark themes

Compiler Picker Modal

• Open using the popout button next to a compiler selector
• Test filter functionality (architecture, compiler type, search)
• Verify compiler selection works
• Check proper styling in both light and dark themes

Other Modals

• Test confirmation dialogs (alert.ts)
• Test library selection modal
• Test compiler overrides modal
• Test runtime tools modal
• Test templates modal
• Verify proper styling in both light and dark themes

Dropdown Components

Main Navigation Dropdowns

• Test "More" dropdown menu (all items work and have proper styling)
• Test "Other" dropdown menu (all items work and have proper styling)
• Verify dropdowns are properly positioned (not clipped)
• Test on different screen sizes to ensure responsive behavior

Compiler Option Dropdowns

• Test filter dropdowns in compiler pane
• Test "Add new..." dropdown
• Test "Add tool..." dropdown
• Test popular arguments dropdown
• Verify proper positioning, especially for dropdowns at the right edge of the screen

Editor Dropdowns

• Test language selector dropdown
• Test font size dropdown
• Verify proper styling and positioning

TomSelect Dropdowns

• Test compiler selectors
• Test library version selectors
• Verify dropdown arrows appear correctly
• Verify dropdown items are styled correctly

Toast/Alert Components

Alert Notifications

• Trigger various notifications (info, warning, error)
• Verify proper styling
• Test auto-dismiss functionality
• Check that close button works
• Test stacking behavior of multiple notifications

Alert Dialogs

• Test info/warning/error alert dialogs (using the Alert class)
• Verify proper styling and positioning
• Check button functionality within dialogs

Popover/Tooltip Components

Tooltips

• Hover over various buttons with tooltips (toolbar buttons, share button, etc.)
• Verify tooltip text appears correctly
• Check tooltip positioning (above/below/left/right of trigger)
• Verify proper styling in both light and dark themes

Popovers

• Trigger popovers on compiler info
• Check popover content displays correctly
• Verify popover positioning
• Test dismissal by clicking outside
• Verify proper styling in both light and dark themes

Card Components

• Check card styling in modals (Settings, Load/Save, etc.)
• Verify tab navigation within card headers
• Test card body content layout
• Check responsive behavior on different screen sizes

Button Group Components

Toolbar Button Groups

• Test button groups in compiler pane toolbar
• Test button groups in editor pane toolbar
• Verify proper alignment and styling
• Check dropdown buttons within button groups

Other Button Groups

• Test font size button group
• Test bottom bar button groups
• Verify proper styling in both light and dark themes

Collapse Components

• Test mobile view hamburger menu
• Verify menu expands/collapses correctly
• Check that all menu items are accessible in collapsed mode

Specialized Views

Conformance View

• Test compiler selectors and options
• Verify results display correctly
• Test the "add compiler" functionality
• Verify that compilers can be added and removed
• Check that conformance testing works end-to-end

Tree View (IDE Mode)

• Check tree structure and file display
• Test right-click menus and dropdowns
• Verify file manipulation controls

Visualization Components

• Test CFG view rendering and controls
• Check opt pipeline viewer
• Verify AST view

Sponsor Window

• Check sponsor list display
• Verify modal dialog appearance and functionality

Form Components

• Verify form control styling (inputs, selects, checkboxes)
• Test input groups with buttons
• Check validation states

Responsive Behavior

• Test at various viewport sizes
• Verify mobile menu functionality
• Check input group stacking behavior

Runtime Tool Integration

Runtime Tools

• Open the runtime tools window from compiler pane
• Change settings and click outside the modal to close
• Verify settings are properly saved
• Test with multiple runtime tool options
• Verify event handling properly handles modal opening/closing

Emulation Features

• Test BBC emulation by clicking emulator links
• Check Z80 emulation features (e.g. https://godbolt.org/z/qnE7jhnvc)
• Verify emulator modals open properly
• Test interaction between emulator windows and the main interface

Diff View

• Test changing compilers in both left and right panes
• Verify backgrounds remain themed correctly in dark mode
• Check that the diff view layout is correct (no excessive height)
• Confirm that input groups and buttons are properly sized
• Test different diff view types (Assembly, Compiler output, etc.)

TomSelect and Input Components

Compiler Selection Dropdowns

• Verify long compiler names display properly without excessive wrapping
• Check that dropdowns expand to fit compiler names rather than wrapping text
• Test the flex-grow behavior of dropdown elements
• Check the alignment of the popout button on all dropdowns
• Verify border colors in dark themes are appropriate

Placeholder Text

• Check visibility and contrast of placeholder text in all input fields
• Specifically test "Compiler options" field visibility
• Verify that all placeholder text is readable in both light and dark themes

Library Components

Library Menu

• Check dropdown colors and layout
• Verify all library functionality works correctly
• Test adding and removing libraries
• Check library version selection

History View

• Verify the history view populates correctly when clicking radio buttons
• Test all history functions (load, delete, etc.)

General Testing

• Check pixel-perfect alignment of elements (compare with live site)
• Test all components for unexpected behavioral differences
• Verify theme switching works correctly for all components
• Test cross-browser compatibility (at least Firefox and Chrome)
• Check accessibility features (tab navigation, screen reader support)