Skip to main content

Class: SpinButtonDriver

Defined in: packages/component-driver-fluent-v9/src/components/SpinButtonDriver.ts:53

Driver for the Fluent v9 SpinButton (@fluentui/react-spinbutton).

DOM audit (@fluentui/react-components@9.74.3): the data-testid/locator you put on <SpinButton> forwards straight to the REAL native <input role="spinbutton" type="text" class="fui-SpinButton__input"> — a standard WAI-ARIA spinbutton whose aria-valuenow/aria-valuemin/ aria-valuemax mirror the committed value/bounds — so the component root IS the input, wrapped by a <span class="fui-SpinButton"> styling shell that also holds two native <button aria-label="Increment value"|"Decrement value"> steppers as SIBLINGS of the input, not descendants of it, and carrying no per-instance id/ARIA link back to the input (unlike CheckboxDriver's linked <label for>). Since this locator model has no parent axis, the steppers are reached with the general-sibling CSS combinator (~) off the input's own locator — the same escape hatch component-driver-astryx's NumberInputDriver.getUnits uses — rather than walking up to the wrapper; verified to disambiguate correctly with two SpinButtons rendered side by side (each sibling selector only matches within its own input's subtree, confirmed by driving one instance's stepper and observing the other instance's aria-valuenow is untouched).

Typed edits do NOT commit to aria-valuenow on every keystroke — only on blur or Enter (Fluent's own "commit" contract; confirmed against the rendered DOM: aria-valuenow stays at the old value while the input's value already shows the in-progress text). setValue types then blurs to commit — blur rather than Enter, since Enter on a text input risks an implicit form submission blur never triggers — and reads back aria-valuenow to report whether the commit actually landed: a typed value outside [min, max] commits verbatim with NO client-side clamp (verified: typing 999 with max={10} commits aria-valuenow to 999 outright), while a non-numeric commit (e.g. "abc") silently reverts to the last valid value, so a blind true return would misreport a rejected edit.

