motorsignal
/
MotorSignal-App
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: unify routes and maps experience

This commit is contained in:
Developer 2026-09-05 03:44:51 -04:00
parent d9502487d1
commit ce6641102d
5 changed files with 1958 additions and 1128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

417
lib/features/map/map_screen.dart
View File

@ -4,6 +4,8 @@ import 'package:drift/drift.dart' as drift;
import 'package:geolocator/geolocator.dart';
import 'package:intl/intl.dart';
import '../../database/database.dart';
import '../../core/responsive/responsive_layout.dart';
import '../../core/theme/theme_extensions.dart';
import '../../services/location_service.dart';
import '../../services/map/map_provider_interface.dart';
import '../../services/map/map_providers.dart';
@ -505,121 +507,326 @@ class _MapScreenState extends ConsumerState<MapScreen> {
@override
Widget build(BuildContext context) {
if (_isLoadingHistory) return const Scaffold(body: Center(child: CircularProgressIndicator()));
if (_isLoadingHistory) {
return const Scaffold(body: Center(child: CircularProgressIndicator()));
}
final activeProviderType = ref.watch(mapProviderTypeNotifierProvider);
final isFollowMode = ref.watch(mapFollowStateProvider);
final isLandscape = MediaQuery.of(context).orientation == Orientation.landscape;
final colors = context.motorColors;
final theme = Theme.of(context);
if (widget.rideId != null) {
final polylines = _buildPolylines();
return Scaffold(
appBar: AppBar(
title: Text('Ride #${widget.rideId} Multi-Layer Map'),
actions: [IconButton(
tooltip: 'Switch Map Provider',
icon: Icon(activeProviderType == AppMapType.openStreetMap ? Icons.map : Icons.map_outlined),
onPressed: () {
final nextType = activeProviderType == AppMapType.openStreetMap ? AppMapType.googleMaps : AppMapType.openStreetMap;
ref.read(mapProviderTypeNotifierProvider.notifier).setMapProviderType(nextType);
},
)],
),
body: LayoutBuilder(builder: (context, constraints) => Stack(fit: StackFit.expand, children: [
Positioned.fill(child: SizedBox(
width: constraints.maxWidth, height: constraints.maxHeight,
child: UnifiedMapView(
key: ValueKey('preview_map_${constraints.maxWidth.toInt()}x${constraints.maxHeight.toInt()}'),
center: _initialCenter ?? _fallbackLocation, zoom: 15.0,
polylines: polylines, markers: _getFilteredMarkers(),
return ResponsiveLayout(
builder: (context, responsive) {
final isShortLandscape = responsive.isLandscape && responsive.height < 450;
if (widget.rideId != null) {
final polylines = _buildPolylines();
return Scaffold(
appBar: AppBar(
title: Text('Ride #${widget.rideId} Multi-Layer Map'),
actions: [
IconButton(
tooltip: 'Switch Map Provider',
icon: Icon(
activeProviderType == AppMapType.openStreetMap
? Icons.map
: Icons.map_outlined,
),
onPressed: () {
final nextType =
activeProviderType == AppMapType.openStreetMap
? AppMapType.googleMaps
: AppMapType.openStreetMap;
ref
.read(mapProviderTypeNotifierProvider.notifier)
.setMapProviderType(nextType);
},
),
],
),
)),
if (_routePoints.isNotEmpty) _buildMultiLayerFilterOverlay(),
if (_showSpeedHeatmap) _buildSpeedLegend(),
if (_routePoints.isEmpty) Positioned(top: 16, left: 20, right: 20, child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(color: const Color(0xFF0D0D0D).withValues(alpha: 0.9), borderRadius: BorderRadius.circular(12), border: Border.all(color: const Color(0xFF00E5FF).withValues(alpha: 0.4))),
child: const Row(children: [Icon(Icons.info_outline, color: Color(0xFF00E5FF), size: 20), SizedBox(width: 10), Expanded(child: Text('No GPS breadcrumbs were recorded during this test session.', style: TextStyle(color: Colors.white70, fontSize: 12, fontFamily: 'Inter')))]),
)),
])),
);
}
body: Stack(
fit: StackFit.expand,
children: [
Positioned.fill(
child: UnifiedMapView(
key: ValueKey('preview_map_${widget.rideId}'),
center: _initialCenter ?? _fallbackLocation,
zoom: 15.0,
polylines: polylines,
markers: _getFilteredMarkers(),
),
),
if (_routePoints.isNotEmpty) _buildMultiLayerFilterOverlay(colors),
if (_showSpeedHeatmap) _buildSpeedLegend(colors),
if (_routePoints.isEmpty)
Positioned(
top: 16,
left: 20,
right: 20,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
decoration: BoxDecoration(
color: colors.surfaceContainer.withValues(alpha: 0.95),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: colors.cyberCyan.withValues(alpha: 0.4),
),
),
child: Row(
children: [
Icon(
Icons.info_outline,
color: colors.cyberCyan,
size: 20,
),
const SizedBox(width: 10),
Expanded(
child: Text(
'No GPS breadcrumbs were recorded during this test session.',
style: TextStyle(
color: theme.colorScheme.onSurface.withValues(alpha: 0.7),
fontSize: 12,
fontFamily: 'Inter',
),
),
),
],
),
),
),
],
),
);
}
final locationAsync = ref.watch(locationStreamProvider);
final liveAlertsAsync = ref.watch(activeAlertsStreamProvider);
final currentPos = locationAsync.when(data: (pos) => AppLatLng(pos.latitude, pos.longitude), error: (_, _) => _fallbackLocation, loading: () => _fallbackLocation);
final currentHeading = locationAsync.when(data: (pos) => pos.heading, error: (_, _) => 0.0, loading: () => 0.0);
final motorcycleMarker = AppMapMarker(id: 'motorcycle_live', position: currentPos, heading: currentHeading, iconWidget: const Icon(Icons.navigation, color: Colors.cyanAccent, size: 40));
final List<AppMapMarker> mapMarkers = [motorcycleMarker];
final liveAlerts = liveAlertsAsync.value ?? [];
for (var alert in liveAlerts) {
mapMarkers.add(AppMapMarker(
id: 'alert_${alert.providerId}_${alert.id}', position: AppLatLng(alert.latitude, alert.longitude), heading: alert.heading ?? 0.0, label: alert.category.displayName,
iconWidget: Container(padding: const EdgeInsets.all(6), decoration: BoxDecoration(color: alert.category.color.withValues(alpha: 0.9), shape: BoxShape.circle, boxShadow: const [BoxShadow(color: Colors.black54, blurRadius: 4)]), child: Icon(alert.category.icon, color: Colors.black, size: 22)),
onTap: () => _showRoadAlertDetails(alert),
));
}
return Scaffold(
extendBodyBehindAppBar: isLandscape,
appBar: AppBar(
title: const Text('Live Map'), backgroundColor: isLandscape ? Colors.black.withValues(alpha: 0.6) : null, elevation: isLandscape ? 0 : null,
actions: [PopupMenuButton<AppMapType>(
icon: const Icon(Icons.layers),
onSelected: (type) => ref.read(mapProviderTypeNotifierProvider.notifier).setMapProviderType(type),
itemBuilder: (context) => const [
PopupMenuItem(value: AppMapType.openStreetMap, child: Text('OpenStreetMap / Tactical (Primary)')),
PopupMenuItem(value: AppMapType.googleMaps, child: Text('Google Maps')),
],
)],
),
body: LayoutBuilder(builder: (context, constraints) => Stack(fit: StackFit.expand, children: [
Positioned.fill(child: SizedBox(width: constraints.maxWidth, height: constraints.maxHeight, child: UnifiedMapView(
key: ValueKey('live_map_${constraints.maxWidth.toInt()}x${constraints.maxHeight.toInt()}'), center: currentPos, zoom: 17.0, markers: mapMarkers,
))),
if (!isFollowMode) Positioned(bottom: 24, right: 24, child: FloatingActionButton.extended(
backgroundColor: Colors.cyanAccent, foregroundColor: Colors.black, icon: const Icon(Icons.my_location), label: const Text('RECENTER', style: TextStyle(fontWeight: FontWeight.bold)),
onPressed: () => ref.read(mapFollowStateProvider.notifier).recenter(),
)),
])),
final locationAsync = ref.watch(locationStreamProvider);
final liveAlertsAsync = ref.watch(activeAlertsStreamProvider);
final currentPos = locationAsync.when(
data: (pos) => AppLatLng(pos.latitude, pos.longitude),
error: (_, _) => _fallbackLocation,
loading: () => _fallbackLocation,
);
final currentHeading = locationAsync.when(
data: (pos) => pos.heading,
error: (_, _) => 0.0,
loading: () => 0.0,
);
final motorcycleMarker = AppMapMarker(
id: 'motorcycle_live',
position: currentPos,
heading: currentHeading,
iconWidget: Icon(
Icons.navigation,
color: colors.cyberCyan,
size: 40,
),
);
final List<AppMapMarker> mapMarkers = [motorcycleMarker];
final liveAlerts = liveAlertsAsync.value ?? [];
for (var alert in liveAlerts) {
mapMarkers.add(
AppMapMarker(
id: 'alert_${alert.providerId}_${alert.id}',
position: AppLatLng(alert.latitude, alert.longitude),
heading: alert.heading ?? 0.0,
label: alert.category.displayName,
iconWidget: Container(
padding: const EdgeInsets.all(6),
decoration: BoxDecoration(
color: alert.category.color.withValues(alpha: 0.9),
shape: BoxShape.circle,
boxShadow: const [
BoxShadow(color: Colors.black54, blurRadius: 4),
],
),
child: Icon(
alert.category.icon,
color: Colors.black,
size: 22,
),
),
onTap: () => _showRoadAlertDetails(alert),
),
);
}
return Scaffold(
extendBodyBehindAppBar: isShortLandscape,
appBar: AppBar(
title: const Text('Live Map'),
backgroundColor: isShortLandscape
? colors.surfaceContainer.withValues(alpha: 0.75)
: null,
elevation: isShortLandscape ? 0 : null,
actions: [
PopupMenuButton<AppMapType>(
icon: const Icon(Icons.layers),
onSelected: (type) => ref
.read(mapProviderTypeNotifierProvider.notifier)
.setMapProviderType(type),
itemBuilder: (context) => const [
PopupMenuItem(
value: AppMapType.openStreetMap,
child: Text('OpenStreetMap / Tactical (Primary)'),
),
PopupMenuItem(
value: AppMapType.googleMaps,
child: Text('Google Maps'),
),
],
),
],
),
body: Stack(
fit: StackFit.expand,
children: [
Positioned.fill(
child: UnifiedMapView(
key: const ValueKey('live_map_view'),
center: currentPos,
zoom: 17.0,
markers: mapMarkers,
),
),
if (!isFollowMode)
Positioned(
bottom: 24,
right: 24,
child: FloatingActionButton.extended(
backgroundColor: colors.cyberCyan,
foregroundColor: Colors.black,
icon: const Icon(Icons.my_location),
label: const Text(
'RECENTER',
style: TextStyle(fontWeight: FontWeight.bold),
),
onPressed: () =>
ref.read(mapFollowStateProvider.notifier).recenter(),
),
),
],
),
);
},
);
}
Widget _buildMultiLayerFilterOverlay() {
return Positioned(top: 10, left: 10, right: 10, child: Card(
color: Colors.black.withValues(alpha: 0.8), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12), side: const BorderSide(color: Color(0xFF1F1F1F))),
child: Padding(padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), child: SingleChildScrollView(scrollDirection: Axis.horizontal, child: Row(children: [
FilterChip(label: const Text('Route'), selected: _showRoute, onSelected: (v) => setState(() => _showRoute = v), selectedColor: const Color(0xFF00E5FF).withValues(alpha: 0.35)),
const SizedBox(width: 6),
FilterChip(label: const Text('Speed'), selected: _showSpeedHeatmap, onSelected: (v) => setState(() => _showSpeedHeatmap = v), selectedColor: const Color(0xFFE040FB).withValues(alpha: 0.35)),
const SizedBox(width: 6),
FilterChip(label: const Text('Accel'), selected: _showHardAccel, onSelected: (v) => setState(() => _showHardAccel = v), selectedColor: const Color(0xFF76FF03).withValues(alpha: 0.35)),
const SizedBox(width: 6),
FilterChip(label: const Text('Braking'), selected: _showHardBraking, onSelected: (v) => setState(() => _showHardBraking = v), selectedColor: const Color(0xFFFF5252).withValues(alpha: 0.35)),
const SizedBox(width: 6),
FilterChip(label: const Text('Cornering'), selected: _showCornering, onSelected: (v) => setState(() => _showCornering = v), selectedColor: const Color(0xFF00E5FF).withValues(alpha: 0.35)),
]))),
));
Widget _buildMultiLayerFilterOverlay(MotorSignalThemeColors colors) {
return Positioned(
top: 10,
left: 10,
right: 10,
child: Card(
color: colors.surfaceContainer.withValues(alpha: 0.85),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: BorderSide(color: colors.outlineVariant),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
FilterChip(
label: const Text('Route'),
selected: _showRoute,
onSelected: (v) => setState(() => _showRoute = v),
selectedColor: colors.cyberCyan.withValues(alpha: 0.35),
),
const SizedBox(width: 6),
FilterChip(
label: const Text('Speed'),
selected: _showSpeedHeatmap,
onSelected: (v) => setState(() => _showSpeedHeatmap = v),
selectedColor: const Color(0xFFE040FB).withValues(alpha: 0.35),
),
const SizedBox(width: 6),
FilterChip(
label: const Text('Accel'),
selected: _showHardAccel,
onSelected: (v) => setState(() => _showHardAccel = v),
selectedColor: colors.launchGreen.withValues(alpha: 0.35),
),
const SizedBox(width: 6),
FilterChip(
label: const Text('Braking'),
selected: _showHardBraking,
onSelected: (v) => setState(() => _showHardBraking = v),
selectedColor: colors.raceRed.withValues(alpha: 0.35),
),
const SizedBox(width: 6),
FilterChip(
label: const Text('Cornering'),
selected: _showCornering,
onSelected: (v) => setState(() => _showCornering = v),
selectedColor: colors.cyberCyan.withValues(alpha: 0.35),
),
],
),
),
),
),
);
}
Widget _buildSpeedLegend() => Positioned(bottom: 20, left: 14, child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
decoration: BoxDecoration(color: Colors.black.withValues(alpha: 0.85), borderRadius: BorderRadius.circular(8), border: Border.all(color: const Color(0xFF222222))),
child: Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
const Text('SPEED RANGES (MPH)', style: TextStyle(fontFamily: 'JetBrains Mono', fontSize: 8.5, fontWeight: FontWeight.bold, color: Colors.white70)),
const SizedBox(height: 4),
_buildLegendItem('0–25', const Color(0xFF00E5FF)),
_buildLegendItem('25–50', const Color(0xFF2979FF)),
_buildLegendItem('50–75', const Color(0xFFFFD600)),
_buildLegendItem('75–100', const Color(0xFFFF6D00)),
_buildLegendItem('100+', const Color(0xFFE040FB)),
]),
));
Widget _buildSpeedLegend(MotorSignalThemeColors colors) => Positioned(
bottom: 20,
left: 14,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
decoration: BoxDecoration(
color: colors.surfaceContainer.withValues(alpha: 0.9),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: colors.outlineVariant),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'SPEED RANGES (MPH)',
style: TextStyle(
fontFamily: 'JetBrains Mono',
fontSize: 8.5,
fontWeight: FontWeight.bold,
color: colors.cyberCyan,
),
),
const SizedBox(height: 4),
_buildLegendItem('0–25', const Color(0xFF00E5FF)),
_buildLegendItem('25–50', const Color(0xFF2979FF)),
_buildLegendItem('50–75', const Color(0xFFFFD600)),
_buildLegendItem('75–100', const Color(0xFFFF6D00)),
_buildLegendItem('100+', const Color(0xFFE040FB)),
],
),
),
);
Widget _buildLegendItem(String label, Color color) => Padding(
padding: const EdgeInsets.symmetric(vertical: 1.5),
child: Row(mainAxisSize: MainAxisSize.min, children: [
Container(width: 10, height: 10, decoration: BoxDecoration(color: color, shape: BoxShape.circle)),
const SizedBox(width: 6),
Text(label, style: const TextStyle(fontFamily: 'JetBrains Mono', fontSize: 9, color: Colors.white)),
]),
);
padding: const EdgeInsets.symmetric(vertical: 1.5),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 10,
height: 10,
decoration: BoxDecoration(color: color, shape: BoxShape.circle),
),
const SizedBox(width: 6),
Text(
label,
style: const TextStyle(
fontFamily: 'JetBrains Mono',
fontSize: 9,
fontWeight: FontWeight.w600,
),
),
],
),
);
}

