stream-chat-react-native-core 4.0.0 → 4.1.0

package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import type { SuggestionsContextValue } from '../../contexts/suggestionsContext/SuggestionsContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+
+import { Lightning } from '../../icons/Lightning';
+import { Smile } from '../../icons/Smile';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+
+export type AutoCompleteSuggestionHeaderPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<SuggestionsContextValue<StreamChatGenerics>, 'triggerType' | 'queryText'>;
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    padding: 8,
+  },
+  title: {
+    fontSize: 14,
+    paddingLeft: 8,
+  },
+});
+
+const AutoCompleteSuggestionHeaderWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  queryText,
+  triggerType,
+}: AutoCompleteSuggestionHeaderPropsWithContext<StreamChatGenerics>) => {
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      colors: { accent_blue, grey },
+      messageInput: {
+        suggestions: {
+          header: { container, title },
+        },
+      },
+    },
+  } = useTheme();
+
+  if (triggerType === 'command') {
+    return (
+      <View style={[styles.container, container]}>
+        <Lightning pathFill={accent_blue} />
+        <Text style={[styles.title, { color: grey }, title]} testID='commands-header-title'>
+          {t('Instant Commands')}
+        </Text>
+      </View>
+    );
+  } else if (triggerType === 'emoji') {
+    return (
+      <View style={[styles.container, container]}>
+        <Smile pathFill={accent_blue} />
+        <Text style={[styles.title, { color: grey }, title]} testID='emojis-header-title'>
+          {t('Emoji matching') + ' "' + queryText + '"'}
+        </Text>
+      </View>
+    );
+  } else if (triggerType === 'mention') {
+    return null;
+  } else {
+    return null;
+  }
+};
+
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: AutoCompleteSuggestionHeaderPropsWithContext<StreamChatGenerics>,
+  nextProps: AutoCompleteSuggestionHeaderPropsWithContext<StreamChatGenerics>,
+) => {
+  const { queryText: prevQueryText, triggerType: prevType } = prevProps;
+  const { queryText: nextQueryText, triggerType: nextType } = nextProps;
+
+  const typeEqual = prevType === nextType;
+  if (!typeEqual) return false;
+
+  const valueEqual = prevQueryText === nextQueryText;
+  if (!valueEqual) return false;
+  return true;
+};
+
+const MemoizedAutoCompleteSuggestionHeader = React.memo(
+  AutoCompleteSuggestionHeaderWithContext,
+  areEqual,
+) as typeof AutoCompleteSuggestionHeaderWithContext;
+
+export type AutoCompleteSuggestionHeaderProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = AutoCompleteSuggestionHeaderPropsWithContext<StreamChatGenerics>;
+
+export const AutoCompleteSuggestionHeader = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: AutoCompleteSuggestionHeaderProps<StreamChatGenerics>,
+) => <MemoizedAutoCompleteSuggestionHeader {...props} />;
+
+AutoCompleteSuggestionHeader.displayName =
+  'AutoCompleteSuggestionHeader{messageInput{suggestions{Header}}}';

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { AutoCompleteSuggestionCommandIcon } from './AutoCompleteSuggestionCommandIcon';
+
+import type {
+  Suggestion,
+  SuggestionCommand,
+  SuggestionsContextValue,
+  SuggestionUser,
+} from '../../contexts/suggestionsContext/SuggestionsContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import type { Emoji } from '../../emoji-data/compiled';
+import { AtMentions } from '../../icons/AtMentions';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { Avatar } from '../Avatar/Avatar';
+
+export type AutoCompleteSuggestionItemPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<SuggestionsContextValue, 'triggerType'> & {
+  itemProps: Suggestion<StreamChatGenerics>;
+};
+
+const styles = StyleSheet.create({
+  args: {
+    fontSize: 14,
+  },
+  column: {
+    flex: 1,
+    justifyContent: 'space-evenly',
+    paddingLeft: 8,
+  },
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  name: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingBottom: 2,
+  },
+  tag: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  text: {
+    fontSize: 14,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingRight: 8,
+  },
+});
+
+const AutoCompleteSuggestionItemWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  itemProps,
+  triggerType,
+}: AutoCompleteSuggestionItemPropsWithContext<StreamChatGenerics>) => {
+  const {
+    theme: {
+      colors: { accent_blue, black, grey },
+      messageInput: {
+        suggestions: {
+          command: { args: argsStyle, container: commandContainer, title },
+          emoji: { container: emojiContainer, text },
+          mention: { avatarSize, column, container: mentionContainer, name: nameStyle },
+        },
+      },
+    },
+  } = useTheme();
+
+  if (triggerType === 'mention') {
+    const { id, image, name, online } = itemProps as SuggestionUser<StreamChatGenerics>;
+    return (
+      <View style={[styles.container, mentionContainer]}>
+        <Avatar image={image} name={name} online={online} size={avatarSize} />
+        <View style={[styles.column, column]}>
+          <Text style={[styles.name, { color: black }, nameStyle]} testID='mentions-item-name'>
+            {name || id}
+          </Text>
+        </View>
+        <AtMentions pathFill={accent_blue} />
+      </View>
+    );
+  } else if (triggerType === 'emoji') {
+    const { name, unicode } = itemProps as Emoji;
+    return (
+      <View style={[styles.container, emojiContainer]}>
+        <Text style={[styles.text, { color: black }, text]} testID='emojis-item-unicode'>
+          {unicode}
+        </Text>
+        <Text style={[styles.text, { color: black }, text]} testID='emojis-item-name'>
+          {` ${name}`}
+        </Text>
+      </View>
+    );
+  } else if (triggerType === 'command') {
+    const { args, name } = itemProps as SuggestionCommand<StreamChatGenerics>;
+    return (
+      <View style={[styles.container, commandContainer]}>
+        <AutoCompleteSuggestionCommandIcon name={name} />
+        <Text style={[styles.title, { color: black }, title]} testID='commands-item-title'>
+          {(name || '').replace(/^\w/, (char) => char.toUpperCase())}
+        </Text>
+        <Text style={[styles.args, { color: grey }, argsStyle]} testID='commands-item-args'>
+          {`/${name} ${args}`}
+        </Text>
+      </View>
+    );
+  } else {
+    return null;
+  }
+};
+
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: AutoCompleteSuggestionItemPropsWithContext<StreamChatGenerics>,
+  nextProps: AutoCompleteSuggestionItemPropsWithContext<StreamChatGenerics>,
+) => {
+  const { itemProps: prevItemProps, triggerType: prevType } = prevProps;
+  const { itemProps: nextItemProps, triggerType: nextType } = nextProps;
+  const itemPropsEqual = prevItemProps === nextItemProps;
+  if (!itemPropsEqual) return false;
+  const typeEqual = prevType === nextType;
+  if (!typeEqual) return false;
+  return true;
+};
+
+const MemoizedAutoCompleteSuggestionItem = React.memo(
+  AutoCompleteSuggestionItemWithContext,
+  areEqual,
+) as typeof AutoCompleteSuggestionItemWithContext;
+
+export type AutoCompleteSuggestionItemProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = AutoCompleteSuggestionItemPropsWithContext<StreamChatGenerics>;
+
+export const AutoCompleteSuggestionItem = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: AutoCompleteSuggestionItemProps<StreamChatGenerics>,
+) => <MemoizedAutoCompleteSuggestionItem {...props} />;
+
+AutoCompleteSuggestionItem.displayName =
+  'AutoCompleteSuggestionItem{messageInput{suggestions{Item}}}';

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -0,0 +1,209 @@
+import React from 'react';
+import { FlatList, TouchableOpacity, TouchableOpacityProps } from 'react-native';
+
+import type { AutoCompleteSuggestionHeaderProps } from './AutoCompleteSuggestionHeader';
+import type { AutoCompleteSuggestionItemProps } from './AutoCompleteSuggestionItem';
+
+import {
+  isSuggestionCommand,
+  isSuggestionEmoji,
+  isSuggestionUser,
+  Suggestion,
+  SuggestionsContextValue,
+  useSuggestionsContext,
+} from '../../contexts/suggestionsContext/SuggestionsContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+
+type AutoCompleteSuggestionListComponentProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<SuggestionsContextValue, 'queryText' | 'triggerType'> & {
+  active: boolean;
+  data: Suggestion<StreamChatGenerics>[];
+  onSelect: (item: Suggestion<StreamChatGenerics>) => void;
+};
+
+export type AutoCompleteSuggestionListPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<
+  SuggestionsContextValue<StreamChatGenerics>,
+  'AutoCompleteSuggestionHeader' | 'AutoCompleteSuggestionItem'
+> &
+  AutoCompleteSuggestionListComponentProps<StreamChatGenerics>;
+
+const SuggestionsItem: React.FC<TouchableOpacityProps> = (props) => {
+  const { children, ...touchableOpacityProps } = props;
+  return <TouchableOpacity {...touchableOpacityProps}>{children}</TouchableOpacity>;
+};
+
+SuggestionsItem.displayName = 'SuggestionsHeader{messageInput{suggestions}}';
+
+export const AutoCompleteSuggestionListWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: AutoCompleteSuggestionListPropsWithContext<StreamChatGenerics>,
+) => {
+  const {
+    active,
+    AutoCompleteSuggestionHeader,
+    AutoCompleteSuggestionItem,
+    data,
+    onSelect,
+    queryText,
+    triggerType,
+  } = props;
+
+  const {
+    theme: {
+      messageInput: {
+        container: { maxHeight },
+        suggestions: { item: itemStyle },
+        suggestionsListContainer: { flatlist },
+      },
+    },
+  } = useTheme();
+
+  const renderItem = ({ index, item }: { index: number; item: Suggestion<StreamChatGenerics> }) => {
+    switch (triggerType) {
+      case 'mention':
+        if (isSuggestionUser(item)) {
+          return (
+            <SuggestionsItem
+              onPress={() => {
+                onSelect(item);
+              }}
+              style={[
+                {
+                  paddingBottom: index === data.length - 1 ? 8 : 0,
+                  paddingTop: index === 0 ? 8 : 0,
+                },
+                itemStyle,
+              ]}
+            >
+              {AutoCompleteSuggestionItem && (
+                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />
+              )}
+            </SuggestionsItem>
+          );
+        }
+        return null;
+      case 'command':
+        if (isSuggestionCommand(item)) {
+          return (
+            <SuggestionsItem
+              onPress={() => {
+                onSelect(item);
+              }}
+              style={[itemStyle]}
+            >
+              {AutoCompleteSuggestionItem && (
+                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />
+              )}
+            </SuggestionsItem>
+          );
+        }
+        return null;
+      case 'emoji':
+        if (isSuggestionEmoji(item)) {
+          return (
+            <SuggestionsItem
+              onPress={() => {
+                onSelect(item);
+              }}
+              style={[itemStyle]}
+            >
+              {AutoCompleteSuggestionItem && (
+                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />
+              )}
+            </SuggestionsItem>
+          );
+        }
+        return null;
+      default:
+        return null;
+    }
+  };
+
+  if (!active || data.length === 0) return null;
+
+  return (
+    <FlatList
+      data={data}
+      keyboardShouldPersistTaps='always'
+      keyExtractor={(item, index) =>
+        `${item.name || (isSuggestionUser(item) ? item.id : '')}${index}`
+      }
+      ListHeaderComponent={
+        AutoCompleteSuggestionHeader ? (
+          <AutoCompleteSuggestionHeader queryText={queryText} triggerType={triggerType} />
+        ) : null
+      }
+      renderItem={renderItem}
+      style={[flatlist, { maxHeight }]}
+    />
+  );
+};
+
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: AutoCompleteSuggestionListPropsWithContext<StreamChatGenerics>,
+  nextProps: AutoCompleteSuggestionListPropsWithContext<StreamChatGenerics>,
+) => {
+  const {
+    active: prevActive,
+    data: prevData,
+    queryText: prevQueryText,
+    triggerType: prevType,
+  } = prevProps;
+  const {
+    active: nextActive,
+    data: nextData,
+    queryText: nextQueryText,
+    triggerType: nextType,
+  } = nextProps;
+
+  const activeEqual = prevActive === nextActive;
+  if (!activeEqual) return false;
+
+  const queryTextEqual = prevQueryText === nextQueryText;
+  if (!queryTextEqual) return false;
+
+  const dataEqual = prevData === nextData;
+  if (!dataEqual) return false;
+
+  const typeEqual = prevType === nextType;
+  if (!typeEqual) return false;
+
+  return true;
+};
+
+const MemoizedAutoCompleteSuggestionList = React.memo(
+  AutoCompleteSuggestionListWithContext,
+  areEqual,
+) as typeof AutoCompleteSuggestionListWithContext;
+
+export type AutoCompleteSuggestionListProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = AutoCompleteSuggestionListComponentProps<StreamChatGenerics> & {
+  AutoCompleteSuggestionHeader?: React.ComponentType<AutoCompleteSuggestionHeaderProps>;
+  AutoCompleteSuggestionItem?: React.ComponentType<
+    AutoCompleteSuggestionItemProps<StreamChatGenerics>
+  >;
+};
+
+export const AutoCompleteSuggestionList = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: AutoCompleteSuggestionListProps<StreamChatGenerics>,
+) => {
+  const { AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem } =
+    useSuggestionsContext<StreamChatGenerics>();
+  return (
+    <MemoizedAutoCompleteSuggestionList
+      {...{ AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem }}
+      {...props}
+    />
+  );
+};
+
+AutoCompleteSuggestionList.displayName =
+  'AutoCompleteSuggestionList{messageInput{suggestions{List}}}';

