Files
buzz/mobile/test/shared/widgets/avatar_image_test.dart
Arjun Mahanti bc006f6708 feat: render agent avatars as squircles (#7106)
## Summary

- render every agent/AI identity as a 30% squircle across desktop and
mobile while keeping human avatars circular
- propagate agent identity through message, thread, profile, reaction,
member, DM, search, workflow, project, huddle, forum, pulse, and
agent-management surfaces
- preserve squircle geometry for fallbacks, focus/status treatments,
add-agent controls, and overlapping avatar outlines (`calc(30% + 2px)`
for the outer background)

### Related issue

None found. This change was requested and visually reviewed in the
originating Buzz thread.

### Testing

- `just desktop-test` — 5,799 passed
- `just mobile-test` — 2,008 passed
- pre-push gates passed at `0d59d77b120dcb90aac2f918e422c11c9fa5353b`:
desktop check, TypeScript typecheck, desktop full test suite, mobile
format/analyze and full test suite, Rust tests, Tauri checks, and
differential file-size gate
- deterministic desktop visual sweep covered channel messages/thread
summaries; thread, subthread, and sub-subthread depths; reactions and
reactor popovers; hover/full profiles; added-to-channel activity;
channel members/settings; agent library/team overlaps; agent creation;
mention autocomplete; and DM header/sidebar/settings

### UI evidence

The complete labeled visual matrix is available in the originating Buzz
review thread. GitHub-hosted copies will be added in a follow-up PR
comment using the repository screenshot script.

---------

Signed-off-by: Fizz <dae5f6af70b8695a8b83c8deae555f63be41630ec2b8cd493e41a439c9527dd8@buzz.block.builderlab.xyz>
Co-authored-by: Fizz <dae5f6af70b8695a8b83c8deae555f63be41630ec2b8cd493e41a439c9527dd8@buzz.block.builderlab.xyz>
2026-08-31 13:31:33 -04:00

130 lines
4.6 KiB
Dart

import 'dart:convert';
import 'package:buzz/shared/widgets/avatar_image.dart';
import 'package:buzz/shared/emoji/native_emoji_glyph.dart';
import 'package:buzz/shared/push/push_presentation_cache.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
void main() {
const svg =
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">'
'<text x="16" y="24" text-anchor="middle">🦝</text></svg>';
Widget subject(
String? imageUrl, {
Color? backgroundColor,
bool isAgent = false,
}) => ProviderScope(
child: MaterialApp(
home: AvatarImage(
imageUrl: imageUrl,
radius: 16,
backgroundColor: backgroundColor,
fallback: const Text('R'),
isAgent: isAgent,
),
),
);
test('accepts bounded raster data avatars for the push cache', () {
expect(isCacheablePushAvatarSource('data:image/png;base64,AA=='), isTrue);
expect(
isCacheablePushAvatarSource('data:image/svg+xml;base64,AA=='),
isFalse,
);
expect(isCacheablePushAvatarSource('data:image/png;base64,%%%'), isFalse);
});
testWidgets('clips agents to a 30 percent squircle', (tester) async {
await tester.pumpWidget(subject(null, isAgent: true));
expect(find.byType(CircleAvatar), findsNothing);
final clip = tester.widget<ClipRRect>(find.byType(ClipRRect));
expect(clip.borderRadius, BorderRadius.circular(9.6));
});
testWidgets('renders raccoon percent-encoded SVG data avatar', (
tester,
) async {
const raccoonAvatar =
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Crect%20width%3D%22512%22%20height%3D%22512%22%20rx%3D%22256%22%20fill%3D%22%233399FF%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2256%25%22%20dominant-baseline%3D%22middle%22%20text-anchor%3D%22middle%22%20font-size%3D%22258%22%3E%F0%9F%A6%9D%3C%2Ftext%3E%3C%2Fsvg%3E';
await tester.pumpWidget(subject(raccoonAvatar));
await tester.pumpAndSettle();
final emoji = tester.widget<Text>(find.text('🦝'));
expect(emoji.style?.height, 1);
final glyph = tester.widget<NativeEmojiGlyph>(
find.byType(NativeEmojiGlyph),
);
expect(glyph.size, closeTo(32 * 258 / 512, 0.001));
expect(glyph.opticalBoxSize, glyph.size);
expect(find.byType(SvgPicture), findsNothing);
expect(find.text('R'), findsNothing);
expect(tester.takeException(), isNull);
});
testWidgets('renders base64 SVG data avatar', (tester) async {
await tester.pumpWidget(
subject('data:image/svg+xml;base64,${base64Encode(utf8.encode(svg))}'),
);
expect(find.byType(SvgPicture), findsOneWidget);
});
testWidgets('centers fallback when no avatar is configured', (tester) async {
await tester.pumpWidget(subject(null));
final avatarCenter = tester.getCenter(find.byType(CircleAvatar));
final fallbackCenter = tester.getCenter(find.text('R'));
expect(fallbackCenter, avatarCenter);
});
testWidgets('uses fallback for malformed image data', (tester) async {
await tester.pumpWidget(subject('data:image/svg+xml;base64,%%%'));
expect(find.text('R'), findsOneWidget);
});
testWidgets('renders animated-avatar posters without an opaque background', (
tester,
) async {
const posterUrl = 'https://relay.example/media/poster.png';
const animationUrl = 'https://relay.example/media/animation.png';
final animatedUrl =
'$posterUrl#buzz-anim=${Uri.encodeComponent(animationUrl)}';
await tester.pumpWidget(subject(animatedUrl, backgroundColor: Colors.red));
expect(
tester.widget<CircleAvatar>(find.byType(CircleAvatar)).backgroundColor,
Colors.transparent,
);
expect(
tester
.widget<AvatarImageContent>(find.byType(AvatarImageContent))
.imageUrl,
posterUrl,
);
});
testWidgets('reuses parsed raster bytes across parent rebuilds', (
tester,
) async {
const png =
'data:image/png;base64,'
'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';
await tester.pumpWidget(subject(png));
final firstBytes = tester.widget<Image>(find.byType(Image)).image;
await tester.pumpWidget(subject(png));
final rebuiltBytes = tester.widget<Image>(find.byType(Image)).image;
final firstMemory = firstBytes as MemoryImage;
final rebuiltMemory = rebuiltBytes as MemoryImage;
expect(rebuiltMemory.bytes, same(firstMemory.bytes));
});
}