ReelShort/test/home/app_bottom_nav_test.dart

// Author: fruit.com.cn

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:fruitshorts/core/theme/app_colors.dart';
import 'package:fruitshorts/core/theme/app_dimens.dart';
import 'package:fruitshorts/core/widgets/app_bottom_nav.dart';

void main() {
  test('should_use_exact_root_navigation_colors', () {
    expect(AppColors.navBackground, const Color(0xFF000000));
    expect(AppColors.navSelected, const Color(0xFFFFFFFF));
    expect(AppColors.navUnselected, const Color(0xFF8E8E93));
  });

  testWidgets('should_render_four_slots_with_white_selected_state', (
    tester,
  ) async {
    var theaterTaps = 0;
    const barKey = Key('nav-bar');
    await tester.pumpWidget(
      MaterialApp(
        home: Scaffold(
          bottomNavigationBar: AppBottomNav(
            barKey: barKey,
            items: [
              AppBottomNavItem(
                tabKey: const Key('tab-home'),
                icon: Icons.movie_outlined,
                selectedIcon: Icons.movie_rounded,
                label: 'Home',
                selected: true,
                onTap: () {},
              ),
              AppBottomNavItem(
                tabKey: const Key('tab-recommend'),
                icon: Icons.smart_display_outlined,
                selectedIcon: Icons.smart_display_rounded,
                label: 'Recommend',
                onTap: () => theaterTaps++,
              ),
              AppBottomNavItem(
                tabKey: const Key('tab-follow'),
                icon: Icons.bookmark_border_rounded,
                selectedIcon: Icons.bookmark_rounded,
                label: 'Following',
                onTap: () {},
              ),
              AppBottomNavItem(
                tabKey: const Key('tab-mine'),
                icon: Icons.person_outline_rounded,
                selectedIcon: Icons.person_rounded,
                label: 'Me',
                onTap: () {},
              ),
            ],
          ),
        ),
      ),
    );

    expect(find.byKey(const Key('tab-home')), findsOneWidget);
    expect(find.byKey(const Key('tab-recommend')), findsOneWidget);
    expect(find.byKey(const Key('tab-follow')), findsOneWidget);
    expect(find.byKey(const Key('tab-mine')), findsOneWidget);
    expect(find.byKey(const Key('nav-center-action')), findsNothing);
    expect(find.text('Home'), findsOneWidget);
    final selectedLabel = tester.widget<Text>(find.text('Home'));
    expect(selectedLabel.style?.color, AppColors.navSelected);
    expect(selectedLabel.style?.fontWeight, FontWeight.w600);
    expect(selectedLabel.style?.fontSize, AppDimens.navLabel);
    expect(selectedLabel.style?.letterSpacing, 0);
    final unselectedLabel = tester.widget<Text>(find.text('Recommend'));
    expect(unselectedLabel.style?.color, AppColors.navUnselected);
    expect(unselectedLabel.style?.fontWeight, FontWeight.w400);
    final centers = [
      Key('tab-home'),
      Key('tab-recommend'),
      Key('tab-follow'),
      Key('tab-mine'),
    ].map((key) => tester.getCenter(find.byKey(key)).dx).toList();
    expect(centers, orderedEquals(centers.toList()..sort()));
    final widths = [
      Key('tab-home'),
      Key('tab-recommend'),
      Key('tab-follow'),
      Key('tab-mine'),
    ].map((key) => tester.getSize(find.byKey(key)).width).toList();
    expect(widths.toSet(), hasLength(1));
    expect(
      tester.getSize(find.byType(AppBottomNav)).height,
      AppDimens.navHeight,
    );
    final bar = tester.widget<Container>(find.byKey(barKey));
    expect(bar.color, AppColors.navBackground);
    expect(bar.decoration, isNull);
    final selectedIcon = tester.widget<Icon>(
      find.descendant(
        of: find.byKey(const Key('tab-home')),
        matching: find.byIcon(Icons.movie_rounded),
      ),
    );
    expect(selectedIcon.color, AppColors.navSelected);
    expect(
      tester.getSize(find.byIcon(Icons.movie_rounded)),
      const Size(26, 26),
    );
    expect(
      tester.getTopLeft(find.text('Home')).dy -
          tester.getBottomLeft(find.byIcon(Icons.movie_rounded)).dy,
      AppDimens.navLabelGap,
    );
    await tester.tap(find.byKey(const Key('tab-recommend')));
    expect(theaterTaps, 1);
  });

  testWidgets('should_fill_dark_bottom_safe_area_with_black_background', (
    tester,
  ) async {
    const barKey = Key('dark-nav-bar');
    await tester.pumpWidget(
      MaterialApp(
        home: MediaQuery(
          data: const MediaQueryData(padding: EdgeInsets.only(bottom: 34)),
          child: Scaffold(
            bottomNavigationBar: AppBottomNav(
              barKey: barKey,
              items: [
                AppBottomNavItem(
                  tabKey: const Key('tab-home'),
                  icon: Icons.movie_outlined,
                  selectedIcon: Icons.movie_rounded,
                  label: 'Home',
                  selected: true,
                  onTap: () {},
                ),
                AppBottomNavItem(
                  tabKey: const Key('tab-recommend'),
                  icon: Icons.smart_display_outlined,
                  selectedIcon: Icons.smart_display_rounded,
                  label: 'Recommend',
                  onTap: () {},
                ),
                AppBottomNavItem(
                  tabKey: const Key('tab-follow'),
                  icon: Icons.bookmark_border_rounded,
                  selectedIcon: Icons.bookmark_rounded,
                  label: 'Following',
                  onTap: () {},
                ),
                AppBottomNavItem(
                  tabKey: const Key('tab-mine'),
                  icon: Icons.person_outline_rounded,
                  selectedIcon: Icons.person_rounded,
                  label: 'Me',
                  onTap: () {},
                ),
              ],
            ),
          ),
        ),
      ),
    );

    expect(
      tester.getSize(find.byType(AppBottomNav)).height,
      AppDimens.navHeight + 34,
    );
    expect(tester.getSize(find.byKey(barKey)).height, AppDimens.navHeight);

    expect(
      find.descendant(
        of: find.byType(AppBottomNav),
        matching: find.byWidgetPredicate(
          (widget) =>
              widget is ColoredBox && widget.color == AppColors.navBackground,
        ),
      ),
      findsWidgets,
    );
  });
}