doormile_milderapp/test/done_handoff_test.dart

import 'package:flutter/material.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_test/flutter_test.dart';

import 'package:miler/views/Dashboard/pickups/pickups.dart';
import 'package:miler/views/helpers/constants/Colorconstants.dart';
import 'package:miler/views/helpers/widgets/app_widgets.dart';

/// ── The handoff screen ranks by type, not by boxes ──
///
/// Every group on this screen used to be a bordered, filled, rounded rectangle:
/// a green result banner, a shadowed hero card, a bordered list card with a
/// bordered pill inside it and a filled badge inside that. Four containers and a
/// shadow, down a page holding about forty words.
///
/// The cost was not ugliness, it was ranking. A border says "this is separate
/// from its neighbours"; give that to all four groups and none of them is
/// emphasised, so the rider's eye lands on whichever box is biggest rather than
/// on the one fact he opened the screen for — where he is going next.
///
/// The redesign carries rank with type size, colour weight and whitespace, and
/// spends its one border on the single change of subject. These tests pin that,
/// because a comment asking for restraint does not survive the next redesign.
void main() {
  Map<String, dynamic> stop(
    String id,
    String name,
    String address, {
    required String type,
    String kms = '',
  }) => {
    'orderid': id,
    'type': type,
    'pickupcustomer': name,
    'pickupaddress': address,
    'kms': kms,
    'orderstatus': 'accepted',
  };

  final route = [
    stop(
      '1',
      'Sundar Textiles',
      '78, Cross Cut Road, Gandhipuram, Coimbatore',
      type: 'combined',
      kms: '2.4',
    ),
    stop(
      '2',
      'Green Leaf Grocers',
      '29, Kovaipudur Main Road, Coimbatore',
      type: 'delivery',
    ),
    stop(
      '3',
      'Ganesh Traders',
      '134, Avinashi Road, Hope College, Coimbatore',
      type: 'pickup',
    ),
  ];

  Future<void> pumpDone(WidgetTester tester, {double topInset = 24}) async {
    tester.view.physicalSize = const Size(390 * 3, 844 * 3);
    tester.view.devicePixelRatio = 3.0;
    tester.view.padding = FakeViewPadding(top: topInset * 3, bottom: 16 * 3);
    addTearDown(tester.view.reset);

    await tester.pumpWidget(
      ScreenUtilInit(
        designSize: const Size(390, 844),
        minTextAdapt: true,
        builder: (_, _) => MaterialApp(
          home: PickupsDone(isDelivery: true, remainingOrders: route),
        ),
      ),
    );
    // Past the 200ms entrance delay and the 800ms controller.
    await tester.pump(const Duration(milliseconds: 300));
    await tester.pump(const Duration(milliseconds: 900));
  }

  double sizeOf(WidgetTester tester, String text) =>
      tester.widget<Text>(find.text(text)).style!.fontSize!;

  testWidgets('the next stop is the largest thing on the screen', (
    tester,
  ) async {
    await pumpDone(tester);

    final hero = sizeOf(tester, 'Sundar Textiles');

    // Against everything else the screen says.
    expect(hero, greaterThan(sizeOf(tester, 'NEXT STOP')));
    expect(
      hero,
      greaterThan(
        sizeOf(tester, '78, Cross Cut Road, Gandhipuram, Coimbatore'),
      ),
    );
    expect(hero, greaterThan(sizeOf(tester, 'Green Leaf Grocers')));
    expect(hero, greaterThan(sizeOf(tester, 'Delivered  ·  3 stops left')));

    // And by a margin wide enough to be seen rather than measured: the point is
    // that the rider lands on it first, not that it happens to be a point
    // bigger than the row beneath it.
    expect(hero / sizeOf(tester, 'Green Leaf Grocers'), greaterThan(1.6));
  });

  // ── Finished work confirms, and then gets out of the way ──
  //
  // The status line was 12.5sp grey with a 16sp tick — the same treatment as
  // every other caption on the screen, so the one line confirming the act the
  // rider had just performed read as metadata about it. He does need to
  // confirm it registered; that is the entire reason the line exists.
  //
  // It is a tinted capsule now, in its semantic colour — the app's own state
  // vocabulary, shared with the route chips and the confirm sheet. What has NOT
  // changed is the ranking this test was really protecting: the capsule is
  // short and set at 13.5sp, and the next stop underneath is 28sp near-black.
  testWidgets('finished work confirms without out-ranking the next stop', (
    tester,
  ) async {
    await pumpDone(tester);

    final status = tester.widget<Text>(find.text('Delivered  ·  3 stops left'));
    expect(status.style!.color, ColorConstants.acceptGreen);
    expect(status.style!.fontSize, lessThan(16));

    final tick = tester.widget<Icon>(
      find.byIcon(LucideIcons.circleCheck).first,
    );
    expect(tick.color, ColorConstants.acceptGreen);

    // The live destination is still the thing the eye lands on: near-black, and
    // twice the size of the confirmation above it.
    final next = tester.widget<Text>(find.text('Sundar Textiles'));
    expect(next.style!.color, ColorConstants.slateText);
    expect(next.style!.fontSize, greaterThan(status.style!.fontSize! * 1.8));
  });

  testWidgets('nothing in the body is boxed', (tester) async {
    await pumpDone(tester);

    // Every decorated shape inside the scrolling content — the type dot, the
    // numbered circles, the one hairline. None of them may carry a border or a
    // shadow, which is what turns a mark into a card.
    final decorations = tester
        .widgetList<Container>(
          find.descendant(
            of: find.byType(SingleChildScrollView),
            matching: find.byType(Container),
          ),
        )
        .map((c) => c.decoration)
        .whereType<BoxDecoration>();

    expect(decorations, isNotEmpty, reason: 'sanity: the dots are Containers');
    for (final d in decorations) {
      expect(d.border, isNull);
      expect(d.boxShadow ?? const [], isEmpty);
    }
  });

  testWidgets('the upcoming stops are one list, not a card each', (
    tester,
  ) async {
    await pumpDone(tester);

    expect(find.text('UP NEXT  ·  2 STOPS'), findsOneWidget);

    // Both rows present, numbered from their position on the route, each one
    // tappable straight into that stop.
    for (final row in const ['Green Leaf Grocers', 'Ganesh Traders']) {
      expect(find.text(row), findsOneWidget);
      expect(
        find.ancestor(of: find.text(row), matching: find.byType(InkWell)),
        findsOneWidget,
      );
    }
    expect(find.text('2'), findsOneWidget);
    expect(find.text('3'), findsOneWidget);
    expect(find.byIcon(LucideIcons.chevronRight), findsNWidgets(2));
  });

  testWidgets('the stop type is a label, not a filled badge', (tester) async {
    await pumpDone(tester);

    // Sentence case and in the accent, under the address — not an all-caps
    // chip floated above the name it is an attribute of.
    final label = tester.widget<Text>(find.text('Pickup & Delivery'));
    expect(label.style!.color, ColorConstants.combinedAccent);
    expect(label.style!.fontSize, lessThan(sizeOf(tester, 'Sundar Textiles')));
    expect(find.text('PICKUP & DELIVERY'), findsNothing);
  });

  testWidgets('the page has a top edge of its own', (tester) async {
    // This screen carries no app bar — there is nowhere to go back to, so there
    // is nothing for one to hold. `SafeArea` alone only clears the status bar,
    // which left the first line of the page sitting hard under the clock while
    // every screen in the app that *does* have a bar starts its content around
    // 90pt down. The handoff read as the one page missing its header rather
    // than as the one page that does not need one.
    for (final inset in const [24.0, 47.0]) {
      await pumpDone(tester, topInset: inset);
      final status = tester.getRect(find.text('Delivered  ·  3 stops left'));
      expect(
        status.top - inset,
        greaterThan(28.0),
        reason: 'needs a real margin below the safe area, not just the inset',
      );
    }
  });

  testWidgets('the status line belongs to the top, not to the hero', (
    tester,
  ) async {
    await pumpDone(tester);

    // Asymmetric on purpose. Equal gaps above and below left the completion
    // line hanging between the top edge and the destination, belonging to
    // neither; tighter above groups it with the top of the page, which is what
    // it is — a footnote on the stop the rider just left.
    final status = tester.getRect(find.text('Delivered  ·  3 stops left'));
    final eyebrow = tester.getRect(find.text('NEXT STOP'));
    final above = status.top - 24.0;
    final below = eyebrow.top - status.bottom;
    expect(below, greaterThan(above));
  });

  testWidgets('the CTA is pinned, green and thumb-sized', (tester) async {
    await pumpDone(tester);

    expect(find.text('Move to next stop'), findsOneWidget);

    final button = tester.widget<MilerButton>(find.byType(MilerButton));
    expect(button.color, ColorConstants.acceptGreen);
    expect(button.height, greaterThanOrEqualTo(56.0));

    // Sitting on the bottom edge, below the scrolling content.
    final cta = tester.getRect(find.byType(MilerButton));
    final body = tester.getRect(find.byType(SingleChildScrollView));
    expect(cta.top, greaterThanOrEqualTo(body.bottom));
    expect(cta.bottom, lessThanOrEqualTo(844.0));
  });
}