hasFormValues function Null safety Matchers

Allows you to check if a FormElement or FieldSetElement contains form controls for each given name in the provided valuesMap with the corresponding value.

This matcher abstracts away the particularities with which a form control value is obtained depending on the type of form control. For instance, <input> elements have a value attribute, but <select> elements do not. Here's a list of all cases covered

Similar to jest-dom's toHaveFormValues matcher.

Examples

<form data-test-id="login-form">
  <input type="text" name="username" value="jane.doe" />
  <input type="number" name="age" value="35" />
  <input type="password" name="password" value="12345678" />
  <input type="checkbox" name="rememberMe" checked />
  <button type="submit">Sign in</button>
</form>

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

main() {
  test('', () {
    // Render the DOM shown in the example snippet above
    final view = rtl.render(react.form({'role': 'form'},
      react.input({'type': 'text', 'name': 'username', 'value': 'jane.doe'}),
      react.input({'type': 'number', 'name': 'age', 'value': '35'}),
      react.input({'type': 'password', 'name': 'password', 'value': '12345678'}),
      react.input({'type': 'checkbox', 'name': 'rememberMe', 'checked': true}),
      react.button({'type': 'submit'}, 'Sign in'),
    ));

    // Use react_testing_library queries to store references to the node(s)
    final form = view.getByRole('form');

    // Use the `hasFormValues` matcher as the second argument of `expect()`
    expect(form, hasFormValues({
      'username': 'jane.doe',
      'rememberMe': true,
    }));

    // You can also use matchers for the value
    expect(form, hasFormValues({
      'username': startsWith('jane'),
      'age': greaterThan(18),
    }));
  });
}

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.