Modals are dialogs displayed over inert content that allow users to complete a singular, focused task without leaving the page.

Usage

The Modal test helper accepts an options parameter with a title property, which can be used to find a modal by its title. The title can be either a string or a regular expression pattern, allowing you to match modals with varying titles (e.g., singular vs. plural forms). With this parameter, the test helper can be created even while the modal is closed, allowing the creation of helpers for specific modals, to later query their open state etc.

import { PlumaTestHelpers } from '@customerio/pluma-components/react/test-helpers/pluma-test-helpers'

// Find by exact title
const modal = PlumaTestHelpers.extract('Modal', undefined, { title: 'Example Modal' });

// Find by regex pattern (useful for matching variations like singular/plural)
const deleteModal = PlumaTestHelpers.extract('Modal', undefined, { title: /Delete drafts?/ });

Test Helpers

Clicks a button (found by its name) within the modal

Closes the modal by clicking the Close button

Gets the modal's close button

Whether the modal is open or not

On this page