halkyon/packages/halkyon_ui/test/widget/folding_tabs_test.dart

import 'package:flutter_test/flutter_test.dart';
import 'package:halkyon_ui/halkyon_ui.dart';
import 'package:material_ui/material_ui.dart';

import '../support/test_app.dart';

void main() {
  Widget list(String name) => ListView(
    children: [
      for (var i = 0; i < 40; i++)
        SizedBox(height: 60, child: Text('$name $i')),
    ],
  );

  Future<void> show(WidgetTester tester) async {
    tester.view.physicalSize = const Size(400, 800);
    tester.view.devicePixelRatio = 1;
    addTearDown(tester.view.reset);
    await tester.pumpWidget(
      testApp(
        FoldingTabs(
          title: 'Profile',
          actions: const [Icon(Icons.settings)],
          tabs: [
            FoldingTab(label: 'Progress', body: list('Progress')),
            FoldingTab(label: 'Days', body: list('Day')),
          ],
        ),
      ),
    );
  }

  /// The texts in the app bar.
  Finder inBar(String text) =>
      find.descendant(of: find.byType(AppBar), matching: find.text(text));

  bool tabRowShows(WidgetTester tester) {
    final row = find.byType(TabBar);
    return row.evaluate().isNotEmpty &&
        tester.getRect(row).bottom >
            tester.getRect(find.byType(AppBar)).bottom + 1;
  }

  testWidgets('at the top, the tabs show under the title, which stands alone', (
    tester,
  ) async {
    await show(tester);

    expect(inBar('Profile'), findsOneWidget);
    expect(tabRowShows(tester), isTrue);
    expect(inBar('Progress'), findsNothing);
    expect(find.text('Progress 0'), findsOneWidget);
  });

  testWidgets('scrolled down, the tabs go and the chosen one shows small '
      'under the title', (tester) async {
    await show(tester);

    await tester.drag(find.text('Progress 3'), const Offset(0, -400));
    await tester.pumpAndSettle();

    expect(tabRowShows(tester), isFalse);
    expect(inBar('Profile'), findsOneWidget);
    expect(inBar('Progress'), findsOneWidget);
  });

  testWidgets('scrolled a little, the title stays alone', (tester) async {
    await show(tester);

    await tester.drag(find.text('Progress 3'), const Offset(0, -10));
    await tester.pumpAndSettle();

    expect(tabRowShows(tester), isTrue);
    expect(inBar('Progress'), findsNothing);
  });

  testWidgets('scrolled back up, the tabs come back and the title stands '
      'alone again', (tester) async {
    await show(tester);
    await tester.drag(find.text('Progress 3'), const Offset(0, -400));
    await tester.pumpAndSettle();

    await tester.drag(find.text('Progress 8'), const Offset(0, 2000));
    await tester.pumpAndSettle();

    expect(tabRowShows(tester), isTrue);
    expect(inBar('Progress'), findsNothing);
  });

  testWidgets('scrolled down far, a little back up brings the tabs back '
      "over the content, as Strava's do (the developer's review, 9 Nov "
      '2026)', (tester) async {
    await show(tester);
    await tester.drag(find.text('Progress 3'), const Offset(0, -1200));
    await tester.pumpAndSettle();
    expect(tabRowShows(tester), isFalse);

    await tester.drag(find.text('Progress 22'), const Offset(0, 120));
    await tester.pumpAndSettle();

    expect(tabRowShows(tester), isTrue);
    expect(inBar('Progress'), findsNothing);
    expect(
      find.text('Progress 0'),
      findsNothing,
      reason: 'the content stays where it was scrolled to',
    );

    await tester.drag(find.text('Progress 22'), const Offset(0, -200));
    await tester.pumpAndSettle();
    expect(tabRowShows(tester), isFalse, reason: 'and goes again down');
    expect(inBar('Progress'), findsOneWidget);
  });

  testWidgets("the chosen tab's name fades in under the title as the tabs "
      'go', (tester) async {
    await show(tester);
    await tester.drag(find.text('Progress 3'), const Offset(0, -400));
    // The row's frame, the title's, then midway through the fade.
    await tester.pump();
    await tester.pump();
    await tester.pump(const Duration(milliseconds: 80));

    final opacity = tester
        .widgetList<FadeTransition>(
          find.ancestor(
            of: inBar('Progress'),
            matching: find.byType(FadeTransition),
          ),
        )
        .map((fade) => fade.opacity.value)
        .reduce((a, b) => a * b);
    expect(opacity, inExclusiveRange(0, 1));

    await tester.pumpAndSettle();
    expect(inBar('Progress'), findsOneWidget);
  });

  testWidgets('the small name follows the tab swiped to', (tester) async {
    await show(tester);
    await tester.drag(find.text('Progress 3'), const Offset(0, -400));
    await tester.pumpAndSettle();

    await tester.fling(find.text('Progress 8'), const Offset(-300, 0), 1000);
    await tester.pumpAndSettle();

    expect(find.text('Day 0'), findsOneWidget);
    expect(inBar('Days'), findsOneWidget);
    expect(inBar('Progress'), findsNothing);
  });

  testWidgets('the folded title tapped brings the tabs back', (tester) async {
    await show(tester);
    await tester.drag(find.text('Progress 3'), const Offset(0, -400));
    await tester.pumpAndSettle();

    await tester.tap(inBar('Profile'));
    await tester.pumpAndSettle();

    expect(tabRowShows(tester), isTrue);
    expect(inBar('Progress'), findsNothing);
  });

  testWidgets('a tab tapped shows its content', (tester) async {
    await show(tester);

    await tester.tap(find.widgetWithText(Tab, 'Days'));
    await tester.pumpAndSettle();

    expect(find.text('Day 0'), findsOneWidget);
  });
}