animated_cross_fade_test.dart 15.4 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

5
import 'package:flutter/material.dart';
6
import 'package:flutter/scheduler.dart';
7
import 'package:flutter_test/flutter_test.dart';
8 9 10 11

void main() {
  testWidgets('AnimatedCrossFade test', (WidgetTester tester) async {
    await tester.pumpWidget(
12 13
      const Directionality(
        textDirection: TextDirection.ltr,
14 15 16
        child: Center(
          child: AnimatedCrossFade(
            firstChild: SizedBox(
17 18 19
              width: 100.0,
              height: 100.0,
            ),
20
            secondChild: SizedBox(
21 22 23
              width: 200.0,
              height: 200.0,
            ),
24
            duration: Duration(milliseconds: 200),
25
            crossFadeState: CrossFadeState.showFirst,
26
          ),
27 28
        ),
      ),
29 30 31 32 33 34 35 36
    );

    expect(find.byType(FadeTransition), findsNWidgets(2));
    RenderBox box = tester.renderObject(find.byType(AnimatedCrossFade));
    expect(box.size.width, equals(100.0));
    expect(box.size.height, equals(100.0));

    await tester.pumpWidget(
37 38
      const Directionality(
        textDirection: TextDirection.ltr,
39 40 41
        child: Center(
          child: AnimatedCrossFade(
            firstChild: SizedBox(
42 43 44
              width: 100.0,
              height: 100.0,
            ),
45
            secondChild: SizedBox(
46 47 48
              width: 200.0,
              height: 200.0,
            ),
49
            duration: Duration(milliseconds: 200),
50
            crossFadeState: CrossFadeState.showSecond,
51
          ),
52 53
        ),
      ),
54 55 56 57 58 59 60 61 62
    );

    await tester.pump(const Duration(milliseconds: 100));

    expect(find.byType(FadeTransition), findsNWidgets(2));
    box = tester.renderObject(find.byType(AnimatedCrossFade));
    expect(box.size.width, equals(150.0));
    expect(box.size.height, equals(150.0));
  });
63 64 65

  testWidgets('AnimatedCrossFade test showSecond', (WidgetTester tester) async {
    await tester.pumpWidget(
66 67
      const Directionality(
        textDirection: TextDirection.ltr,
68 69 70
        child: Center(
          child: AnimatedCrossFade(
            firstChild: SizedBox(
71 72 73
              width: 100.0,
              height: 100.0,
            ),
74
            secondChild: SizedBox(
75 76 77
              width: 200.0,
              height: 200.0,
            ),
78
            duration: Duration(milliseconds: 200),
79
            crossFadeState: CrossFadeState.showSecond,
80
          ),
81 82
        ),
      ),
83 84 85
    );

    expect(find.byType(FadeTransition), findsNWidgets(2));
86
    final RenderBox box = tester.renderObject(find.byType(AnimatedCrossFade));
87 88 89
    expect(box.size.width, equals(200.0));
    expect(box.size.height, equals(200.0));
  });
90

91
  testWidgets('AnimatedCrossFade alignment (VISUAL)', (WidgetTester tester) async {
92 93
    final Key firstKey = UniqueKey();
    final Key secondKey = UniqueKey();
94 95

    await tester.pumpWidget(
96
      Directionality(
97
        textDirection: TextDirection.ltr,
98 99
        child: Center(
          child: AnimatedCrossFade(
100
            alignment: Alignment.bottomRight,
101
            firstChild: SizedBox(
102 103 104 105
              key: firstKey,
              width: 100.0,
              height: 100.0,
            ),
106
            secondChild: SizedBox(
107 108 109 110 111 112
              key: secondKey,
              width: 200.0,
              height: 200.0,
            ),
            duration: const Duration(milliseconds: 200),
            crossFadeState: CrossFadeState.showFirst,
113
          ),
114 115
        ),
      ),
116 117 118
    );

    await tester.pumpWidget(
119
      Directionality(
120
        textDirection: TextDirection.ltr,
121 122
        child: Center(
          child: AnimatedCrossFade(
123
            alignment: Alignment.bottomRight,
124
            firstChild: SizedBox(
125 126 127 128
              key: firstKey,
              width: 100.0,
              height: 100.0,
            ),
129
            secondChild: SizedBox(
130 131 132 133 134 135
              key: secondKey,
              width: 200.0,
              height: 200.0,
            ),
            duration: const Duration(milliseconds: 200),
            crossFadeState: CrossFadeState.showSecond,
136
          ),
137 138 139 140 141 142 143 144 145 146 147 148 149
        ),
      ),
    );

    await tester.pump(const Duration(milliseconds: 100));

    final RenderBox box1 = tester.renderObject(find.byKey(firstKey));
    final RenderBox box2 = tester.renderObject(find.byKey(secondKey));
    expect(box1.localToGlobal(Offset.zero), const Offset(275.0, 175.0));
    expect(box2.localToGlobal(Offset.zero), const Offset(275.0, 175.0));
  });

  testWidgets('AnimatedCrossFade alignment (LTR)', (WidgetTester tester) async {
150 151
    final Key firstKey = UniqueKey();
    final Key secondKey = UniqueKey();
152 153

    await tester.pumpWidget(
154
      Directionality(
155
        textDirection: TextDirection.ltr,
156 157
        child: Center(
          child: AnimatedCrossFade(
158
            alignment: AlignmentDirectional.bottomEnd,
159
            firstChild: SizedBox(
160 161 162 163
              key: firstKey,
              width: 100.0,
              height: 100.0,
            ),
164
            secondChild: SizedBox(
165 166 167 168 169 170 171 172 173 174 175 176
              key: secondKey,
              width: 200.0,
              height: 200.0,
            ),
            duration: const Duration(milliseconds: 200),
            crossFadeState: CrossFadeState.showFirst,
          ),
        ),
      ),
    );

    await tester.pumpWidget(
177
      Directionality(
178
        textDirection: TextDirection.ltr,
179 180
        child: Center(
          child: AnimatedCrossFade(
181
            alignment: AlignmentDirectional.bottomEnd,
182
            firstChild: SizedBox(
183 184 185 186
              key: firstKey,
              width: 100.0,
              height: 100.0,
            ),
187
            secondChild: SizedBox(
188 189 190 191 192 193 194 195 196
              key: secondKey,
              width: 200.0,
              height: 200.0,
            ),
            duration: const Duration(milliseconds: 200),
            crossFadeState: CrossFadeState.showSecond,
          ),
        ),
      ),
197 198 199 200 201 202 203 204 205 206
    );

    await tester.pump(const Duration(milliseconds: 100));

    final RenderBox box1 = tester.renderObject(find.byKey(firstKey));
    final RenderBox box2 = tester.renderObject(find.byKey(secondKey));
    expect(box1.localToGlobal(Offset.zero), const Offset(275.0, 175.0));
    expect(box2.localToGlobal(Offset.zero), const Offset(275.0, 175.0));
  });

207
  testWidgets('AnimatedCrossFade alignment (RTL)', (WidgetTester tester) async {
208 209
    final Key firstKey = UniqueKey();
    final Key secondKey = UniqueKey();
210 211

    await tester.pumpWidget(
212
      Directionality(
213
        textDirection: TextDirection.rtl,
214 215
        child: Center(
          child: AnimatedCrossFade(
216
            alignment: AlignmentDirectional.bottomEnd,
217
            firstChild: SizedBox(
218 219 220 221
              key: firstKey,
              width: 100.0,
              height: 100.0,
            ),
222
            secondChild: SizedBox(
223 224 225 226 227 228 229 230 231 232 233 234
              key: secondKey,
              width: 200.0,
              height: 200.0,
            ),
            duration: const Duration(milliseconds: 200),
            crossFadeState: CrossFadeState.showFirst,
          ),
        ),
      ),
    );

    await tester.pumpWidget(
235
      Directionality(
236
        textDirection: TextDirection.rtl,
237 238
        child: Center(
          child: AnimatedCrossFade(
239
            alignment: AlignmentDirectional.bottomEnd,
240
            firstChild: SizedBox(
241 242 243 244
              key: firstKey,
              width: 100.0,
              height: 100.0,
            ),
245
            secondChild: SizedBox(
246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264
              key: secondKey,
              width: 200.0,
              height: 200.0,
            ),
            duration: const Duration(milliseconds: 200),
            crossFadeState: CrossFadeState.showSecond,
          ),
        ),
      ),
    );

    await tester.pump(const Duration(milliseconds: 100));

    final RenderBox box1 = tester.renderObject(find.byKey(firstKey));
    final RenderBox box2 = tester.renderObject(find.byKey(secondKey));
    expect(box1.localToGlobal(Offset.zero), const Offset(325.0, 175.0));
    expect(box2.localToGlobal(Offset.zero), const Offset(325.0, 175.0));
  });

265
  Widget crossFadeWithWatcher({ bool towardsSecond = false }) {
266
    return Directionality(
267
      textDirection: TextDirection.ltr,
268
      child: AnimatedCrossFade(
269
        firstChild: const _TickerWatchingWidget(),
270
        secondChild: Container(),
271 272 273
        crossFadeState: towardsSecond ? CrossFadeState.showSecond : CrossFadeState.showFirst,
        duration: const Duration(milliseconds: 50),
      ),
274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 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
    );
  }

  testWidgets('AnimatedCrossFade preserves widget state', (WidgetTester tester) async {
    await tester.pumpWidget(crossFadeWithWatcher());

    _TickerWatchingWidgetState findState() => tester.state(find.byType(_TickerWatchingWidget));
    final _TickerWatchingWidgetState state = findState();

    await tester.pumpWidget(crossFadeWithWatcher(towardsSecond: true));
    for (int i = 0; i < 3; i += 1) {
      await tester.pump(const Duration(milliseconds: 25));
      expect(findState(), same(state));
    }
  });

  testWidgets('AnimatedCrossFade switches off TickerMode and semantics on faded out widget', (WidgetTester tester) async {
    ExcludeSemantics findSemantics() {
      return tester.widget(find.descendant(
        of: find.byKey(const ValueKey<CrossFadeState>(CrossFadeState.showFirst)),
        matching: find.byType(ExcludeSemantics),
      ));
    }

    await tester.pumpWidget(crossFadeWithWatcher());

    final _TickerWatchingWidgetState state = tester.state(find.byType(_TickerWatchingWidget));
    expect(state.ticker.muted, false);
    expect(findSemantics().excluding, false);

    await tester.pumpWidget(crossFadeWithWatcher(towardsSecond: true));
    for (int i = 0; i < 2; i += 1) {
      await tester.pump(const Duration(milliseconds: 25));
      // Animations are kept alive in the middle of cross-fade
      expect(state.ticker.muted, false);
      // Semantics are turned off immediately on the widget that's fading out
      expect(findSemantics().excluding, true);
    }

    // In the final state both animations and semantics should be off on the
    // widget that's faded out.
    await tester.pump(const Duration(milliseconds: 25));
    expect(state.ticker.muted, true);
    expect(findSemantics().excluding, true);
  });
319 320

  testWidgets('AnimatedCrossFade.layoutBuilder', (WidgetTester tester) async {
321 322 323
    await tester.pumpWidget(
      const Directionality(
        textDirection: TextDirection.ltr,
324 325 326
        child: AnimatedCrossFade(
          firstChild: Text('AAA', textDirection: TextDirection.ltr),
          secondChild: Text('BBB', textDirection: TextDirection.ltr),
327
          crossFadeState: CrossFadeState.showFirst,
328
          duration: Duration(milliseconds: 50),
329 330 331
        ),
      ),
    );
332 333
    expect(find.text('AAA'), findsOneWidget);
    expect(find.text('BBB'), findsOneWidget);
334
    await tester.pumpWidget(
335
      Directionality(
336
        textDirection: TextDirection.ltr,
337
        child: AnimatedCrossFade(
338 339 340 341 342 343 344 345
          firstChild: const Text('AAA', textDirection: TextDirection.ltr),
          secondChild: const Text('BBB', textDirection: TextDirection.ltr),
          crossFadeState: CrossFadeState.showFirst,
          duration: const Duration(milliseconds: 50),
          layoutBuilder: (Widget a, Key aKey, Widget b, Key bKey) => a,
        ),
      ),
    );
346 347
    expect(find.text('AAA'), findsOneWidget);
    expect(find.text('BBB'), findsNothing);
348
    await tester.pumpWidget(
349
      Directionality(
350
        textDirection: TextDirection.ltr,
351
        child: AnimatedCrossFade(
352 353 354 355 356 357 358 359
          firstChild: const Text('AAA', textDirection: TextDirection.ltr),
          secondChild: const Text('BBB', textDirection: TextDirection.ltr),
          crossFadeState: CrossFadeState.showSecond,
          duration: const Duration(milliseconds: 50),
          layoutBuilder: (Widget a, Key aKey, Widget b, Key bKey) => a,
        ),
      ),
    );
360 361 362
    expect(find.text('BBB'), findsOneWidget);
    expect(find.text('AAA'), findsNothing);
  });
363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386

  testWidgets('AnimatedCrossFade test focus', (WidgetTester tester) async {
    await tester.pumpWidget(
      Directionality(
        textDirection: TextDirection.ltr,
        child: AnimatedCrossFade(
          firstChild: TextButton(onPressed: () {}, child: const Text('AAA')),
          secondChild: TextButton(onPressed: () {}, child: const Text('BBB')),
          crossFadeState: CrossFadeState.showFirst,
          duration: const Duration(milliseconds: 50),
        ),
      ),
    );

    final FocusNode visibleNode = Focus.of(tester.element(find.text('AAA')), scopeOk: true);
    visibleNode.requestFocus();
    await tester.pump();
    expect(visibleNode.hasPrimaryFocus, isTrue);

    final FocusNode hiddenNode = Focus.of(tester.element(find.text('BBB')), scopeOk: true);
    hiddenNode.requestFocus();
    await tester.pump();
    expect(hiddenNode.hasPrimaryFocus, isFalse);
  });
387

388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412
  testWidgets('AnimatedCrossFade bottom child can have focus', (WidgetTester tester) async {
    await tester.pumpWidget(
      Directionality(
        textDirection: TextDirection.ltr,
        child: AnimatedCrossFade(
          firstChild: TextButton(onPressed: () {}, child: const Text('AAA')),
          secondChild: TextButton(onPressed: () {}, child: const Text('BBB')),
          crossFadeState: CrossFadeState.showFirst,
          duration: const Duration(milliseconds: 50),
          excludeBottomFocus: false,
        ),
      ),
    );

    final FocusNode visibleNode = Focus.of(tester.element(find.text('AAA')), scopeOk: true);
    visibleNode.requestFocus();
    await tester.pump();
    expect(visibleNode.hasPrimaryFocus, isTrue);

    final FocusNode hiddenNode = Focus.of(tester.element(find.text('BBB')), scopeOk: true);
    hiddenNode.requestFocus();
    await tester.pump();
    expect(hiddenNode.hasPrimaryFocus, isTrue);
  });

413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458
  testWidgets('AnimatedCrossFade second child do not receive touch events',
      (WidgetTester tester) async {
    int numberOfTouchEventNoticed = 0;

    Future<void> buildAnimatedFrame(CrossFadeState crossFadeState) {
      return tester.pumpWidget(
        SizedBox(
          width: 300,
          height: 600,
          child: Directionality(
            textDirection: TextDirection.ltr,
            child: AnimatedCrossFade(
              firstChild: const Text('AAA'),
              secondChild: TextButton(
                  style: TextButton.styleFrom(minimumSize: const Size(double.infinity, 600)),
                  onPressed: () {
                    numberOfTouchEventNoticed++;
                  },
                  child: const Text('BBB'),
              ),
              crossFadeState: crossFadeState,
              duration: const Duration(milliseconds: 50),
            ),
          ),
        ),
      );
    }

    Future<void> touchSecondButton() async {
      final TestGesture gestureTouchSecondButton = await tester
          .startGesture(const Offset(150, 300));

      return gestureTouchSecondButton.up();
    }

    await buildAnimatedFrame(CrossFadeState.showSecond);

    await touchSecondButton();
    expect(numberOfTouchEventNoticed, 1);

    await buildAnimatedFrame(CrossFadeState.showFirst);
    await touchSecondButton();
    await touchSecondButton();

    expect(numberOfTouchEventNoticed, 1);
  });
459 460 461 462 463 464
}

class _TickerWatchingWidget extends StatefulWidget {
  const _TickerWatchingWidget();

  @override
465
  State<StatefulWidget> createState() => _TickerWatchingWidgetState();
466 467 468
}

class _TickerWatchingWidgetState extends State<_TickerWatchingWidget> with SingleTickerProviderStateMixin {
469
  late Ticker ticker;
470 471 472 473

  @override
  void initState() {
    super.initState();
474
    ticker = createTicker((_) { })..start();
475 476 477
  }

  @override
478
  Widget build(BuildContext context) => Container();
479 480 481 482 483 484

  @override
  void dispose() {
    ticker.dispose();
    super.dispose();
  }
485
}