Modal Dialog

Overview

Modal dialogs are critical UI patterns where user decisions impact application flow. This example demonstrates how Fault Sense tracks modal opening, visibility, and all possible user actions (confirm, cancel, close) to ensure proper modal behavior across different environments.

Implementation

<!-- Modal Trigger -->
<button fs-feature="ModalDialog"
        fs-assert="OpenModal"
        fs-trigger="click"
        fs-assert-visible=".modal-overlay">
  Open Modal
</button>

<!-- Modal Overlay -->
<div class="modal-overlay">
  <!-- Modal Content -->
  <div class="modal-content"
       fs-feature="ModalDialog"
       fs-assert="ModalVisible"
       fs-trigger="mount"
       fs-assert-visible=".modal-content">
    
    <h3>Confirm Action</h3>
    
    <!-- Close Button (X) -->
    <button fs-feature="ModalDialog"
            fs-assert="CloseModalX"
            fs-trigger="click"
            fs-assert-removed=".modal-content">×</button>
    
    <p>Are you sure you want to proceed?</p>
    
    <!-- Action Buttons -->
    <button fs-feature="ModalDialog"
            fs-assert="CancelModal"
            fs-trigger="click"
            fs-assert-removed=".modal-content">Cancel</button>
            
    <button fs-feature="ModalDialog"
            fs-assert="ConfirmModal"
            fs-trigger="click"
            fs-assert-removed=".modal-content">Confirm</button>
  </div>
</div>

Try it

Key Attributes

fs-feature

Groups all modal-related assertions under 'ModalDialog' feature

fs-assert

Unique identifiers for each modal action (OpenModal, ModalVisible, CloseModalX, CancelModal, ConfirmModal)

fs-trigger

Events that trigger assertions (click for buttons, mount for modal content)

fs-assert-visible

Validates that modal elements become visible when expected

fs-assert-removed

Validates that modal is properly removed after user actions

Modal Dialog

Overview

Implementation

Try it

Key Attributes

Demo Event Collector