form_test.dart 15.1 KB
Newer Older
1 2 3 4 5 6 7 8
// Copyright 2016 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter_test/flutter_test.dart';
import 'package:flutter/material.dart';

void main() {
Matt Perry's avatar
Matt Perry committed
9
  testWidgets('onSaved callback is called', (WidgetTester tester) async {
10
    final GlobalKey<FormState> formKey = new GlobalKey<FormState>();
11 12 13
    String fieldValue;

    Widget builder() {
Ian Hickson's avatar
Ian Hickson committed
14 15 16 17 18 19 20 21 22
      return new Directionality(
        textDirection: TextDirection.ltr,
        child: new Center(
          child: new Material(
            child: new Form(
              key: formKey,
              child: new TextFormField(
                onSaved: (String value) { fieldValue = value; },
              ),
23
            ),
24 25
          ),
        ),
26 27
      );
    }
28

29
    await tester.pumpWidget(builder());
30

31
    expect(fieldValue, isNull);
32

33
    Future<Null> checkText(String testValue) async {
34
      await tester.enterText(find.byType(TextFormField), testValue);
Matt Perry's avatar
Matt Perry committed
35
      formKey.currentState.save();
36
      // pump'ing is unnecessary because callback happens regardless of frames
37 38
      expect(fieldValue, equals(testValue));
    }
39

40 41
    await checkText('Test');
    await checkText('');
42 43
  });

44 45 46 47
  testWidgets('onChanged callback is called', (WidgetTester tester) async {
    String fieldValue;

    Widget builder() {
Ian Hickson's avatar
Ian Hickson committed
48 49 50 51 52 53 54 55
      return new Directionality(
        textDirection: TextDirection.ltr,
        child: new Center(
          child: new Material(
            child: new Form(
              child: new TextField(
                onChanged: (String value) { fieldValue = value; },
              ),
56
            ),
57 58
          ),
        ),
59 60 61 62 63 64 65 66
      );
    }

    await tester.pumpWidget(builder());

    expect(fieldValue, isNull);

    Future<Null> checkText(String testValue) async {
67
      await tester.enterText(find.byType(TextField), testValue);
68 69 70 71 72 73 74 75
      // pump'ing is unnecessary because callback happens regardless of frames
      expect(fieldValue, equals(testValue));
    }

    await checkText('Test');
    await checkText('');
  });

76
  testWidgets('Validator sets the error text only when validate is called', (WidgetTester tester) async {
77
    final GlobalKey<FormState> formKey = new GlobalKey<FormState>();
78
    String errorText(String value) => value + '/error';
79

80
    Widget builder(bool autovalidate) {
Ian Hickson's avatar
Ian Hickson committed
81 82 83 84 85 86 87 88 89 90
      return new Directionality(
        textDirection: TextDirection.ltr,
        child: new Center(
          child: new Material(
            child: new Form(
              key: formKey,
              autovalidate: autovalidate,
              child: new TextFormField(
                validator: errorText,
              ),
91
            ),
92 93
          ),
        ),
94 95
      );
    }
96

97 98
    // Start off not autovalidating.
    await tester.pumpWidget(builder(false));
99

100
    Future<Null> checkErrorText(String testValue) async {
101 102
      formKey.currentState.reset();
      await tester.pumpWidget(builder(false));
103 104
      await tester.enterText(find.byType(TextFormField), testValue);
      await tester.pump();
105 106

      // We have to manually validate if we're not autovalidating.
107
      expect(find.text(errorText(testValue)), findsNothing);
108
      formKey.currentState.validate();
109
      await tester.pump();
110
      expect(find.text(errorText(testValue)), findsOneWidget);
111 112 113 114

      // Try again with autovalidation. Should validate immediately.
      formKey.currentState.reset();
      await tester.pumpWidget(builder(true));
115 116
      await tester.enterText(find.byType(TextFormField), testValue);
      await tester.pump();
117

118
      expect(find.text(errorText(testValue)), findsOneWidget);
119
    }
120

121 122
    await checkErrorText('Test');
    await checkErrorText('');
123 124
  });

125
  testWidgets('Multiple TextFormFields communicate', (WidgetTester tester) async {
126
    final GlobalKey<FormState> formKey = new GlobalKey<FormState>();
127
    final GlobalKey<FormFieldState<String>> fieldKey = new GlobalKey<FormFieldState<String>>();
128
    // Input 2's validator depends on a input 1's value.
129
    String errorText(String input) => '${fieldKey.currentState.value}/error';
130 131

    Widget builder() {
132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
      return new Directionality(
        textDirection: TextDirection.ltr,
        child: new Center(
          child: new Material(
            child: new Form(
              key: formKey,
              autovalidate: true,
              child: new ListView(
                children: <Widget>[
                  new TextFormField(
                    key: fieldKey,
                  ),
                  new TextFormField(
                    validator: errorText,
                  ),
                ],
              ),
149
            ),
150 151
          ),
        ),
152 153
      );
    }
154

155
    await tester.pumpWidget(builder());
156

157
    Future<Null> checkErrorText(String testValue) async {
158
      await tester.enterText(find.byType(TextFormField).first, testValue);
159
      await tester.pump();
160

161
      // Check for a new Text widget with our error text.
Matt Perry's avatar
Matt Perry committed
162
      expect(find.text(testValue + '/error'), findsOneWidget);
163
      return null;
164
    }
165

166 167
    await checkErrorText('Test');
    await checkErrorText('');
168
  });
169

170
  testWidgets('Provide initial value to input when no controller is specified', (WidgetTester tester) async {
171
    const String initialValue = 'hello';
172
    final GlobalKey<FormFieldState<String>> inputKey = new GlobalKey<FormFieldState<String>>();
173 174

    Widget builder() {
Ian Hickson's avatar
Ian Hickson committed
175 176 177 178 179 180 181
      return new Directionality(
        textDirection: TextDirection.ltr,
        child: new Center(
          child: new Material(
            child: new Form(
              child: new TextFormField(
                key: inputKey,
182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208
                initialValue: 'hello',
              ),
            ),
          ),
        ),
      );
    }

    await tester.pumpWidget(builder());
    await tester.showKeyboard(find.byType(TextFormField));

    // initial value should be loaded into keyboard editing state
    expect(tester.testTextInput.editingState, isNotNull);
    expect(tester.testTextInput.editingState['text'], equals(initialValue));

    // initial value should also be visible in the raw input line
    final EditableTextState editableText = tester.state(find.byType(EditableText));
    expect(editableText.widget.controller.text, equals(initialValue));

    // sanity check, make sure we can still edit the text and everything updates
    expect(inputKey.currentState.value, equals(initialValue));
    await tester.enterText(find.byType(TextFormField), 'world');
    await tester.pump();
    expect(inputKey.currentState.value, equals('world'));
    expect(editableText.widget.controller.text, equals('world'));
  });

209 210
  testWidgets('Controller defines initial value', (WidgetTester tester) async {
    final TextEditingController controller = new TextEditingController(text: 'hello');
211
    const String initialValue = 'hello';
212 213 214 215 216 217 218 219 220 221
    final GlobalKey<FormFieldState<String>> inputKey = new GlobalKey<FormFieldState<String>>();

    Widget builder() {
      return new Directionality(
        textDirection: TextDirection.ltr,
        child: new Center(
          child: new Material(
            child: new Form(
              child: new TextFormField(
                key: inputKey,
Ian Hickson's avatar
Ian Hickson committed
222 223
                controller: controller,
              ),
224
            ),
225 226
          ),
        ),
227 228 229 230
      );
    }

    await tester.pumpWidget(builder());
231
    await tester.showKeyboard(find.byType(TextFormField));
232 233

    // initial value should be loaded into keyboard editing state
234 235
    expect(tester.testTextInput.editingState, isNotNull);
    expect(tester.testTextInput.editingState['text'], equals(initialValue));
236 237

    // initial value should also be visible in the raw input line
238
    final EditableTextState editableText = tester.state(find.byType(EditableText));
239
    expect(editableText.widget.controller.text, equals(initialValue));
240
    expect(controller.text, equals(initialValue));
241 242

    // sanity check, make sure we can still edit the text and everything updates
243
    expect(inputKey.currentState.value, equals(initialValue));
244
    await tester.enterText(find.byType(TextFormField), 'world');
245
    await tester.pump();
246
    expect(inputKey.currentState.value, equals('world'));
247
    expect(editableText.widget.controller.text, equals('world'));
248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265
    expect(controller.text, equals('world'));
  });

  testWidgets('TextFormField resets to its initial value', (WidgetTester tester) async {
    final GlobalKey<FormState> formKey = new GlobalKey<FormState>();
    final GlobalKey<FormFieldState<String>> inputKey = new GlobalKey<FormFieldState<String>>();
    final TextEditingController controller = new TextEditingController(text: 'Plover');

    Widget builder() {
      return new Directionality(
        textDirection: TextDirection.ltr,
        child: new Center(
          child: new Material(
            child: new Form(
              key: formKey,
              child: new TextFormField(
                key: inputKey,
                controller: controller,
266
                // initialValue is 'Plover'
267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286
              ),
            ),
          ),
        ),
      );
    }
    await tester.pumpWidget(builder());
    await tester.showKeyboard(find.byType(TextFormField));
    final EditableTextState editableText = tester.state(find.byType(EditableText));

    // overwrite initial value.
    controller.text = 'Xyzzy';
    await tester.idle();
    expect(editableText.widget.controller.text, equals('Xyzzy'));
    expect(inputKey.currentState.value, equals('Xyzzy'));
    expect(controller.text, equals('Xyzzy'));

    // verify value resets to initialValue on reset.
    formKey.currentState.reset();
    await tester.idle();
287 288 289
    expect(inputKey.currentState.value, equals('Plover'));
    expect(editableText.widget.controller.text, equals('Plover'));
    expect(controller.text, equals('Plover'));
290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391
  });

  testWidgets('TextEditingController updates to/from form field value', (WidgetTester tester) async {
    final TextEditingController controller1 = new TextEditingController(text: 'Foo');
    final TextEditingController controller2 = new TextEditingController(text: 'Bar');
    final GlobalKey<FormFieldState<String>> inputKey = new GlobalKey<FormFieldState<String>>();

    TextEditingController currentController;
    StateSetter setState;

    Widget builder() {
      return new StatefulBuilder(
        builder: (BuildContext context, StateSetter setter) {
          setState = setter;
          return new Directionality(
            textDirection: TextDirection.ltr,
            child: new Center(
              child: new Material(
                child: new Form(
                  child: new TextFormField(
                    key: inputKey,
                    controller: currentController,
                  ),
                ),
              ),
            ),
          );
        },
      );
    }

    await tester.pumpWidget(builder());
    await tester.showKeyboard(find.byType(TextFormField));

    // verify initially empty.
    expect(tester.testTextInput.editingState, isNotNull);
    expect(tester.testTextInput.editingState['text'], isEmpty);
    final EditableTextState editableText = tester.state(find.byType(EditableText));
    expect(editableText.widget.controller.text, isEmpty);

    // verify changing the controller from null to controller1 sets the value.
    setState(() {
      currentController = controller1;
    });
    await tester.pump();
    expect(editableText.widget.controller.text, equals('Foo'));
    expect(inputKey.currentState.value, equals('Foo'));

    // verify changes to controller1 text are visible in text field and set in form value.
    controller1.text = 'Wobble';
    await tester.idle();
    expect(editableText.widget.controller.text, equals('Wobble'));
    expect(inputKey.currentState.value, equals('Wobble'));

    // verify changes to the field text update the form value and controller1.
    await tester.enterText(find.byType(TextFormField), 'Wibble');
    await tester.pump();
    expect(inputKey.currentState.value, equals('Wibble'));
    expect(editableText.widget.controller.text, equals('Wibble'));
    expect(controller1.text, equals('Wibble'));

    // verify that switching from controller1 to controller2 is handled.
    setState(() {
      currentController = controller2;
    });
    await tester.pump();
    expect(inputKey.currentState.value, equals('Bar'));
    expect(editableText.widget.controller.text, equals('Bar'));
    expect(controller2.text, equals('Bar'));
    expect(controller1.text, equals('Wibble'));

    // verify changes to controller2 text are visible in text field and set in form value.
    controller2.text = 'Xyzzy';
    await tester.idle();
    expect(editableText.widget.controller.text, equals('Xyzzy'));
    expect(inputKey.currentState.value, equals('Xyzzy'));
    expect(controller1.text, equals('Wibble'));

    // verify changes to controller1 text are not visible in text field or set in form value.
    controller1.text = 'Plugh';
    await tester.idle();
    expect(editableText.widget.controller.text, equals('Xyzzy'));
    expect(inputKey.currentState.value, equals('Xyzzy'));
    expect(controller1.text, equals('Plugh'));

    // verify that switching from controller2 to null is handled.
    setState(() {
      currentController = null;
    });
    await tester.pump();
    expect(inputKey.currentState.value, equals('Xyzzy'));
    expect(editableText.widget.controller.text, equals('Xyzzy'));
    expect(controller2.text, equals('Xyzzy'));
    expect(controller1.text, equals('Plugh'));

    // verify that changes to the field text update the form value but not the previous controllers.
    await tester.enterText(find.byType(TextFormField), 'Plover');
    await tester.pump();
    expect(inputKey.currentState.value, equals('Plover'));
    expect(editableText.widget.controller.text, equals('Plover'));
    expect(controller1.text, equals('Plugh'));
    expect(controller2.text, equals('Xyzzy'));
Matt Perry's avatar
Matt Perry committed
392 393
  });

394
  testWidgets('No crash when a TextFormField is removed from the tree', (WidgetTester tester) async {
395
    final GlobalKey<FormState> formKey = new GlobalKey<FormState>();
Matt Perry's avatar
Matt Perry committed
396 397 398
    String fieldValue;

    Widget builder(bool remove) {
Ian Hickson's avatar
Ian Hickson committed
399 400 401 402 403 404 405 406 407 408 409
      return new Directionality(
        textDirection: TextDirection.ltr,
        child: new Center(
          child: new Material(
            child: new Form(
              key: formKey,
              child: remove ? new Container() : new TextFormField(
                autofocus: true,
                onSaved: (String value) { fieldValue = value; },
                validator: (String value) { return value.isEmpty ? null : 'yes'; }
              ),
410
            ),
411 412
          ),
        ),
Matt Perry's avatar
Matt Perry committed
413 414 415 416 417 418
      );
    }

    await tester.pumpWidget(builder(false));

    expect(fieldValue, isNull);
419
    expect(formKey.currentState.validate(), isTrue);
Matt Perry's avatar
Matt Perry committed
420

421
    await tester.enterText(find.byType(TextFormField), 'Test');
Matt Perry's avatar
Matt Perry committed
422 423
    await tester.pumpWidget(builder(false));

424
    // Form wasn't saved yet.
Matt Perry's avatar
Matt Perry committed
425
    expect(fieldValue, null);
426
    expect(formKey.currentState.validate(), isFalse);
Matt Perry's avatar
Matt Perry committed
427 428 429 430 431

    formKey.currentState.save();

    // Now fieldValue is saved.
    expect(fieldValue, 'Test');
432
    expect(formKey.currentState.validate(), isFalse);
Matt Perry's avatar
Matt Perry committed
433 434 435

    // Now remove the field with an error.
    await tester.pumpWidget(builder(true));
436

Matt Perry's avatar
Matt Perry committed
437 438 439
    // Reset the form. Should not crash.
    formKey.currentState.reset();
    formKey.currentState.save();
440
    expect(formKey.currentState.validate(), isTrue);
441
  });
442
}