1009
lib/features/routes/route_detail_screen.dart
View File

File diff suppressed because it is too large Load Diff

1346
lib/features/routes/route_planner_screen.dart
View File

File diff suppressed because it is too large Load Diff

16
lib/services/routes/navigation_handoff.dart
View File

@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import '../../core/theme/theme_extensions.dart';
import 'route_models.dart';
/// Target navigation application for handoff.
@ -67,9 +68,10 @@ class NavigationHandoffService {
required double longitude,
required String displayName,
}) {
final colors = context.motorColors;
showModalBottomSheet(
context: context,
backgroundColor: const Color(0xFF1B1E26),
backgroundColor: colors.surfaceContainer,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
),
@ -83,9 +85,9 @@ class NavigationHandoffService {
children: [
Row(
children: [
const Icon(
Icon(
Icons.navigation,
color: Color(0xFF00E5FF),
color: colors.cyberCyan,
size: 22,
),
const SizedBox(width: 12),
@ -93,13 +95,13 @@ class NavigationHandoffService {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
Text(
'NAVIGATION HANDOFF',
style: TextStyle(
fontSize: 11,
letterSpacing: 1.2,
fontWeight: FontWeight.w700,
color: Color(0xFF00E5FF),
color: colors.cyberCyan,
),
),
const SizedBox(height: 2),
@ -169,9 +171,9 @@ class NavigationHandoffService {
color: Colors.white10,
borderRadius: BorderRadius.circular(8),
),
child: const Icon(
child: Icon(
Icons.directions_car,
color: Color(0xFF00E5FF),
color: colors.cyberCyan,
),
),
title: const Text(

298
test/canonical_routes_maps_responsive_test.dart Normal file
View File

@ -0,0 +1,298 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:motorcycle_dash/core/theme/theme_extensions.dart';
import 'package:motorcycle_dash/features/map/map_screen.dart';
import 'package:motorcycle_dash/features/routes/route_detail_screen.dart';
import 'package:motorcycle_dash/features/routes/route_planner_screen.dart';
import 'package:motorcycle_dash/services/auth/auth_providers.dart';
import 'package:motorcycle_dash/services/auth/auth_user.dart';
import 'package:motorcycle_dash/services/entitlements/entitlement_providers.dart';
import 'package:motorcycle_dash/services/map/unified_map_view.dart';
import 'package:motorcycle_dash/services/routes/navigation_handoff.dart';
import 'package:motorcycle_dash/services/routes/route_models.dart';
import 'package:motorcycle_dash/services/routes/route_providers.dart';
const List<Size> testViewports = [
Size(320, 640),
Size(360, 800),
Size(390, 844),
Size(412, 915),
Size(640, 320),
Size(800, 360),
Size(844, 390),
Size(768, 1024),
Size(1024, 768),
];
MotorSignalRoute createSampleRoute({
String id = 'sample-route-1',
String title = 'Skyline Ridge Cruise',
String description = 'Scenic ridge route with twisties',
String ownerUid = 'alice',
RouteVisibility visibility = RouteVisibility.public,
String? attachedGroupRideId,
}) {
return MotorSignalRoute(
id: id,
title: title,
description: description,
ownerUid: ownerUid,
createdAt: DateTime(2026, 1, 1),
updatedAt: DateTime(2026, 1, 2),
visibility: visibility,
attachedGroupRideId: attachedGroupRideId,
stops: const [
RouteStop(
id: 'stop-1',
orderIndex: 0,
latitude: 37.3861,
longitude: -122.2641,
displayName: 'Alice\'s Restaurant',
stopType: RouteStopType.start,
notes: 'Meet at 9:00 AM',
),
RouteStop(
id: 'stop-2',
orderIndex: 1,
latitude: 37.3200,
longitude: -122.2100,
displayName: 'Skyline Vista Point',
stopType: RouteStopType.scenic,
notes: 'Quick photo stop',
),
RouteStop(
id: 'stop-3',
orderIndex: 2,
latitude: 37.2500,
longitude: -122.1800,
displayName: 'Summit Overlook',
stopType: RouteStopType.destination,
notes: 'Final regroup',
),
],
);
}
void main() {
group('UI-2E MapScreen Responsive Matrix', () {
for (final size in testViewports) {
testWidgets('MapScreen live mode renders cleanly at ${size.width}x${size.height}', (tester) async {
await tester.binding.setSurfaceSize(size);
await tester.pumpWidget(
ProviderScope(
overrides: [
currentUserProvider.overrideWith((ref) => const AuthUser(uid: 'alice', isAnonymous: false)),
isProSubscriberProvider.overrideWith((ref) => false),
],
child: MaterialApp(
theme: ThemeData.dark().copyWith(
extensions: [MotorSignalThemeColors.dark],
),
home: const MapScreen(),
),
),
);
await tester.pumpAndSettle();
expect(find.text('Live Map'), findsOneWidget);
expect(find.byType(UnifiedMapView), findsOneWidget);
expect(tester.takeException(), isNull);
});
}
});
group('UI-2E RoutePlannerScreen Responsive Matrix', () {
for (final size in testViewports) {
testWidgets('RoutePlannerScreen renders without overflow at ${size.width}x${size.height}', (tester) async {
await tester.binding.setSurfaceSize(size);
await tester.pumpWidget(
ProviderScope(
overrides: [
currentUserProvider.overrideWith((ref) => const AuthUser(uid: 'alice', isAnonymous: false)),
isProSubscriberProvider.overrideWith((ref) => false),
],
child: MaterialApp(
theme: ThemeData.dark().copyWith(
extensions: [MotorSignalThemeColors.dark],
),
home: const RoutePlannerScreen(),
),
),
);
await tester.pumpAndSettle();
expect(find.text('ROUTE PLANNER'), findsOneWidget);
expect(find.byKey(const ValueKey('route_planner_save_button')), findsOneWidget);
expect(find.byKey(const ValueKey('route_planner_add_stop_button')), findsOneWidget);
expect(find.byKey(const ValueKey('route_planner_current_gps_button')), findsOneWidget);
expect(tester.takeException(), isNull);
});
}
testWidgets('RoutePlannerScreen handles adding stops and reversing', (tester) async {
await tester.binding.setSurfaceSize(const Size(412, 915));
await tester.pumpWidget(
ProviderScope(
overrides: [
currentUserProvider.overrideWith((ref) => const AuthUser(uid: 'alice', isAnonymous: false)),
isProSubscriberProvider.overrideWith((ref) => false),
],
child: MaterialApp(
theme: ThemeData.dark().copyWith(
extensions: [MotorSignalThemeColors.dark],
),
home: const RoutePlannerScreen(),
),
),
);
await tester.pumpAndSettle();
// Add stop 1
await tester.tap(find.byKey(const ValueKey('route_planner_add_stop_button')));
await tester.pumpAndSettle();
var fields = find.descendant(of: find.byType(AlertDialog), matching: find.byType(TextField));
await tester.enterText(fields.at(0), 'Start Point');
await tester.enterText(fields.at(1), '37.3861');
await tester.enterText(fields.at(2), '-122.2641');
await tester.tap(find.text('ADD'));
await tester.pumpAndSettle();
// Add stop 2
await tester.tap(find.byKey(const ValueKey('route_planner_add_stop_button')));
await tester.pumpAndSettle();
fields = find.descendant(of: find.byType(AlertDialog), matching: find.byType(TextField));
await tester.enterText(fields.at(0), 'End Point');
await tester.enterText(fields.at(1), '37.2500');
await tester.enterText(fields.at(2), '-122.1800');
await tester.tap(find.text('ADD'));
await tester.pumpAndSettle();
expect(find.text('Start Point'), findsOneWidget);
expect(find.text('End Point'), findsOneWidget);
expect(find.text('2/25 STOPS'), findsOneWidget);
expect(find.byKey(const ValueKey('route_planner_reverse_button')), findsOneWidget);
// Reverse stops
await tester.tap(find.byKey(const ValueKey('route_planner_reverse_button')));
await tester.pumpAndSettle();
expect(find.text('Start Point'), findsOneWidget);
expect(find.text('End Point'), findsOneWidget);
expect(tester.takeException(), isNull);
});
testWidgets('RoutePlannerScreen wide layout renders split-pane', (tester) async {
await tester.binding.setSurfaceSize(const Size(1024, 768));
await tester.pumpWidget(
ProviderScope(
overrides: [
currentUserProvider.overrideWith((ref) => const AuthUser(uid: 'alice', isAnonymous: false)),
isProSubscriberProvider.overrideWith((ref) => false),
],
child: MaterialApp(
theme: ThemeData.dark().copyWith(
extensions: [MotorSignalThemeColors.dark],
),
home: const RoutePlannerScreen(),
),
),
);
await tester.pumpAndSettle();
expect(find.byKey(const ValueKey('route_planner_map_expanded')), findsOneWidget);
expect(find.byKey(const ValueKey('route_planner_save_button')), findsOneWidget);
expect(find.text('ROUTE PLANNER'), findsOneWidget);
expect(tester.takeException(), isNull);
});
});
group('UI-2E RouteDetailScreen Responsive Matrix', () {
for (final size in testViewports) {
testWidgets('RouteDetailScreen renders without overflow at ${size.width}x${size.height}', (tester) async {
await tester.binding.setSurfaceSize(size);
final sampleRoute = createSampleRoute(attachedGroupRideId: 'group-ride-123');
await tester.pumpWidget(
ProviderScope(
overrides: [
currentUserProvider.overrideWith((ref) => const AuthUser(uid: 'alice', isAnonymous: false)),
routeByIdProvider('sample-route-1').overrideWith((ref) => Stream.value(sampleRoute)),
isProSubscriberProvider.overrideWith((ref) => false),
],
child: MaterialApp(
theme: ThemeData.dark().copyWith(
extensions: [MotorSignalThemeColors.dark],
),
home: const RouteDetailScreen(routeId: 'sample-route-1'),
),
),
);
await tester.pumpAndSettle();
expect(find.text('ROUTE DETAILS'), findsOneWidget);
expect(find.text('Skyline Ridge Cruise'), findsOneWidget);
expect(find.text('Scenic ridge route with twisties'), findsOneWidget);
expect(find.text('STRAIGHT-LINE DISTANCE'), findsOneWidget);
expect(find.text('WAYPOINTS'), findsOneWidget);
expect(find.text('3 STOPS'), findsOneWidget);
expect(find.byKey(const ValueKey('route_detail_edit_button')), findsOneWidget);
expect(find.byKey(const ValueKey('route_detail_delete_button')), findsOneWidget);
expect(find.byKey(const ValueKey('route_detail_view_attached_group_ride_button')), findsOneWidget);
expect(find.byKey(const ValueKey('route_detail_navigate_start_button')), findsOneWidget);
expect(tester.takeException(), isNull);
});
}
});
group('UI-2E NavigationHandoffService Modal', () {
testWidgets('Navigation handoff bottom sheet displays options with theme tokens', (tester) async {
await tester.binding.setSurfaceSize(const Size(390, 844));
await tester.pumpWidget(
MaterialApp(
theme: ThemeData.dark().copyWith(
extensions: [MotorSignalThemeColors.dark],
),
home: Scaffold(
body: Builder(
builder: (context) => ElevatedButton(
onPressed: () {
NavigationHandoffService.showHandoffSheet(
context: context,
latitude: 37.3861,
longitude: -122.2641,
displayName: 'Alice\'s Restaurant',
);
},
child: const Text('OPEN HANDOFF'),
),
),
),
),
);
await tester.pumpAndSettle();
// Open sheet
await tester.tap(find.text('OPEN HANDOFF'));
await tester.pumpAndSettle();
expect(find.text('NAVIGATION HANDOFF'), findsOneWidget);
expect(find.text('Alice\'s Restaurant'), findsOneWidget);
expect(find.byKey(const ValueKey('handoff_google_maps_tile')), findsOneWidget);
expect(find.byKey(const ValueKey('handoff_waze_tile')), findsOneWidget);
expect(find.byKey(const ValueKey('handoff_system_map_tile')), findsOneWidget);
expect(tester.takeException(), isNull);
});
});
}