Hermes (Server)andClaude Opus 5
bc861f6087
Kein Redesign — Schwarz/Rot, 4 Tabs und Lieder/Kategorie bleiben. Grundlage sind die Design-Skills: ui-ux-pro-max (Barrierefreiheit, Touch, Typografie, Bewegung), ui-design/mobile-android (Material 3) und die Token-Disziplin aus Hue. Behobene Maengel (messbar, nicht Geschmack): - Text in Colors.white38 an 17 Stellen = 3,4:1 Kontrast, WCAG verlangt 4,5:1. Ersetzt durch drei benannte Stufen (text1 15,9:1 / text2 8,8:1 / text3 4,9:1). theme_kontrast_test.dart rechnet die Verhaeltnisse bei jedem Lauf nach, statt sie zu behaupten. - SubTabs waren ~38 dp hoch (Material 3 verlangt 48), ohne Ripple und ohne Uebergang. Jetzt 48 dp, InkWell, AnimatedContainer, und die Auswahl wird Vorlesehilfen als Zustand gemeldet (Semantics.selected). - mini_player.dart: Expanded UM eine feste Hoehe herum — zwei widerspruechliche Angaben. Entschaerft. - Emoji in Bedienelementen der Einstellungen (jeweils neben einem echten Icon) entfernt. Neu in shared/theme.dart: MeloSpace (8er-Raster), MeloRadius, MeloMotion, Farbrollen text1/2/3 + border + hairline, minTouchTarget, vollstaendiges textTheme (7 Stufen) und Themes fuer Listen, Sheets, Snackbars, Fortschritt, Trenner. 318 Tests gruen (23 neue, 1 uebersprungen), flutter analyze ohne Befund. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FpPu4nuKjKKeX1RpdDeX81
100 lines
3.1 KiB
Dart
100 lines
3.1 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_test/flutter_test.dart';
|
|
import 'package:melo/shared/sub_tabs.dart';
|
|
import 'package:melo/shared/theme.dart';
|
|
|
|
Widget _wrap(Widget child) => MaterialApp(
|
|
theme: MeloTheme.dark,
|
|
home: Scaffold(body: child),
|
|
);
|
|
|
|
void main() {
|
|
testWidgets('jeder Reiter ist mindestens 48 dp hoch — sonst trifft man ihn '
|
|
'im Gehen nicht', (tester) async {
|
|
await tester.pumpWidget(_wrap(SubTabs(
|
|
labels: const ['Lieder', 'Kategorie', 'Künstler'],
|
|
index: 0,
|
|
onChanged: (_) {},
|
|
)));
|
|
await tester.pumpAndSettle();
|
|
|
|
for (final label in ['Lieder', 'Kategorie', 'Künstler']) {
|
|
final flaeche = tester.getSize(find.ancestor(
|
|
of: find.text(label),
|
|
matching: find.byType(AnimatedContainer),
|
|
));
|
|
expect(flaeche.height, greaterThanOrEqualTo(MeloTheme.minTouchTarget),
|
|
reason: 'Reiter "$label" ist nur ${flaeche.height} dp hoch');
|
|
expect(flaeche.width, greaterThanOrEqualTo(MeloTheme.minTouchTarget));
|
|
}
|
|
});
|
|
|
|
testWidgets('ein Tipp meldet den angetippten Reiter', (tester) async {
|
|
int? gewaehlt;
|
|
await tester.pumpWidget(_wrap(SubTabs(
|
|
labels: const ['Lieder', 'Kategorie'],
|
|
index: 0,
|
|
onChanged: (i) => gewaehlt = i,
|
|
)));
|
|
|
|
await tester.tap(find.text('Kategorie'));
|
|
await tester.pumpAndSettle();
|
|
|
|
expect(gewaehlt, 1);
|
|
});
|
|
|
|
testWidgets('der aktive Reiter ist auch ohne Farbe erkennbar', (tester) async {
|
|
final semantik = tester.ensureSemantics();
|
|
|
|
await tester.pumpWidget(_wrap(SubTabs(
|
|
labels: const ['Lieder', 'Kategorie'],
|
|
index: 1,
|
|
onChanged: (_) {},
|
|
)));
|
|
await tester.pumpAndSettle();
|
|
|
|
// Vorlesehilfen brauchen die Auswahl als Zustand, nicht als Farbe —
|
|
// wer die weiße Pille nicht sieht, erfährt sonst nie, wo er ist.
|
|
expect(
|
|
tester.getSemantics(find.text('Kategorie')),
|
|
isSemantics(label: 'Kategorie', isSelected: true, isButton: true),
|
|
);
|
|
expect(
|
|
tester.getSemantics(find.text('Lieder')),
|
|
isSemantics(label: 'Lieder', isSelected: false, isButton: true),
|
|
);
|
|
|
|
// Muss vor Testende passieren — addTearDown wäre zu spät.
|
|
semantik.dispose();
|
|
});
|
|
|
|
testWidgets('jeder Reiter gibt beim Antippen Rückmeldung (Ripple)',
|
|
(tester) async {
|
|
await tester.pumpWidget(_wrap(SubTabs(
|
|
labels: const ['Lieder', 'Kategorie'],
|
|
index: 0,
|
|
onChanged: (_) {},
|
|
)));
|
|
|
|
// Ohne InkWell bliebe der Tipp unbestätigt — der Nutzer weiß nicht,
|
|
// ob er getroffen hat.
|
|
expect(find.byType(InkWell), findsNWidgets(2));
|
|
});
|
|
|
|
testWidgets('der Wechsel wird animiert, nicht gesprungen', (tester) async {
|
|
await tester.pumpWidget(_wrap(SubTabs(
|
|
labels: const ['Lieder', 'Kategorie'],
|
|
index: 0,
|
|
onChanged: (_) {},
|
|
)));
|
|
await tester.pumpAndSettle();
|
|
|
|
final container = tester.widget<AnimatedContainer>(find.ancestor(
|
|
of: find.text('Lieder'),
|
|
matching: find.byType(AnimatedContainer),
|
|
));
|
|
expect(container.duration, MeloMotion.fast);
|
|
expect(container.curve, MeloMotion.curve);
|
|
});
|
|
}
|