Skip to content

Commit 510f17b

Browse files
CandelRCandelR
authored
[_] bugfix/Enhance Avatar to handle null fullName cases (#53)
* fix: enhance DefaultAvatar to handle null and empty fullName cases * chore: update version to 0.0.24
1 parent f9da8e1 commit 510f17b

4 files changed

Lines changed: 92 additions & 4 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@internxt/ui",
3-
"version": "0.0.23",
3+
"version": "0.0.24",
44
"description": "Library of Internxt components",
55
"repository": {
66
"type": "git",

‎src/components/avatar/__test__/Avatar.test.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import React from 'react';
2-
import { describe, expect, it } from 'vitest';
31
import { render } from '@testing-library/react';
2+
import { describe, expect, it } from 'vitest';
43
import { Avatar } from '../';
54

65
const FULL_NAME = 'My Internxt';
@@ -12,6 +11,11 @@ describe('Avatar component', () => {
1211
expect(avatarComponent).toMatchSnapshot();
1312
});
1413

14+
it('Avatar with fullname as null should render correctly with empty letters', () => {
15+
const avatarComponent = render(<Avatar diameter={80} fullName={null as any} />);
16+
expect(avatarComponent).toMatchSnapshot();
17+
});
18+
1519
it('Avatar with avatar (user image profile) should render correctly', () => {
1620
const avatarComponent = render(<Avatar fullName={FULL_NAME} diameter={80} src={IMAGE_SRC} />);
1721
expect(avatarComponent).toMatchSnapshot();

‎src/components/avatar/__test__/__snapshots__/Avatar.test.tsx.snap‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,81 @@ exports[`Avatar component > Avatar with full name (first letters) should render
154154
}
155155
`;
156156

157+
exports[`Avatar component > Avatar with fullname as null should render correctly with empty letters 1`] = `
158+
{
159+
"asFragment": [Function],
160+
"baseElement": <body>
161+
<div>
162+
<div
163+
class=" flex shrink-0 select-none items-center justify-center rounded-full bg-primary/20 font-medium text-primary dark:bg-primary/75 dark:text-white"
164+
style="width: 80px; height: 80px; font-size: 38.095238095238095px;"
165+
>
166+
<p />
167+
</div>
168+
</div>
169+
</body>,
170+
"container": <div>
171+
<div
172+
class=" flex shrink-0 select-none items-center justify-center rounded-full bg-primary/20 font-medium text-primary dark:bg-primary/75 dark:text-white"
173+
style="width: 80px; height: 80px; font-size: 38.095238095238095px;"
174+
>
175+
<p />
176+
</div>
177+
</div>,
178+
"debug": [Function],
179+
"findAllByAltText": [Function],
180+
"findAllByDisplayValue": [Function],
181+
"findAllByLabelText": [Function],
182+
"findAllByPlaceholderText": [Function],
183+
"findAllByRole": [Function],
184+
"findAllByTestId": [Function],
185+
"findAllByText": [Function],
186+
"findAllByTitle": [Function],
187+
"findByAltText": [Function],
188+
"findByDisplayValue": [Function],
189+
"findByLabelText": [Function],
190+
"findByPlaceholderText": [Function],
191+
"findByRole": [Function],
192+
"findByTestId": [Function],
193+
"findByText": [Function],
194+
"findByTitle": [Function],
195+
"getAllByAltText": [Function],
196+
"getAllByDisplayValue": [Function],
197+
"getAllByLabelText": [Function],
198+
"getAllByPlaceholderText": [Function],
199+
"getAllByRole": [Function],
200+
"getAllByTestId": [Function],
201+
"getAllByText": [Function],
202+
"getAllByTitle": [Function],
203+
"getByAltText": [Function],
204+
"getByDisplayValue": [Function],
205+
"getByLabelText": [Function],
206+
"getByPlaceholderText": [Function],
207+
"getByRole": [Function],
208+
"getByTestId": [Function],
209+
"getByText": [Function],
210+
"getByTitle": [Function],
211+
"queryAllByAltText": [Function],
212+
"queryAllByDisplayValue": [Function],
213+
"queryAllByLabelText": [Function],
214+
"queryAllByPlaceholderText": [Function],
215+
"queryAllByRole": [Function],
216+
"queryAllByTestId": [Function],
217+
"queryAllByText": [Function],
218+
"queryAllByTitle": [Function],
219+
"queryByAltText": [Function],
220+
"queryByDisplayValue": [Function],
221+
"queryByLabelText": [Function],
222+
"queryByPlaceholderText": [Function],
223+
"queryByRole": [Function],
224+
"queryByTestId": [Function],
225+
"queryByText": [Function],
226+
"queryByTitle": [Function],
227+
"rerender": [Function],
228+
"unmount": [Function],
229+
}
230+
`;
231+
157232
exports[`Avatar component > Base Avatar should render correctly 1`] = `
158233
{
159234
"asFragment": [Function],

‎src/components/avatar/components/DefaultAvatar.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,16 @@ export default function DefaultAvatar({
2020
}
2121

2222
function nameToInitials(fullName: string) {
23-
const namesArray = fullName.trim().split(' ');
23+
if (!fullName) {
24+
return '';
25+
}
26+
27+
const trimmedName = fullName?.trim();
28+
29+
if (!trimmedName) {
30+
return '';
31+
}
32+
const namesArray = trimmedName.split(' ');
2433
if (namesArray.length === 1) return `${namesArray[0].charAt(0)}`;
2534
else {
2635
const first = namesArray[0].charAt(0);

0 commit comments

Comments
 (0)