package/src/components/AutoCompleteInput/__tests__/AutoCompleteInput.test.js

@@ -1,18 +1,16 @@
 import React from 'react';
-import { render, waitFor } from '@testing-library/react-native';
-
-import { AutoCompleteInput } from '../AutoCompleteInput';
 
-import { Chat } from '../../Chat/Chat';
-
-import { ACITriggerSettings } from '../../../utils/utils';
+import { render, waitFor } from '@testing-library/react-native';
 
 import { SuggestionsProvider } from '../../../contexts/suggestionsContext/SuggestionsContext';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
-import { generateChannel } from '../../../mock-builders/generator/channel';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { ACITriggerSettings } from '../../../utils/utils';
+import { Chat } from '../../Chat/Chat';
+import { AutoCompleteInput } from '../AutoCompleteInput';
 
 describe('AutoCompleteInput', () => {
   const clientUser = generateUser();
@@ -23,13 +21,14 @@ describe('AutoCompleteInput', () => {
     <Chat client={chatClient}>
       <SuggestionsProvider value={props}>
         <AutoCompleteInput
+          giphyEnabled
           onChange={jest.fn}
+          text={props.text}
           triggerSettings={ACITriggerSettings({
             channel,
             onMentionSelectItem: jest.fn(),
             t: jest.fn(),
           })}
-          value={props.value}
         />
       </SuggestionsProvider>
     </Chat>
@@ -57,7 +56,7 @@ describe('AutoCompleteInput', () => {
       openSuggestions: jest.fn(),
     };
 
-    await initializeChannel(generateChannel());
+    await initializeChannel(generateChannelResponse());
 
     const { queryByTestId, rerender } = render(getComponent(props));
 
@@ -67,22 +66,17 @@ describe('AutoCompleteInput', () => {
       expect(props.openSuggestions).toHaveBeenCalledTimes(0);
     });
 
-    props.value = '/';
-    rerender(getComponent(props));
+    rerender(getComponent({ ...props, text: '/' }));
 
     await waitFor(() => {
       expect(queryByTestId('auto-complete-text-input')).toBeTruthy();
-      expect(props.closeSuggestions).toHaveBeenCalledTimes(0);
-      expect(props.openSuggestions).toHaveBeenCalledTimes(1);
     });
 
-    props.value = '';
+    rerender(getComponent({ ...props, text: '' }));
     rerender(getComponent(props));
 
     await waitFor(() => {
       expect(queryByTestId('auto-complete-text-input')).toBeTruthy();
-      expect(props.closeSuggestions).toHaveBeenCalledTimes(1);
-      expect(props.openSuggestions).toHaveBeenCalledTimes(1);
     });
   });
 

package/src/components/Avatar/Avatar.tsx

@@ -1,16 +1,9 @@
 import React, { useState } from 'react';
-import {
-  Image,
-  ImageStyle,
-  PixelRatio,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 import Svg, { Circle, CircleProps } from 'react-native-svg';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 
 const randomImageBaseUrl = 'https://getstream.io/random_png/';
 const randomSvgBaseUrl = 'https://getstream.io/random_svg/';
@@ -54,7 +47,7 @@ export type AvatarProps = {
 };
 
 /**
- * Avatar - A round avatar image with fallback to user's initials
+ * Avatar - A round avatar image with fallback to user's initials.
  */
 export const Avatar: React.FC<AvatarProps> = (props) => {
   const {
@@ -103,7 +96,11 @@ export const Avatar: React.FC<AvatarProps> = (props) => {
                 ? imageProp?.includes(streamCDN)
                   ? imageProp
                   : `${randomImageBaseUrl}${name ? `?name=${getInitials(name)}&size=${size}` : ''}`
-                : imageProp.replace('h=%2A', `h=${PixelRatio.getPixelSizeForLayoutSize(size)}`),
+                : getResizedImageUrl({
+                    height: size,
+                    url: imageProp,
+                    width: size,
+                  }),
           }}
           style={[
             image,

package/src/components/Avatar/GroupAvatar.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import { Image, PixelRatio, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 
 const randomImageBaseUrl = 'https://getstream.io/random_png/';
 const randomSvgBaseUrl = 'https://getstream.io/random_svg/';
@@ -69,18 +70,6 @@ export const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {
             : ''
         }`;
     if (imagesOrNames.length <= 2) {
-      Image.prefetch(
-        imageError
-          ? url
-          : url.replace(
-              'h=%2A',
-              `h=${PixelRatio.getPixelSizeForLayoutSize(
-                imagesOrNames.length <= 2 ? size : size / 2,
-              )}`,
-            ),
-      ).catch(() => {
-        // do nothing, not a big deal that prefetch failed
-      });
       returnArray[0] = [
         ...(returnArray[0] || []),
         {
@@ -91,13 +80,6 @@ export const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {
         },
       ];
     } else {
-      Image.prefetch(
-        imageError
-          ? url
-          : url.replace('h=%2A', `h=${PixelRatio.getPixelSizeForLayoutSize(size / 2)}`),
-      ).catch(() => {
-        // do nothing, not a big deal that prefetch failed
-      });
       if (index < 2) {
         returnArray[0] = [
           ...(returnArray[0] || []),
@@ -156,7 +138,11 @@ export const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {
                       : `${randomImageBaseUrl}${
                           name ? `?name=${getInitials(name)}&size=${height}` : ''
                         }`
-                    : url.replace('h=%2A', `h=${PixelRatio.getPixelSizeForLayoutSize(height)}`),
+                    : getResizedImageUrl({
+                        height,
+                        url,
+                        width,
+                      }),
               }}
               style={[
                 image,

package/src/components/Avatar/__tests__/Avatar.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { render, waitFor } from '@testing-library/react-native';
 
-import { Avatar } from '../Avatar';
+import { render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { Avatar } from '../Avatar';
 
 describe('Avatar', () => {
   it('should render an image with no name and default size', async () => {
@@ -15,7 +15,6 @@ describe('Avatar', () => {
 
     await waitFor(() => {
       expect(queryByTestId('avatar-image')).toBeTruthy();
-      expect(queryByTestId('avatar-text')).toBeFalsy();
     });
   });
 
@@ -31,7 +30,6 @@ describe('Avatar', () => {
 
     await waitFor(() => {
       expect(queryByTestId('avatar-image')).toBeTruthy();
-      expect(queryByTestId('avatar-text')).toBeFalsy();
     });
   });
 
@@ -47,35 +45,6 @@ describe('Avatar', () => {
 
     await waitFor(() => {
       expect(queryByTestId('avatar-image')).toBeTruthy();
-      expect(queryByTestId('avatar-text')).toBeFalsy();
-    });
-  });
-
-  it('should render an avatar with no image but a name and default size', async () => {
-    const { getByTestId, queryByTestId } = render(
-      <ThemeProvider>
-        <Avatar name='Test User' />
-      </ThemeProvider>,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('avatar-image')).toBeFalsy();
-      expect(queryByTestId('avatar-text')).toBeTruthy();
-      expect(getByTestId('avatar-text')).toHaveTextContent('TU');
-    });
-  });
-
-  it('should render an avatar with no image but a name and custom size', async () => {
-    const { getByTestId, queryByTestId } = render(
-      <ThemeProvider>
-        <Avatar name='Test User' size={20} />
-      </ThemeProvider>,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('avatar-image')).toBeFalsy();
-      expect(queryByTestId('avatar-text')).toBeTruthy();
-      expect(getByTestId('avatar-text')).toHaveTextContent('TU');
     });
   });
 });