deselectOptions static method Null safety

void deselectOptions(
  1. SelectElement selectElement,
  2. List values,
  3. {Map clickInit = const {},
  4. bool skipPointerEventsCheck = false}
)

Removes the selection for the specified values of selectElement.

selectElement must have the multiple attribute set to true.

values can either be a list of values or OptionElements.

Related: UserEvent.selectOptions

See: testing-library.com/docs/ecosystem-user-event/#deselectoptionselement-values

Options

clickInit

Use clickInit to initialize the click events that occur as a part of the selection.

skipPointerEventsCheck

Attempting to interact with an element that has 'pointer-events: none' set will throw an error. Use skipPointerEventsCheck to prevent that error from being thrown by skipping the check of whether any element in the DOM-tree has 'pointer-events: none' set. In addition, the underlying check for pointer events is costly in general and very costly when rendering large DOM-trees. Can be used to speed up tests.

Example:

<select multiple>
  <option value="topping1" selected>Cheese</option>
  <option value="topping2" selected>Pineapple</option>
  <option value="topping3">Olives</option>
  <option value="topping4">Pepperoni</option>
  <option value="topping5" selected>Bacon</option>
</select>

import 'dart:html';

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

void main() {
  test('', () {
    // Render the DOM shown in the example snippet above.
    final view = rtl.render(react.select(
      {'multiple': true},
      [
        react.option({'value': 'topping1', 'selected': true}, 'Cheese'),
        react.option({'value': 'topping2', 'selected': true}, 'Pineapple'),
        react.option({'value': 'topping3'}, 'Olives'),
        react.option({'value': 'topping4'}, 'Ham'),
        react.option({'value': 'topping5', 'selected': true}, 'Bacon'),
      ],
    ));

    // Use react_testing_library queries to store references to the nodes.
    final select = view.getByRole('listbox') as SelectElement;

    // Use `UserEvent.deselectOptions` to simulate a user deselecting options from a list.
    UserEvent.deselectOptions(select, ['topping5']);
    UserEvent.deselectOptions(select, [view.getByText('Pineapple')]);

    // Use the `hasValue` matcher to verify the value of the select.
    expect(select, hasValue(['topping1']));
    expect(select, isNot(hasValue(['topping2', 'topping3', 'topping4', 'topping5'])));
  });
}

Warning About Errors

Unlike the JS API, any uncaught errors thrown during event propagation will get rethrown. This helps surface errors that could otherwise go unnoticed since they aren't printed to the terminal when running tests.

NOTE: render() supports React vDom elements / custom components created using either the react or over_react packages.

The examples shown here use the react package since the react_testing_library does not have a direct dependency on over_react - but both libraries are fully supported.

{@category UserActions}

Implementation

static void deselectOptions(
  SelectElement selectElement,
  List values, {
  Map clickInit = const {},
  bool skipPointerEventsCheck = false,
}) {
  final options = {
    'skipPointerEventsCheck': skipPointerEventsCheck,
  };

  eventHandlerErrorCatcher(() {
    getProperty(_userEvent, 'deselectOptions')(
      selectElement,
      values,
      _jsifyEventData(clickInit),
      jsifyAndAllowInterop(options),
    );
  });
}