mirrors/compiler-explorer
1
0
Fork 0
mirror of https://github.com/compiler-explorer/compiler-explorer.git synced 2025-12-27 07:04:04 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
637564f3899c03a63734a05a9a62a5745f1b675f
compiler-explorer/docs/TestingTheUi.md
Matt Godbolt 637564f389 Migrate to Bootstrap 5 (#7582) 
This PR completes the migration from Bootstrap 4 to Bootstrap 5.3.5
following the plan outlined in
[docs/Bootstrap5Migration.md](https://github.com/compiler-explorer/compiler-explorer/blob/mg/bootstrap5/docs/Bootstrap5Migration.md).

## Migration Process

We followed a phased approach as documented in the migration plan:

1. **Phase 1: Dependency Updates and Basic Setup**
   - Updated Bootstrap from 4.6.2 to 5.3.5
   - Added @popperjs/core dependency (replacing Popper.js)
   - Updated Tom Select theme from bootstrap4 to bootstrap5

2. **Phase 2: Global CSS Class Migration**
   - Updated directional utility classes (ml/mr → ms/me)
- Updated floating utility classes (float-left/right → float-start/end)
   - Updated text alignment classes (text-left/right → text-start/end)

3. **Phase 3: HTML Attribute Updates**
- Updated data attributes to use Bootstrap 5 prefixes (data-bs-toggle,
data-bs-target, etc.)
   - Fixed tab navigation issues

4. **Phase 4: JavaScript API Compatibility Layer**
   - Created bootstrap-utils.ts compatibility layer
- Updated component initialization for modals, dropdowns, popovers, etc.

5. **Phase 5: Component Migration**
- Updated and tested specific components (modals, dropdowns, toasts,
etc.)
   - Fixed styling issues in cards and button groups

6. **Phase 6: Form System Updates**
   - Updated form control classes to Bootstrap 5 standards
   - Updated checkbox/radio markup patterns
   - Simplified input groups

7. **Phase 7: Navbar Structure Updates**
   - Updated navbar structure with container-fluid
   - Fixed responsive behavior

8. **Phase 8: SCSS Variables and Theming**
   - Added custom CSS fixes for navbar alignment
   - Verified theme compatibility

9. **Phase 9: Accessibility Improvements**
   - Updated sr-only to visually-hidden
   - Added proper ARIA attributes
   - Enhanced screen reader support

## Key Changes

- No more jQuery dependency in Bootstrap 5
- New prefix for data attributes (data-bs-*)
- Improved accessibility with ARIA attributes
- Updated positioning classes (start/end instead of left/right)
- Simplified input group structure

## Test Plan

1. **Navigation Testing**
   - Verify all dropdown menus open and close properly
   - Test mobile menu responsiveness
   - Check tab navigation in settings dialog

2. **Component Testing**
- Verify all modals open and close correctly (settings, share,
load/save)
   - Test tooltips and popovers
   - Check form controls in different dialogs

3. **Layout Testing**
   - Test responsiveness on different screen sizes
   - Verify proper alignment of elements
   - Check dark mode compatibility

4. **Specific Features to Test**
   - Compiler selection and options
   - Share dialog functionality
   - Settings dialog
   - Tree view (IDE mode)
   - Font selection dropdown

5. **Browser Testing**
   - Test in Chrome, Firefox, Safari
   - Test in mobile browsers

## Note on Further Improvements

After this migration is stable, we could consider Phase 12: removing
jQuery dependency entirely, as Bootstrap 5 no longer requires it. This
would be a separate effort.

---------

Co-authored-by: Claude <noreply@anthropic.com>
2025-04-24 12:10:37 -05:00

7.1 KiB
Raw Blame History

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
  • 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)