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

const splitView = PlumaTestHelpers.find('SplitView');

// Read the split as a whole.
splitView.getOrientation();
splitView.getPaneCount();
splitView.getPaneSizes();
splitView.getIsResizable();

// Drill into a pane by index for its own state.
const sidebar = splitView.getPaneAt(0);
sidebar?.getText();
sidebar?.isHidden(false);
sidebar?.getSizePercent();

// Drill into a resizer to inspect it, or to move the boundary it owns.
const resizer = splitView.getResizerAt(0);
resizer?.getIsEnabled();
resizer?.hasHandle();
resizer?.getValueNow();
await resizer?.growPreviousPane();
await resizer?.drag(40);

Test Helpers

`SplitViewTestHelpers`

`getIsDragging`() `=> boolean`

Whether a resize is currently in progress anywhere in the split.

`getIsResizable`() `=> boolean`

Whether any boundary in the split can be moved. False when the split is not resizable, and when every resizer is individually inert.

`getOrientation`() `=> SplitViewOrientation`

Gets the axis panes are laid out and resized along.

`getPaneAt`
(
`index:number`
)
`=> SplitViewPaneTestHelpers | undefined`

Gets a scoped test helper for a pane by zero-based index.

`getPaneCount`() `=> number`

Gets the number of panes, hidden ones included — a hidden pane stays mounted.

`getPanes`() `=> SplitViewPaneTestHelpers[]`

Gets a scoped test helper for each pane, in DOM order.

`getPaneSizes`() `=> number[]`

Gets each pane's share of the split, as percentages of the space available to panes, in DOM order. Hidden panes report 0. The values are measured, so round them before asserting exact shares.

`getPaneTexts`() `=> string[]`

Gets the text content of each pane, in DOM order.

`getResizerAt`
(
`index:number`
)
`=> SplitViewResizerTestHelpers | undefined`

Gets a scoped test helper for a resizer by zero-based index.

`getResizerCount`() `=> number`

Gets the number of resizers.

`getResizers`() `=> SplitViewResizerTestHelpers[]`

Gets a scoped test helper for each resizer, in DOM order.

`isResizable`
(
`resizable:boolean = true`
)
`=> boolean`

Whether the split resizable state matches the expected state.

SplitView

Usage

Test Helpers

SplitViewTestHelpers

getIsDragging() => boolean

getIsResizable() => boolean

getOrientation() => SplitViewOrientation

getPaneAt(index:number) => SplitViewPaneTestHelpers | undefined

getPaneCount() => number

getPanes() => SplitViewPaneTestHelpers[]

getPaneSizes() => number[]

getPaneTexts() => string[]

getResizerAt(index:number) => SplitViewResizerTestHelpers | undefined

getResizerCount() => number

getResizers() => SplitViewResizerTestHelpers[]

isResizable(resizable:boolean = true) => boolean

On this page