isPartiallyChecked top-level constant Matchers

Matcher const isPartiallyChecked

Allows you to check whether the given element is partially checked a.k.a indeterminate.

It accepts an input of type checkbox and elements with a role of checkbox with a valid aria-checked attribute value.

Similar to jest-dom's toBePartiallyChecked matcher.

Examples

<!-- Input Checkboxes -->
<input type="checkbox" checked />
<input type="checkbox" />
<input type="checkbox" indeterminate />

<!-- Aria Checkboxes -->
<div role="checkbox" aria-checked="true" />
<div role="checkbox" aria-checked="false" />
<div role="checkbox" aria-checked="mixed" />

import 'dart:html';

import 'package:react/react.dart' as react;
import 'package:react_testing_library/matchers.dart' show isPartiallyChecked;
import 'package:react_testing_library/react_testing_library.dart' as rtl;
import 'package:test/test.dart';

main() {
  test('Input Checkboxes', () {
    final view = rtl.render(react.div({}, [
      react.input({'type': 'checkbox', 'checked': 'true'}),
      react.input({'type': 'checkbox'}),
      react.input({'type': 'checkbox'}),
    ]));

    final checkboxes = view.getAllByRole('checkbox');

    // Set the last checkbox to be indeterminate.
    (checkboxes[2] as InputElement).indeterminate = true;

    expect(checkboxes, orderedEquals([
      isNot(isPartiallyChecked),
      isNot(isPartiallyChecked),
      isPartiallyChecked,
    ]));
  });

  test('Aria Checkboxes', () {
    final view = rtl.render(react.div({}, [
      react.div({'role': 'checkbox', 'aria-checked': 'true'}),
      react.div({'role': 'checkbox', 'aria-checked': 'false'}),
      react.div({'role': 'checkbox', 'aria-checked': 'mixed'}),
    ]));

    final checkboxes = view.getAllByRole('checkbox');
    expect(checkboxes, orderedEquals([
      isNot(isPartiallyChecked),
      isNot(isPartiallyChecked),
      isPartiallyChecked,
    ]));
  });
}

{@category Matchers}

Implementation

const Matcher isPartiallyChecked = _IsPartiallyChecked();