test(avatar): add test for initials placeholder

themesberg#357
iamargentum · Oct 11, 2022 · 922eb83 · 922eb83
1 parent 744042e
commit 922eb83
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/lib/components/Avatar/Avatar.spec.tsx b/src/lib/components/Avatar/Avatar.spec.tsx
@@ -4,8 +4,8 @@ import { Avatar } from '.';
 import { Flowbite } from '../Flowbite';
 import type { CustomFlowbiteTheme } from '../Flowbite/FlowbiteTheme';
 
-describe.concurrent('Components / Avatar', () => {
-  describe.concurrent('Theme', () => {
+describe('Components / Avatar', () => {
+  describe('Theme', () => {
     it('should use custom classes', () => {
       const theme: CustomFlowbiteTheme = {
         avatar: {
@@ -23,6 +23,18 @@ describe.concurrent('Components / Avatar', () => {
       expect(img()).toHaveClass('h-64 w-64');
     });
   });
+  describe('Placeholder', () => {
+    it('should display placeholder initials', () => {
+      render(
+        <Flowbite>
+          <Avatar placeholderInitials="RR" />
+        </Flowbite>,
+      );
+
+      expect(initialsPlaceholder()).toHaveTextContent('RR');
+    });
+  });
 });
 
 const img = () => screen.getByTestId('flowbite-avatar-img');
+const initialsPlaceholder = () => screen.getByTestId('flowbite-avatar-initials-placeholder');
diff --git a/src/lib/components/Avatar/index.tsx b/src/lib/components/Avatar/index.tsx
@@ -64,7 +64,9 @@ const AvatarComponent: FC<AvatarProps> = ({
               bordered && theme.bordered,
             )}
           >
-            <span className={classNames(theme.initials.text)}>{placeholderInitials}</span>
+            <span className={classNames(theme.initials.text)} data-testid="flowbite-avatar-initials-placeholder">
+              {placeholderInitials}
+            </span>
           </div>
         ) : (
           <div