Skip to content

[PB-3528]:feat/update coverage for components #94

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jaaaaavier merged 3 commits into from
Apr 1, 2026
Merged

[PB-3528]:feat/update coverage for components #94

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2b9e950
feat: update coverage for components
jaaaaavier Mar 31, 2026
036fa76
Update Avatar.test.tsx.snap
jaaaaavier Mar 31, 2026
c414f30
Update Avatar.test.tsx
jaaaaavier Apr 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions src/components/avatar/__test__/Avatar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { render } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { Avatar } from '../';
import DefaultAvatar from '../components/DefaultAvatar';
import PictureAvatar from '../components/PictureAvatar';

const FULL_NAME = 'My Internxt';
const IMAGE_SRC = 'https://internxt.com/favicon.ico';
Expand All @@ -11,6 +13,16 @@ describe('Avatar component', () => {
expect(avatarComponent).toMatchSnapshot();
});

it('Avatar with single word name should render correctly', () => {
Copy link
Copy Markdown
Contributor

@larryrider larryrider Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey, the "it" tests are made to build the descriptions like "it should do whatever when whatever", for this other tests its more readable if you just use the "test" word, or if you just change it to this "it" descriptions

Copy link
Copy Markdown
Contributor Author

@jaaaaavier jaaaaavier Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it, I'll update this test now. I can also do a pass on the rest of the tests to apply this convention consistently. I'll reference task PB-3528 for that. What do you think??

Copy link
Copy Markdown
Contributor

@larryrider larryrider Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it looks good to me

const avatarComponent = render(<Avatar diameter={80} fullName="Javi" />);
expect(avatarComponent).toMatchSnapshot();
});

it('Avatar with empty spaces name should return empty content', () => {
const avatarComponent = render(<Avatar diameter={80} fullName=" " />);
expect(avatarComponent).toMatchSnapshot();
});