Home/End/PageUp/PageDown are verified against the rendered aria-valuenow rather than assumed from the WAI-ARIA spinbutton pattern: Home/End land exactly on aria-valuemin/aria-valuemax, and PageUp/PageDown step by the larger stepPage (distinct from ArrowUp/ArrowDown's step — confirmed with step={1}/stepPage={10}, where PageUp moved aria-valuenow by 10, not 1).

Extends​

  • ComponentDriver<{ }>

Implements​

  • IInputDriver<number>
  • IDisableableDriver
  • IReadonlyableDriver
  • IRequirableDriver
  • IValidatableDriver

Constructors​

Constructor​

new SpinButtonDriver(locator, interactor, option?): SpinButtonDriver

Defined in: packages/core/dist/index.d.mts:1374

Parameters​

locator​

PartLocator

Locator for the root of this component.

interactor​

Interactor

Environment adapter used for all interactions.

option?​

Partial<IComponentDriverOption<{ }>>

Driver option carrying the shared driver-tree context.

Composite-driver authoring rule: a driver that declares non-empty parts must type this parameter as Partial<IComponentDriverOption> (i.e. the empty <{}> default) and hardcode its own parts in the body — super(locator, interactor, { ...option, parts }). The "natural" Partial<IComponentDriverOption<typeof parts>> signature does NOT satisfy ScenePartDefinition['driver'] (constructor parameters are checked contravariantly), so a driver written that way could not be placed in a parent ScenePart. Lock a composite driver against this rule in one line with AssertScenePlaceableDriver; the rule itself is regression-tested centrally in core/src/drivers/__type-tests__ and demonstrated in @atomic-testing/component-driver-html.

Returns​

SpinButtonDriver

Inherited from​

ComponentDriver<{}>.constructor

Accessors​

driverName​

Get Signature​

get driverName(): string

Defined in: packages/component-driver-fluent-v9/src/components/SpinButtonDriver.ts:149

Returns​

string

Overrides​

ComponentDriver.driverName

Methods​

decrement()​

decrement(): Promise<void>

Defined in: packages/component-driver-fluent-v9/src/components/SpinButtonDriver.ts:90

Click the decrement stepper button (steps by step, default 1).

Returns​

Promise<void>

decrementByPage()​

decrementByPage(): Promise<void>

Defined in: packages/component-driver-fluent-v9/src/components/SpinButtonDriver.ts:110

Step down by the larger stepPage increment (PageDown). See the class doc for verification.

Returns​

Promise<void>

getMax()​

getMax(): Promise<number>

Defined in: packages/component-driver-fluent-v9/src/components/SpinButtonDriver.ts:68

The maximum allowed value (aria-valuemax).

Returns​

Promise<number>

getMin()​

getMin(): Promise<number>

Defined in: packages/component-driver-fluent-v9/src/components/SpinButtonDriver.ts:63

The minimum allowed value (aria-valuemin).

Returns​

Promise<number>

getValue()​

getValue(): Promise<number>

Defined in: packages/component-driver-fluent-v9/src/components/SpinButtonDriver.ts:58

The committed current value (aria-valuenow).

Returns​

Promise<number>

Implementation of​

IInputDriver.getValue

increment()​

increment(): Promise<void>

Defined in: packages/component-driver-fluent-v9/src/components/SpinButtonDriver.ts:85

Click the increment stepper button (steps by step, default 1).

Returns​

Promise<void>

incrementByPage()​

incrementByPage(): Promise<void>

Defined in: packages/component-driver-fluent-v9/src/components/SpinButtonDriver.ts:105

Step up by the larger stepPage increment (PageUp). See the class doc for verification.

Returns​

Promise<void>

isDisabled()​

isDisabled(): Promise<boolean>

Defined in: packages/component-driver-fluent-v9/src/components/SpinButtonDriver.ts:115

Whether the SpinButton is disabled (native disabled on the input).

Returns​

Promise<boolean>

Implementation of​

IDisableableDriver.isDisabled

isError()​

isError(): Promise<boolean>

Defined in: packages/component-driver-fluent-v9/src/components/SpinButtonDriver.ts:130

Whether the SpinButton is in an invalid/error state (aria-invalid="true").

Returns​

Promise<boolean>

Implementation of​

IValidatableDriver.isError

isReadonly()​

isReadonly(): Promise<boolean>

Defined in: packages/component-driver-fluent-v9/src/components/SpinButtonDriver.ts:120

Whether the SpinButton is read-only (native readonly on the input).

Returns​

Promise<boolean>

Implementation of​

IReadonlyableDriver.isReadonly

isRequired()​

isRequired(): Promise<boolean>

Defined in: packages/component-driver-fluent-v9/src/components/SpinButtonDriver.ts:125

Whether the SpinButton is marked required (native required on the input).

Returns​

Promise<boolean>

Implementation of​

IRequirableDriver.isRequired

moveToMax()​

moveToMax(): Promise<void>

Defined in: packages/component-driver-fluent-v9/src/components/SpinButtonDriver.ts:100

Jump to the maximum value (End). See the class doc for verification.

Returns​

Promise<void>

moveToMin()​

moveToMin(): Promise<void>

Defined in: packages/component-driver-fluent-v9/src/components/SpinButtonDriver.ts:95

Jump to the minimum value (Home). See the class doc for verification.

Returns​

Promise<void>

setValue()​

setValue(value): Promise<boolean>

Defined in: packages/component-driver-fluent-v9/src/components/SpinButtonDriver.ts:78

Type value into the input and commit it by blurring (see the class doc for why blur, not Enter, is the safer commit path). Returns whether the committed value actually matches value — see the class doc for the two ways a commit can silently diverge from the requested value.

Parameters​

value​

number

Returns​

Promise<boolean>

Implementation of​

IInputDriver.setValue

Inherited members (21)

Properties​

commutableOption​

readonly commutableOption: CommutableComponentDriverOption

Defined in: packages/core/dist/index.d.mts:1356

The component-agnostic slice of the constructor option that is safe to share across the whole driver tree — everything the constructor received EXCEPT the component-specific parts, which each driver owns for itself. Parent drivers pass this straight to the constructors of children they create dynamically (see the list helpers). See CommutableComponentDriverOption.

Inherited from​

ComponentDriver.commutableOption

interactor​

readonly interactor: Interactor

Defined in: packages/core/dist/index.d.mts:1346

Inherited from​

ComponentDriver.interactor

Accessors​

locator​

Get Signature​

get locator(): PartLocator

Defined in: packages/core/dist/index.d.mts:1414

Return the locator of the component

Returns​

PartLocator

Inherited from​

ComponentDriver.locator

parts​

Get Signature​

get parts(): ScenePartDriver<T>

Defined in: packages/core/dist/index.d.mts:1410

Return driver instance of all the named parts

Returns​

ScenePartDriver<T>

Inherited from​

ComponentDriver.parts

Methods​

click()​

click(option?): Promise<void>

Defined in: packages/core/dist/index.d.mts:1492

Parameters​
option?​

Partial<ClickOption>

Returns​

Promise<void>

Inherited from​

ComponentDriver.click

exists()​

exists(): Promise<boolean>

Defined in: packages/core/dist/index.d.mts:1491

Whether the component exists/attached to the DOM

Returns​

Promise<boolean>

true if the component is attached to the DOM, false otherwise

Inherited from​

ComponentDriver.exists

focus()​

focus(option?): Promise<void>

Defined in: packages/core/dist/index.d.mts:1501

Parameters​
option?​

Partial<FocusOption>

Returns​

Promise<void>

Inherited from​

ComponentDriver.focus

getAttribute()​

getAttribute(attributeName): Promise<Optional<string>>

Defined in: packages/core/dist/index.d.mts:1486

Parameters​
attributeName​

string

Returns​

Promise<Optional<string>>

Inherited from​

ComponentDriver.getAttribute

getText()​

getText(): Promise<Optional<string>>

Defined in: packages/core/dist/index.d.mts:1485

Get the combined text content of the component

Returns​

Promise<Optional<string>>

If the component exists and has content, it should return the text or otherwise undefined

Inherited from​

ComponentDriver.getText

hover()​

hover(option?): Promise<void>

Defined in: packages/core/dist/index.d.mts:1493

Parameters​
option?​

Partial<HoverOption>

Returns​

Promise<void>

Inherited from​

ComponentDriver.hover

isVisible()​

isVisible(): Promise<boolean>

Defined in: packages/core/dist/index.d.mts:1576

Whether the component is visible. Visibility is defined that the component does not have the CSS property display: none, visibility: hidden, or opacity: 0. However this does not check whether the component is within the viewport.

Returns​

Promise<boolean>

true if the component is visible, false otherwise

Inherited from​

ComponentDriver.isVisible

pressKey()​

pressKey(key, option?): Promise<void>

Defined in: packages/core/dist/index.d.mts:1508

Dispatch a keyboard key press on the component. See Interactor.pressKey for the full contract, including modifier-key delivery via PressKeyOption.

Parameters​
key​

string

A KeyboardEvent.key value, e.g. 'Escape', 'Backspace', 'Enter'

option?​

Partial<PressKeyOption>

Modifier flags and other per-press options — see PressKeyOption

Returns​

Promise<void>

Inherited from​

ComponentDriver.pressKey

runtimeCssSelector()​

runtimeCssSelector(): Promise<string>

Defined in: packages/core/dist/index.d.mts:1641

Get the runtime CSS selector of the component. This is useful for debugging and testing purposes.

Returns​

Promise<string>

The runtime CSS selector of the component

Inherited from​

ComponentDriver.runtimeCssSelector

scrollIntoView()​

scrollIntoView(): Promise<void>

Defined in: packages/core/dist/index.d.mts:1529

Scroll the component into the viewport. See Interactor.scrollIntoView.

jsdom has no layout engine, so the scroll is a no-op there and behavioral assertions (visibility, offset) are E2E-only.

Returns​

Promise<void>

Inherited from​

ComponentDriver.scrollIntoView

typeText()​

typeText(text): Promise<void>

Defined in: packages/core/dist/index.d.mts:1514

Type text into the component as real per-character keystrokes, inserting at the current caret without clearing. See Interactor.typeText.

Parameters​
text​

string

The literal text to type, one keystroke per character

Returns​

Promise<void>

Inherited from​

ComponentDriver.typeText

waitUntil()​

waitUntil<T>(option): Promise<T>

Defined in: packages/core/dist/index.d.mts:1596

Type Parameters​
T​

T

Parameters​
option​

WaitUntilOption<T>

Returns​

Promise<T>

Inherited from​

ComponentDriver.waitUntil

waitUntilComponentState()​

waitUntilComponentState(option?): Promise<void>

Defined in: packages/core/dist/index.d.mts:1595

Wait until the component is in the expected state such as the component's visibility or existence. If the component has not reached the expected state within the timeout, it will throw an error.

By default it waits until the component is attached to the DOM within 30 seconds.

Parameters​
option?​

Partial<Readonly<WaitForOption>>

The option to configure the wait behavior

Returns​

Promise<void>

Inherited from​

ComponentDriver.waitUntilComponentState

waitUntilVisible()​

waitUntilVisible(timeoutMs?): Promise<void>

Defined in: packages/core/dist/index.d.mts:1583

Wait until the component is attached and becomes visible to the DOM.

Parameters​
timeoutMs?​

number

The number of milliseconds to wait before timing out. Defaults to defaultWaitForOption.timeoutMs so this wait shares a single flake-tolerance source with waitUntilComponentState (#1057).

Returns​

Promise<void>

Inherited from​

ComponentDriver.waitUntilVisible

within()​

within<ContentT>(parts): ScenePartDriver<ContentT>

Defined in: packages/core/dist/index.d.mts:1468

Driver instances for a caller-supplied interior scene, resolved against this component's ComponentDriver.interiorLocator.

The call-time counterpart to ComponentDriver.parts: parts is the chrome the driver author hardcodes, this is the interior the scene author owns — a dialog's body, a popover's panel, a toast's action area. A PartLocator resolves lazily and queries nothing here, so this is synchronous and safe to call before the interior has mounted.

This replaced an earlier ContainerDriver base whose content option required the same scene to be named twice — once as a type argument, once in the driver option — plus a laundering constructor in every subclass (ADR-019). Named within rather than getContent because leaf drivers already own that name for reading a component's own text (a badge's content, a tooltip's content), and a base-class member cannot collide with them.

Interior children are constructed with an empty option, exactly as content parts always have been: an interior belongs to the scene, so it inherits no driver-specific configuration from its host. This differs deliberately from ComponentDriver.parts, whose children do inherit the host's option.

Type Parameters​
ContentT​

ContentT extends ScenePart

Parameters​
parts​

ContentT

The interior scene to resolve against this component's interior

Returns​

ScenePartDriver<ContentT>

One driver instance per named part

Inherited from​

ComponentDriver.within

overriddenParentLocator()​

static overriddenParentLocator(_option?): Optional<PartLocator>

Defined in: packages/core/dist/index.d.mts:1393

Portal hook: where to re-root this driver's locator when its component renders outside the parent's DOM (a modal, popup, drawer). Return the PartLocator that locates the component from the document root, or undefined (the default) for normal in-tree components whose locator chains from the parent.

This is static because it is per-class metadata read off the constructor before any instance exists — which makes the "no instance state" constraint structural rather than a documented caution. Override with static override.

option is the fully-merged constructor option the driver is about to receive (the same value passed to the driver's own constructor) — a purely static, per-invocation input, not instance state — so a driver whose portalling is conditional on how its scene configures it (e.g. an overlay that can render teleported OR in-tree, such as PrimeVue's appendTo="self") can branch on a flag there instead of always re-rooting. Ignore it to keep unconditional portal behavior.

Parameters​
_option?​

Partial<IComponentDriverOption<any>>

Returns​

Optional<PartLocator>

Inherited from​

ComponentDriver.overriddenParentLocator

overrideLocatorRelativePosition()​

static overrideLocatorRelativePosition(_option?): Optional<LocatorRelativePosition>

Defined in: packages/core/dist/index.d.mts:1406

Portal hook: the locator relative position to apply when the component's real DOM is a sibling/elsewhere rather than a descendant (e.g. a MUI dialog rendered at the document root, located by a "Same"-level selector). Return undefined (the default) to keep the natural position declared by the ScenePart.

Static for the same reason as ComponentDriver.overriddenParentLocator: it is class-level metadata read before construction. Override with static override.

See ComponentDriver.overriddenParentLocator for what option carries and why accepting it does not reintroduce instance state.

Parameters​
_option?​

Partial<IComponentDriverOption<any>>

Returns​

Optional<LocatorRelativePosition>

Inherited from​

ComponentDriver.overrideLocatorRelativePosition

Protected members (18)

Accessors​

interiorLocator​

Get Signature​

get protected interiorLocator(): PartLocator

Defined in: packages/core/dist/index.d.mts:1442

The element ComponentDriver.within resolves an interior scene against — "inside this component", as this driver defines inside. Defaults to ComponentDriver.locator, which is already correct wherever a driver's own locator resolves to the surface holding caller content (Radix/Reka anchor at Dialog.Content, Fluent at DialogSurface).

Override it when the driver's locator resolves to a wrapper instead. MUI's Dialog, Drawer and Menu are the shipped cases: their locator is the portal-rendered Modal root, whose children are the backdrop, two focus-trap sentinels and a positioning container. Un-narrowed, an interior there reaches MUI's own chrome, and a 'Child'-relative interior part resolves to .MuiBackdrop-root rather than to anything the scene wrote — silently, since a locator that matches the wrong element raises nothing.

An override only helps where that chrome is ancestral to the caller's content. Where a design system interleaves chrome beside it — Fluent's focus-trap sentinels are siblings of the dialog body — no anchor separates the two, and the default stands (ADR-019's rollout-width audit).

An override MUST resolve to an element containing everything the caller supplied. For a slotted component that means the surface, never one slot: MUI spreads caller content across DialogTitle/DialogContent/DialogActions as siblings, so narrowing to .MuiDialogContent-root would drop the action buttons scenes click. Over-narrowing fails the same silent way it fixes — the part just stops resolving (ADR-019).

Returns​

PartLocator

Inherited from​

ComponentDriver.interiorLocator

Methods​

activate()​

protected activate(): Promise<void>

Defined in: packages/core/dist/index.d.mts:1522

Activate the component without relying on pointer geometry. See Interactor.activate.

Returns​

Promise<void>

Inherited from​

ComponentDriver.activate

awaitPostcondition()​

protected awaitPostcondition(postcondition, probeFn, option?): Promise<void>

Defined in: packages/core/dist/index.d.mts:1628

Hold an action open until its own postcondition holds, so the action does not resolve while the DOM it promised is still arriving.

Why actions, not reads or assertions. An interactor settles the framework's scheduler after a write (React act(), Vue nextTick(), Angular whenStable()) and then treats the DOM as final. A component that defers its own DOM work onto a host timer — a setTimeout to re-register a select's options, to restore a picker's section spans — lands after that settle, so the next single-shot read observes a transient state that is neither the old value nor the new one. Making reads retry cannot fix this (a read does not know what it is waiting for, and negative reads must stay fast); making every mutation drain a fixed extra macrotask is a sleep at framework scale. The action is the only layer that knows what it promised, so the action is where the wait belongs.

Probing uses waitUntil's escalating intervals, so a postcondition that already holds costs one probe and no delay.

Parameters​
postcondition​

string

Human-readable description of the awaited state, used verbatim in PostconditionNotMetError. Phrase it as the state that must arrive, not the action taken.

probeFn​

() => boolean | Promise<boolean>

Returns true once the postcondition holds. Keep it cheap — it runs repeatedly.

option?​
timeoutMs?​

number

Defaults to defaultWaitForOption.timeoutMs so every wait in the library shares one flake-tolerance source (#1057).

Returns​

Promise<void>

Throws​

If the postcondition never holds. Failing here is deliberate: an action that cannot keep its promise is a real defect, and reporting it at the action gives a far better diagnostic than the downstream assertion mismatch it would otherwise become.

Inherited from​

ComponentDriver.awaitPostcondition

contextMenu()​

protected contextMenu(): Promise<void>

Defined in: packages/core/dist/index.d.mts:1518

Dispatch a right-click / contextmenu event on the component. See Interactor.contextMenu.

Returns​

Promise<void>

Inherited from​

ComponentDriver.contextMenu

drag()​

protected drag(delta): Promise<void>

Defined in: packages/core/dist/index.d.mts:1560

Drag this component by the given pixel delta from its center. See Interactor.drag.

Prefer a keyboard-driven setValue over a true drag in real drivers — these drag primitives exist only for cases keyboard cannot express (e.g. panning a Lightbox, reordering a column). jsdom has no layout engine, so the positional outcome of the drag is E2E-only there.

Parameters​
delta​

Point

Pixel offset to drag by

Returns​

Promise<void>

Inherited from​

ComponentDriver.drag

dragTo()​

protected dragTo(target): Promise<void>

Defined in: packages/core/dist/index.d.mts:1549

Drag this component and drop it onto another component. See Interactor.dragTo.

Prefer a keyboard-driven setValue over a true drag in real drivers — these drag primitives exist only for cases keyboard cannot express (e.g. panning a Lightbox, reordering a column). jsdom has no layout engine, so the positional outcome of the drag is E2E-only there.

Parameters​
target​

ComponentDriver<any>

Another driver whose root element is the drop target

Returns​

Promise<void>

Inherited from​

ComponentDriver.dragTo

enforcePartExistence()​

protected enforcePartExistence(partName): Promise<void>

Defined in: packages/core/dist/index.d.mts:1474

Check the specified parts' existences, and throw MissingPartError if any of the part is found not existence. Existence is defined by the part's existence in the DOM regardless of its visibility on the screen

Parameters​
partName​

readonly never[]

Single or array of the names of the parts to be enforced

Returns​

Promise<void>

Inherited from​

ComponentDriver.enforcePartExistence

getBoundingRect()​

protected getBoundingRect(): Promise<BoundingRect>

Defined in: packages/core/dist/index.d.mts:1567

Get this component's bounding rectangle. See Interactor.getBoundingRect.

jsdom has no layout engine, so every coordinate and dimension is 0 there; real geometry is E2E-only.

Returns​

Promise<BoundingRect>

Inherited from​

ComponentDriver.getBoundingRect

getMissingPartNames()​

protected getMissingPartNames(partName): Promise<readonly never[]>

Defined in: packages/core/dist/index.d.mts:1480

Get the names of parts not in the DOM

Parameters​
partName​

readonly never[]

Single or array of the names of the parts to be examined

Returns​

Promise<readonly never[]>

Inherited from​

ComponentDriver.getMissingPartNames

innerHTML()​

protected innerHTML(): Promise<string>

Defined in: packages/core/dist/index.d.mts:1635

Get the inner HTML of the component

Returns​

Promise<string>

The inner HTML of the component

Inherited from​

ComponentDriver.innerHTML

mouseDown()​

protected mouseDown(option?): Promise<void>

Defined in: packages/core/dist/index.d.mts:1495

Parameters​
option?​

Partial<MouseDownOption>

Returns​

Promise<void>

Inherited from​

ComponentDriver.mouseDown

mouseEnter()​

protected mouseEnter(option?): Promise<void>

Defined in: packages/core/dist/index.d.mts:1499

Parameters​
option?​

Partial<MouseEnterOption>

Returns​

Promise<void>

Inherited from​

ComponentDriver.mouseEnter

mouseLeave()​

protected mouseLeave(option?): Promise<void>

Defined in: packages/core/dist/index.d.mts:1500

Parameters​
option?​

Partial<MouseLeaveOption>

Returns​

Promise<void>

Inherited from​

ComponentDriver.mouseLeave

mouseMove()​

protected mouseMove(option?): Promise<void>

Defined in: packages/core/dist/index.d.mts:1494

Parameters​
option?​

Partial<MouseMoveOption>

Returns​

Promise<void>

Inherited from​

ComponentDriver.mouseMove

mouseOut()​

protected mouseOut(option?): Promise<void>

Defined in: packages/core/dist/index.d.mts:1498

Parameters​
option?​

Partial<MouseOutOption>

Returns​

Promise<void>

Inherited from​

ComponentDriver.mouseOut

mouseOver()​

protected mouseOver(option?): Promise<void>

Defined in: packages/core/dist/index.d.mts:1497

Parameters​
option?​

Partial<HoverOption>

Returns​

Promise<void>

Inherited from​

ComponentDriver.mouseOver

mouseUp()​

protected mouseUp(option?): Promise<void>

Defined in: packages/core/dist/index.d.mts:1496

Parameters​
option?​

Partial<MouseUpOption>

Returns​

Promise<void>

Inherited from​

ComponentDriver.mouseUp

scrollBy()​

protected scrollBy(delta): Promise<void>

Defined in: packages/core/dist/index.d.mts:1538

Scroll the component by the given pixel delta. See Interactor.scrollBy.

jsdom has no layout engine, so the scroll is a no-op there and behavioral assertions (resulting offset) are E2E-only.

Parameters​
delta​

Point

Pixel offset to scroll by

Returns​

Promise<void>

Inherited from​

ComponentDriver.scrollBy