ConditionEditor

GithubStorybook

The ConditionEditor components lay out editable condition rows — a card per condition holding the controls that edit it, joined to the rows around it by their operator.

Usage

ConditionEditorItem inspects one condition: the operator joining it to the one before, whether it renders a handle, details or actions, and — for a condition holding a nested set — how many conditions that set has. Its own form controls aren't wrapped; reach them through those components' helpers or by their accessible names.

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

const condition = PlumaTestHelpers.extract('ConditionEditorItem', screen.getByTestId('plan-condition'));
expect(condition.getOperator()).toBe('And');
expect(condition.hasHandle()).toBe(true);

const group = PlumaTestHelpers.extract('ConditionEditorItem', screen.getByTestId('nested-set'));
expect(group.isGroup()).toBe(true);
expect(group.getConditionCount()).toBe(2);

Every query is about the condition itself, not the conditions nested inside it. getConditionCount counts only the nested set's own conditions; to inspect a deeper condition, extract a helper from its element.

getHandle returns the handle's button, so a test can drive your drag-and-drop library through it.

Test Helpers

Counts the conditions in the set nested inside this one. Nested sets inside those count as one each; their own conditions are not included.

Gets the drag handle's button, so a test can drive a drag-and-drop library bound to it.

Gets the operator joining this condition to the one before it, such as "And" — or an empty string for the first condition in a set.

Whether the condition renders trailing actions.

Whether the condition renders content below its first line of controls (`details`).

Whether the condition renders a drag handle.

Whether the condition holds a nested set of conditions — a `ConditionEditor` inside it — rather than controls of its own.

Whether the operator joining this condition to the one before it matches the given text.

On this page