it('Avatar with fullname as null should render correctly with empty letters', () => {
const avatarComponent = render(<Avatar diameter={80} fullName={null as any} />);
expect(avatarComponent).toMatchSnapshot();
Expand Down Expand Up @@ -47,4 +59,14 @@ describe('Avatar component', () => {
const avatarComponent = render(<Avatar fullName={FULL_NAME} size="xl" src={IMAGE_SRC} />);
expect(avatarComponent).toMatchSnapshot();
});

it('DefaultAvatar handles default parameters', () => {
const avatarComponent = render(<DefaultAvatar fullName="John Doe" diameter={80} />);
expect(avatarComponent).toMatchSnapshot();
});

it('PictureAvatar handles default parameters', () => {
const avatarComponent = render(<PictureAvatar src={IMAGE_SRC} diameter={80} />);
expect(avatarComponent).toMatchSnapshot();
});
});
308 changes: 308 additions & 0 deletions src/components/avatar/__test__/__snapshots__/Avatar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,81 @@ exports[`Avatar component > Avatar with avatar (user image profile) should rende
}
`;

exports[`Avatar component > Avatar with empty spaces name should return empty content 1`] = `
{
"asFragment": [Function],
"baseElement": <body>
<div>
<div
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"
style="width: 80px; height: 80px; font-size: 38.095238095238095px;"
>
<p />
</div>
</div>
</body>,
"container": <div>
<div
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"
style="width: 80px; height: 80px; font-size: 38.095238095238095px;"
>
<p />
</div>
</div>,
"debug": [Function],
"findAllByAltText": [Function],
"findAllByDisplayValue": [Function],
"findAllByLabelText": [Function],
"findAllByPlaceholderText": [Function],
"findAllByRole": [Function],
"findAllByTestId": [Function],
"findAllByText": [Function],
"findAllByTitle": [Function],
"findByAltText": [Function],
"findByDisplayValue": [Function],
"findByLabelText": [Function],
"findByPlaceholderText": [Function],
"findByRole": [Function],
"findByTestId": [Function],
"findByText": [Function],
"findByTitle": [Function],
"getAllByAltText": [Function],
"getAllByDisplayValue": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getByAltText": [Function],
"getByDisplayValue": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"queryAllByAltText": [Function],
"queryAllByDisplayValue": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryByAltText": [Function],
"queryByDisplayValue": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"rerender": [Function],
"unmount": [Function],
}
`;

exports[`Avatar component > Avatar with full name (first letters) should render correctly 1`] = `
{
"asFragment": [Function],
Expand Down Expand Up @@ -229,6 +304,85 @@ exports[`Avatar component > Avatar with fullname as null should render correctly
}
`;

exports[`Avatar component > Avatar with single word name should render correctly 1`] = `
{
"asFragment": [Function],
"baseElement": <body>
<div>
<div
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"
style="width: 80px; height: 80px; font-size: 38.095238095238095px;"
>
<p>
J
</p>
</div>
</div>
</body>,
"container": <div>
<div
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"
style="width: 80px; height: 80px; font-size: 38.095238095238095px;"
>
<p>
J
</p>
</div>
</div>,
"debug": [Function],
"findAllByAltText": [Function],
"findAllByDisplayValue": [Function],
"findAllByLabelText": [Function],
"findAllByPlaceholderText": [Function],
"findAllByRole": [Function],
"findAllByTestId": [Function],
"findAllByText": [Function],
"findAllByTitle": [Function],
"findByAltText": [Function],
"findByDisplayValue": [Function],
"findByLabelText": [Function],
"findByPlaceholderText": [Function],
"findByRole": [Function],
"findByTestId": [Function],
"findByText": [Function],
"findByTitle": [Function],
"getAllByAltText": [Function],
"getAllByDisplayValue": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getByAltText": [Function],
"getByDisplayValue": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"queryAllByAltText": [Function],
"queryAllByDisplayValue": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryByAltText": [Function],
"queryByDisplayValue": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"rerender": [Function],
"unmount": [Function],
}
`;

exports[`Avatar component > Base Avatar should render correctly 1`] = `
{
"asFragment": [Function],
Expand Down Expand Up @@ -304,6 +458,85 @@ exports[`Avatar component > Base Avatar should render correctly 1`] = `
}
`;

exports[`Avatar component > DefaultAvatar handles default parameters 1`] = `
{
"asFragment": [Function],
"baseElement": <body>
<div>
<div
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"
style="width: 80px; height: 80px; font-size: 38.095238095238095px;"
>
<p>
JD
</p>
</div>
</div>
</body>,
"container": <div>
<div
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"
style="width: 80px; height: 80px; font-size: 38.095238095238095px;"
>
<p>
JD
</p>
</div>
</div>,
"debug": [Function],
"findAllByAltText": [Function],
"findAllByDisplayValue": [Function],
"findAllByLabelText": [Function],
"findAllByPlaceholderText": [Function],
"findAllByRole": [Function],
"findAllByTestId": [Function],
"findAllByText": [Function],
"findAllByTitle": [Function],
"findByAltText": [Function],
"findByDisplayValue": [Function],
"findByLabelText": [Function],
"findByPlaceholderText": [Function],
"findByRole": [Function],
"findByTestId": [Function],
"findByText": [Function],
"findByTitle": [Function],
"getAllByAltText": [Function],
"getAllByDisplayValue": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getByAltText": [Function],
"getByDisplayValue": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"queryAllByAltText": [Function],
"queryAllByDisplayValue": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryByAltText": [Function],
"queryByDisplayValue": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"rerender": [Function],
"unmount": [Function],
}
`;

exports[`Avatar component > LG Avatar should render correctly 1`] = `
{
"asFragment": [Function],
Expand Down Expand Up @@ -379,6 +612,81 @@ exports[`Avatar component > LG Avatar should render correctly 1`] = `
}
`;

exports[`Avatar component > PictureAvatar handles default parameters 1`] = `
{
"asFragment": [Function],
"baseElement": <body>
<div>
<img
class=" shrink-0 select-none rounded-full object-cover"
draggable="false"
src="https://internxt.com/favicon.ico"
style="width: 80px; height: 80px;"
/>
</div>
</body>,
"container": <div>
<img
class=" shrink-0 select-none rounded-full object-cover"
draggable="false"
src="https://internxt.com/favicon.ico"
style="width: 80px; height: 80px;"
/>
</div>,
"debug": [Function],
"findAllByAltText": [Function],
"findAllByDisplayValue": [Function],
"findAllByLabelText": [Function],
"findAllByPlaceholderText": [Function],
"findAllByRole": [Function],
"findAllByTestId": [Function],
"findAllByText": [Function],
"findAllByTitle": [Function],
"findByAltText": [Function],
"findByDisplayValue": [Function],
"findByLabelText": [Function],
"findByPlaceholderText": [Function],
"findByRole": [Function],
"findByTestId": [Function],
"findByText": [Function],
"findByTitle": [Function],
"getAllByAltText": [Function],
"getAllByDisplayValue": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getByAltText": [Function],
"getByDisplayValue": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"queryAllByAltText": [Function],
"queryAllByDisplayValue": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryByAltText": [Function],
"queryByDisplayValue": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"rerender": [Function],
"unmount": [Function],
}
`;

exports[`Avatar component > SM Avatar should render correctly 1`] = `
{
"asFragment": [Function],
Expand Down
18 changes: 18 additions & 0 deletions src/components/contextMenu/__test__/ContextMenu.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,4 +96,22 @@ describe('ContextMenu Component', () => {
if (menuItem && 'action' in menuItem) expect(menuItem?.action).toHaveBeenCalledWith(props.item);
expect(props.handleMenuClose).toHaveBeenCalled();
});

it('positions menu at bottom when isContextMenuCutOff is true and not from right click', () => {
const { container } = render(
<ContextMenu {...props} openedFromRightClick={false} isContextMenuCutOff={true} />,
);
const outerDiv = container.firstChild as HTMLElement;
expect(outerDiv.style.bottom).toBe('40px');
expect(outerDiv.style.top).toBe('');
});

it('positions menu at top when isContextMenuCutOff is false and not from right click', () => {
const { container } = render(
<ContextMenu {...props} openedFromRightClick={false} isContextMenuCutOff={false} />,
);
const outerDiv = container.firstChild as HTMLElement;
expect(outerDiv.style.top).toBe('40px');
expect(outerDiv.style.bottom).toBe('');
});
});
Loading
Loading